@lilwings

Сборка html из фрагментов?

На проекте используется scss + bem и каждый scss файл в своей папке, хотелось бы html хранить рядом, и подключать на страницу тегом как в vue, react, angular, и чтобы в отдельной папке создавались собранные html страницы, чтобы потом отдать их в back.

Можно ли такое сделать? Видел что люди используют php и так дробят html, но в 2к20 такое страшно делать?
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
SeaInside
@SeaInside
15 лет пилю все эти штуки
Компонентный подход - это всегда правильно.
Сейчас в трендах работа с JS-компонентами, но практически тоже самое можно и на бэке делать, просто это менее удобно и готовых решений (и хороших практик) меньше.

Вам нужен шаблонизатор. Если пишите на PHP - возьмите Blade, он простой как три копейки, есть в отрыве от Laravel, и хоть и несколько кастрирован в части работы с данными, но свои задачи как шаблонизатор выполняет более чем.
Альтернативой может послужить Twig, но мне его синтаксис по сравнению с Blade нравится куда меньше, а регулярные задачи плюс-минус и там и там решаются.

Чего-то готового найти довольно сложно, поэтому организовать воркфлоу, структуру придётся самостоятельно.
Я, когда занимался, сделал себе вот так и использовать было не особо больно:
5e89e66f399e0313757656.jpeg

Те же компоненты, те же "пропсы" - это, пожалуй, в рамках шаблонизирования на PHP максимально приближенный вариант к модным фронтовым штукам.
Из минусов по сравнению с ними - нет автокомплита и быстрой навигации по дочерним компонентам (всё приходится искать прям в файловой структуре, без Alt+LKM), нужно самостоятельно организовывать вопросы документирования компонентов.
На скриншоте компонент входит в один экран и принимает три параметра, в таких случаях допустимо не документировать, но есть и другие, где параметров целая гора, там самостоятельно нужно думать о том, как организовать документацию, чтобы не запутаться.
Для JS-фреймворков если классные инструменты для этого, Storybook мне например нравится очень.

Если лень заморачиваться, всегда можно тем же пыхом сделать что-то в духе:
function component($name, $params) {
  extract ($params);
  include 'path/to/components/' . $name;
}

component('component-name', [
  'param' => '123',
]);

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

Ну а если вам и вашим клиентам стек не важен, не возникает проблем с SSR - то берите любой модный JS-фреймворк и пишите на нём, там всё до вас придумано и довольно удобно.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Используйте SHTML даже в 2020 году.
Даже больше того используйте директиву Apache для включения хедера и футера в файлы и в листинг файлов.

Или используйте server rendering для spa и заливайте голый html.
Или используйте js для добавления шапки и подвала.

Все в ваших руках, шаблонизировать контент можно любыми способами.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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