В чем смысл html-препроцессоров?

Question

Максим Иванов @splincodewd

Developer

HTML

В чем смысл html-препроцессоров?

Ну, вот я понимаю для чего нужен emmet в sublime, он быстро тебе через таб дополняет html
А вот все эти HAML, BEML, Jade, что там еще есть, и их же не будет человек постоянно скопировал и вставил в онлайн конвертер (это как я раньше постоянно тупил и копировал в less конвертер, сейчас же есть всякие консольные программки с watch событиями). Просто, кто использует в практике html препроцессоры у себя, поделитесь опытом?

Вопрос задан более трёх лет назад
5439 просмотров

5 комментариев

Подписаться 1 Оценить 5 комментариев

Сергей delphinpro @delphinpro Куратор тега HTML

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

Написано более трёх лет назад
Максим Иванов @splincodewd Автор вопроса

так это же не относится к html препроцессору, если у нас 60 одинаковых элементов их можно циклом сгенерировать на js или на php если уж нужно и используем в качестве серверного языка

Написано более трёх лет назад
Serj-One @Serj-One

Максим Иванов: Речь идёт о фронтенде. Генерировать js'ом элементы, которые в билде должны быть статичны - абсурд. О php на этом этапе речи вообще не идёт, бэкенд - следующий этап.

Написано более трёх лет назад
timfcsm @timfcsm

Serj-One: тут у большинства скорее вопрос, как и у меня кстати, что делать дальше, когда бэкенд уже есть? допустим, сверстал я с этим джейдом всё, прикрутили на бэкенде шаблонизатор php-шный.. и тут надо что-то поменять. Тогда всё, забить на джейд и править уже шаблон? или есть какой-то адеквтаный вариант мерджить результат работы джейда с готовым шаблоном?

Написано более трёх лет назад
Odinokun @Odinokun

timfcsm: так ты в исходниках делаешь правки в jade и отдаешь прогеру. А уже прогер вносит соответствующие коррективы нв сайте.

Написано более трёх лет назад

Решения вопроса 5

Комментировать

7 комментариев

15 комментариев

Максим Иванов @splincodewd Автор вопроса

each TITLE in["Main page", "About us", "Contacts"] а расскажите, как это он распарсит на несколько страниц html? или это все он в одном файле выведет?

Написано более трёх лет назад
Алексей Ярков @yarkov
Максим Иванов: блин, ну это синтетический пример )))
Я к тому, что можно использовать циклы, переменные при компиляции. Например список ul>li из 100 элементов будет выглядеть так:
ul -var liArr = [] -for(var i=0; i<101;i++){ - liArr.push(i) -} each li in liArr li= li
Написано более трёх лет назад
Максим Иванов @splincodewd Автор вопроса

но это же можно и на js делать, почему именно препроцессоры использовать то?

Написано более трёх лет назад
Serj-One @Serj-One

Максим Иванов: Что можно делать на js? Генерировать разметку, которая в билде должна быть статичной? Это абсурд.

Написано более трёх лет назад
Максим @LenovoId

Serj-One: а на emmet надо просто написать header+main+footer + ctrl+enter и всё , и ни каких препроцессоров для глупого html не надо

Написано более трёх лет назад
Максим @LenovoId

Serj-One: и так же html:5 + ctrl+enter и всё и не надо думать о jade и прочей лишней шелухе

Написано более трёх лет назад
Serj-One @Serj-One

Максим Жаров: Причём здесь вообще emmet? Как можно сравнивать совершенно разные инструменты? Препроцессоры - это в первую очередь шаблонизация. Чем поможет emmet, если нужно изменить уже свёрстанную шапку для 50 страниц? Ничем. Я изменю 1 шаблон, а ты будешь копипастить новую шапку на все 50 страниц. И это только самый очевидный пример.

Написано более трёх лет назад
Алексей Ярков @yarkov

Максим Жаров: процитирую Олег : Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется - вы сами это поймете и начнете поиск подходящего инструмента.

Написано более трёх лет назад
Barmunk @Barmunk

Serj-One: а зачем вы делаете 50 html файлов? Всмысле когда это нужно? Для каких проектов? Кто у вас это просит?

Написано более трёх лет назад
Serj-One @Serj-One

Barmunk: Большинство моих проектов - довольно объёмные интернет-магазины. Среднее количество 12-15, но и 20-25 типов страниц - норма. Плюс обычно добавляется 2-3 варианта ключевых элементов для A/B тестирования. В итоге получаем 40-70 вариантов страниц на проект, и это далеко не предел. Не так давно выполнял проект для крупного завода, - центральный сайт + сайты 8-ми его подразделений. Общий стиль, но каждый имеет уникальные отличия. В совокупности проекта вышло более 250 чем-то отличающихся страниц, где любое структурное изменение дизайна затрагивало каждую.
Думаю, очевидно, что в таком случае копипаста любого изменения в каждый файл - не вариант, и шаблонизация необходима.

Написано более трёх лет назад
Barmunk @Barmunk

Serj-One: Само собой копипаста зло, но не проще это сразу на php делать с примитивным include? Ведь если я правильно понимаю твои 250 страниц потом отдадут бэкендщику, который будет во все это втыкать.

Написано более трёх лет назад
Максим @LenovoId

Serj-One: не буду , я выложу на либо на локальный хост либо на удалённый , и с php подключу 1000000000....... раз

Написано более трёх лет назад
Serj-One @Serj-One

Barmunk: Максим Жаров: Нет, не проще. Рассмотрение php инклудов в контексте обсуждения html-препроцессоров настолько абсурдно, что я даже не буду объяснять причин. Как здесь уже не раз сказали: "Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен."

Написано более трёх лет назад
Максим @LenovoId

Serj-One: по мне так проще include чем установка и компиляция хоть и абсурдно

Написано более трёх лет назад
Максим @LenovoId

Serj-One: и к тому же , для php шапка должна быть одна , а не 1000 штук , вы это понимаете сами лучше меня , я потому не вижу смысла в jade , я им начал пользоваться и даже сам не знаю почему , для интереса , и что бы сгенернить что то надо ещё и написать это липу и потом отгенерировать и потом только будет результат , а по факты ключевых страниц то ну максимум 20 может быть - а не 1000

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 23 часа назад
- 30 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 23 часа назад
- 112 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 49 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 42 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 103 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 43 просмотра
0

ответов
PHP

+2 ещё

Простой
Как можно отредактировать микроразметку сайта написанного на Bootstrap?
- 1 подписчик
- 17 нояб.
- 226 просмотров
3

ответа
HTML

+1 ещё

Простой
Как сделать так, чтобы при нажатии не исчезало?
- 1 подписчик
- 16 нояб.
- 135 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Разработать индикатор для торговой платформы Metatreder5

22 нояб. 2024, в 15:00

2500 руб./в час

Разработка базы данных на SQL

22 нояб. 2024, в 14:51

10000 руб./за проект

Разработка API на Go+ClickHouse

22 нояб. 2024, в 14:51

2000 руб./в час

Все их используют. Все, кто серьезно занимается разработкой.
Примеры, ну я не знаю. примитивное - общие шапка и подвал на всех страницах, которые заказчик "вдруг" решил поменять. А страниц - пара десятков.
Или страница каталога товаров с 60-ю одинаковыми элементами, которые тоже вдруг нужно чуток изменить.
Без шаблонизатора вы обречены на нудную копипасту, и не факт, что вы будете очень внимательным копипастером.
так это же не относится к html препроцессору, если у нас 60 одинаковых элементов их можно циклом сгенерировать на js или на php если уж нужно и используем в качестве серверного языка
Максим Иванов: Речь идёт о фронтенде. Генерировать js'ом элементы, которые в билде должны быть статичны - абсурд. О php на этом этапе речи вообще не идёт, бэкенд - следующий этап.
Serj-One: тут у большинства скорее вопрос, как и у меня кстати, что делать дальше, когда бэкенд уже есть? допустим, сверстал я с этим джейдом всё, прикрутили на бэкенде шаблонизатор php-шный.. и тут надо что-то поменять. Тогда всё, забить на джейд и править уже шаблон? или есть какой-то адеквтаный вариант мерджить результат работы джейда с готовым шаблоном?
timfcsm: так ты в исходниках делаешь правки в jade и отдаешь прогеру. А уже прогер вносит соответствующие коррективы нв сайте.

Answer 1 · 2016-07-23 18:04:22

Serj-One @Serj-One

i'm sexy and i know it

Переменные
Миксины
Шаблонизация

Разве этого мало?

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2016-07-23 18:11:19

В чем смысл html-препроцессоров?

+ 10 к скорости, удобству, абстракции

Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется - вы сами это поймете и начнете поиск подходящего инструмента. Данный принцип вполне универсален и подходит не только в случае html-препроцессора, а вообще.

Answer 3 · 2016-07-23 18:16:31

На чистом html много страниц выглядят так:
main_page.html

<!DOCTYPE html>
<html>
<head>
    <title>Main page</title>
</head>
<body></body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
    <title>About us</title>
</head>
<body></body>
</html>

contacts.html

<!DOCTYPE html>
<html>
<head>
    <title>Contacts</title>
</head>
<body></body>
</html>

С помощью jade делаем так:

each TITLE in["Main page", "About us", "Contacts"]
    html
        head
            title= TITLE
        body

Результат тот же. Ну и конечно ответ Serj-One вполне исчерпывающий.

Answer 4 · 2016-07-23 18:38:32

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

Answer 5 · 2016-07-23 19:29:22

В Pug (бывший Jade) очень удобно менять структуру файла - нужно всего лишь изменить отступ, не заботясь о закрывающих тегах. Когда верстается много объемных страниц - это удобно.
zooks.ru/web/773

В чем смысл html-препроцессоров?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт