Rails + VueJS: современный фронтенд. Онлайн-интенсив.

🎓 Требования к участникам

1. Знание Ruby on Rails на junior уровне и выше 💪. Желательно успешно закончить курс Thinknetica.
2. Общие знания JavaScript.

🎥 Презентация

Ссылка на презентацию

💯 Результат курса

На онлайн-интенсиве Вы научитесь эффективно использовать связку Rails + VueJS, что позволит разрабатывать современные веб приложения (SPA, SSR), которые имеют реактивный User Interface (UI) и понятный Data Flow. Структура таких приложений и кодовая база хорошо организованы, что позволяет быстро развивать функционал в любых масштабах.

💻 Практические задания

В процессе курса вы будете создавать SPA-интерфейс CRM-системы сервисного центра и на этом приложении отработаете все основные приемы работы с VueJS.

📙 Программа

Занятие №1

📗 Теория:

1.1. Введение в Frontend Framework'и.

1.2. Просто о сложном: ECMAScript, JavaScript, transpiling, polyfills, BabelJS.

1.3. Создание Rails проекта с Webpacker и рассмотрение его внутренностей. Подключение VueJS к Rails.

1.4. Варианты аутентификации Rails / VueJS приложения.

1.5. Взаимосвязь Rails и VueJS приложений. Точки соединения и необходимые шаги для разделения монолитного приложения в будущем.

🔧 Инструменты: Rails 6, devise, yarn, webpack, webpacker, vueJS

💪 Получаемые навыки:

• Понимание современных возможностей JavaScript,

• Умение пользоваться пакетным менеджером JS - Yarn,

• Умение устанавливать Webpacker и добавлять в уже существующее Rails приложение,

• Установка VueJS в Rails приложение,

• Глубокое понимание взаимодействия Rails и VueJS приложения.

Занятие №2.

📗 Теория:

2.1. Конструктор Vue.

2.2. Single File Component (SFC). Структура и регистрация компонентов.

2.3. Синтаксис компонентов.

2.4. Жизненный цикл компонента. Организация связи с Backend.

🔧 Инструменты: axios, pug, promises, async / await

💪 Получаемые навыки:

• Создание и монтирование простого VueJS приложения,

• Знание синтаксиса и жизненного цикла компонентов VueJS,

• Разработка компонентов VueJS,

• Передача данных с Backend Rails API.

Занятие №3.

📗 Теория:

3.1. Свойства компонентов. Передача событий и данных между компонентами.

3.2. Слоты.

3.3. Динамические компоненты и асинхронные компоненты.

3.4. Анимация.

3.5. Quasar Framework.

💪 Получаемые навыки:

• Организация связи между компонентами,

• Создание более гибких компонентов с применением слотов,

• Создание анимированных компонентов,

• Подключение к проекту современного, компонентного CSS фреймворка Quasar.

Занятие №4.

📗 Теория:

4.1. Миксины (примеси) VueJS.

4.2. Vue-router. Маршруты и навигация.

4.3. Переход между маршрутами и загрузка данных с Backend.

🔧 Инструменты: Vue-router, action cable

💪 Получаемые навыки:

• Построение роутинга для VueJS приложения,

• Построение дружелюбного UI (user interface) приложения,

• Создание миксинов для приложения VueJS,

• Организация связи между VueJS и Rails через веб-сокет.

Занятие №5.

📗 Теория:

5.1. Плагины VueJS.

5.2. Состояние приложения. Централизованное хранилище.

5.3. Установка Vuex.

5.4. Геттеры, мутации, действия, модули Vuex.

🔧 Инструменты: Vuex

💪 Получаемые навыки:

• Разработка плагинов для приложений VueJS,

• Оргнизация централизованного хранилища приложения.

Занятие №6.

📗 Теория:

6.1. Полезные инструменты: cli, i18n, dotenv.

6.2. Плагин Prerender SPA.

🔧 Инструменты: vue-cli, quasar-cli, vue-i18n, prerender-spa-plugin

💪 Получаемые навыки:

• Настройка окружения,

• Интернационализация приложения,

• Пререндеринг страниц.

Занятие №7.

📗 Теория:

7.1. Обзор технологии SSR: цели и область применения.

7.2. Архитектура SSR приложения.

7.3. Обзор SSR фреймворков.

7.4. Разработка SPA + SSR приложения.

🔧 Инструменты: NuxtJS, Quasar SSR

💪 Получаемые навыки:

• Создание SSR приложений.

Занятие № 8.

• Vue 3: что нового?

• Подведение итогов и ответы на вопросы.