Начало занятий в июле

Разработчик JavaScript

Общая стоимость: 32 000 ₽
В месяц: 9 000 ₽
4 часа в неделю
4 месяца
О курсе

Курс “Разработчик JavaScript” предназначен для для разработчиков уровня Junior и Middle, которые имеют общее представление и опыт работы с Web и хотят узнать больше о мире современного JavaScript.
В рамках курса мы рассмотрим ключевые особенности JavaScript - замыкания, особенности ООП и SOLID в JS, функционального и реактивного программирования, Promises и другие возможности ES6, Event Loop, а также разберём DOM API, Ajax и события в рамках разработки в браузере, и, конечно, прокачаем навыки в HTML и CSS. Научимся писать код на диалектах JavaScript, таких как TypeScript и JSX.

Помимо разработки клиентской части в браузере, мы также будем использовать серверную платформу NodeJS и её окружение. Изучим популярный фреймворк Angular с реактивными возможностями RxJS, а также библиотеки для написания web-приложений - ReactJS, Redux и современные подходы к разработке UI, такие как Polymer и набирающий звёзды Vue.

Мы будем собирать проекты для production с помощью Webpack, хранить данные в MongoDB, использовать TDD подход и писать тесты на различных фреймворках и уровнях.

По окончании курса студент будет:
- Понимать принципы работы современных JavaScript фреймворков и библиотек
- Уметь применять паттерны проектирования (Event Loop, Flux, Immutable, Virtual DOM, -
- Dependency Injection, Observables)
- Знать подходы при проектировании, организации, контроля состояния и тестирования серверных и клиентских приложений
- Выбирать подходящие инструменты для проекта
- Тестировать проект unit-тестами на разных уровнях
- Создавать веб-приложения с использованием современных технологий

Программа курса
1
JavaScript
2
UI Libraries
3
Angular
4
Практическая работа
Занятие 1: Введение в курс
Участники смогут:
- Познакомиться с преподавателем и с программой курса, понимать как она построена и какие полезные навыки они получат
- Вспомнить основные возможности языка JavaScript
- Применять техники языка, которые помогут при изучении фреймворков
ДЗ
Написать функцию суммирования значений. Написать функцию sum, которая может быть исполнена любое количество раз с не undefined аргументом. Если она исполнена без аргументов, то возвращает значение суммы всех переданных до этого значений.

sum(1)(2)(3)....(n)() === 1 + 2 + 3 + ... + n
ДЗ
Написать функцию promiseReduce. Которая принимает массив promise-ов в качестве аргументом и возвращает promise, который будет ожидать исполнение всех переданных promise-ов и выполнять reduce-функцию для каждого итогового значения (по аналогии с reduce).

var promise0 = Promise.resolve(0),
promise1 = Promise.resolve(1),
promise2 = Promise.resolve(2)

promiseReduce([promise0, promise1, promise2], sumFn, 0).then(res => console.log(res))
// => 2

ДЗ
Написать polyfill для функции Object.create.
Занятие 2: JavaScript. Работа с браузером
Участники смогут:
- Решать специфичные для браузерной разработки задачи на языке JavaScript
- Освоить и вспомнить теорию, которая будет базисом для последующих уроков
ДЗ
Написать функцию getPath. Написать функцию getPath, находяющую уникальный css-селектор для элемента в документе

getPath(node) // => "div>div:nth-child(2)>span"
ДЗ
Написать функцию promiseReduce. Создать функцию promiseReduce для асинхронных функций. Она принимает массив promise-ов в качестве аргументов и возвращает promise. Функция дожидается исполнения всех переданных promise-ов поочередно, ожидая их завершения. В результате выполняется reduce-функция для каждого итогового значения.

var promise0 = Promise.resolve(0),
promise1 = Promise.resolve(1),
promise2 = Promise.resolve(2)

promiseReduce(
[promise0, promise1, promise2],
(a, b) => a + b,
0
)
.then(res => console.log(res)) // 3

Проще говоря, promiseReduce выполняет тоже самое, что и Array.prototype.reduce. Разница в том, что reduce работает с массивом значений, а promiseReduce с массивом promise-ов.

(изменено)
ДЗ
Написать функцию intersect. Написать функцию, которая определяет, пересекаются ли два элемента на странице
intersect(node1, node2)
Занятие 3: Основные концепции Node - Modules, Events, Errors
Участники смогут:
- Запускать скрипты на платформе Node
- Работать с базовыми понятиями Node - Events и Errors
- Использовать ES6 Imports и стандартный способ загрузки модулей
ДЗ
Запустить локально тестовый Web Server. Два файла - log.js и server.js. Проект запускается командой `node server`.

В файле log.js нужно создать и экспортировать экземпляр EventEmitter. Этот объект должен иметь listener на событие 'request', который будет выводить в консоль параметры аргумента - объекта request (например, url запроса).

Внутри server.js нужно импортировать объект log из log.js и запустить простейший web server. На каждый запрос к серверу на объекте log нужно триггерить событие 'request' с параметром -
объектом запроса.

ДЗ
Написать функцию promisify. Написать функцию promisify, которая будет работать с callback функциями библиотек Node.
Возможные callback функции:
- default - вызывается с ошибкой или результатом
- single - только с ошибкой

Примеры API с callbacks:

// default
fs.readFile('/etc/passwd', (err, data) => {
if (err) throw err
console.log(data)
})

// single
fs.access('/etc/passwd', fs.constants.R_OK,
(err) => {
console.log(err ? 'no access!' : 'read')
})


Занятие 4: Стандартная библиотека Node - EventLoop, Streams, HTTP
Участники смогут:
- Ориентироваться в понятии EventLoop и особенностях работы Timers
- Использовать классы, объекты и функции модуля Streams
- Работать c HTTP запросами в Node
ДЗ
Создать скрипт tree для вывода списка файлов и папок. Создать скрипт tree для вывода списка файлов и папок node_modules. Вызовы файловой системы должны быть асинхронными. Результатом работы должен быть объект с 2 массивами - files & folders
Добавить входной параметр - путь до папки
Добавить возможность выполнять этот скрипт через команду npm run tree -- ...
Занятие 5: Пакетный менеджер NPM и возможности package.json. Node Best Practices
Участники смогут:
- Работать с пакетным менеджером NPM
- Управлять зависимостями и автоматизировать задачи с помощью package.json
- Различать корректные и ошибочные техники при написании серверного JavaScript кода
- Работать с дочерними процессами в Node
ДЗ
Написать приложение с использованием потоков на Node. Написать приложение для работы со стримами:
Readable, генерирующий случайные числа,
Transformable, добавляющий случайное число к первому и
Writable, выводящий в консоль данные.
Данные должны “течь” readable -> transformable -> writable
Используйте highWaterMark для примера ограничения внутреннего буффера.
ДЗ
Дополнительное задание - создать собственный тип ошибки. С помощью process.on('uncaughtException')
перехватить и залогировать собственный тип ошибки (без использования конструктора Error, но включая стэк)
Занятие 6: Express - Web-сервер на JS, Стек MEAN, MongoDB
Участники смогут:
- Создавать простые приложения с использованием библиотеки Express, а также базы данных MongoDB
ДЗ
Написать приложение, которое будет запрашивать RSS рассылку. Написать приложение, которое будет запрашивать RSS рассылку, парсить XML и сохранять документы в БД.
Занятие 7: Построение Rest API, TDD и Unit-тестирование с Jest
Участники смогут:
- Понимать и добавлять общие стандарты создания API
- Писать и запускать тесты для серверного JavaScript
ДЗ
Реализовать функцию утилиты series, используя подход TDD. Требуется написать Promise-образную утилиту series, которая вызывает переданные аргументы-функции по цепочке.
Вызов утлиты имеет вид:

series((next) => {/* ... */}, (next) => {/* ... */});

Аргументы-функции имеют вид:

let seriesArgument = (next) => {
// TODO: some actions
if (/* нет ошибок */) {
next();
} else {
next('Something is wrong');
}
}

При вызове утилиты, она по очереди исполняет все аргументы-функции, передавая им в аргументы функцию next.
Если next исполняется с аргументом - это означает, что произошла ошибка и цепочка вызовов должна быть прервана. При этом должна выполниться последняя функция, переданная в качестве аргумента исходной утилите series.

Реализовать функцию series, используя подход TDD.
Результатом задания должен быть npm пакет со скриптом запуска тестов.
Тесты должны быть исключены из релизной версии пакета, при этом находиться в репозитории проекта.
Занятие 8: Основы React и JSX
Участники смогут:
- Настроить себе окружение для работы с React и использовать его
- Понимать и применять синтаксис JSX
- Создавать простые приложения на React
ДЗ
Начало работы с React. 1. Создать приложение с помощью create-react-app и сделать eject.
2. Сделать Header, Footer, Navigation компоненты, определить ссылки для Navigation, передать их через Header.
Занятие 9: Компоненты React. Lifecycle React-компонент, state и props
Участники смогут:
- Разрабатывать полноценные React-компоненты в различных стилях.
- Корректно использовать state и props."
ДЗ
Cамостоятельная работа в блоке React . Приложение для самостоятельной работы в блоке React - веб-приложение погоды. На странице приложения должна быть возможность добавлять города в список избранных. По каждому городу показывается информация о температуре, ветре, другие параметры.
Создать структуру приложения, создать компоненты контейнеры.
Занятие 10: Состояние приложения. Flux и Redux
Участники смогут:
- "Отличать основные понятия однонаправленной архитектуры Flux.
- Ориентироваться и использовать возможности redux - создавать actions, reducers, а также применять redux в связке в React
ДЗ
Реализовать компонент фильтра и поиска городов. Реализовать компонент фильтра и поиска городов. Данные по городам сохранять в хранилище Redux. Исходные данные хранятся как статичные json файлы.
Занятие 11: Routing в React. Оптимизация приложения
- Создавать систему routing для React приложений, использовать библиотеку react-router
- Использовать специальные возможности библиотеки для оптимизации отрисовки"
ДЗ
Доработка задания к Flux и Redux. Добавить страницу погоды по конкретному городу. При переходе на нее должнен меняться url, показываться информация на несколько дней вперед.
Занятие 12: Основы Vue
Участники смогут:
- Настроить себе окружение IDE, зависимости и библиотеки для создания проектов и работы с Vue
- Создавать простейшие приложения используя Vue
ДЗ
Работа с Vue. "Установить и настроить среду для работы с фреймворком Vue.
Написать приложение ""Hello World""."
Занятие 13: Компоненты, шаблонизатор и формы
Участники смогут
- Понимать синтаксис шаблонизаторы
- Создавать компоненты, описывать атрибуты элементов
ДЗ
SPA игра "Устный счет". В разделе Vue одна большая самостоятельная работа - SPA (Single Page Application) игра ""Устный счет"". Игра состоит из двух экранов - на первом экране пользователь выбирает настройки, которые будут использовать в игре - типы вычислений, сложность, время раунда. На этой же странице показывается статистика тренировок. Вторая страница - сама игра. Пользователь должен решить максимальное количество задач на заданное время. Мокапы - https://app.moqups.com/korzio@gmail.com/bTYyBLCtpU/edit/page/ad64222d5
Подготовить общую структуру приложения - компоненты контейнеры для страниц приложения.
Занятие 14: Routing и модели данных
Участники смогут:
- Описывать routing для Vue приложений
- Создавать формы, связывая шаблоны с моделями
ДЗ
Первая страница. Создать первую страницу приложения - форму настроек.
Занятие 15: Advanced Vue
Участники смогут:
- Применять анимацию в компонентах
- Создавать плагины
- Разбираться в тонкостях Change Detection
ДЗ
Вторая страница. Запрограммировать вторую страницу приложения - игру.
Настроить переходы по страницам.
Занятие 16: Обзор Polymer
Участники смогут
- Создавать custom elements, используя встроенные браузерные возможности
- Подключать и использовать Polymer для создания приложений
- Ориентироваться в веб спецификациях, на базе которых работает Polymer
Занятие 17: Все суть компоненты
Участники смогут:
- Подключать и использовать веб-компоненты в приложениях
- Создавать Polymer компоненты, решающие функциональные и композиционные задачи
ДЗ
Продолжение ДЗ занятия 14. С помощью Custom Elements сделать приложение для показа дерева элементов с помощью компонент tree и leaf

{
id: 1,
items: [{
id: 2,
items: [{ id: 3 }]
}]
}
Занятие 18: Специфика построения приложений на Polymer
Участники смогут:
- Разрабатывать приложения с использованием Polymer
- Понимать и определять структуру кода, использовать инструменты для сборки и оптимизации приложений
ДЗ
Отрисока файловой системы на сервере. Сделать страницу, в которой пользователь сможет ввести путь, отправить значение на сервер и получить данные.
Создать компоненты, необходимые для отрисовки дерева файловой структуры.
Занятие 19: Введение в Angular
Участники смогут:
- Настроить себе окружение IDE, а также скачать зависимости и библиотеки, коммандные утилиты для TypeScript и создания проектов для работы с Angular
- Различать TypeScript и JavaScript
- Писать и понимать код на языке TypeScript
ДЗ
Установить все необходимые зависимости для работы с angular - node, npm, tsc, angular-cli. Настройте IDE. Создать простое приложение “Hello Angular” используя angular-cli..
Занятие 20: Компоненты и директивы
Участники смогут:
- Декомпозировать макет страницы на компоненты
- Различать директивы и компоненты во фреймворке Angular
- Создавать простые директивы и компоненты
ДЗ
Создать компоненты контейнеры для приложения запоминания иностранных слов..
Занятие 21: Observables. RxJS
Участники смогут:
- Отличать основные понятия паттерна
- Observable, Observer, Subscriber, Operator
- Применять шаблон проектирования Observables, используя библиотеку RxJS
Занятие 22: Сервисы
Участники смогут создавать сервисы для получения, отправки и хранения данных для приложений Angular
ДЗ
Создать сервисы для работы с данными. Сервисы должны запрашивать данные из API и отрисовываться в приложении..
Занятие 23: Состояние приложения
Участники смогут разбираться в особенностях шаблона проектирования Dependency Injection и его имплементации в Angular
ДЗ
Разработать страницу упражнений приложения.
Занятие 24: Создание и управление формами в Angular
Участники смогут:
- Создавать формы, используя техники Dynamic Forms, Reactive Forms
- Описывать валидацию и другие функции для элементов форм
ДЗ
Создать компоненты и формы для тренировки запоминания слов.
Занятие 25: Routing
Участники смогут:
- Создавать Routing систему для приложений, используя внутренние подходы Angular - такие как Router, router-outlet и другие
- Понимать и применять хэндлеры навигации Guards
ДЗ
Для приложения запоминания иностранных слов создать routing - добавить ссылки на страницы и переходы между компонентами приложения.
Занятие 26: Тестирование в Angular
Участники смогут писать и запускать тесты для приложений Angular
ДЗ
Добавить и актуализировать тесты для компонент приложения.
Занятие 27: Сборка приложений для Production
Участники смогут:
- Настраивать сборку приложений Angular
- Использовать возможность сборки Server-side Rendering
ДЗ
Настроить universal рендеринг приложения..
Заключительный месяц курса посвящен проектной работе. Это то, чем интересно заниматься студенту на базе знаний, полученных на курсе.
При этом не обязательно закончить его за месяц. В процессе написания по проекту можно получить консультации преподавателей.

Проект должен стать примером кода, который можно показывать потенциальным работодателям.

Примеры тем проекта:
- Task Runner для создания части Continuous Integration цикла.
- Reciept Roulette для управления и рекомендации рецептов.
- Elements Dashboard - магазин Web компонент, созданных на одном из библиотек. В приложении можно видеть рейтинг, демонстрацию и документацию зарегистрированных элементов.

Возможные технологии для проектов - Node + Vue/Angular/React/Polymer.
Занятие 28: Обзор пройденных фреймворков и технологий
Участники смогут:
- Выделять характеристики проектов и окружения
- Решать задачи выбора и сравнения фреймворков, понимать их преимущства и недостатки
Преподаватели
Александр Коржиков
Разработчик JavaScript в международной финансовой корпорации ING, главный офис которой находится в Амстердаме. Занимается проектированием и поддержкой процессов WEB-разработки.

8 лет опыта разработки, в основном в области Front End. Большую часть карьеры программировал на JavaScript, начиная c 2010 года в компании Альпари. После этого работал в стартапе Comindware, в банке Тинькофф, в голландской IT компании Backbase.

Получил степень специалиста в университете по специальности прикладной математики и кибернетики.
Юрий Дворжецкий
Ведущий разработчик в Luxoft, кандидат физико-математических наук.
Программирует с начальных классов.

Разрабатывает на разных платформах: большие и маленькие проекты, высоконагруженные и очень красивые, многим известные и совсем специфические.

Влюблён в элегантность и оригинальность JavaScript, как классического, так и современного, во всех его проявлениях.

Сейчас разрабатывает Web-приложения c UI на React и Angular*.
Работодатели