Стоит ли использовать pug(jade)?

Question

[Vaultboy84]

Вопрос сугубо дискуссионный. Сам для себя уже ответ имею, хотел услышать альтернативные точки зрения людей из профессии. Лично я не вижу плюсов от использования Pug, он мне напоминает CoffeScript канувший в лету.

Все его плюсы для меня абсолютно не очевидны. Понятный синтаксис - понятен лишь тем, кто его освоил. Так как фронт тесно связан с бэком, сомневаюсь, что программисты с бэка обрадуются увидев незнакомый синтаксис, в то время как классический html знают все. Pug же для них синтаксический сахар, который все равно является лишь надстройкой над html. Многоразовое использование блоков? Ну это делает элементарный инклюд на любом серверном языке, тот же php. Возможно я не до конца разобрался как работает Pug, но меня жутко раздражает, что каждое изменение в структуре html чревато перекомпиляцией всей страницы. Все это замедляет работу. Внесли изменение, перекомпилируем pug.

Объясните в чем его актуальность на данный момент? Спасибо.

Comments

[Антон]

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

[Антон Антон]

Единственный плюс для меня - попроще диффы в гите, но в основном работаю без пуга, хоть оно в vuejs и из коробки

[Сергей delphinpro]

Pug никогда не стоило использовать. Есть нормальные шаблонизаторы.

[Дмитрий]

Сергей delphinpro, например?

[profesor08]

Дмитрий, jade xDD

[Dmitry]

Я его использовал активно на протяжении 2х лет. И ровно столько же уже не использую, т.к настроил IDE таким образом, что никакой gulp и pug мне больше не нужен)) Кстати, лично мне pug пошел во вред и только стал тормозить процесс написания кода.

Советую вам также как можно подробнее изучить свою IDE (надеюсь вы не в sublime text делаете серьезный фронтенд :D) и необходимость в некоторых инструментах отпадет сразу же)

Answer 1

[dom1n1k]

Мой первый опыт с тогда ещё Jade - это где-то лет 6 назад. И был он, мягко говоря, спорный. Отчасти понравилось, но больше всё-таки нет. Были проблемы, которые многократно перекрывали экономию от укороченного синтаксиса. Я писал где-то на Хабре комментарий на этот счет. В общем, забросил.

Потом несколько раз возвращался и постепенно пришел к выводу, что если наловчиться, то некоторую пользу всё-таки извлечь можно. И важно, что со временем авторы пофиксили некоторые проблемы. Это не значит, что я полюбил Pug, но хотя бы смог использовать его без постоянного раздражения.

Какие именно плюсы? Якобы более чистый код с отступами, отсутствие закрывающих тэгов - это всё ерунда. Может и достоинства, но точно минорные. Главное функционал, полностью отсуствующий в нативном HTML: миксины, автогенерация однотипных блоков, наследование шаблонов. Этого правда не хватает.

Но есть два но.
1. Подобный функционал есть в любом другом шаблонизаторе? Верно. И я посмотрел несколько (нунчаки, slim, haml, дуст). И везде я сталкивался с какими-то раздражающими нюансами или чего-то не хватало. А раз святой грааль не был найден, то я не нашёл для себя аргументов для смены шила на мыло.
2. Мне удобнее решать такие вопросы на фронте. Если вам удобнее делать всё то же самое в PHP - тогда да, выходит, что особого смысла нет.

Answer 2

[beduin01]

Я в свое время от него отказался т.к. подходы к верстке изменились и pug стал лишь усложнять, а не упрощать жизнь.

Comments

[managrib]

т.к. подходы к верстке изменились

можно с этого места поподробнее?

[beduin01]

managrib, с приходом SAP оказалось, что разные HTML препроцессоры мало где полезны.

[managrib]

beduin01,

с приходом SAP оказалось, что разные HTML препроцессоры мало где полезны.

Гугль отправляет по SAP в контору что занимается автоматизацией предприятий (типа 1С иностранной).
Можете ли вы пожевать подробнее и эту вашу фразу?

[beduin01]

managrib, сори за опечатку. SPA конечно же

Answer 3

[Дмитрий]

Более-менее стандартный рабочий процесс с использованием Pug подразумевает, что используется какой-либо инструмент сборки или таскраннер вроде Gulp или Webpack, который полностью автоматизирует компиляцию HTML из Pug, как в dev-режиме, так и в build. То есть при грамотной настройке рабочего процесса описанная тобой проблема перекомиляции пропадает.
Актуальность зависит от объёма и характера задач. Простой лендинг или визитку может и не имеет смысла верстать с использованием Pug. На более-менее крупных проектах можно добиться серьезного прироста скорости благодаря упрощённому синтаксису и дополнительным фишкам типа миксинов и функций.
Так что, как и по отношению к любому инструменту, сначала нужно чётко понимать, зачем и когда его следует использовать. Если это понимание не пришло - скорее всего, пока не возникла та ситуация, когда инструмент реально нужен.

Comments

[Vaultboy84]

Да в курсе я про Gulp или Webpack, вы серьезно думаете, что я в ручную компилирую? Просто это все равно время. Это занимает время, даже в автоматическом режиме.
О каком приросте скорости идет речь? О приросте скорости разработки? С миксинами и функциями это получается уже полноценное изучение нового синтаксиса, не проще ли использовать серверный язык проекта для этого, который будет отлично понятен на бэке или например джс фреймворки, типа Vue?

[Дмитрий]

Синтаксис препроцессора простой и изучается всего один раз, а затем используется, сокращая объемы исходников разметки и скорость её написания в несколько раз. Бэку вообще не придётся видеть Pug, он работает с build'ом.
А при использовании билдеров пропадает проблема компиляции.
Все эти вопросы пока только от того, что вы не участвовали в воркфлоу, где подобный тулинг крайне необходим.

Answer 4

[Sanes]

Чем разметка HTML не устраивает? Она и читабельней и редакторы с ней адекватно работают.

Comments

[Андрей безфамилии]

Представь, что ты сделал сайт из 10 страниц. С хидером, футером и рядом других повторяющихся блоков. А потом прихождит задача исправить Email и номер телефона в хидере и футере. Как ты будешь это делать? Файнд-реплейс? Или копи-пейст на каждую страницу? Правда, удобно?
А верстать на одной странице 150 повторяющихся карточек пользователя с разными именами, фамилиями и фото? Тоже копи-пейст?

[Vaultboy84]

Андрей Францев, попробуй например банальный php include, или к примеру твиг, если бэк на каком нибудь симфони. Всегда, когда сайт это не лендинг, есть либо цмс или фреймворк, где уже есть свой язык шаблонов. Ты мне зачем то какие то детские примеры приводишь, как будто я первый день фронтом занимаюсь. Это вообще ни разу не повод юзать pug.

Answer 5

[profesor08]

Если много повторяющихся элементов, то да, шаблонизатор все гораздо упростит, но есть нюанс, кастомизация повторяющихся элементов в pug не так удобна. Итеррирование не так удобно. Если примешать js код то шаблон превращается в непонятную кашу.

Теоретически для всего этого можно использовать jsx, но надо будет повозиться.

Собственно пример. Штампуем компоненты, издеваемся над ними как хотим, в результате получаем html строку, которую можно записать в файл.

import fs from "fs";
import React from "react";
import ReactDOMServer from "react-dom/server";

const Label = () => <div className="label">Label text</div>;

const Text = ({ id }) => <div className="text">Block {id}</div>;

const Block = ({ id }) => {
  return (
    <div className="block">
      <Label />
      <Text id={id} />
    </div>
  );
};

const Document = () => {
  const blocks = [];

  for (let i = 0; i < 10; i++) {
    blocks.push(<Block key={i} id={i} />);
  }

  return (
    <html>
      <head>
        <title>Parcel Sandbox</title>
        <meta charSet="UTF-8" />
      </head>

      <body>{blocks}</body>
    </html>
  );
};

const html = ReactDOMServer.renderToStaticMarkup(<Document />);

fs.writeFile("index.html", html);

Answer 6

[Алексей Николаев]

Ну по существу, да. Шаблонизатор стоит использовать, когда много шаблонов и в них есть повторяющиеся части. Мое личное мнение, синтаксически Pug лучше, чем Slim \ Smarty, но хуже, чем Blade, которым я восхищен.

Даже при разработке фронта стоит использовать шаблоны. Исходники будут чище, а скорость разработки увеличится. А вот шаблоны, которые компилируются в реал-тайме, я бы использовать не стал, предкомпиляция наше все.

Answer 7

[Froggyweb]

А мне нравятся отступы. Не бывает "перезакрытых" тегов, миксины на меню к примеру
Вот это https://www.npmjs.com/package/pug-bem вообще песня.
А вообще на вкус и цвет фломастеры разные