Проходил 24 января в 20:00

День открытых дверей
Разработчик JavaScript

День открытых дверей онлайн

Хотите узнать, почему OTUS – больше, чем просто образовательный портал?
Как OTUS дает возможность стать частью сообщества профессионалов и сделать новый шаг по карьерной лестнице?
Почему учиться – не обязанность, а удовольствие и почему тесное сплетение теории и практики в обучении дает эффект синергии?
Приходите к нам на День Открытых Дверей. Формат проведения – онлайн – подключиться можно из любой точки мира!

Запись

О курсе

Разработчик JavaScript
50 000 ₽
5 месяцев
Начало 22 октября
  • Понимание принципов работы современных JavaScript фреймворков и библиотек
  • Умение применять паттерны проектирования (Event Loop, Flux, Immutable, Virtual DOM, Dependency Injection, Observables)
  • Знание подходов при проектировании, организации, контроля состояния и тестирования серверных и клиентских приложений
В рамках курса будут рассмотрены ключевые особенности JavaScript − замыкания, особенности ООП и SOLID в JS, функционального и реактивного программирования, Promises и другие возможности ES6, ...
Программа курса
Модуль 1
JavaScript
Модуль 2
UI Libraries
Модуль 3
Angular
Модуль 4
Практическая работа
JavaScript
Введение в курс
Участники смогут:
- Познакомиться с преподавателем и с программой курса, понимать как она построена и какие полезные навыки они получат
- Вспомнить основные возможности языка JavaScript
- Применять техники языка, которые помогут при изучении фреймворков
22 октября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Написать функцию суммирования значений. Написать функцию sum, которая может быть исполнена любое количество раз с не `undefined` аргументом.
Если она исполнена без аргументов, то возвращает значение суммы всех переданных до этого значений.

sum(1)(2)(3)....(n)() === 1 + 2 + 3 + ... + n
Возможности JavaScript
Участники смогут:
- Решать специфичные для браузерной разработки задачи на языке JavaScript
- Освоить и вспомнить теорию, которая будет базисом для последующих уроков
- Попрактиковаться с технологиями Promise & AJAX
25 октября, 20:00 — 21:30
Домашние задания: 1
ДЗ
promiseReduce - работа с асинхронными функциями. Написать функцию `promiseReduce`, которая получает на вход
- массив асинхронных функций `asyncFunctions`, возвращающих `Promise`,
- `reduce` функцию и
- стартовое значение `initialValue`.

`promiseReduce` поочередно вызывает переданные асинхронные функции
и выполняет `reduce` функцию сразу при получении результата до вызова следующей асинхронной функции.

`reduce` должна отрабатывать аналогично [`Array.prototype.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), то есть запоминать результат предыдущей итерации

Пример

```javascript
var fn1 = () => {
console.log('fn1')
return Promise.resolve(1)
}

var fn2 = () => new Promise(resolve => {
console.log('fn2')
setTimeout(() => resolve(2), 1000)
})

function promiseReduce(asyncFunctions, reduce, initialValue) {
/*
* Сюда нужно дописать работающий код
*/
}

promiseReduce(
[fn1, fn2],
function (memo, value) {
console.log('reduce')
return memo * value
},
1
)
.then(console.log)
```

Вывод в консоль

```
fn1
reduce
fn2
reduce
2
```
Введение в Node - NPM, Tests, TDD
Участники смогут:
- Запускать приложения на платформе Node
- Писать и запускать тесты для серверного JavaScript
- Работать с пакетным менеджером NPM
- Управлять зависимостями и автоматизировать задачи с помощью package.json
29 октября, 20:00 — 21:30
Основные концепции Node - Modules, Events, Errors
Участники смогут:
- Использовать require, exports и ES6 Imports для экспорта и импорта зависимостей
- Использовать модуль Events для работы с событиями и понимать, как использовать Errors в Node
1 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
tree - вывод списка файлов и папок файловой системы. Напишите `NodeJS` скрипт `tree` для вывода списка файлов и папок файловой системы.
Результатом работы должен быть объект с массивами `{ files, folders }`.
Вызовы файловой системы должны быть асинхронными.
Скрипт принимает входной параметр - путь до папки.
Добавить возможность выполнять этот скрипт через команду `npm run tree -- path`

Пример

```
foo/
├── bar/
│├── bar1.txt
│├── bar2.txt
│└── baz/
├── f1.txt
└── f2.txt
```

При вызове с путем `foo/` скрипт должен вернуть структуру:

```json
{
"files": [
"foo/f1.txt",
"foo/f2.txt",
"foo/bar/bar1.txt",
"foo/bar/bar2.txt"
],
"dirs": [
"foo",
"foo/bar",
"foo/bar/baz"
]
}
```
Стандартная библиотека Node - EventLoop, Streams, HTTP
Участники смогут:
- Ориентироваться в понятии EventLoop и особенностях работы Timers
- Использовать классы, объекты и функции модуля Streams
- Работать c HTTP запросами в Node
5 ноября, 20:00 — 21:30
Node Best Practices - Process
- Работать с дочерними процессами в Node
- Различать корректные и ошибочные техники при написании серверного JavaScript кода
8 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Работа с потоками в NodeJS. Написать приложение, демонстрирующее работу с потоками в `NodeJS`:
- Readable, генерирующий случайные числа,
- Transformable, добавляющий случайное число к первому и
- Writable, выводящий данные в консоль.

Данные должны “течь” readable -> transformable -> writable
Используйте highWaterMark для ограничения внутреннего буффера.
Стэк MEAN - Express, MongoDB
Участники смогут:
- Создавать простые приложения с использованием библиотеки Express, а также базы данных MongoDB
12 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Приложение для сохранения RSS. Написать приложение, которое будет запрашивать RSS рассылку, парсить XML и сохранять документы в БД.

Пример: Граббер сайта - который запускаем из командной строки, он читает новости с sports.ru и сохраняет в DB или твиты Трампа.
Построение Rest API
Участники смогут:
- Понимать и добавлять общие стандарты создания API
15 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Приложение для сохранения RSS. Написать `NodeJS Rest API` приложение для сохранения `RSS` рассылок.
В приложении должно быть следующие точки доступа
- Создание рассылки по `URL`. При успешном добавлении приложение будет запрашивать `RSS` рассылку, парсить `XML` и сохранять документы в базу данных.
- Показ списка всех добавленных `URL` рассылок.
- Показ всех сохраненных из `RSS` документов.

Приложение должно содержать тесты для всех точек доступа.
JavaScript - Работа с браузером
- Решать специфичные для браузерной разработки задачи на языке JavaScript
- Работать с Chrome Dev Tools
19 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
getPath - поиск уникального селектора. Написать функцию getPath, находяющую уникальный css-селектор для элемента в документе

```javascript
getPath(node) // => "div>div:nth-child(2)>span"
```
UI Libraries
Обзор Polymer
Участники смогут
- Создавать custom elements, используя встроенные браузерные возможности
- Подключать и использовать Polymer для создания приложений
- Ориентироваться в веб спецификациях, на базе которых работает Polymer
22 ноября, 20:00 — 21:30
Все суть компоненты
Участники смогут:
- Подключать и использовать веб-компоненты в приложениях
- Создавать Polymer компоненты, решающие функциональные и композиционные задачи
26 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Custom Elements - приложение для показа дерева. С помощью `Custom Elements` создать приложение для показа дерева с помощью компонентов `my-tree` и `my-leaf`.
Компоненты должны получать данные о структуре поддерева от родительского элемента.
Используйте `Shadow DOM` при отрисовке компонент.

Пример стуктуры

```json
{
"id": 1,
"items": [{
"id": 2,
"items": [{ "id": 3 }]
}]
}
```
Специфика построения приложений на Polymer
Участники смогут:
- Разрабатывать приложения с использованием Polymer
- Понимать и определять структуру кода, использовать инструменты для сборки и оптимизации приложений
29 ноября, 20:00 — 21:30
Особенности работы c Polymer
3 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Приложение для показа и добавления RSS. Сделать приложение на `Polymer` для показа и добавления `RSS` рассылок из задания занятия "Построение Rest API".
Можно использовать готовые `iron` компоненты - https://www.webcomponents.org/author/PolymerElements

Должны быть реализованы следующие функции:
- Создание рассылки по `URL`
- Показ списка всех добавленных `URL` рассылок
- Показ всех сохраненных из `RSS` документов

Приложение должно содержать тесты для всех элементов `UI`
Основы React и JSX
Участники смогут:
- Настроить себе окружение для работы с React и использовать его
- Понимать и применять синтаксис JSX
- Создавать простые приложения на React
6 декабря, 20:00 — 21:30
Компоненты React - Components Lifecycle, State & Props
Участники смогут:
- Разрабатывать полноценные React-компоненты в различных стилях.
- Корректно использовать state и props.
10 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создать структуру приложения погоды. Приложение для самостоятельной работы в блоке React - веб-приложение погоды.
На странице приложения должна быть возможность добавлять города в список избранных.
По каждому городу показывается информация о температуре, ветре, другие параметры.

---

Создать структуру приложения, создать компоненты контейнеры.
Состояние приложения - Flux и Redux
Участники смогут:
- "Отличать основные понятия однонаправленной архитектуры Flux.
- Ориентироваться и использовать возможности redux - создавать actions, reducers, а также применять redux в связке в React
13 декабря, 20:00 — 21:30
Routing в React - Оптимизация приложения
- Создавать систему routing для React приложений, использовать библиотеку react-router
- Использовать специальные возможности библиотеки для оптимизации отрисовки"
17 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Routing для приложения погоды. Реализовать компонент фильтра и поиска городов.
Данные по городам сохранять в браузерном хранилище.
Добавить страницу погоды по конкретному городу.
При переходе на нее должен меняться url, показываться информация на несколько дней вперед.
Специфика построений приложений в React - Best Practices
- Эффективно разрабатывать приложения на React, учитывая последние тенденции в разработке front-end
- Использовать Advanced React
- Применять на практике Best-Practices разработки на React
20 декабря, 20:00 — 21:30
Основы Vue
Участники смогут:
- Настроить себе окружение IDE, зависимости и библиотеки для создания проектов и работы с Vue
- Создавать простейшие приложения используя Vue
24 декабря, 20:00 — 21:30
Компоненты, шаблонизатор и формы
Участники смогут
- Понимать синтаксис шаблонизаторы
- Создавать компоненты, описывать атрибуты элементов
27 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Структура приложения "Устный счет". В разделе Vue одна большая самостоятельная работа - SPA (Single Page Application) игра "Устный счет".
Игра состоит из двух экранов - на первом экране пользователь выбирает настройки, которые будут использовать в игре - типы вычислений, сложность, время раунда.
На этой же странице показывается статистика тренировок.
Вторая страница - сама игра.
Пользователь должен решить максимальное количество задач на заданное время.
Мокапы - https://app.moqups.com/korzio@gmail.com/bTYyBLCtpU/edit/page/ad64222d5

---

Подготовить общую структуру приложения - компоненты контейнеры для страниц приложения.
Сделать первую страницу приложения - форму настроек.
Routing и модели данных
Участники смогут:
- Описывать routing для Vue приложений
- Создавать формы, связывая шаблоны с моделями
31 декабря, 20:00 — 21:30
Advanced Vue
Участники смогут:
- Применять анимацию в компонентах
- Создавать плагины
- Разбираться в тонкостях Change Detection
3 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
Routing для приложения "Устный счет". Реализовать второй экран - игру "калькулятор".
Настроить переходы по страницам приложения.
Angular
Введение в Angular
Участники смогут:
- Настроить себе окружение IDE, а также скачать зависимости и библиотеки, коммандные утилиты для TypeScript и создания проектов для работы с Angular
- Различать TypeScript и JavaScript
- Писать и понимать код на языке TypeScript
7 января, 20:00 — 21:30
TypeScript
- Различать TypeScript и JavaScript, использовать преимущества статической типизации
- Писать и понимать код на языке TypeScript, разрабатывать приложения в полноценном объектно-ориентированном стиле
10 января, 20:00 — 21:30
Компоненты и директивы
Участники смогут:
- Декомпозировать макет страницы на компоненты
- Различать директивы и компоненты во фреймворке Angular
- Создавать простые директивы и компоненты
14 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
Структура приложения для запоминания иностранных слов. Приложение для запоминания иностранных слов.
В этом приложении пользователь сможет добавлять слова для изучения, проходить тесты для запоминания слов.
Это Single Page Application состоит из 3 страниц:
- Последние добавленные слова (Recently Added)
- Упражнениями (Go)
- Настройки (Settings)
На главном экране, на странице Recently Added пользователь видит список последних добавленных слов, может добавить новое слово в словарь.

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

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

Навигация по страницам происходит с помощью ссылок в верхней части страниц, каждой странице соответствует отдельный url.

---

Декомпозировать приложение для запоминания иностранных слов.
Создать структуру и компоненты контейнеры приложения.
Сервисы
Участники смогут создавать сервисы для получения, отправки и хранения данных для приложений Angular
17 января, 20:00 — 21:30
Observables - RxJS
Участники смогут:
- Отличать основные понятия паттерна
- Observable, Observer, Subscriber, Operator
- Применять шаблон проектирования Observables, используя библиотеку RxJS
21 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создать сервисы для работы с текстом. Создать сервисы для работы с текстом
- Сервис перевода слова - должен запрашивать перевод через API (например, https://tech.yandex.com/translate/)
- Сервис хранения словаря - небольшая обертка для управления словарем с помощью `localStorage`
- Сервис добавления слов - должен разбивать текст на отдельные слова, запрашивать их перевод и сохранять в словарь для приложения.

Сервисы должны общаться с помощью библиотеки `RxJS`.
Состояние приложения
Участники смогут разбираться в особенностях шаблона проектирования Dependency Injection и его имплементации в Angular
24 января, 20:00 — 21:30
Создание и управление формами в Angular
Участники смогут:
- Создавать формы, используя техники Dynamic Forms, Reactive Forms
- Описывать валидацию и другие функции для элементов форм
28 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
User Interface для приложения запоминания иностранных слов. Реализовать `UI` приложения
- Создать компоненты для добавления текста/слов в словарь
- Разработать компоненты и формы для тренировки запоминания слов
- Добавить экран настройку приложения, сохранять состояние
Routing
Участники смогут:
- Создавать Routing систему для приложений, используя внутренние подходы Angular - такие как Router, router-outlet и другие
- Понимать и применять хэндлеры навигации Guards
31 января, 20:00 — 21:30
Тестирование в Angular. Сборка приложения для Production
Участники смогут:
- Писать и запускать тесты для приложений Angular
- Настраивать сборку приложений Angular
- Использовать возможность сборки Server-side Rendering
4 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Routing для приложения запоминания иностранных слов. Добавить routing, ссылки на страницы и переходы между компонентами приложения.
Добавить и актуализировать тесты для компонент приложения, настроить universal рендеринг приложения.
Практическая работа
Заключительный месяц курса посвящен проектной работе. Это то, чем интересно заниматься студенту на базе знаний, полученных на курсе.
При этом не обязательно закончить его за месяц. В процессе написания по проекту можно получить консультации преподавателей.

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

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

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

F.A.Q.: Наиболее часто задаваемые вопросы:

Могу ли я принять участие в розыгрыше, если я уже оплатил обучение?
В розыгрыше принимают участие все пользователи, успешно прошедшие вступительное тестирование. Если вы уже оплатили обучение и выиграли в розыгрыше, то мы компенсируем вам затраты.
Нужно ли оплачивать обучение до Дня открытых дверей, если я хочу гарантированно попасть в группу?
Да, мы рекомендуем заранее оплатить обучение, чтобы гарантированно попасть в группу. В период проведения Дня открытых дверей резко возрастает количество желающих обучаться, поэтому может случиться так, что к окончанию Дня открытых дверей мест в группе не останется
Кто будет проводить День открытых дверей?
Проводить День открытых дверей будет преподаватель курса.
Как принять участие в Дне открытых дверей?
Для того, чтобы принять участие в Дне открытых дверей, оставьте свой e-mail в поле регистрации на мероприятие. Перед началом Дня открытых дверей мы пришлем вам ссылку, пройдя по которой, вы сможете присоединиться к вебинару. Если вы хотите принять участие в розыгрыше – не позже чем за час до начала мероприятия необходимо зарегистрироваться на сайте и успешно пройти вступительное тестирование
Какие вопросы будем обсуждать на Дне открытых дверей?
На дне открытых дверей мы поговорим о проекте OTUS (о программе курса, почему мы не принимаем в группы новичков, почему учиться у нас интересно, но сложно), карьерных перспективах выпускников (почему вероятность карьерного роста у лучших студентов стремится к 100%), учебном процессе (оплатах, оценке знаний, сертификатах и прочих аспектах). Также ведущий мероприятия с радостью ответит на все ваши вопросы