Как фронтить под PHP фреймворки: личный опыт frontend-разработчика

Всем привет! Меня зовут Андрей, я frontend-разработчик компании Creative. Сегодня хочу разобрать вместе с вами довольно необычную тему и рассказать о своём личном опыте работы со стеками Laravel+Vue в рамках одного проекта. Но сначала – небольшая предыстория.

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

Статья будет разбита на 4 части:

1. Проблема реактивности Vue.

2. Почему переиспользование компонентов нельзя делать через их разрушение.

3. Проблемы вложенных компонентов.

4. Настройка mix файла (сборщик Laravel).

Думаю, первое, о чём стоит сказать, – это вставка каких-либо данных из Vue в blade. Это не так-то просто, потому что blade не может сходу реагировать на изменения, переданные ему простым js из коробки. И поэтому мы с вами вынуждены делать всё через привычные

document.getElementById(‘id’).innerText=”text”

В рамках работы мне нужно было вставлять выбранный пользователем город в релевантную строку, и вот как я это делал (илл.1):

Ещё в рамках этого пункта хотелось бы разобрать момент с открытием сайдбара. Он у нас находится на одном уровне с main-layout’ом сайта, что существенно усложняет работу. Ниже я привёл пример его открытия и закрытия (илл.2):

Сразу оговорюсь: вам может показаться, что мы сделали решение слишком сложным, и да, можно было использовать toggle. Возможно, это было бы правильным решением, но я решил пойти через add и remove, т.к. нельзя открыть и закрыть сайдбар, используя одну и ту же кнопку. Это происходит, потому что он открывается из хедера, а закрывается сам из себя или вложенных в него компонентов. И тут мы переходим к следующей проблеме.

На практике, когда мы пишем код на чистом Vue, у нас во множестве мест есть конструкция v-if. Она позволяет ремувить наш компонент из DOM-дерева и потом, при необходимости, по-новой его туда монтировать. Удаляется всё самостоятельно.

Но в нашем случае у нас будет целый ряд проблем – начиная с того, что Vue не может понять, когда ему нужно разрушать компонент, заканчивая невозможностью снова смонтировать компонент.

Сейчас объясню, как это обойти, и о чём я вообще говорю :)

Ниже вы можете увидеть пример того, как мы добавляем компонент в DOM-дерево. Сам вызов добавления происходит таким образом (илл.3):

Но для того чтобы нам его вставить, нужно в blade-шаблоне добавить блок, в который этот элемент будет вставлять простым div (илл.4):

Как мы можем это обойти? Например, вот таким довольно простым способом (илл. 5):

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

Казалось бы «ЧТОО?», но всё именно так.

Поэтому, на мой взгляд, если компонент используется на декстопе и мобильной версии по-разному, наиболее оптимальным решением проблемы является:

Если вложенный компонент используется без своего непосредственного Vue-родителя в другом месте, он является одновременно самостоятельным и вложенным. Чтобы избежать проблем, описанных в предыдущем пункте, рекомендую воспользоваться уже знакомым порядком действий и для родителя вызвать компонент посредством смены класса.

Напоследок хочу рассказать вам о том, как webpack.mix.js работает с Vue-файлами. А работает он интересно! При создании компонента нам всегда нужно создавать файл, который включается в себя этот Vue-компонент (илл. 6):

Т.к. blade не понимает, что мы хотим в него инклюдить, нам нужно вставлять уже преобразованный файл (илл. 7):

Я намеренно не разбирал момент с ajax-запросами и перерисовкой шаблонов в real time, потому что хотел рассказать именно о Vue и его взаимодействии. Поэтому, если у вас есть вопросы по поводу стека и всех вытекающих проблем, буду рад ответить на них в комментариях! На этом у меня всё, с наступающими праздниками всех фронтеров!