Добрый день, меня зовут Андрей Солдатов, мы в команде Россельхозбанка разрабатываем новые интересные проекты, связанные с сельским хозяйством. В качестве фронтального решения для некоторых из них мы решили использовать интересное open source решение Vue Storefront. В этой статье вы можете ознакомиться с ключевыми возможностями и особенностями этого решения. Статья является переводом статьи из официального блога Vue Storefront, оригинал доступен по ссылке.

Vue Storefront - это достаточно сложное решение с обширными возможностями. Изучение их всех может занять некоторое время. В этой статье я за несколько минут постараюсь объяснить вам его ключевые понятия, чтобы показать все необходимое для начала работы с Vue Storefront.

Привет, Хабр!

Микросервисы уже давно стали классикой в бэкенд архитектуре, но в отличие от бэкенда, во фронтенде одновременно можно использовать только один фреймворк. Это порождает неудобства при масштабировании и переиспользовании модулей. Микросервисный подход избавляет от необходимости придерживаться конкретного фреймворка и дает возможность программисту сосредоточиться на конкретном модуле с использованием наиболее удобных для него инструментов. Мы не пропагандируем расширение зоопарка технологий и использование каждого фреймворка необходимо тщательно обдумать, прежде чем внедрять. Подробнее — в статье от разработчика команды BSL gyk007.

Уважаемый хабрачитатель, хочу поделиться с тобой опытом в выборе и использовании генераторов форм для Vue.js.

Введение

Пожалуй, известно каждому, что любой выбор начинается с фиксации целей, постановки задач и формирования списка требований к объектам выбора. Данная статья описывает функциональные возможности готовых решений и не призвана ответить на все вопросы в рамках данной темы.

Если вы только погружаетесь в эту предметную область, то первое, что вам необходимо сделать — это оценить применимость данного подхода к вашей разработке. Можно выделить следующие ситуации, когда этот подход оправдает себя:

1. Приложение имеет множество однотипных форм, где декомпозиция компонентов не оказывает должного эффекта, а использование copy & paste только ухудшает поддерживаемость;
2. Приложение очень динамично развивается и требуется экономить время на реализации каждой новой фичи продукта в ущерб UX (User eXperience);
3. Приложение находится на стадии прототипирования и большая часть функциональности будет изменена или удалена в ближайшее время.

Далее необходимо определиться со списком требований к библиотеке генератора форм (данный список может отличаться от ваших требований):

1. Библиотека для Vue.js;
2. Поддержка Element UI, желательно актуальной версии;
3. Построение форм из JSON schema, с использованием валидаторов;
4. Возможность локализации форм, включая ошибки валидации.

1. Быть декларативным — не императивным. Vuecket не диктует какие-то специальные требования к коду. Он может быть приложен достаточно быстро и легко к уже существующим Vue.JS или Apache Wicket проектам.
2. Следовать принципу Парето. Vuecket должен обеспечивать 80% нужного функционала из коробки, но для оставшихся 20% должны быть хорошие и удобные точки расширения.

Иногда в приложении требуется шаблоны для различных страниц, чтобы не копировать код от компонента к компоненту, мы прописываем шаблон в основном компоненте (он же, обычно, App.vue) и с помощью <router-view> подставляем в него различные вьюшки.

А что, если нам необходимо сделать несколько шаблонов для разных страниц или состояний приложения? Этим мы сейчас и займемся.

Делюсь опытом проведения мероприятия в условиях изоляции. Мы получили 1904 участника и 163 лида за 24 часа. Прикладываю исходники и полную статистику с фидбеками.

Вступление

В этой статье мы с вами напишем свой собственный плагин для проектов на VueJS, который трансформирует проект в расширение для браузера. Узнаем как изменять правила сборки webpack и генерировать дополнительную структуру файлов и папок.

Расширения для браузеров часто имеют всплывающие окна, которые появляются при клике на иконку расширения. Во всплывающем окне может быть авторизация, регистрация или управление настройками расширения, а возможно и любая другая логика. Мне показалось очень удобным реализовать всплывающее окно и само расширение на VueJS. Было решено написать плагин для vue-cli который трансформирует существующий проект на VueJS в расширение для браузера. А содержимое проекта будет отображаться во всплывающем окне расширения. Этот плагин уже опробован в реальном проекте по проверке объявлений перекупщиков validauto.ru и расширениях для Google Chrome, Mozilla Firefox и Microsoft Edge "Узнай кто перекуп | (validauto.ru)"

Пишем плагин для vue-cli

Сначала мы создадим папку с именем vue-cli-plugin-simple-extension. Префикс vue-cli-plugin необходим для автоматического поиска плагина в npm пакетах при вызове команды vue add simple-extension.
В папке инициализируем package следующей командой

npm init