Проходил 9 июля в 20:00

Открытый вебинар Разработчик JavaScript
CSS препроцессоры

Открытый вебинар онлайн

На открытом вебинаре расскажем как настроить и использовать LESS и SASS/SCSS для ускорения профессиональной вёрстки, а также разберемся в возможностях и особенностях препроцессоров, что позволит эффективно использовать Mobile-first вёрстку, БЭМ и UI фреймворки.
Преподаватель
Юрий Дворжецкий

Запись

О курсе

Разработчик JavaScript
40 000 ₽
4 месяца
Начало 23 июля
Курс предназначен для разработчиков уровня Junior и Middle, которые имеют общее представление и опыт работы с Web и хотят узнать больше о мире современного JavaScript. По окончании курса вы сможете: - Понимать принципы работы современных JavaScript фреймворков и библиотек - Применять паттерны проектирования (Event Loop, Flux, Immutable, Virtual DOM, Dependency Injection, Observables) - Знать подходы при проектировании, организации, контроля состояния ...
Программа курса
Модуль 1
JavaScript
Модуль 2
UI Libraries
Модуль 3
Angular
Модуль 4
Практическая работа
JavaScript
Введение в курс
Участники смогут:
- Познакомиться с преподавателем и с программой курса, понимать как она построена и какие полезные навыки они получат
- Вспомнить основные возможности языка JavaScript
- Применять техники языка, которые помогут при изучении фреймворков
23 июля, 20:00 — 21:30
Домашние задания: 3
ДЗ
Написать функцию суммирования значений. Написать функцию 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.
JavaScript. Работа с браузером
Участники смогут:
- Решать специфичные для браузерной разработки задачи на языке JavaScript
- Освоить и вспомнить теорию, которая будет базисом для последующих уроков
26 июля, 20:00 — 21:30
Домашние задания: 3
ДЗ
Написать функцию 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)
Браузерные возможности JS
Основные концепции Node - Modules, Events, Errors
Участники смогут:
- Запускать скрипты на платформе Node
- Работать с базовыми понятиями Node - Events и Errors
- Использовать ES6 Imports и стандартный способ загрузки модулей
30 июля, 20:00 — 21:30
Домашние задания: 2
ДЗ
Запустить локально тестовый 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')
})


Стандартная библиотека Node - EventLoop, Streams, HTTP
Участники смогут:
- Ориентироваться в понятии EventLoop и особенностях работы Timers
- Использовать классы, объекты и функции модуля Streams
- Работать c HTTP запросами в Node
2 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создать скрипт tree для вывода списка файлов и папок. Создать скрипт tree для вывода списка файлов и папок node_modules. Вызовы файловой системы должны быть асинхронными. Результатом работы должен быть объект с 2 массивами - files & folders
Добавить входной параметр - путь до папки
Добавить возможность выполнять этот скрипт через команду npm run tree -- ...
Пакетный менеджер NPM и возможности package.json. Node Best Practices
Участники смогут:
- Работать с пакетным менеджером NPM
- Управлять зависимостями и автоматизировать задачи с помощью package.json
- Различать корректные и ошибочные техники при написании серверного JavaScript кода
- Работать с дочерними процессами в Node
6 августа, 20:00 — 21:30
Домашние задания: 2
ДЗ
Написать приложение с использованием потоков на Node. Написать приложение для работы со стримами:
Readable, генерирующий случайные числа,
Transformable, добавляющий случайное число к первому и
Writable, выводящий в консоль данные.
Данные должны “течь” readable -> transformable -> writable
Используйте highWaterMark для примера ограничения внутреннего буффера.
ДЗ
Дополнительное задание - создать собственный тип ошибки. С помощью process.on('uncaughtException')
перехватить и залогировать собственный тип ошибки (без использования конструктора Error, но включая стэк)
Express - Web-сервер на JS, Стек MEAN, MongoDB
Участники смогут:
- Создавать простые приложения с использованием библиотеки Express, а также базы данных MongoDB
9 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Написать приложение, которое будет запрашивать RSS рассылку. Написать приложение, которое будет запрашивать RSS рассылку, парсить XML и сохранять документы в БД.
Построение Rest API, TDD и Unit-тестирование с Jest
Участники смогут:
- Понимать и добавлять общие стандарты создания API
- Писать и запускать тесты для серверного JavaScript
13 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Реализовать функцию утилиты 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 пакет со скриптом запуска тестов.
Тесты должны быть исключены из релизной версии пакета, при этом находиться в репозитории проекта.
UI Libraries
Основы React и JSX
Участники смогут:
- Настроить себе окружение для работы с React и использовать его
- Понимать и применять синтаксис JSX
- Создавать простые приложения на React
16 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Начало работы с React. 1. Создать приложение с помощью create-react-app и сделать eject.
2. Сделать Header, Footer, Navigation компоненты, определить ссылки для Navigation, передать их через Header.
Компоненты React. Lifecycle React-компонент, state и props
Участники смогут:
- Разрабатывать полноценные React-компоненты в различных стилях.
- Корректно использовать state и props."
20 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Cамостоятельная работа в блоке React . Приложение для самостоятельной работы в блоке React - веб-приложение погоды. На странице приложения должна быть возможность добавлять города в список избранных. По каждому городу показывается информация о температуре, ветре, другие параметры.
Создать структуру приложения, создать компоненты контейнеры.
Состояние приложения. Flux и Redux
Участники смогут:
- "Отличать основные понятия однонаправленной архитектуры Flux.
- Ориентироваться и использовать возможности redux - создавать actions, reducers, а также применять redux в связке в React
23 августа, 20:00 — 21:30
Routing в React. Оптимизация приложения
- Создавать систему routing для React приложений, использовать библиотеку react-router
- Использовать специальные возможности библиотеки для оптимизации отрисовки"
27 августа, 20:00 — 21:30
Домашние задания: 2
ДЗ
Страница прогноза погоды. Добавить страницу погоды по конкретному городу. При переходе на нее должнен меняться url, показываться информация на несколько дней вперед.
ДЗ
Фильтр и поиск городов. Реализовать компонент фильтра и поиска городов. Данные о погоде в городах сохранять в браузерном хранилище.
Специфика построений приложений в React, Best Practices
Эффективно разрабатывать приложения на React, учитывая последние тенденции в разработке front-end. Использовать Advanced React.
Применять на практике Best-Practices разработки на React
Основы Vue
Участники смогут:
- Настроить себе окружение IDE, зависимости и библиотеки для создания проектов и работы с Vue
- Создавать простейшие приложения используя Vue
30 августа, 20:00 — 21:30
Домашние задания: 1
ДЗ
Работа с Vue. "Установить и настроить среду для работы с фреймворком Vue.
Написать приложение ""Hello World""."
Компоненты, шаблонизатор и формы
Участники смогут
- Понимать синтаксис шаблонизаторы
- Создавать компоненты, описывать атрибуты элементов
3 сентября, 20:00 — 21:30
Домашние задания: 1
ДЗ
SPA игра "Устный счет". В разделе Vue одна большая самостоятельная работа - SPA (Single Page Application) игра ""Устный счет"". Игра состоит из двух экранов - на первом экране пользователь выбирает настройки, которые будут использовать в игре - типы вычислений, сложность, время раунда. На этой же странице показывается статистика тренировок. Вторая страница - сама игра. Пользователь должен решить максимальное количество задач на заданное время. Мокапы - https://app.moqups.com/korzio@gmail.com/bTYyBLCtpU/edit/page/ad64222d5
Подготовить общую структуру приложения - компоненты контейнеры для страниц приложения.
Routing и модели данных
Участники смогут:
- Описывать routing для Vue приложений
- Создавать формы, связывая шаблоны с моделями
6 сентября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Первая страница. Создать первую страницу приложения - форму настроек.
Advanced Vue
Участники смогут:
- Применять анимацию в компонентах
- Создавать плагины
- Разбираться в тонкостях Change Detection
10 сентября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Вторая страница. Запрограммировать вторую страницу приложения - игру.
Настроить переходы по страницам.
Обзор Polymer
Участники смогут
- Создавать custom elements, используя встроенные браузерные возможности
- Подключать и использовать Polymer для создания приложений
- Ориентироваться в веб спецификациях, на базе которых работает Polymer
13 сентября, 20:00 — 21:30
Все суть компоненты
Участники смогут:
- Подключать и использовать веб-компоненты в приложениях
- Создавать Polymer компоненты, решающие функциональные и композиционные задачи
17 сентября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Приложение для показа дерева элементов. С помощью Custom Elements сделать приложение для показа дерева элементов с помощью компонент tree и leaf

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

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

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

Возможные технологии для проектов - Node + Vue/Angular/React/Polymer.
Участники смогут:
- Выделять характеристики проектов и окружения
- Решать задачи выбора и сравнения фреймворков, понимать их преимущства и недостатки
25 октября, 20:00 — 21:30

Преподаватель

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

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

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

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