Курс по Vue.JS

Набор на курс по Vue.JS

Программа

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

  1. Знакомимся с Vue, узнаем как он работает. Разбираем как легко и быстро можно начать его использовать. Изучаем все основы и подступимся к компонентам и компонентному подходу в реализации приложения.
  2. Изучаем официальную библиотеку роутинга, обсуждаем каким образом можно реализовать проверку авторизации пользователя. Добавляем сборку Vue приложения с помощью Webpack.
  3. Научимся использовать сторонние плагины в приложении. Обсудим возможные способы валидации данных.
  4. Познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты.

Детали программы смотрите далее.

Набор в группы

В текущих группах мест нет.

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

На ваш email придёт письмо с информацией о дате и деталях программы.

Стоимость обучения – порядка 9500 руб. Время обучения: 2.5 недели, точные даты будут при открытии записи.

Этот курс ведёт Александр Соколов.

Основные темы программы

  • Блок 1
  • Блок 2
  • Блок 3

Блок 1

Vue, основы и использование в существующих приложениях

Знакомимся с Vue, разбираемся как его подключать и начинать использовать в существующих приложениях. Разбираемся каким образом работает реактивность данных, что за возможности есть у Vue для отслеживания изменений в них. Изучаем как работать с условиями, циклами, стилями, событиями и формами. Изучаем азы работы с компонентами: как их создавать, как использовать, как передавать в них данные и отслеживать возникающие события. Рассматриваем динамическое переключение компонентов.

  • Vue, принцип работы реактивности.
  • Варианты подключения и сборок, Vue-devtools.
  • Синтаксис шаблонов, работа с атрибутами.
  • Экземпляр Vue, свойства, методы и хуки жизненного цикла.
  • Вычисляемые свойства компонента, отслеживание данных.
  • Работа с условиями, циклами.
  • Работа с классами и стилями.
  • Обработка событий.
  • Работа с формами.
  • Компоненты: как создавать, как использовать, как передавать в них данные и отслеживать возникающие события.
  • Динамическое переключение компонентов.

Блок 2

Vue-router, однофайловые компоненты и реализация SPA с шагом сборки Webpack

Знакомимся с Vue-router — официальной библиотекой для роутинга Vue. Изучаем как работать с маршрутами, какие хуки добавляет библиотека и где они пригодятся. Узнаём плюсы использования шага сборки с помощью Webpack и однофайловых компонентов: как использовать шаблонизаторы, препроцессоры, локальные стили. Разбираемся как использовать сторонние плагины, как создавать собственные компоненты-обёртки для них и как при необходимости получать доступ к DOM-элементу.

  • Vue-router, работа с маршрутами, как передавать параметры, хуки маршрутизации.
  • Однофайловые компоненты и их возможности.
  • Асинхронная загрузка компонентов.
  • Использование слотов в компонентах.
  • Использование сторонних плагинов и создание компонентов-обёрток для них.
  • Как получить доступ к DOM-элементу.

Блок 3

Пути дальнейшего развития приложения

Изучаем каким образом можно реализовать единое хранилище состояния с помощью Vuex. Рассмотрим какие есть способы реализации серверного рендеринга для Vue. Каким образом тестировать компоненты.

  • Vuex, когда необходим, как мутировать состояние и как его получать, работа с формами.
  • Способы реализации SSR в Vue.
  • Тестирование компонентов.

Как проходит обучение?

Курс будет состоять из собрания и пяти занятий. Нам их будет вполне достаточно.

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

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

Затем мы изучим официальную библиотеку роутинга — какие возможности она предоставляет, обсудим каким образом можно реализовать проверку авторизации пользователя. Добавим сборку Vue приложения с помощью Webpack и увидим какие ещё приятные возможности привносит эта связка и использование однофайловых компонентов. Разберёмся как можно использовать другие шаблонизаторы, препроцессоры, и каким образом использовать локальные стили или CSS-модули.

Следующим шагом мы научимся использовать сторонние плагины в приложении, без головной боли и возможных сайд-эффектов. Вы увидите, что нет необходимости искать «vue-версии» плагинов, когда можете самостоятельно реализовать компонент-обёртку, а затем переиспользовать в других местах вашего приложения. Обсудим возможные способы валидации данных.

В конце мы познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex: когда он нужен, какие принципы заложены и как с ними отличается подход к работе приложения. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты.

Результат обучения

  1. Вы будете знать как интегрировать Vue в уже существующие приложения и представлять чёткий путь как итерационно переписывать проект, постепенно избавляясь от старого кода.
  2. Вы сможете создавать собственные компоненты для переиспользования в разных частях вашего приложения.
  3. Вы будете понимать что не нужно всегда искать "vue-версии" плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
  4. Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
  5. Вы будете знать каким образом реализовывать SPA-приложения на Vue.
  6. Вы будете представлять как реализовать централизованное хранилище для Vue
  7. Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
  8. Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.
  9. Вы будете знать что Vue не привносит в код вашего проекта никакой "магии".

Системные требования

Windows или Mac поддерживаются полностью.

Под Linux онлайн-участие работает, но для просмотра записей занятий нужен Dual Boot в Win/MacOS.

Для онлайн-общения желателен интернет от 256kb/s.

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

  • Знание JavaScript и знакомство с CSS/HTML.
  • Желательно понимание английского языка. По ходу курса будут предлагаться для дополнительного ознакомления материалы на английском, всё самое важное мы пройдём на занятиях, но желательно, чтобы вы могли их понять.

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.