phone_picture

Цель курса

Рассмотреть решение главных задач, возникающих при создании Single Page Application, таких как построение архитектуры приложения, работа с пользователями и авторизационными токенами, server side rendering и т.п.

Для продуктивного участия желательно прохождение базового курса по Vue. Однако, если вы уже знакомы с основами работы с vuex, vue-router, axios или fetch, можно начинать с текущей ступени.

Программа курса

За новшествами следуем аккуратно – в курсе используется Vue 3, но с классическим options api.

урок 1

  • Анализ SPA после vue level 1
  • Улучшение архитектуры приложения
  • Адекватная работа с axios
  • Обработка и красивый показ ошибок
  • Нюансы работы с Vue Router
  • Дочерние маршруты, хуки и события

урок 2

  • Работа с авторизацией в SPA
  • Создание модуля vuex/user
  • Взаимодействие с серверным API
  • Создание закрытых страниц
  • Meta-данные маршрутов
  • Проверка прав доступа

урок 3

  • Улучшение тренировочного SPA
  • Изучение серверного API
  • Авторизация и JWT-токены
  • Личный кабинет пользователя
  • Модуль рейтинга товаров
  • SPA и проблемы с SEO. Пререндеринг

урок 4

  • Идеи server side rendering
  • Сервер на node.js + express
  • SSR шаг за шагом на простом примере
  • Vue Server Renderer
  • Client и server entries
  • Настройка vue-cli и webpack

урок 5

  • SSR в более сложном SPA
  • Проблемы синглтонов из es-модулей
  • Работа с роутером и хранилищем
  • Настройка axios
  • Модуль vuex для head-раздела
  • Наполнение базового шаблона

урок 6

  • Схемы дополнительной оптимизации
  • Настройка кода ответа сервера
  • Предзагрузка данных и состояния
  • Кэширование запросов
  • Кэширование страниц
  • Разделение CSS (file, head style)

урок 7

  • Доработка тренировочного SPA
  • Гидратация клиентской части
  • Альтернативная сборка проекта
  • SSR и WebpackManifestPlugin

урок 8

  • Подведение итогов
  • Перевод проекта на Vue 2
  • Выборочный SSR для страниц
  • Идеи SSR в не node-окружениях

Преподаватель курса

Дмитрий Лаврик

Профессиональный веб-разработчик

Опыт работы в сфере разработки сайтов более 10 лет. Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.

Опытный преподаватель

Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.

Дмитрий Лаврик

Что вы получите

8 онлайн уроков

По понедельникам и четвергам с 20:00 МСК. Продолжительность каждого занятия около двух часов. На уроках разбираются домашние работы учеников и новый материал.

Видеозаписи всех уроков

Если вы по какой-то причине не смогли посетить урок, не переживайте, спустя пару часов после окончания занятия он доступен в записи в хорошем качестве :)

Материалы и исходники

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

Домашние задания

После каждого урока выдаётся домашнее задание, которое нужно сделать для закрепления пройденного материала. Плохие оценки не ставим – только конструктивные комментарии :)

Обратную связь от преподавателя

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

Доступ в закрытую группу

Во время прохождения курса все участники тусуются в рамках закрытой площадки, где помогают друг другу, а также задают вопросы преподавателю и получают ответы на них.

Обзор курса

Внимание! Для прохождения данного курса необходимы начальные знания Vue: понимание компонентного подхода, умение работать с vuex, vue-router, взаимодействовать с серверным api (fetch || axiox).

Если вы хотите ознакомиться с мыслями о главной теме курса,

посмотрите видео, расположенное рядом

В нём рассказывается, на каком этапе разработчик сталкивается с SSR и какие трудности испытывает при попытке освоения данной темы.

Запись закрыта, есть более новая версия данного курса.

Перейти к курсу Vue Level 2.

Часто задаваемые вопросы

Какой начальный уровень знаний необходим

Уровень программы базового курса Vue - умение создавать простейшие single page applications на vue, vuex, vue-router, (fetch || axios).

Насколько глубоко рассматривается backend

По минимуму. При работе с API мы берём его описание и используем на чёрный ящик. А для SSR будет создан один файлик на node.js + express.

Почему для SSR не берём Nuxt

Он не даст вам понимания SSR. Ведь server side rendering может понадобиться и в уже существующем проекте, сделанном без nuxt. Кроме того, если нормально освоить Vue, то nuxt осваивается без проблем.

Какую версию Vue будем использовать

Конечно, Vue 3, уже пора! В прочем, перевести наше приложение и SSR на Vue 2 особого труда не составит. На восьмом уроке постараемся успеть сделать это :)

Почему manifestPlugin лишь к 7 уроку

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

А SPA в PWA случаем не превратим

Нет, чтобы нормально рассказать про serviceWorker, стратегии кеша, sync из offline-режиме, workbox, нужно минимум 3-4 урока.

Будут ли записи уроков

Да, конечно. Видеозапись и материалы выкладываются в течение нескольких часов после окончания урока.

Будут ли ещё потоки этого курса

Будут, но, точно, не скоро. Сложные курсы стартуют раза один-два в год.