VueJS *

Вокруг грядущего релиза Vue 3 поднято много шума. Это вызвало у меня желание помочь сообществу разработчиков подготовиться к выходу следующей версии данного популярного фреймворка. Надеюсь, мой рассказ поможет вам успешно встретить Vue 3 и ни о чём не беспокоиться.

English Version
Vuecket — веб-фреймворк, интегрирующий VueJS с клиентской стороны и Apache Wicket с серверной. Он берет все самое лучшее от обоих и позволяет разрабатывать full-stack приложения еще быстрее и проще. Конечно, это всё громкие слова, ведь Vuecket'у на данный момент (Август 2020) меньше месяца, и он не прошел ещё крещение «огнем и кровью» продакшн серверов. Но он уже включил в себя всё самое лучшее из наработанного нами при разработке нашего ключевого Open Source продукта Orienteer(платформа для быстрой разработки бизнес приложений). И именно из-за молодого возраста Vuecket'у нужна ваша помощь: поделитесь, пожалуйста, тем, что вам понравилось, что не очень, где нужна доработка и т.д.

Основные принципы, которыми мы руководствуемся при построении Vuecket'а:

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

Легко заметить, что эти принципы также применимы и к Vue.JS, и к Apache Wicket.

Итак, как именно мы будем знакомиться с Vuecket? Предлагаю сделать чат/гостевую доску с поддержкой Markdown. Не буду сильно томить: законченное приложение здесь, а код здесь.

Если процесс frontend разработки привёл вас к вопросу SEO оптимизации, то почти наверняка, вы столкнётесь с понятием Server Side Rendering (SSR) и тесно связанной с ним гидратацией (или регидратацией). Представленная ниже информация является переводом в очень свободной форме и дополненным некоторыми особенностями, с целью прояснить subject.

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

Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.

На предыдущем уроке нашего курса по Vue вы узнали о том, как создавать компоненты, и о том, как передавать данные от родительских сущностей дочерним с использованием механизма входных параметров (props). А что если данные нужно передавать в обратном направлении? Сегодня, в девятом уроке, вы узнаете о том, как наладить двустороннюю связь между компонентами разного уровня.

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

Как мы видим, у различных страниц общая шапка. Сайт.

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

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

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



→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты

Сегодня, в седьмом уроке курса по Vue, мы поговорим о вычисляемых свойствах. Эти свойства экземпляра Vue не хранят значения, а вычисляют их.

Сегодня, в шестом уроке курса по Vue, мы поговорим о том, как динамически стилизовать HTML-элементы, привязывая данные к их атрибутам style и привязывая к элементам классы.

Вступление

В этой статье мы с вами напишем свой собственный плагин для проектов на 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

Сегодня, в пятом уроке курса по Vue.js для начинающих, речь пойдёт о том, как обрабатывать события.

23 июля приглашаем на онлайн-митап сообщества разработчиков MSK VUE.JS.

В программе митапа:

• Разработка конструктора отчетов c Cube.js;
• 5 действенных техник оптимизации vue-приложений;
• Решение проблем REST API при помощи GraphQL.

Зарегистрироваться

Сегодня, в четвёртом уроке учебного курса по Vue, мы поговорим о том, как выводить на страницу списки элементов.

Продолжаем наш учебный курс по Vue, которые порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь).

На третьем уроке речь пойдёт об условном рендеринге. О том, как выводить что-либо на странице только в том случае, если выполняется какое-то условие.

Это второй урок учебного курса по Vue.js для начинающих, который рекомендует Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

Во втором уроке речь пойдёт о привязке атрибутов, о подключении данных, хранящихся в экземпляре Vue, к атрибутам HTML-элементов.



→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты

При написании больших фронтенд-приложений управление состоянием может стать довольно сложной и утомительной задачей.

Для Vue.js был разработан плагин Vuex, предназначенный для управления состоянием. По умолчанию в нем выстроена следующая структура папок:

Структура папок в хранилище Vuex

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

Сегодня мы предлагаем вашему вниманию перевод первого урока учебного курса по Vue.js для начинающих. Его порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

Оригинал курса на английском вышел на сайте vuemastery.com, мы подготовили для вас перевод на русский. Освоив первый урок, вы узнаете о том, что такое экземпляр Vue, и о том, как приступить к разработке собственных Vue-приложений.

Snail steampunk by Avi-li

Команда Mail.ru Cloud Solutions перевела статью о том, что означает ленивая загрузка в трех фронтенд-фреймворках: Angular, React и Vue.js. Далее текст от лица автора.

Один из моих любимых терминов на сегодняшний день — «ленивая загрузка». Честно говоря, когда несколько лет назад я его услышал, то улыбнулся. В этой статье рассмотрю, что именно означает этот термин применительно к трем наиболее часто используемым фронтенд-фреймворкам: Angular, React и Vue.js.