Frontend-разработчик. От Middle до Senior

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

• JavaScript. Основы программирования (60 часов)
  • Тема 1. Основные понятия языка JavaScript.

    Структура программы. Файлы. Выполнение программы в разных средах: в браузере и в интерфейсе командной строки (nodejs CLI). Жизненный цикл приложения на JavaScript.

  • Тема 2. Зависимости.

    Некоторые базовые инструменты (npm, yarn, turbo, nodemon, eslint). Формат JSON. Структура и назначение файла package.json

  • Тема 3. Переменные и области видимости JavaScript.

    Типы данных. Контроль типов данных. Приведение типов. Применение Unicode в JavaScript.

  • Тема 4. Функции.

    Стандартные и стрелочные функции. Возврат значения функцией. Анонимные функции (лямбды). Модели вызова функции. Передача и привязывание аргументов. Аргументы по умолчанию.

  • Тема 5. Функция как тип данных.

    Замыкания и коллбэки. Таймер. Веб-воркеры.

  • Тема 6. Управляющие конструкции JavaScript.

    Ветвление, кейсы, циклы с предусловием и постусловием, со счётчиком и без счётчика. Тернарный оператор. Контроль ошибок (try..catch).

• Javascript. Событийно-ориентированное программирование (110 часов)
  • Тема 1. Объектная модель документа.

    Манипулирование элементами по их селекторам (querySelector). Изменение свойств каскадных стилей. Создание элементов и фрагментов DOM (documentFragment).

  • Тема 2. События.

    Слушатели событий. Всплывание событий. Кастомные события. Создание примера приложения с коммуникацией компонентов.

  • Тема 3. Считывание информации из внешнего интернет-ресурса.

    Кросс-доменные запросы. Интерфейс fetch. Считывание и интерпретация данных в формате JSON.

  • Тема 4. Строки

    Операции над строками. Дополнение строки до заданной длины. Обращение и конкатенация строк. Иммутабельность строк. Регулярные выражения. Валидация полей формы с помощью регулярных выражений.

  • Тема 5. Ссылочные типы данных. Массивы

    Итерация по массиву. Генерация непрерывного массива. Маппинг и свёртка. Синхронные коллбэки и предикаты в массивах: сортировка и фильтрация.

  • Тема 6. Создание объектов (plain JavaScript objects).

    Связь с форматом JSON. Сериализация объектов. Массивоподобные объекты. NodeCollection: новый взгляд на старую проблему. Создание объектов с помощью литерала, прототипа и класса. Энумерабельность и итерабельность.

  • Тема 7. Канвас. Динамическое рисование на холсте с помощью JavaScript.

    Создание паттернов для фонового изображения веб-страницы. Сходства и различия с манипулированием SVG-элементами.

  • Тема 8. Библиотеки

    Использование функциональности сторонних библиотек для создания пользовательского интерфейса и манипулирования данными (на примере jQuery). Библиотеки манипулирования датами (на примере Moment).

  • Тема 9. Веб-компоненты и шаблонизаторы на клиентской стороне.

    Использование Shadow DOM и веб-компонентов для расширения функциональности веб-документа. Шаблонизаторы: императивный и декларативный подход. Использование шаблонизатора на клиентской стороне (на примере Handlebars).

  • Тема 10. Подготовка и размещение итогового проекта.
• Javascript. Технологии профессионального программирования. (130 часов)
  • Тема 1. Развитие стандарта JavaScript.

    Стандарт ECMAScript. Ecma International, Technical Committee 39 и эволюция предложений (proposals). Преобразование JavaScript-кода с помощью транспилятора babel. Плагины и пресеты. Типизация. Типизированные массивы. Понятие буфера и потока.

  • Тема 2. Модульность

    Модульность в экосистеме JavaScript/NodeJS. Импорт и экспорт в стиле CommonJS и нативная ES2015-модульность. Модули в Node.js и в браузере. Асинхронная загрузка модулей. Изоморфный JavaScript-код. Сбор проекта с помощью бандлера - на примере Webpack.

  • Тема 3. Асинхронное программирование на JavaScript

    Коллбэки и ад коллбэков. Миграция к промисам. Промисификация и асинхронные функции. Синхронное ожидание промисов (async/await). Функции-генераторы. Связь генераторов и итераторов.

  • Тема 4. Элементы функционального программирования на JavaScript

    Цепочки методов и функциональный подход к манипулированию элементами DOM. Функциональный и императивный стиль в манипулировании массивами: forEach vs for of Лямбды (безымянные функции). Функции высшего порядка. Контекст this: стандартные функции JavaScript и стрелочные функции. Иммутабельность функций. Чистые функции. Немедленно вызываемые функции (IIFE). Паттерны вызова функций и паттерны передачи аргументов (внедрение зависимостей). Рекурсия и безымянная рекурсия. Обход древовидных структур.

  • Тема 5. Элементы объектно-ориентированного программирования на JavaScript.

    Проектирование структуры предметной области. ORM - Object Relational Mapping. Геттеры и сеттеры. Объекты как коллекции свойств и пространства имён. Мутабельность объектов. Встроенные объекты. Проектирование цепочки методов. Прототипы объектов. Функции-фабрики объектов и функции-конструкторы. Классы в современном JavaScript. Конструкторы. Реализация наследования. Обращение к классу-родителю с помощью super.

  • Тема 6. Элементы метапрограммирования на JavaScript

    Рефлексия. Объект Reflect. Создание прокси и ловушек. Символы. Создание итератора с помощью символа Symbol.iterator

  • Тема 7. Проектирование модульных тестов.

    Подготовка наборов кейсов. Модульное тестирование и интеграционное тестирование. Страничное, межстраничное, логическое тестирование. Тестирование клиентского сценария. Тестирование событий, возникающих в интерактивных элементах управления. Асинхронное и промисифицированное тестирование. Тестирование с помощью автоматизации управления браузером на примере Chromium / Puppeteer.

• Использование JavaScript-фреймворков. Реактивное программирование (40 часов)
  • Тема 1. Фреймворки и библиотеки.

    Современная экосистема фреймворков JavaScript.

  • Тема 2. React как библиотека для создания интерфейсов на основе повторно используемых компонент.

    Язык JSX. Байндинг и реактивность. Состояние. Принципы управления компонентами и их событиями. Жизненный цикл компонентов.

  • Тема 3. Фреймворк Vue.

    Встроенный шаблонизатор и система компонентов.

  • Тема 4. Фреймворк Elm.

    Разработка декларативных интерфейсов.

  • Тема 5. Создание типичного фронтэнд-приложения, работающего с серверным API (на примере плеера видеороликов или микроблога).
• Дипломное проектирование (40 часов)