Зачем использовать Vue вместе с Laravel?

Question

[Vic Shóstak]

Разобрался (на уровне beginer) с Laravel 5.3, теперь хочется понять и Vue.js и зачем его туда добавили.

Суть вопроса: какое практическое применение может быть у этого js фреймворка в качестве фронтэнда для проекта на L5.3? Ну, кроме того, что показывали Вей и Оутвелл на Ларакастс ;) Может есть какие-то реально существующие кейсы (пощупать, посмотреть, поучиться)?

Например, где-то читал про то, что используя Vue, можно вообще обойтись без Blade (всё делать "реактивным", через компоненты *.vue).

Короче говоря, буду рад вашим комментам/ссылкам.

Answer 1

[Дмитрий Евграфович]

Добавили, чтобы вы jquery спагетти не использовали. Vue (как и другие js фреймворки) сокращает количество кода на клиенте и уменьшает его запутанность.

Для примера вы создаете админку для магазина. У вас есть следующие варианты:
1. Делать статическую страницу. На клиенте никакой логики, все вычисляет сервер. При новой покупке администратор должен будет обновить страницу.
2. Писать динамический фронтэнд с использованием vue, angular и чего угодно остального. Бэкэнд шлет вам уведомления через вэбсокеты о новых заказах без перезагрузки страницы.
2.1 Вы берете jquery и сначала все идет хорошо. Первые полчаса. Затем ваш код обрастает огромным количеством обработчиков событий. Если товар заканчивается на складе, его надо убрать из таблицы, затем если заказ отменяется, его надо вернуть в таблицу. Вы его вернули, но почему-то кнопка в строке с ним, вызывающая модальное окно перестала реагировать на события, потом еще что-то случилось и еще. Проблемы с jquery растут как снежный ком и вы проклинаете свое решение создать динамическую админку.
2.2 Вы используете современный js фреймворк. Vue в этом плане хорош низким порогом изучения. Вы загружаете определенные обхекты и в зависимости от их свойств vue сам строит таблицы (с проданными и непроданными товарами), скрывает лишние элементы (не показывать такую-то кнопку, если товар всего 1), отправляет плагинам команды на обновление при изменении объектов и следит за тем, чтобы события, которые отваливались при jquery подходе работали.

Я не сказать что спец в javascript, но (именно поэтому) меня vuejs на текущем проекте очень выручает.

Answer 2

[Oleg]

Для чего лично вам использовать его - сложно сказать :)

Как его мы его используем:
1. динамика на странице, т.е. даже простое "если изменилось поле А то изменить поле Б" делается намного проще и быстрее чем на jquery/javascript
2. темлейтинг. Нужно вам например сделать удобный темплейт на JS - вы можете или сам движок придумывать. или использовать готовый. Vue - один из них.
3. Отображение данных с сервера. Опять же, можно генерировать весь хтмл на сервере, можно на клиенте. На сервере свои плюсы и минусы, на клиенте - свои.

Удобство VUE - что можно использовать на отдельных элементах отдельных страниц. Нет нужды полностью переходить на него для всех страниц.

Вот посмотрите примеры тут:
https://vuejs.org/v2/examples/hackernews.html

Comments

[Vic Shóstak]

Спасибо за ответ и ссылку. А можно немного подробнее про плюсы/минусы генерации html на сервере и клиенте? Просто полюбил Blade, в смотрю на Vue — все тоже самое можно делать, но с реактивными плюшками ;)

[Oleg]

из простых:
хтмл, плюсы и минусы:
+ можно более сложно сделать генерацию хтмл, чтобы на клиенте не ясна была логика
+ проще :) Не надо ничего новому учиться.
- тяжелее при тяжёлой, повторяющейся вёрстке. (=табличные данные)
- сложнее делать динамику, например тот же АЯКС прикрутить сложнее.
- сложнее делать автогенерацию на клиенте данных, например что сделать такое, что вводишь сумму, выбираешь валюту, и оно считает сколько это в рублях. На "простом" хтмле - это только через запрос к серверу, или код на Javascript. на Vue - тот же код на Javascript, но проще.

Vue:
+ табличные данные генерировать легче и быстрее
- проще делать аяксы, динамику, фильтры, и тп.

В общем на самом деле.. если вам нужна динамика на страницах - значит стоит Вуе. Если не нужна- то можно VUE, а можно хтмл, сами решайте :)

Мы в проекте перешли на Vue для новых страниц (т.е. не переписываем старые страницы, а новые пишем на вуе сразу же). На подключение, изучение, обучение и тп ушло 2-3 дня всего, но сразу же было заметно что вуе удобнее.

[Vic Shóstak]

Oleg: вот спасибо за коммент :)

[Oleg]

Pavel Ustyugov: Почему, вполне достаточно.. Но всё равно, вам нужен бакенд чтобы всё это хранить.

Answer 3

[Aset]

Вы можете использовать любой другой фреймворк с Laravel 5.3 Angularjs, reactjs итд. Хотите быть реактивным изучайте vue.js.

Ларакаст делает ставку на vue.js

Comments

[Vic Shóstak]

Так никто и не спорит с этим. Просто не понимаю для каких принципиальных задач нужен Vue.js и есть ли кейсы (vue + L5.3) на посмотреть :)

Answer 4

[he he]

На сам вопрос не отвечу, но если я не ошибаюсь, то там пару плюшек(генерация токена и еще что-то) на vue, поэтому и он включен в ларку.