about.pug

+b.courses-about.courses-mix
  +course-nav-header

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

  p Курс посвящён разработке на Vue.js от использования его как небольшой библиотеки до создания современного SPA приложения. 

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

  p
    i Курс будет посвящён Vue 2, так как Vue 3 пока находится в beta версии и нет устоявщихся практик. Тем не менее, учтены предстоящие изменения, а в конце курса будут рассмотрены основные нововведения и изменения.

how.pug

+b.courses-how.courses-mix
  +course-nav-header

  p.
    На курсе у нас будет семь насыщенных занятий, на которых мы будем изучать Vue, постепенно создавая на нем приложение.

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

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

  p.
    Затем мы изучим официальную библиотеку роутинга — какие возможности она предоставляет, обсудим каким образом можно реализовать проверку авторизации пользователя. Добавим сборку Vue приложения с помощью Webpack и увидим какие ещё приятные возможности привносит эта связка и использование однофайловых компонентов. Разберёмся как можно использовать другие шаблонизаторы, препроцессоры, и каким образом использовать локальные стили или CSS-модули.
    
  p.
    Следующим шагом мы научимся использовать сторонние плагины в приложении, без головной боли и возможных сайд-эффектов. Вы увидите, что часто нет необходимости искать «vue-версии» плагинов, когда можете самостоятельно реализовать компонент-обёртку, а затем переиспользовать в других местах вашего приложения. Обсудим возможные способы валидации данных.
  
  p.
    В конце мы познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex: когда он нужен, какие принципы заложены и как с ними отличается подход к работе приложения. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты. Задеплоим наше приложение на онлайн-сервис.

index.pug

extends ../../layout

block course
  -
    let items = [
      {id: 'course-about', title: 'О курсе'},
      {id: 'course-learning-process', title: 'Как организовано обучение?'},
      {id: 'course-program', title: 'Основные темы программы'},
      {id: 'course-result', title: 'Результат обучения'},
      {id: 'course-prerequisites', title: 'Предварительные требования'},
      {id: 'course-teachers', title: pluralize(teachers.length, t('courses.frontpage.teachers_title'))},
      // {id: 'course-testimonials', title: 'Мнения профессионалов'},
      {id: 'course-guarantee', title: 'Гарантия'},
      {id: 'course-company', title: 'Для компаний'}
    ];
  +course-nav({items: items})

  include about
  include how
  include program
  include result
  include prerequisites

prerequisites.pug

+b.course-prerequisites.courses-mix
  +course-nav-header

  +e('ul').list-iconic
    +e('li').js Знание JavaScript, включая ООП, классы.
    +e('li').internet Интернет 256kb/s или быстрее для видео.

program.pug

+b('section').courses-parts.courses-mix
  +course-nav-header

  +b.tabbed-pane._01

    +e.body._01
      +e('h3').tab-title
        span Блок 1
      p.
        Изучаем основные возможности Vue и их применение, компонентную разработку приложений.

      ul
        li
          p
            strong Основы Vue.js
          ul
            li Шаблоны Vue
            li Реактивность во vue.js, вычислимые свойства, отслеживание изменений, Virtual DOM
            li Обработка событий.
            li Работа с формами.
            li Анимации.
            li Хуки жизненного цикла.
        li
          p
            strong Компоненты во Vue.js
          ul
            li Компонентный подход
            li Создание компонентов
            li Взаимодействие компонентов

    +e.body._02
      +e('h3').tab-title
        span Блок 2

      p
        b Разработка приложений на Vue.js

      p.
        Современный подходе к разработке frontend-приложений, научимся создавать одностраничные приложения на Vue.js.

      ul
        li
          p
            strong Сборка приложения
          ul
            li Организация сборки, инструменты
            li Однофайловые компоненты
            li Scoped styles
            li Конфигурирование webpack для разработки на vue.js
        li
          p
            strong Vue CLI
          ul
            li Создание приложений с @vue/cli
            li Разработка и сборка приложения через vue-cli-service
            li Конфигурирование сборки и приложения

        li
          p
            strong Разработка одностраничных приложений на Vue.js
          ul
            li Одностраничные приложения (SPA), отличия от традиционных веб-приложений
            li Маршрутизация на клиенте, vue-router
            li Параметризированные и вложенные маршруты
            li Взаимодействие с серверным API


    +e.body._03
      +e('h3').tab-title
        span Блок 4

      p
        b Глобальные взаимодействия, Vuex

      p.
        Изучим подходы к глобальному взаимодействию компонентов приложения и хранению данных, разберёмся с шиной событий и способах её реализации, с концепцией Flux и библиотекой Vuex.
        Рассмотрим какие есть способы реализации серверного рендеринга для Vue и другие продвинутые темы.

      ul
        li Где и как можно хранить глобальные данные в приложении
        li Корневой компонент
        li Vue.oservable;
        li Шина событий и способы её реализации
        li Паттерн Flux: зачем он нужен и его реализация с библиотекой vuex
        li Модули во vuex;
        li Работа с формами во vuex
        li Библиотека vuex-persist
        li Дополнительные способы взаимодействия компонентов во vue.js
        li Библиотеки vue-portal и teleport


    +e.body._03
      +e('h3').tab-title
        span Блок 5

      p
        b Архитектурные аспекты проекта

      p.
        Различные аспекты разработки приложения на уровне проекта. 

      ul
        li Архитектура приложения и организации работы с API
        li Аутентификация и авторизация
        li Посредники (middlewares) в маршрутизации
        li Обработка ошибок
        li Тестирование компонентов и приложения, библиотека vue-test-utils



    +e.body._03
      +e('h3').tab-title
        span Блок 6

      p
        b Куда развиваться дальше

      p.
        Рассмотрим проблемы SEO в SPA приложениях и способы их решения. Сравним prerender и server-side rendering. Разберём фреймворк NuxtJS и его возможности.

      p.
        Попробуем библиотеку vue-i18n для решения задач интернационализации приложения.

      p.
        Поговорим о Vue 3, разберём основные нововведения и изменения.

result.pug

+b.courses-result.courses-mix
  +course-nav-header

  +e.body
    ol
      li Вы будете знать как интегрировать Vue в уже существующие приложения и представлять чёткий путь как итерационно переписывать проект, постепенно избавляясь от старого кода.
      li Вы сможете создавать собственные компоненты для переиспользования в разных частях вашего приложения.
      li Вы будете понимать что не нужно всегда искать "vue-версии" плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
      li Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
      li Вы будете знать каким образом реализовывать SPA-приложения на Vue.
      li Вы будете представлять как реализовать централизованное хранилище для Vue
      li Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
      li Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.