Объедините Backend и Frontend Development с Laravel, Patternlab, Atomic Design и Vue.js

Question

Я собираюсь запустить новый проект с этими двумя фреймворками (мне нравится):

• Ларавел 5
• Vue.js

Разработчик Frontend готовит HTML-код для атомарного дизайна, созданный с помощью patternlab.io.

Теперь я смотрю, как я могу интегрировать проект patternlab.io, чтобы мне не нужно было переписывать все элементы в шаблоне блейда.

Я нашел несколько реализаций, комбинирующих Patternlab и Laravel, используя TwigBridge, Laratash Расширения Laravel.

Но у меня есть некоторые мысли:

• В блейд-шаблонах есть: логика, условия, циклы,.... Если я объединю patternlab а также laravel тогда мне нужно поместить все это в проект patternlab.
• Из-за использования vue.js Мне нужно добавить также эти теги в patternlab шаблоны

Поэтому я думаю, что это не лучший выбор для интеграции шаблонов patternlab.io в проект laravel.

Моя идея была:

• Frontend DEV использует patternlab для создания шаблонов
• Laravel автоматически генерирует и импортирует таблицу стилей CSS, созданную в patternlab
• Backend-разработчики копируют patternlab - molecules вручную в шаблонах блейдов и добавьте свою логику
• Если Frontend DEV вносит изменения в CSS, это нормально - мы будем работать без проблем; после перезапуска процесса laravel gulp для обновления файлов css у нас есть новые обновления.
• Если Frontend DEV вносит некоторые изменения в html-структуру, нам нужно вручную их настроить.

Есть ли лучшее решение, сочетающее в себе Atomic Design, Vuejs и Laravel? Как вы развертываете атомарный дизайн в своей CMS?

Answer 1

В последних трех проектах Vue/Laravel, которые мы создали, мы прекратили все время использовать PHP в качестве движка рендеринга и использовали исключительно Vue. Laravel по-прежнему является отличным фреймворком для написания бизнес-логики и API в чистом тестируемом виде, но мы решили больше никогда не использовать blade-сервер.

Как правило, проблема, с которой вы сталкиваетесь при попытке создать приложение, отображаемое в JS с бэкэндом PHP, - это отсутствие рендеринга на стороне сервера. Чтобы решить эту проблему, я обратился к новому проекту сообщества Vue, Nuxt.js (я не имею к ним никакого отношения, просто счастливый разработчик). Nuxt позволяет писать vue-компоненты и отображать их как на стороне сервера, так и в браузере после начальной загрузки страницы.

Это позволяет нам полностью отделить все функции рендеринга от Laravel и хранить его в одном месте, так что нет необходимости использовать Blade и Vue - это все Vue.

Единственным недостатком является то, что вам понадобятся 2 сервера Node.js и PHP.