Туториал по Jade для начинающих

Original author: Sanjay Guruprasad
  • Translation
  • Tutorial


Jade — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря, Jade — это именно то средство, которое предоставляет вам возможность написания разметки совершенно по новому, с целым рядом преимуществ по сравнению с обычным HTML.
К примеру, взгляните на код ниже в формате HTML:
<div>
  <h1>Ocean's Eleven</h1>
  <ul>
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
  <p>Danny Ocean and his eleven accomplices plan to rob
     three Las Vegas casinos simultaneously.</p>
</div>

А так эта разметка выглядит в формате Jade:
div
  h1 Ocean's Eleven
  ul
    li Comedy
    li Thriller
  p.
    Danny Ocean and his eleven accomplices plan to rob
    three Las Vegas casinos simultaneously.

Второй вариант кажется более коротким и элегантным. Но Jade — это не только симпатичная разметка. Jade имеет некоторые действительно полезные функции, позволяющие писать модульный многоразовый (с возможностью многоразового использования) код. Но перед тем, как углубиться, давайте сделаем обзор основ.

Основы


Я собираюсь выделить три основные черты Jade:
  • Простые теги;
  • Добавление атрибутов в теги;
  • Блоки текста.

Если вы хотите входе прочтения статьи пробывать примеры кода приведённые ниже, вы можете воспользоваться CodePen и выбрать Jade как препроцесор для вашего HTML, или воспользуйтесь онлайн компилятором на официальном сайте Jade.

Теги

Как вы могли заметить ранее, в Jade нет закрывающих тегов. Вместо этого Jade использует табуляцию для определения вложености тегов.
div
  p Hello!
  p World!

В приведенном выше примере, теги параграфов согласно их табуляции при компиляции в конечном итоге окажутся внутри тега div. Как просто!
<div>
  <p>Hello!</p>
  <p>World!</p>
</div>

Jade компилирует это точно, рассматривая первое слово в каждой строке в качестве тега, в то время как последующие слова на этой строке обрабатываются как текст внутри тега.

Посмотреть этот пример на CodePen

Атрибуты

Всё это, конечно, хорошо, но как добавлять атрибуты нашим тегам? На самом деле довольно просто.
Давайте вернёмся к нашему первому примеру и добавим туда пару классов и некую картинку-постер.
div(class="movie-card", id="oceans-11")
  h1(class="movie-title") Ocean's 11
  img(src="/img/oceans-11.png", class="movie-poster")
  ul(class="genre-list")
    li Comedy
    li Thriller

Как чудестно, не так ли?
<div class="movie-card" id="oceans-11">
  <h1 class="movie-title">Ocean's 11</h1>
  <img src="/img/oceans-11.png" class="movie-poster">
  <ul class="genre-list">
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
</div>


Посмотреть этот пример на CodePen

Но зачем останавливаться на достигнутом?! Jade предоставляет специальную стенографию для индификаторов и классов, что ещё больше упрощает нашу разметку, используя знакомые всем обозначения:
div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller


Посмотреть этот пример на CodePen

Как вы можете заметить, Jade использует синтаксис анологичный тому, который вы используете при написании CSS-селекторов.

Блоки текста

Давайте представим такую ситуацию: у вас есть тег <р> и вы хотите добавить в него довольно таки большой объём текста. Но стоп, ведь Jade рассматривает первое слово каждой строки как новый HTML-тег — и как тут быть?

В самом первом примере вы уже могли заметить невзрачную точку после тега параграфа. Добавление точки после вашего тега даёт понять компилятору Jade, что всё внутри данного тега является текстом.
div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.


Посмотреть этот пример на CodePen

Для полной ясности: в случае, если я не поставил бы точку после тега <р> в примере, то скомпилированный HTML имел бы в себе открытый тег <і>, разорвав словосочетание “I’m” в начале строки.

Полезные функции


Теперь, когда мы разобрались с основами, давайте рассмотрим некоторые в действительности полезные функции, которые сделают нашу разметку умнее. Среди них:
  • JavaScript;
  • Циклы;
  • Интерполирование;
  • Миксины.


JavaScript в Jade

Jade реализован на JavaScript, по этому использовать JavaScript в Jade довольно просто. Вот пример:
- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

Что же мы тут сделали?! Начав строку с дефиса, мы указали компилятору Jade, что мыхотим использовать JavaScript, и всё, оно работает! И вот что мы получим, когда скомпилируем этот код в HTML:
<div>
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>


Посмотреть этот пример на CodePen

Мы используем дефис, когда код не должен напрямую попадать в поток вывода. В случае, ежели мы хотим использовать JavaScript для вывода чего-либо в Jade, мы используем =. Давайте подправим код выше, чтобы указать нумерацию элементов в списке:
- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

И вуаля, у нас имеется нумерация:
<div>
  <ul>
    <li>1. Hello</li>
    <li>2. Hello</li>
    <li>3. Hello</li>
    <li>4. Hello</li>
    <li>5. Hello</li>
  </ul>
</div>


Посмотреть этот пример на CodePen

Конечно, в данном случае нумерованный список был бы гораздо уместнее, но идею то вы уловили? Для более детальной информации ознакомтесь с документацией.

Циклы

Jade использует прекрасный синтаксис для написания циклов, так что вам не придётся прибегать к JavaScript. Давайте пройдёмся по элементам массива в цикле:
- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

И это будет скомпилировано следующим образом:
<div>
  <h1>Famous Droids from Star Wars</h1>
  <div class="card">
    <h2>R2D2</h2>
  </div>
  <div class="card">
    <h2>C3PO</h2>
  </div>
  <div class="card">
    <h2>BB8</h2>
  </div>
</div>


Посмотреть этот пример на CodePen

Вы можете перемещаться по объектам массива, а также исспользовать цикл while. Узнайте больше прочитав документацию.

Интерполирование

Совмещать текст и JavaScript таким образом
p= «Hi there, » + profileName + ". How are you doing?"
может начать мусолить вам глаз. Разве Jade не имеет более элегантного решения данной задачи? Поспорим?
- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?


Посмотреть этот пример на CodePen

Разве так не аккуратней?

Миксины

Миксины, они как функции, они принимают параметры в качестве входных данных и генерируют соответствующию разметку. Миксины оглашаются с помощью ключевого слова mixin.
mixin thumbnail(imageName, caption)
  div.thumbnail
    img(src="/img/#{imageName}.jpg")
    h4.image-caption= caption

После того, как миксин был оглашён, вы можете его вызвать с помощью символа +.
+thumbnail("oceans-eleven", "Danny Ocean makes an elevator pitch.")
+thumbnail("pirates", "Introducing Captain Jack Sparrow!")

Что будет скомпилировано как:
<div class="thumbnail">
  <img src="/img/oceans-eleven.jpg">
  <h4 class="image-caption">
    Danny Ocean makes an elevator pitch.
  </h4>
</div>
<div class="thumbnail">
  <img src="/img/pirates.jpg">
  <h4 class="image-caption">
    Introducing Captain Jack Sparrow!
  </h4>
</div>


Собираем все вместе


Давайте соберём всё, что мы успели выучить, в один пример. Скажем, у нас есть массив фильмов, каждый объект которого содержит название фильма, актёрский состав (под-массив), рейтинг, жанр, ссылку на IMDB-страницу и путь к картинке (которая будет использована в качестве постера фильма). Массив будет иметь примерно такой выгляд:
- var movieList = [
  {
    title: "Ocean's Eleven",
    cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"],
    genres: ["Comedy", "Thriller"],
    posterImage: "/img/oceans-eleven",
    imdbURL: "http://www.imdb.com/title/tt0240772/",
    rating: 7
  }
  // etc...
];

У нас есть 10 фильмов и мы хотим сделать симпатичную разметку для каждого из них. Изначально, мы не предусмотрели использование ссылки на IMDB-страницу фильма. Если рейтинг фильма выше 5, мы даём ему иконку с поднятым большим пальцем руки вверх, в ином случае, большой палец — вниз. Мы используем все выше перечисленные полезные функции Jade для написания данного модульного кода, который выполнит следующие задачи:

  1. Создать миксин под названием movie-card
    • Перебрать массив и вывести актёрский состав.
    • Перебрать массив и вывести жанры.
    • Проверить рейтинг фильма и присвоить ему соответсвующею иконку.

  2. Пребрать массив фильмов и использовать миксин для создания разметки.


И так, создадим миксин:
mixin movie-card(movie)
  div.movie-card
    h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
      each actor in movie.cast
        li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre

В данном коде много чего происходит, но я уверен, что он вам понятен, так как мы это уже прошли. Теперь, всё, что нам нужно, — это вызвать данный миксин в цикле:
for movie in movieList
  +movie-card(movie)

И всё! Разве это не классно?! Вот окончательный код:
- var movieList = [
  {
    title: "Ocean's Eleven",
    cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"],
    genres: ["Comedy", "Thriller"],
    posterImage: "/img/oceans-eleven",
    imdbURL: "http://www.imdb.com/title/tt0240772/",
    rating: 9.2
  },
  {
    title: "Pirates of the Caribbean",
    cast: ["Johnny Depp", "Keira Knightley", "Orlando Bloom"],
    genres: ["Adventure", "Comedy"],
    posterImage: "/img/pirates-caribbean",
    imdbURL: "http://www.imdb.com/title/tt0325980/",
    rating: 9.7
  }
];

mixin movie-card(movie)
  div.movie-card
    h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
    each actor in movie.cast
      li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre

for movie in movieList
  +movie-card(movie)

А так код будет выглядеть после компиляции:
<div class="movie-card">
  <h2 class="movie-title">Ocean's Eleven</h2>
    <img src="/img/oceans-eleven" class="movie-poster"/>
  <h3>Cast</h3>
  <ul class="cast">
    <li>Julia Roberts</li>
    <li>George Clooney</li>
    <li>Brad Pitt</li>
    <li>Andy Garcia</li>
  </ul>
  <div class="rating">
    <img src="img/thumbs-up"/>
  </div>
  <ul class="genre">
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
</div>
<div class="movie-card">
  <h2 class="movie-title">Pirates of the Carribean</h2>
  <img src="/img/pirates-caribbean" class="movie-poster"/>
  <h3>Cast</h3>
  <ul class="cast">
    <li>Johnny Depp</li>
    <li>Keira Knightley</li>
    <li>Orlando Bloom</li>
  </ul>
  <div class="rating">
    <img src="img/thumbs-up"/>
  </div>
  <ul class="genre">
    <li>Adventure</li>
    <li>Comedy</li>
  </ul>
</div>

Но стоп, погодите минутку! А что, если теперь нам нужна возвожность переходить на IMDB-страницу фильма при нажатии на его название? Нам всего лишь потребуется добавить одну строку
a(href=movie.imdbURL)
в наш миксин.
mixin movie-card(movie)
  div.movie-card
    a(href=movie.imdbURL)
      h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
    each actor in movie.cast
      li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre


Посмотреть этот пример на CodePen

Вывод


Сегодня мы с вами прошли путь от полного незнания препроцессора Jade к написанию, с его помощью, прекрасной модульной разметки. Это не всё, что может Jade, но я надеюсь, что данная статья задела ваше любопытство, и вы захотели узнать больше.

Важное примечание: как некоторые из вас, возможно, уже знают, Jade был переименован в Pug. В будущем, статьи о Jade будут использовать новое название «Pug» или «Pug.js».
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 74

    +1
    Очень вовремя Ваша статья :) Я как раз решил посмотреть в сторону jade. Все очень доходчиво и понятно. Большое спасибо за статью!
      +2
      Самое неприятное в Jade это писать конструкции такого плана:

      <p>Text <a href="#">link</a> <b>bold text</b></p>

      Возникает проблема с пробелами между тегами. Тут или html'ными тегами писать внутри p (что странно в контексте использования jade) или вставлять явные &nbsp; . Есть ещё варианты?
        +3
        Попробуйте p Make #[a(href="#") One #[span Hello]] #[strong World]
          +1
          Варианты:

          p Text 
              a(href='#') link
              b  bold text

          Пробел после Text, дополнительный пробел перед bold

          p Text
                =' '
                a(href='#') link
                =' '
                b bold text

          p Text
                | 
                a(href='#') link
                | 
                b bold text

          С более очевидными пробелами
          +7
          Чем официальная дока не зашла?
            0
            Использую в ряде своих проэктов на Django и хочу сказать, что на обычном HTML после него вообще не хочется писать.
            Хоть он и делался для ноды, но библиотека pyjade отлично со всем справляется.

            Например:

            - load static
            
            !!! 5
            html
              head
                title
                  block title
              body
                block menu
                  for link in links
                    a(href="{{ link.url }}", class="{% if link.current %}current{% endif %}")
                      = link.title|truncatechars:"50"
                block content
                  h1 Hello world!
                  | {% some specific Django template tag. %}

            Причем можно даже наследовать из .jade-файлов обычные джанговские .html и наоборот.
            Изьянов еще не заметил ни одного. В крайнем случае иногда можно использовать инлайн-код джанговского шаблонизатора. Продумано гениально.
              0
              Линк: https://github.com/SyrusAkbary/pyjade
              Установка классическая — pip install pyjade, добавить в INSTALLED_APPS и добавить в в TEMPLATES[...].OPTIONS['loaders'].
                +2
                Т.е. он генерирует шаблоны на ходу? А как на счет накладных расходов? Django'вский шаблонизатор и так не шибко быстрый, а тут еще одна прослойка. На сколько скорость работы снижается не замеряли?
                  0
                  Перформенс не проверял, но визуально разницы не замечал вообще. Тем более, что шаблоны можно кешировать нативными средствами.
                0
                Нельзя использовать js в шаблоне — это убивает всю малину
                  0
                  Согласен — но вместо него можно использовать джанговские теги. А их вполне достаточно.

                  Плюс сама философия джанги — "минимум логики в шаблонах."
                    0
                    Это очень неудобно, на каждый чих нужно писать templatetags, плюс куча логики во view. На практике родная шаблонизация Jade на порядок эффективней, чем у Django.
                  0
                  Проблема появилась, когда я начал использовать сторонние батарейки, где во views были прописаны только .html файлы на рендер, и у меня постоянно вылетало Cannot Render a Template. Так же когда пытался использовать built-in views от джанго.
                  0
                  del
                    +1
                    Препроцессоры это хорошо конечно, особенно, когда добавляются как дополнительная прослойка над джанговским шаблонизатором, как справедливо заметили выше… Но не проще ли ограничиться использованием чего-то вроде Emmet'а и не добавлять еще одну точку отказа/тормозов?
                      +1
                      Emmet очень хорош, когда нужно написать разметку. Помимо этого разметку еще будут читать и править (в стандартном случае). Но шаблонизаторы кроме "чистоты", требуют знания собственного синтаксиса и транслятора в HTML, что можно отнести к минусам.
                        +1
                        Emmet хоть и прост и даже схож с jade, но всё равно требуется "выучить" его, приспособится к нему, особенно к конструкциям вида ul>li.item$*3 или (.foo>h1)+(.bar>h2)
                        К тому же он преобразует сокращения в HTML текст, что в итоге снова приводит к избыточности HTML, особенно когда придет время редактировать написанное

                        Но в целом всё это не очень важно, потому что шаблонизатор нужен в любом случае. Jade выступает не просто как препроцессор или упрощенный HTML редактор, а как шаблонизатор с лаконичным синтаксисом и удобными mixin'ами

                        Так как jade сделан для expressjs в режиме NODE_ENV=production, в котором все шаблоны единожды будут скомпилированы и изменить без перезагрузки их уже нельзя (в обычном режиме jade не очень быстр), то неясно есть ли в pyjade какие-то оптимизации для продакшена
                        0
                        До сих пор не понимаю почему на картинке HTML а не JADE?
                          +3
                          Идя писать прозрачную разметку отличная, но сам Jade я вспоминаю как страшный сон.
                          PS: кстати Jade уже практически переименовали в Pug
                            –2
                            Какие трудности были, что как страшный сон? Мне с практической точки зрения
                              +3
                              1. Были трудности c mixin и extends при переносе шаблонов из другого шаблонизатора

                              2. Код для запуска в рантайме получался крайне неоптимизированным и медленным.

                              3. Иногда на выходе код был просто невалидным.

                              4. Последние годы проект вообще не развивался.

                              5. При всей лаконичности синтаксиса &attributes просто вымораживало писать.

                              6. Нельзя было экспандить переменные в комментариях.

                              7. C доктайпом была какая-то беда, сейчас уже не вспомню.

                              8. Ну и напоследок, из-за переноса проекта пропали все тикеты.
                                0
                                Согласен как минимум с 2, 5, 6
                                А какой в итоге шаблонизатор используете?
                                  0
                                  Меня полностью устраивает React JSX
                                  0
                                  Дополнение к вышесказанному
                              +1
                              Было бы неплохо в статью добавить причину переименования:

                              «Unfortunately, these people have a trademark for the word "jade" referring to software, so we've been forced to change our name. Fortunately, @davidglivar has kindly donated the name "pug" to us. I've claimed pug and pugjs everywhere I could think of so hopefully we shouldn't have any problems getting the name.»
                                –2
                                спасибо за статью, теперь можно будет давать на нее ссылку)
                                  +4
                                  Второй вариант кажется более коротким и элегантным.

                                  Элегантнее там выглядят стерильные примеры из документации. В реальной сложной верстке, на мой вкус, получается нечитаемый ад. Примерно как большие регулярные выражения. Даже помесь html+php и та понятнее выглядит.
                                  Я пробовал Jade. И не один вечер, а минимум неделю просидел в попытках с ним подружиться. Ну есть, конечно, плюсы. Но минусы их надежно нейтрализуют. Есть много раздражающих мелочей, об которые регулярно спотыкаешься. И думаешь — черт, да мне проще и быстрее это сделать врукопашную, чем возиться с чудо-шаблонизатором!
                                    –2
                                    С какими минусами вы столкнулись? Опять же интересуюсь с практической точки зрения
                                      +2
                                      Из того что помню навскидку по прошествии времени (всё тот момент, может сейчас что-то пофиксили):

                                      1. Очень неудобный контроль над пробелами и переносами строк. Фактически, штатных средств для этого нет, есть только хаки-костыли. А часто бывает нужно, чтобы между тегами строго был пробел, чтобы они не слиплись. И бывает нужно наоборот, чтобы они стали строго вплотную.
                                      2. Громоздко и неудобно писать inline-тэги. Когда нужно вложить друг в друга несколько тэгов a/i/b — это удобнее сделать в нативном html.
                                      3. Переменные-структуры и массивы можно было писать только в одну строку. Это убивало на корню удобство от генерации однотипных блоков по массиву.
                                      4. Нельзя было оставить пустые строки для визуального разделения блоков, компилятор считал это ошибкой.
                                      5. Непредсказуемое поведение отступов при использовании миксинов.
                                      6. В целом не очень консистентный и шумный синтаксис.
                                      7. В jade по сравнению с html код имеет тенденцию к укорачиванию строк, но сильному (в разы) увеличению их количества. Листинги становятся длинными простынками. Миксины частично компенсируют, но лишь частично.
                                        0
                                        Тоже с этим сталкивался, в каком-нибудь шаблонизаторе есть хорошее решение для этого? Или просто какой вы в итоге используете?

                                        3 пункт не понял, можете чуть подробнее развернуть?
                                          +1
                                          Наверное автор комментария имел ввиду, что нельзя писать многострочный код в Jade, но здесь нужно учесть, что это шаблонизатор, а не язык программирования — стоит пробрасывать данные в шаблоны извне, а не создавать данные прямо в коде шаблона (применение инструмента не по назначению).
                                          По (2) инлайновые теги я считаю наоборот удобными, вместо того чтобы менять название тега в двух местах — я меняю всего лишь в одном.
                                          По (4) — проверил на версии Jade 1.0.2 — можно использовать пустые строки для разделения — главное соблюдать отступы. Или вы имели что то другое ввиду — покажите пример.
                                          По (5) — тоже хочется увидеть пример.
                                          По (7) — пользуйтесь инлайнами время от времени, будет вполне вменяемое количество строк.

                                          Я видел, что автор активно сравнивает Jade с HTML, где по моим субъективным оценкам верстка в разы не удобней потому что необходимо контролировать закрывающие теги везде, внесение или вынесение, изменение вложенности кода занимающего несколько экранов превращается в поиск и подсчет закрывающих тегах. В некоторых IDE частично решена эта проблема, но опять таки: если разработчиков несколько, или вы работаете со старым не отформатированным HTML кодом — появляется проблема определения вложенности, существует огромный риск забыть закрыть тег. Для этого применяются дополнительные ресурсы в виде IDE и последующей проверке у W3C.

                                          Если автор укажет на более продвинутый шаблонизатор — можно с радостью его попробовать и обсудить.
                                            0
                                            Ну массив надо писать строго в одну строчку, даже если в нем 1000 значений, нельзя написать каждый элемент в своей строке. Не знаю, может сейчас уже пофиксили. Но на тот момент это был популярный вопрос, висели issues на гитхабе, но не было понятно, есть ли этот фикс у авторов хотя бы в планах.

                                            Радом пишут, что массивы надо передавать в шаблон, а не писать прямо там, а иначе мол не по назначению. Но сейчас модно использовать jade (и несколько его аналогов) именно для верстки, а не программирования — я имел в виду именно этот случай. На Codepen вон поддерживается и так далее. Если говорить о применении шаблонизатора именно для программирования MVC, то и в этом случае мне больше нравятся шаблонизаторы с синтаксисом другого стиля. Более классическим что ли. Типа dust.

                                            А для верстки в итоге не использую никакой шаблонизатор, верстаю в нативном HTML. Slim очень похож на Jade плюс-минус, Haml какой-то вообще странный. Старый добрый HTML рулит. Да, немножко более громоздко, но гораздо читаемее, понятее и всё предельно четко контролируется. Проблему закрывания тегов считаю преувеличенной. Ну да, бывает изредка, что где-то забыл закрыть и ищешь почему поломалось. Но это бывает редко. Главное — контроль над материалом. Всегда всё можно сделать как нужно, не ломая голову над тем, как нужно извратиться и подкостылить, чтобы обойти особенность шаблонизатора.
                                              0
                                              Скажем так, я очень ценю краткость Jade, и считаю что это плюс ради которого собственно его выбирают (побочные плюсы — легче проводить мерджи конфликтов, не страдает валидность).

                                              Jade
                                              .event-overview
                                                .row
                                                  .columns.large-4
                                                    .event-overview-side


                                              ...HTML
                                              <div class="event-overview">
                                                 <div class="row">
                                                   <div class="columns large-4">
                                                     <div class="event-overview-side">
                                                     ...
                                                     </div>
                                                  </div>
                                                </div>
                                              </div>


                                              Имхо, разница очевидна — лично мне второй вариант как наглядней, так и поддерживать проще (коррекция вложенности, наглядная иерархия классов).
                                              Для верстки я использую достаточно простой gulp-скрипт, прикрутить к темплейту данные можно при помощи например gulp-data. Серьезно верстку при помощи codepen не воспринимаю.
                                                0
                                                Прошу прощения — ошибка, конечно же вариант с Jade наглядней. :)
                                                  –1
                                                  Я не говорил, что нужно верстать в Codepen — это была просто иллюстрация того, что люди используют Jade не как шаблонизатор для программирования, а как что-то типа html-препроцессора.

                                                  По поводу примера — да, я уже писал выше, что Jade действительно подкупает своей лаконичностью и мимимишностью на простеньких примерах. Но на реальной сложной верстке она куда-то теряется. Зато вылазят проблемы с контролем материала, читаемостью и усиливается зависимость от рабочего окружения.
                                                    +1
                                                    Думаю, что переключиться из Jade и продолжить верстать в старом добром HTML на любом этапе никто запретить не может. А зависимость от окружения практически такая же, как допустим у SCSS.
                                                    Здесь главное потратить немного времени на настройку билд-окружения (и проброску рыбы в нужные места). Ну и конечно же научиться дробить весь шаблон на partials (компоненты), делать базовый layout, а контент страницы пробрасывать через блоки. Тогда простыни можно легко избежать. В заключении хотел бы попросить (если это возможно) ссылку на пример вашей верстки на Jade — очень интересно посмотреть на средний размер страницы.
                                                      0
                                                      Вряд ли возможно… До коммерческой эксплуатации Jade у меня не дожил. Все черновики и пробные верстки я похерил где-то на середине и переделал с нуля.
                                        +1
                                        Какова сфера применения?
                                        Имею ввиду, для какого масштаба проектов (лэнд, визитка, проект с десятками уникальных страниц)?
                                        Почему не эммет, который закрывает сам тэги и упрощает читаемость?
                                          +2
                                          Мне просто интересно, чем руководствовался минусующий? Я лишь задал интересующие меня вопросы…
                                            +2
                                            Если я не ошибаюсь Jade писался с прицелом на использование в ExpressJs. Полагаю, что писать на Jade можно проекты любой сложности — главное чтобы вас и вашу команду все устраивало в плане синтаксиса.
                                            Лично применяю Jade просто для ускорения верстки — очень нравится, что можно определить базовый шаблон, миксины для повторяющихся блоков.
                                            Поправьте если я не верно понял — Emmet это плагин для IDE чтобы генерировать HTML на основании CSS селекторов?
                                            Тогда сравнивать эти два инструмента некорректно. В случае с Jade, если ты делаешь на нем верстку с постоянно меняющимися требованиями — тебе достаточно изменить код в одной из миксин — чтобы код блока изменился по всему проекту. В случае с Emmet — это просто "ускорялка" помогающая писать кусочки кода, а не полноценный шаблонизатор.
                                            0
                                            Люблю indent-шаблонизаторы. Но, как правило, в них не удобно реализована работа с множеством аттрибутов. Передо мной очень часто встаёт ситуация, когда, у одного тега 3-5 аттрибутов. Некоторые из которых опциональны или же могут принимать несколько вариаций. Проблема в том, что это не очень красиво ложится на indent-шаблоны. Для себя лично решил проблему путём расширения синтаксиса. Получилось очень грубо, но наглядно:

                                            .some-el
                                              attr-src= 'Что-то длинное и неформатное'
                                              if obj.blabla 
                                                attr-class+ blabla
                                              ko-visible: param.variable
                                              ko-click: $root.remove
                                              != html

                                            Где ko-text распакуется в data-bind="visible: param.variable, click: $root.remove". Т.е. "велосипед" для удобного использования knockoutJS. А attr-class и attr-src будут прицеплены просто как &attributes.

                                            Что мне не нравится в таком подходе: приходится мешать детей и аттрибуты на одном и том же уровне. Что нравится — без таких уродливых велосипедов код получается очень громоздким, трудным для чтения и написания. Пример привёл нарочисто простым, чтобы не запутать, а просто показать суть.

                                            Ну и как правило сказали, ещё 1 проблема, ― это пробелы между тегами. Для себя лично решил её тем, что весь финальный HTML тег склеен тег к тегу. Читаемость нулевая, но и лишних проблем не возникает при inline-block вёрстке.
                                              0
                                              Думаю когда нибудь сделают такой модуль в Angular, было бы интересно на него взглянуть в больших проектах.
                                                +1
                                                Прекрасный шаблонизатор, мы его заюзали в одном большом проекте и я очень даже счастлив по этой причине.

                                                При перечислении атрибутов не обязательно ставить запятые, кстати. Такой вариант вполне приемлем в Jade(Pug):

                                                img(src='/img/oceans-11.png' class='movie-poster' alt='123')

                                                Подробнее об этом в ишью: https://github.com/pugjs/jade/issues/2229
                                                  0
                                                  Не могли бы расписать преимущества, кроме сокращение количества тегов при написании.
                                                    +1
                                                    Уточню, что не количество тегов, а количество символов. :)

                                                    • Проще производить мердж конфликтов в гите
                                                    • Проще менять иерархию вложенности; более наглядная структура страницы
                                                    • Это темплейтер: extends/block, include, mixins
                                                    • Генерирует валидный HTML, избавляет тебя от необходимости контролировать закрывающие теги
                                                    • Расширения

                                                    Из минусов:

                                                    • Без подсветки трудновато читаем, требуется время чтобы привыкнуть
                                                    • Неудобно работать с большим количеством атрибутов у тега
                                                    • Под вопросом работа с инлайновыми атрибутами — некоторым это не нравится

                                                    Лично делал несколько подходов к этому темплейтеру. И здесь мне кажется лучше без фанатизма — я определил ему область применения только для личных нужд, верстки для фриланс проектов.
                                                      0
                                                      Проще менять иерархию вложенности; более наглядная структура страницы

                                                      Не проще. В XML я делаю коллапc блока, затем переношу блок в нужное мне место. Все эти действия IDEA позволяет выполнить либо клавиатурой, либо мышкой. Дале ⌥+⌘+l помогает вернуть требуемое форматирование. С Jade с форматированием беда, все придется делать ручками и молиться как бы не нарушить структуру кода.

                                                      Проще производить мердж конфликтов в гите

                                                      Не проще, поскольку опять же упираемся в форматирование.

                                                      Это темплейтер: extends/block, include, mixins

                                                      И что? XML-темплейтеров нет что ли?

                                                      Инструкция include:

                                                      1. Не следит за копипастом, сколько раз будет вызван include столько реальных вставок и будет (имеется ввиду прекомпиляция для запуска в рантайме)!

                                                      2. Если например Jade используется поверх друго шаблонизатора, например Django, что не редкость, то можно огрести много проблем из-за желания сменить расширение с .jade на скажем .tpl!

                                                      Генерирует валидный HTML, избавляет тебя от необходимости контролировать закрывающие теги

                                                      У меня были случаи когда JS-код для запуска в рантайме был невалидным (не могу сейчас найти тикет, поскольку проект перенесли)

                                                      А что касается самом проблемы, то она более чем надумана — IDEA сразу сигналит о незакрытом теге. И даже при изменении названия достаточно менять только <ТУТ_МЕНЯЕМ_НАЗВАНИЕ_ТЕГА></ЗДЕСЬ_САМО_ИЗМЕНИТСЯ>.
                                                      Тоже самое касается атрибутов, которые IDEA любезно подскажет и пути к файлам зарезолвит.

                                                      Вы не подумайте, что я адепт XML-ля — отнюдь. После уймы потраченного времени на Jade, я переключился на HAML, но там оказалось все еще хуже.
                                                      Сейчас я смотрю на код Jade и лезу в справочник чтобы воскресить забытые знания, с XML такого не может случиться в принципе.
                                                        +1
                                                        С Jade с форматированием беда, все придется делать ручками и молиться как бы не нарушить структуру кода.

                                                        А в чём беда? У меня в sublime-text с jade кодом и коллапсы есть, и tab, shift+tab работает тем же образом. Про нарушить структуру кода тоже не понял, гхм — как? Собственно и подсветка во многих редакторах в наличии.
                                                          0
                                                          В IDEA мне не нужно заботиться о форматировании XML-кода. Я на автомате жму ⇧⌘- + ⌥⇕ + ⌥⌘l чтобы "схлопнуть" и переместить нужный мне блок с сохранением форматирования. C Jade мне бы потребовалось после все отбить с помощью или ⇥⇧.
                                                          Т.е. я не считаю указанные выше плюсы преимуществом.
                                                            +1
                                                            Понятно. Суть в том что Jade код отформатирован по определению. Т.е. такой задачи не стоит в принципе. Не понимаю, почему вы это в минус записываете.
                                                              0
                                                              Мы видимо друг-друга не поняли...

                                                              Jade

                                                              .foo
                                                                 .bar
                                                                     .baz

                                                              HTML

                                                              <div class="foo">
                                                                <div class="bar">
                                                                  <div class="baz"></div>
                                                                </div>
                                                              </div>

                                                              Так вот, если понадобится перенести .baz на уровень .foo, то .baz придется выравнивать по .bar. Если вложенность будет глубокая, то это может создать трудности, поскольку закрывающего элемента нет и ориентироваться придется по коллапсингу (сворачивая последовательно блоки).
                                                              В XML этой проблемы не будет, можно даже и не форматировать код (⌥⌘l) — он просто будет работать.
                                                                0
                                                                Если вложенность сильно большая — значит есть архитектурные проблемы — дробление на partials или вынесение в миксины решает эти проблемы.
                                                                  0
                                                                  Мы видимо друг-друга совсем не понимаем… вы работали с очень большими хайлоад проектами, которые весят по 600мб?
                                                                  Все в миксины не вынести, хотя бы потому, что это значительно увеличивает объем результирующего кода. Переписать весь старый код тоже никто не позволит. Да и этот микроменеджмент никому не сдался — куча папок и файлов не решают основных проблем.

                                                                  Например, у нас сейчас в проекте такая БЭМ-структура:

                                                                  блок
                                                                  __элемент
                                                                  _модификатор

                                                                  И даже с такой простой структурой каждая папочка создает массу накладных расходов.


                                                                  Это только ОДИН блок, который еще не скомпелирован!
                                                                  0
                                                                  Для понимания:

                                                                  Подсветка невалидных цветовых палитр:


                                                                  Автокомплит цветовых палитр:


                                                                  Вывод цвета прямо в атрибут:


                                                                  Можно изменять название тега с закрывающего


                                                                  Автокомплит по атрибутам:


                                                                  По клику на элемент парная подсветка:


                                                                  Резолвиг путей (автокомплит + валидация):


                                                                  Где бы у меня не находился курсор абсолютно всегда понятна структура документа


                                                                  C Jade, редакторы работают как с обычным текстовым файлом, а не как с полноценным проектом.
                                                                    0
                                                                    Вы уперлись в то, что вам этот язык не подходит, потому что нет полноценной поддержки в IDE, но эмоционально называете его страшным сном. Но на самом деле это не является недостатком языка, а является недостатком IDE. Так же с BEM, если вам неудобно работать с Jade в контексте проекта — значит он вам не нужен, но это никак не говорит о том, что язык плохой и нужно отказываться от него.
                                                                    Для меня Jade вполне ускоряет разоработку верстки на фриланс проектах. Автокомплит при верстке Jade-ом я не использую. В реальном проекте использую JSX и XML-подобное описание элементов, там и приходится часто юзать автокомплит. И никакого диссонанса от использования двух темплейтеров — не ощущаю.
                                                                    Каждому инструменту свое применение.
                                                                      0
                                                                      Отсутствие полноценной поддержки в редакторах это один из минусов — весьма существенный, но не далеко не единственный.
                                                                      Лично я и еще ряд моих коллег сделали однозначный вывод, что Jade непригоден для использования в серьезных проектах. Этому подтверждению есть разумные объяснения, которые я привел выше.
                                                                      Проект долгое время не развивался, баги не фиксили. И я не слышал ни об одной серьезной компании где бы его использовали.
                                                                      Мне тоже не нравится XML, но есть вещи, которые нужно выбирать проводя сравнительный анализ. В Jade только компактный синтаксис, на этом его преимущества заканчиваются.
                                                                        0
                                                                        Я не предлагаю использовать Jade в больших проектах.

                                                                        Отсутствие полноценной поддержки в редакторах это один из минусов — весьма существенный

                                                                        Да, один из минусов с точки зрения большого проекта, но косвенно является минусом языка. Я же хотел обсудить реальные минусы самого языка, как например атрибуты или баги компилятора, или неудобства при работе с определенным количеством кода.
                                                                        IDE очень хорошо научены XML, поэтому если мы хотим выбрать/обсудить альтернативный язык-шаблонизатор, то мне кажется неуместно считать недостатком плохую поддержку IDE. Здесь XML будет практически всегда выигрывать по этому параметру. Тогда смысл в обсуждении?
                                                                          0
                                                                          Если позволите, то я бы хотел добавить, что такие препроцессоры как SASS, Less и Stylus весьма активно используются в больших корпорациях. А все потому, что они реально решают конкретные проблемы. Jade не решает ни одну из проблем!

                                                                          Вместо этого он их создает:

                                                                          1. Отсутствие полноценной интеграции с редакторами
                                                                          2. Требуется обучение сотрудников
                                                                          3. Крайне неэффективный результирующий код для динамической шаблонизации.
                                                                          4. Сложно интегрируется с другими шаблонизаторами
                                                                            — В том же Django использование pyJade несет огромные накладные расходы на компиляцию в рантайме, а прекомпиляция Jade под Djando тот еще гемморой.
                                                                            — Также, во многих шаблонизаторах принято давать расширение шаблонам типа *.tpl (если рассматривать Jade как подсистему). На сколько я помню, в Jade шаблоны которые экстендятся должны быть без расширения или иметь расширение *.jade. Возможно эту проблему уже решили, но она была точно.
                                                                            Попытка прикрутить Jade к React вместо JSX выглядит как какой-то оксюморон
                                                                          5. Лишние накладные расходы (в серьезных проектах стараются максимально сократить количество зависимостей в CI)
                                                                          6. Из-за слабой поддержки редакторами повышается вероятность возможных ошибок (с идентацией это более чем правда).
                                                                          7. Сборка с помощью grunt-contrib-jade невозможна (позавчера закрыли таск, который был поставлен 2 года назад, и то не факт, что починили!).
                                                                          8. grunt-contrib-jade делает экспорт только в AMD. Попытки сделать кастомный экспорт не находят поддержки.

                                                                          Это чисто недостатки по каким-то отрывочным воспоминаниям, но даже их достаточно чтобы не использовать этот шаблонизатор.
                                                                            +1
                                                                            (1), (2) — по этим параметрам можно завернуть любой мало-мальски свежий язык.
                                                                            (3) — пожалуйста, разъясните, имеется ввиду скомпилированный в JS код? В чем заключается неэффективность?
                                                                            (4) — сложно судить о применении с Django (скорей всего потому что родная среда для Djade все таки JS). Про расширения согласен — это очевидный косяк компилятора. Прикручивание к реакту — это уже несколько экзотика пошла… :)
                                                                            (5) — конечно можно работать без шаблонизатора, это минус шаблонизатора?
                                                                            (6) — все таки если работать без редактора — то Jade все таки помогает снизить вероятность получить невалидный HTML с точки зрения закрывающих тегов. Вложенность — это значимая единица языка, как в python. Те кто пишут на питоне вменяют этому параметру минус?
                                                                            (7), (8) — не знаю, но вроде бы правда — можно списать на молодость самого языка.

                                                                            По всем этим параметрам да, использовать в крупных проектах — вопрос. Но разве плохо использовать этот язык для проектов, где разработчик один? Этот язык настолько плох, что не решает совершенно ни одной задачи?

                                                                            Я думаю, что язык молод и у него еще все впереди. Как альтернатива Haml. Ведь есть поклонники у языков где отступы значимы, я думаю вполне логично использовать и на стороне шаблонов что то со значимыми отступами и упрощенной разметкой. Так что какое ни какое будущее у языка есть.
                                                                              0
                                                                              (1), (2) — по этим параметрам можно завернуть любой мало-мальски свежий язык.

                                                                              Jade не такой уж и новый язык. Те же JetBrains практически всегда прислушиваются к сообществу в плане поддержки той или иной возможности. Примером этому служат Stylus и Sass. C Jade, увы, это не произошло.

                                                                              (3) — пожалуйста, разъясните, имеется ввиду скомпилированный в JS код? В чем заключается неэффективность?

                                                                              Код, который заранее компилуется в JS для исполнения в рантайме. Я с Jade давно расстался поэтому пример уже не приведу.

                                                                              (5) — конечно можно работать без шаблонизатора, это минус шаблонизатора?

                                                                              Если вы имеете ввиду что-то вроде React JSX, то да, это отличный пример!

                                                                              (6) — все таки если работать без редактора — то Jade все таки помогает снизить вероятность получить невалидный HTML с точки зрения закрывающих тегов.

                                                                              К сожалению, интеграционные тесты довольно часто отстают от релиза. Это дает потенциальную возможность внести баг при неправильном разрешении конфликтов (в больших проектах релиз-инженер может собирать релиз до 3-х недель и допустить ошибку в запарке вполне реально. Если конфликты разрешает сам разработчик, то это тоже не исключает ошибок — проходили и ни раз).

                                                                              Вложенность — это значимая единица языка, как в python. Те кто пишут на питоне вменяют этому параметру минус?

                                                                              Я уже отвечал на этот вопрос. Поскольку я сам пишу на Python, то подобных проблем с редакторами нет, да и сам программный код значительно читабельней нежели разметка.

                                                                              Но разве плохо использовать этот язык для проектов, где разработчик один? Этот язык настолько плох, что не решает совершенно ни одной задачи?

                                                                              Любое решение, должно решать какую-то проблему. А Jade по своей сути ничего не дает кроме накладных расходов.
                                                                              Из опыта могу сказать, что следует использовать то решение, которое позволит запустить проект без создания новой системы. Здесь я имею ввиду, что если вы привыкли использовать Jade для создания промо-страниц, и вам дали заказ на "завод", то вы потратите огромное количество времени на получение опыта в поисках правильного решения.
                                                                              Иными словам, перед тем как выбрать тот или иной продукт нужно составить таблицу с требованиями, противоречиями и критериями проверки выполнения условий. Если Jade удовлетворяет всем вашим критериям, то проблем нет…
                                                                              Я ведь тоже когда-то повелся на лаконичный синтаксис Jade и HAML))
                                                                                +1
                                                                                Дело в том, что лично я применяю Jade: 1) не в масштабах производства или конвейера 2) Jade у меня НЕ используется как что то постоянно генерящее HTML на сервере. Более того — конечному заказчику я просто вручаю сгенеренный один раз HTML. :)
                                                                                А тот плюс — лаконичность здесь использую можно сказать "по-полной" и в моей ситуации Jade все таки оказывается полезным.
                                                                                У нас просто различные требования к этому языку-шаблонизатору — вот и все.
                                                                                А по поводу реальных проектов — полностью согласен — необходимо прорабатывать все требования к используемым технологиям.
                                                                          +1
                                                                          WebStorm Вам в помощь и будет полноценная поддержка Jade, работая с XML&XSLT по старой памяти сижу в Eclipse, все что с веб(Jade и SCSS), то это WebStorm и очень доволен.
                                                                      +1
                                                                      Теперь понял, про что вы. tab, shift+tab, alt+shift+arrows и все подобные задачи решаются за секунду две. Причём из-за indent ещё и очень наглядно. Вот в случае HTML мне бы пришлось помучаться, т.к. закрывающие теги могут располагаться сильно далеко от открывающих. К тому же авто-форматирование может привести код не к тому виду, который хотелось бы, особенно в случае больших тегов (много-много аттрибутов).
                                                                        0
                                                                        Вот в случае HTML мне бы пришлось помучаться, т.к. закрывающие теги могут располагаться сильно далеко от открывающих.

                                                                        Это как раз не проблема, IDEA показывает текущую позицию курсора (относительно документа, родителя и текущего элемента — зависит от позиции курсора и выбора элемента):

                                                                        image

                                                                        image
                                                                        Потеряться с такими подсказками невозможно, а с Jade проще-простого. Если у элемента много модификаторов и прочих атрибутов, которые выставляются по различным условиям, то разметка Jade превращается в "мясо". Ориентироваться в таком коде без подсказок со стороны редактора крайне сложно.


                                                                        image
                                                                        В XML-e все элементарно — открыл элемент и добавляешь нужные атрибуты по различным условиям, в Jade это реально будет нечитаемые и неподдерживаемый код!

                                                                        К тому же авто-форматирование может привести код не к тому виду, который хотелось бы, особенно в случае больших тегов (много-много аттрибутов).

                                                                        Не знаю о каких проблемах вы говорите, потому что автоформатирование настраивается и как жить без него вообще не представляю.

                                                                        PS: У нас получается какой-то спор ради спора, только вот я реально понимаю на собственном опыте, что Jade непригоден для серьезных проектов — вообще не пригоден. Это сложно понять если вы делаете промо-странички, в которых нет тем, модификаторов, массы атрибутов, которые выставляются по условиями и пр.
                                                                        Вы предлагаете разбивать код на мелкие фракции тем самым внося путаницу в существующую архитектуру. И более такого, это еще и увеличит объем результирующего кода, поскольку каждый миксин к этому обязывает. Конечно же есть какие-то общие блоки, которые могут выставлять базовые атрибуты, но просто так код никто не станет дробить на мелкие кусочки чтобы решить проблему шаблонизатора…
                                                                        Писать код с Jade быстрей вы не станете ибо есть Emmet. Наглядности он тоже никакой не даст если коде конечно не теги с одним атрибутом. Дальше, все — только ограничения.
                                                                        Еще раз повторюсь — Jade не решает ни одной проблемы, а только создает.
                                                                          +1
                                                                          Это как раз не проблема, IDEA показывает текущую позицию курсора (относительно документа, родителя и текущего элемента — зависит от позиции курсора и выбора элемента):

                                                                          Честно говоря, мне нет дела до Idea :) А в sublime поддержка HTML оставляет желать лучшего. К тому же, в вашем же примере нужно и курсор установить туда, и чтобы финальный тег оказался в видимой части, а не где-то за скроллом ниже. Проблема такая в XML есть, IDE могут только смягчать её. Одно дело когда закрывающий тег есть, а другое когда его нет в принципе.

                                                                          Если у элемента много модификаторов и прочих атрибутов, которые выставляются по различным условиям, то разметка Jade превращается в «мясо»

                                                                          Работа с большим кол-вом аттрибутов ― недостаток Jade. Лично я для себя его решил. Выше об этом писал. А ещё не ясно, что вы имеете ввиду под "различные условия"? XSLT что-ли? Судя по коду это какой-то язык выросший из XSLT. Я года два использовал XSLT. С тех пор ненавижу и его самого и XML в частности. Это издевательство над живыми людьми, я считаю :) Как и БЭМ.

                                                                          PS: У нас получается какой-то спор ради спора, только вот я реально понимаю на собственном опыте, что Jade непригоден для серьезных проектов — вообще не пригоден. Это сложно понять если вы делаете промо-странички, в которых нет тем, модификаторов, массы атрибутов, которые выставляются по условиями и пр.

                                                                          Я работаю и над сложными и над простыми проектами. Просто я не столь категоричен. Использую Jade и свои велосипеды над ним уже лет 5. Весьма доволен результатом. Аттрибутов использую массу, логики в шаблонах (UI-ой) бывает очень много. Вы не "реально понимаете", вы "так думаете", но есть люди, которые "думают иначе". Давайте на этом и закончим. А то мне кажется скоро и до перехода на личности дойдёт :) Раз уже затронули промо-странички всякие. Кю.
                                                                            0
                                                                            А ещё просьба ― все эти здоровенные скриншоты лучше под спойлер. Так будет всем удобнее.
                                                                  +2
                                                                  Не проще. В XML я делаю коллапc блока, затем переношу блок в нужное мне место. Все эти действия IDEA позволяет выполнить либо клавиатурой, либо мышкой. Дале ⌥+⌘+l помогает вернуть требуемое форматирование. С Jade с форматированием беда, все придется делать ручками и молиться как бы не нарушить структуру кода.

                                                                  Сворачивание блока работает как в Sublime Text 2 (https://yadi.sk/i/4b1qU1n6py6Yo) так и в PhpStorm (https://yadi.sk/i/nGEFZo8apy6nL). Так же отлично работает Tab и Shift+Tab — увеличивает и уменьшает indent.

                                                                  Не проще, поскольку опять же упираемся в форматирование.

                                                                  Проще, потому что нам не нужно искать закрывающие теги. Так как язык основывается на вложенности — можно легче определить семантику вложенности. Код написанный другими людьми подчиняется правилам вложенности, следовательно у другого человека меньше шансов поменять другие строки, которые могут вызывать конфликты. Но да, с кодом нужно работать более аккуратным образом в плане отступов. Почему вы этому пункту вменяете недостаток — неясно.

                                                                  И что? XML-темплейтеров нет что ли?

                                                                  Просто некоторые думают, что это не темплейтер, а что-то для верстки. Но сам по себе extends/block и то что Jade это поддерживает в более менее неплохом состоянии — для меня плюс. Насчет include — добавляйте свою функцию include_your_template() и опишите там логику подключения. Хоть с изоляцией и передачей параметров. И это не так сложно. Кто мешает?

                                                                  У меня были случаи когда JS-код для запуска в рантайме был невалидным (не могу сейчас найти тикет, поскольку проект перенесли)

                                                                  Было бы лучше если бы вы завели тикет на этот баг в трекере Jade.

                                                                  <ТУТ_МЕНЯЕМ_НАЗВАНИЕ_ТЕГА></ЗДЕСЬ_САМО_ИЗМЕНИТСЯ>.
                                                                  Тоже самое касается атрибутов, которые IDEA любезно подскажет и пути к файлам зарезолвит.

                                                                  Не у всех есть IDEA, а в некоторых случаях под рукой только примитивный блокнот без подсветки.

                                                                  С XML такого не может случиться в принципе.

                                                                  Так и не понял чего не может случиться.
                                                                    0
                                                                    Сворачивание блока работает как в Sublime Text 2

                                                                    Ответил выше.

                                                                    Проще, потому что нам не нужно искать закрывающие теги.

                                                                    Зачем искать закрывающийся тег? Если это действительно нужно, то клик по тегу в большинстве редакторов решает проблему.

                                                                    Но да, с кодом нужно работать более аккуратным образом в плане отступов. Почему вы этому пункту вменяете недостаток — неясно.

                                                                    В программном коде я сторонник идентации, но в разметке код становится менее читабельным (на мой вгляд). Если в программном коде не вызывают вопросы лишние переводы строк, то в разметке они выглядят нелепо, а без них код с большой вложенностью напоминает "ёлочку".
                                                                    Это лично мои ощущения и к недостаткам я идетацию как таковую не относил.

                                                                    Так и не понял чего не может случиться.

                                                                    Синтаксис Jade при отсутствии постоянной практики забывается на раз, XML забыть невозможно. И это очень важно, особенно когда проект большой и люди в нем регулярно меняются. Как минимум не требуется время на изучение особенностей синтаксиса.
                                                              +1
                                                              Ребята, jade это тихий ужас, и понимание об этом приходит через недельки две. Тут было несколько комментариев по минусы, это реальные проблемы, с которыми сложно работать.
                                                                0
                                                                Не могли бы про минусы написать?
                                                                  –1
                                                                  Зачем мне копипастить одно и тоже в комментариях?
                                                                    +1
                                                                    Все верно, я выше расписал как мог — Jade для более или менее серьезного проекта непригоден.
                                                                0
                                                                Одно удовольствие использовать jade в приложениях на angular. HTML как страшный сон после этого вспоминается.
                                                                  0
                                                                  Мне одному второй вариант из начала статьи кажется ужасным?
                                                                    +2
                                                                    Лично мне Jade понравился. Зависимость вложенности от табуляции напоминает python, а так же позволяет более четко структурировать код верстки.

                                                                    По поводу большого количества атрибутов у тега мне проблема не совсем понятна. В официальной доке в третьем сверху примере и внизу, в блоке "&attributes" все достаточно удобно и понятно расписано.

                                                                    Так же по поводу вставки больших кусков JS кода в шаблон можно сделать следующим образом:

                                                                    script.
                                                                        console.log('start log');
                                                                        for (var i = 0; i < 10; i++) {
                                                                        console.log('log in for - first row');
                                                                        }
                                                                        console.log('finish log');

                                                                    И интересно, что в статье (как в оригинале, так и можно было добавить от переводчика) не упомянуты Extends, которые позволяют разбить шаблон на "запчасти" и собирать из них то что необходимо для текущей страницы. А так же Filters, которые могут, например, вставлять в шаблон тексты отформатированные в markdown

                                                                    Only users with full accounts can post comments. Log in, please.