@ZerdoX-x

Component-based Front-end: html templates without framework. Как делить разметку так-же, как скрипты и стили?

Я джун фронтендер, пока нигде не работал, заказы не выполнял, только для себя, опыт нулевой.
Заканчиваю писать свою webpack сборку, хочу поддержку компонентов, но не получается у меня организовать шаблоны. Решил придерживаться BEM методологии, прочитал часть документации, дошёл до html, они там суют свой bem-xjst, я не хочу использовать такие узконаправленные инструменты, плюс фиг это интегрируешь с webpack (документации никакой нет, делай что хочешь), нужно что-то попроще. Посмотрите пожалуйста структуру проекта, как реализовать шаблоны? Я знаю что есть компонентный подход в Vue и React, но мне наверное стоит сначала получше изучить основы, нельзя реализовать компоненты без каких-либо таких тяжелых библиотек/фреймворков? То есть как я понял, мне нужно чтоб у меня шаблоны рендерились на сервере(во время сборки), а не в браузере у клиента. Какими инструментами это сделать, как это устроено на крупных проектах?
Пробовал handlebars, но нормально подружить его webpack и BEM у меня так и не получилось, какая-то дурная связка.. Так-же знаю, что есть pug, но лично мне кажется, что это инструмент для извращенцев, мне не нравится синтаксис. Как я понял - это препроцессор, но мне они не нравятся, я пишу на ванили, перешёл недавно с SCSS на CSS. Как быть в таких случаях? Я встал в тупик. Можно конечно писать html вручную, но это гораздо труднее поддерживать, на многостраничниках тем более, если захочу поменять разметку одного компонента, придётся везде его искать и заменять, это жутко неудобно.
Или в принципе вариантов нет, и если я хочу полноценную компонентность, мне стоит идти учить фреймворки?
Я рассчитываю на полное разделение на компоненты: от header'а до кнопочек.
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
@dirtycoder
Не совсем понимаю ваше нежелание начать изучать React или Vue, там нет ничего особо сложного а используют их сейчас очень много где, то есть без работы точно не останетесь. Я бы предложил все-таки React потому что он в основном заточен только как-раз на рендеринг, Vue более универсален.
Handlebars/Pug и прочее сейчас в основном на legacy проектах.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
SkiperX
@SkiperX Куратор тега HTML
Я использую tars сборку, pug и bemto.
По структуре - pug, js и css файлы каждого компонента в своей папке.
В pug блок это миксин. Данные либо прописываю жестко, либо передаю в параметре data и подставляю, если они меняются в разных местах.
К синтаксису за один проект привык.

mixin page-header(data)
    +b.page-header       
       +e.A.logo(href='/')  
       +e.A.tel(href='tel:+7 3452 299 299') +7 3452 299 299
       +e.A.btn(href='#')!=data.btnText
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Гуглите: "includeHTML github.com"
Должен подойти.
Ответ написан
@skuvaWeb
У html-loader'a есть флаг ?interpolate, сможете разбивать свои файлы на "компоненты" (на самом деле это просто разделение html кода по файлам)

По синтаксису выглядит так
<div>${require('./components/gallery.html')}</div>
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 сент. 2020, в 06:45
4000 руб./за проект
22 сент. 2020, в 03:43
35000 руб./за проект
22 сент. 2020, в 02:11
10000 руб./за проект