Полный цикл жизни проекта: html,css,js > php, шаблоны, изменения, переиспользование?

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

Например: создаём вёрстку (допустим используя bootstrap или свои ходовые блоки на jade, плюс стили, плюс javascript), получаем голый фронтенд, дальше "натягиваем" на CMS, следовательно образуется разрыв между генерируемыми шаблонами (например всё собирается посредством Gulp, подключение форм, прописанные role, скрипты и прочее).
Если в будущем, потребуется изменить что-нибудь в проекте, внешний вид, стили. Просто пересобрать из исходников фронтенда не получится, а значит нужно ручками править, проект обрастает правками, тяжело поддерживать, теряется гибкость/модульность, и т.д.

В идеале мне видятся универсальные темплейты: например чтобы добавить в проект карусель, есть папка с файлами, php, js, css, которую мы подключаем быстро и легко внося небольшие нужные изменения. При этом на выходе получаем собранный проект.

Симпатизирует в этом плане BEM, но достаточно сложно с наскока работать в полную силу, чтобы и BEM и PHP.
Пробовал реализовать используя системы сборки, но затык образуется после натяжки (близко не пощупал ещё jadePHP).

В общем, решил посоветоваться, кто как работает? На своём опыте, встречал лишь древний подход, генерим статику, потом натяжка, дальнейшая жизнь/правки под версионным контролем "на живую" скрестя пальцы.
  • Вопрос задан
  • 3169 просмотров
Пригласить эксперта
Ответы на вопрос 2
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Подход давно выработан: пакетные менеджеры. Для фронтенда это npm/bower (или, может быть, component, но это уже чуть более широкая вещь), которым можно подсовывать адрес приватного git/hg репозитария. Только добавьте в .git_ignore node_modules и bower_components.

Другой вариант -- git submodule, но это будет более геморройно.
Ответ написан
qfox
@qfox
Ответы есть у меня
Текущий подход достаточно заморочен, если знаешь все прелести БЭМ.

Сейчас мы делаем:
0. Дизайнер нарисовал макет
1. Верстаем руками html: a.html
2. пишем руками стили: a.css
3. пишем руками js: a.js
4. Это все передаем бекендеру и он:
5. Доверстывает хтмл и разбивает на шаблоны, из a.html получает A.tmpl, B.tmpl, C.tmpl, ...
6. Дописывает стили в своих файлах, а часто еще и разбивает их на части: A.scss, B.scss, ...
7. Дописывает js, и тоже часто разбивает: A.js, B.js, C.js
8. Какой-то бэкенд собирает из кусков шаблонов страницу, и часто создает css, js только из нужных кусков

А дальше: Пришел новый макет. И что делать?

И БЭМ в данном случае решает проблему, поскольку у него есть стек технологий, позволяющий верстальщику работать сразу с шаблонами и разобранными js/css(less/sass/stylus) файлами.

На практике получается так:
0. Макет.
1. Верстальщик смотрит на макет, и разбивает его на куски (компоненты) сразу;
2. Пишет bemjson (или jsx) вместо html;
3. Создает шаблоны, стили и js для каждого из блоков;
4. Передает это все бэкенд программисту (обычно через гит, потому что так удобнее);
5. Бэкендер без изменений использует эти файлы для генерации страницы, и просто генерирует описанный верстальщиком bemjson (или jsx).

И, О МАГИЯ, они могут работать над проектом параллельно, даже если придет новый макет.

C php действительно есть нюансы, которые сложно разглядеть, просто потому, что нет большого кол-ва пользователей и стек не устоялся.
Мы у себя используем велосипед, который собирает все сам, и почти готовы перейти на enb используя bh-php.
Большая проблема, как оказалось, использование декларативных шаблонизаторов — верстальщики не сразу въезжают что и как. Но когда въехали — я не знаю тех, кто возвращается на императивные (типа мусташей, джейдов, smarty, etc.).

Можно начать с https://github.com/bem/project-stub/tree/php-bem-bh и позадавать вопросы на форуме https://ru.bem.info/forum/ — люди поделятся своими историями.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы