🔥 Учись выгодно в Отус!
-10% на все курсы июня и июля до 15.07 ! →

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

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

Name: Открытый вебинар Разработчик JavaScript CSS препроцессоры
Start: 2018-07-09T17:00+0000
End: 2018-07-09T19:00+0000
Location: OTUS

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

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

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

Юрий Дворжецкий

Запись

О курсе

JavaScript Developer. Professional

~~133 000 ₽~~ 119 700 ₽

5 месяцев

Начало 31 июля

Прокачайте свои знания JavaScript для использования всего набора инструментов Fullstack-разработчика. Стек технологий, рассматриваемых в рамках курса, позволяет внести разнообразие в свою работу, открывает возможность участвовать в интересных проектах и стартапах, развивать комплексные проекты для реализации различных задач.

Для кого этот курс?

Курс подойдет разработчикам с опытом программирования на JS, которые знакомы с основами верстки на HTML и CSS. Знания помогут …

Подробнее о курсе Пройти тестирование

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

Модуль 1
Актуальные Возможности JavaScript

Модуль 2
Node.js

Модуль 3
Vue.js

Модуль 4
Angular

Модуль 5
React.js

Модуль 6
Проектная работа

Актуальные Возможности JavaScript

Мы рассмотрим основные возможности современного и традиционного JavaScript, стандарт EcmaScript 6+, Templates, асинхронные паттерны Promise, Async Await, переменные, замыкания, функции, наследование и классы. Разберем особенности браузерного API и спецификаций Web Components на примере библиотеки Lit-HTML. Обсудим главные принципы и возможности Node.js, а также NPM для управления зависимостями и автоматизации задач.

Введение в курс: знакомство с программой, командой курса

познакомиться с преподавателями и программой курса, понимать как она построена и какие полезные навыки получит студент;
понять основные возможности языка JavaScript;
применять техники языка, которые помогут при изучении фреймворков.

31 июля, 20:00 — 21:30

Лектор: Алексей Кадочников

Домашние задания: 1

ДЗ

Deep Equal Function. Необходимо разработать функцию deepEqual, которая будет проводить глубокое сравнение между переданными объектами actual и expected. Под глубоким сравнением понимается то, что собственные свойства дочерних объектов также рекурсивно сравниваются. Если объекты не идентичны, вывести ошибку с путем до неидентичного свойства (например, используя нотацию JSON Path - $.store.book.author). Идеальную функцию сравнения написать невозможно, поэтому постарайтесь реализовать самые важные моменты:
- Рекурсия останавливается, когда найдено отличие
- Сравниваются собственные итерируемые свойства, без учета прототипа
- Важно реализовать сравнение примитивных свойств, итерирование массивов и объектов

```js
const obj1 = {
a: {
b: 1,
},
};

const obj2 = {
a: {
b: 2,
},
};

const obj3 = {
a: {
b: 1,
},
};

deepEqual(obj1, obj1);
// OK

deepEqual(obj1, obj2);
// Error: a.b

deepEqual(obj1, obj3);
// OK
```

Дополнительные материалы:
- https://nodejs.org/api/assert.html#assertdeepequalactual-expected-message

Асинхронные паттерны

решать специфичные для браузерной разработки задачи на языке JavaScript;
освоить и вспомнить теорию, которая будет базисом для последующих уроков;
попрактиковаться с Promise.

7 августа, 20:00 — 21:30

Лектор: Александр Литкевич

Введение в Node.js и NPM

запускать приложения на платформе Node;
писать и запускать тесты для серверного JavaScript;
работать с пакетным менеджером NPM;
управлять зависимостями и автоматизировать задачи с помощью package.json.

12 августа, 20:00 — 21:30

Лектор: Евгений Трацевский

Домашние задания: 1

ДЗ

Tree Node.js File System. Напишите `NodeJS` скрипт `tree` для вывода списка файлов и папок файловой системы.

Приложение должно принимать аргумент каталога для анализа и флаг `--depth, -d` с номером глубины директорий.
Результатом является вывод данных в структурированном виде дерева, аналогично упражнению Tree Function.
Вызовы файловой системы должны быть асинхронными.
Например, при вызове скрипта с аргументом ./node, вывод может быть следующим:

```bash
tree ./node -d 2
node
├── cluster
│ └── index.js
├── domain
│ ├── error.js
│ ├── flow.js
│ └── run.js
├── errors
│ ├── counter.js
│ └── try-catch.js
└── worker
└── index.js

4 directories, 7 files
```

Пожалуйста, прикрепите ссылку на Pull Request в вашем репозитории на Github.

Работа с браузером

вспомнить, как работает DOM API и Events;
работать с Chrome Dev Tools;
решать специфичные для браузерной разработки задачи на языке JavaScript.

14 августа, 20:00 — 21:30

Лектор: Алексей Кадочников

Домашние задания: 1

Web Components

ориентироваться в веб спецификациях Custom Elements и Shadow DOM;
создавать custom elements, используя встроенные браузерные возможности;
использовать HTML Template для шаблонизации компонент;
использовать особенности Lit-HTML для создания приложений;
объяснить принципы Polymer.

19 августа, 20:00 — 21:30

Лектор: Владимир Языков

Bulid tools: Vite, Webpack, Rollup

обсудить как работает Vite;
обсудить как работает Webpack;
различать Parcel и Rollup;
обсудить, что такое и как использовать babel;
использовать eslint.

21 августа, 20:00 — 21:30

Лектор: Дмитрий Сенькевич

Node.js

Этот модуль о серверной среде JavaScript. Мы разберем ключевые особенности Node.js - EventLoop, модули и потоки. Мы научимся строить API, используя фреймворк Express, подходы REST и GraphQL. Поговорим о WebAssembly и общих практиках при работе с процессами и ошибками. В конце мы подведем резюме стэка технологий Node.js

Основные концепции Node - Modules

использовать require, exports и ES6 Imports для экспорта и импорта зависимостей.

26 августа, 20:00 — 21:30

Лектор: Николай Лапшин

Стандартная библиотека Node - EventLoop - Timers

ориентироваться в понятии EventLoop и особенностях работы Timers;
использовать классы, объекты и функции модуля Streams;
работать c HTTP запросами в Node.

28 августа, 20:00 — 21:30

Лектор: Владимир Языков

Домашние задания: 1

ДЗ

Работа с потоками в NodeJS. Используйте модуль streams для программы простой индексации текста.
Она должна:
- Читать текстовый файл переданный в аргументах к скрипту
- Разделять входные данные на отдельные слова, разделенные разделителем (пробел, символ новой строки)
- Фильтровать не-текстовые символы (например, ',')
- Индексировать текст в вектор - массив чисел. Позиция в массиве представляет порядок всех входных слов, отсортированных в алфавитном порядке. Значение - это количество появлений определенного слова в тексте.
- Вывести результирующий вектор в файл.

Примеры:
- `a c b b` -> потенциальное промежуточное представление `{ a: 1, b: 2, c: 1 } -> [1, 2, 1]`
- `ab cb bss b` -> `[1, 1, 1, 1]`
- `ab, cb, bss, cb, b, cb` -> `[1, 1, 1, 3]`
- `alex, alex, juan, dima` -> `[2, 1, 1]`

Желательно использовать потоки для всех шагов программы.

---

https://strongloop.com/strongblog/practical-examples-of-the-new-node-js-streams-api/

Пожалуйста, прикрепите ссылку на Pull Request в вашем репозитории на Github.

Web-сервер с Express

использовать стандартнтую библиотеку Node.js для веб сервера;
разбираться и понимать структуру и концепции Express - middlewares, templates, routing;
создавать приложения с использованием Express;
обрабатывать ошибки в Node.js приложениях.

2 сентября, 20:00 — 21:30

Лектор: Николай Лапшин

Построение Rest API с Express

добавлять общие стандарты создания API;
объяснить REST, принципы построения API;
проанализировать технологии аутентификации в веб приложениях.

4 сентября, 20:00 — 21:30

Лектор: Дмитрий Коляда

Домашние задания: 1

ДЗ

Клон LeetCode - Backend - Шаг 1 - Проектирование и разработка RESTful API. **Клон LeetCode**

В блоке Node.js мы создадим приложение, аналогичное LeetCode для подготовки технических скиллов. Оно хранит различные задачи по программированию, которые часто задают на собеседованиях в крупных технологических компаниях. Пользователи могут решать задачи, отправлять свои решения и проверять их на корректность. Кроме того, на платформе есть обсуждения, где пользователи могут обсудить различные подходы к решению задач, а также учебные материалы и мок-интервью.

- Приложение ДОЛЖНО:
- хранить задачи, у которых есть описание, примеры входных и выходных данных, уровень сложности, теги (например, "алгоритмы", "структуры данных", "динамическое программирование"), дополнительные материалы (файлы, ссылки)
- предоставлять возможность логина и логаута
- содержать роли пользователей (пользователь, администратор, интервьюер) и проверять, имеет ли пользователь определенные разрешения в системе; пользователи должны иметь оставлять комментарии к задачам и обсуждать возможные решения; пользователи могут оценивать задачи, что помогает другим участникам понять сложность и интересность задачи; нтервьюер должен иметь возможность видеть профиль пользователей, редактировать их рейтинг; интервьюеры могут добавлять, редактировать и удалять задачи, теги или категории.
- содержать REST API для управления ресурсами приложения
- использовать базу данных для хранения информации о задачах, пользователях

- Приложение МОЖЕТ:
- быть построено на `ExpressJS, Fastify` или `NestJS`
- использовать PostgreSQL
- иметь дополнительные функции, такие как поиск по сайту по запросу, загрузка файлов и т. д.

Проектирование и разработка API приложения Клон LeetCode

- Используйте описание приложения LeetCode
- Опишите модель данных, которые вы планируете использовать, добавьте описание проекта в свободном формате в README.md
- Определите endpoints API, коды ответов, типы данных и примеры с использованием https://editor.swagger.io,импортируйте и сохраните файл с техническим описанием (см примеры https://www.udemy.com/developers/affiliate/, https://developer.github.com/v3/users/, https://docs.gitlab.com/ee/api/issues.html)
- Напишите тесты для API
- Разработать RESTful API. API должен позволить создавать, просматривать, обновлять и удалять информацию о задачах и пользователях. Тесты из прошлого шага должны проходить.
- Выберите и реализуйте стратегию авторизации, а также регистрации новых пользователей.

Введение в TypeScript

различать TypeScript и JavaScript, использовать преимущества статической типизации;
писать и понимать код на языке TypeScript, разрабатывать приложения в полноценном объектно-ориентированном стиле.

9 сентября, 20:00 — 21:30

Лектор: Евгений Трацевский

Особенности TypeScript

проанализировать специальные особенности TypeScript;
разбираться в Namespaces, Generics, Decorators, Type Definitions, Metadata;
применять типы и декораторы.

11 сентября, 20:00 — 21:30

Лектор: Евгений Трацевский

Web-сервер с Nest.js

создавать приложения на Nest.js;
объяснить для чего нужны декораторы в Javascript/TypeScript;
объяснить, что такое Dependency Injection.

16 сентября, 20:00 — 21:30

Лектор: Андрей Осипук

Домашние задания: 1

Введение в язык SQL, PostgreSQL

подключать и создавать базу данных с PostgreSQL;
познакомиться с языком SQL;
научиться работать с реляционной базой данных.

18 сентября, 20:00 — 21:30

Лектор: Николай Лапшин

Работа с PostgreSQL и TypeORM

подключать и создавать базу данных с PostgreSQL;
использовать ORM TypeORM в Express.

23 сентября, 20:00 — 21:30

Лектор: Владимир Языков

Домашние задания: 1

Node.js и Docker

запустить и использовать Node.js приложение с docker;
рассмотреть основы docker;
подключать БД.

25 сентября, 20:00 — 21:30

Лектор: Николай Лапшин

Сборка и деплой проекта, CI/CD

понимать и использовать общие концепции CI/CD;
настраивать деплоймент приложений в облако;
работать с логами;
определять требования к серверу.

30 сентября, 20:00 — 21:30

Лектор: Евгений Трацевский

Домашние задания: 1

Консультация по ДЗ

получить ответы на вопросы по ДЗ и по курсу.

2 октября, 20:00 — 21:30

Лектор: Евгений Трацевский

Vue.js

В этом модуле мы сосредоточимся на Vue - современном и популярном FrontEnd фреймворке. Мы рассмотрим особенности шаблонизации и создания динамических приложений на Vue. Разберем возможности и жизненный цикл компонент, хранения состояния. Изучим инструменты Vuex и Vue CLI. Будем настраивать и оптимизировать сборку приложений с Server-Side Rendering.

Основы Vue3

настроить себе окружение IDE, зависимости и библиотеки для создания проектов и работы с Vue;
создавать простейшие приложения используя Vue;
рассмотреть основы Vue3.

14 октября, 20:00 — 21:30

Лектор: Алексей Кадочников

Компоненты и шаблоны

обсудить и использовать синтаксис шаблонизатора;
создавать компоненты, описывать атрибуты элементов;
применять SFC.

16 октября, 20:00 — 21:30

Лектор: Иван Кривов

Управление компонентами

управлять передачей сообщениями между компонентами;
организовывать приложения из многих взаимодействующих
компонентов.

21 октября, 20:00 — 21:30

Лектор: Алексей Кадочников

Домашние задания: 1

ДЗ

Клон LeetCode - Vue - Шаг 1 - Компоненты. В разделе Vue одна самостоятельная работа - создать веб-интерфейс для платформы, предоставляющей задачи по программированию, Клон LeetCode. Приложение должно работать на базе созданного API.

Основные требования и описание приложения:
- Главная страница: Отображение списка задач с возможностью фильтрации по сложности, категории и популярности.
- Страница задачи: Отображение описания задачи, примеров входных и выходных данных, а также интерактивного редактора кода для написания и отправки решения.
- Обратная связь: Раздел комментариев под каждой задачей, где пользователи могут обсуждать решения и задавать вопросы.
- Профиль пользователя: Отображение статистики пользователя, решенных задач и рейтинга.

Технологии:
- Vue.js
- Желательно, TypeScript
- Для стилей можно использовать Bootstrap, Tailwind CSS или Material-UI. Желательно, чтобы интерфейс корректно отображался на различных устройствах, включая мобильные телефоны и планшеты.

Состояние приложения. Pinia

различать преимущества центрального уравления стейтом;
добавить State Management приложению Vue;
написать гетер, экшен и мутацию;
писать данные в State из компонентов.

23 октября, 20:00 — 21:30

Лектор: Алексей Кадочников

Routing

описывать routing для Vue приложений.

28 октября, 20:00 — 21:30

Лектор: Иван Кривов

Домашние задания: 1

ДЗ

Клон LeetCode - Vue - Шаг 2 - Routing. В разделе Vue одна самостоятельная работа - создать веб-интерфейс для платформы, предоставляющей задачи по программированию, Клон LeetCode. Приложение должно работать на базе созданного API.

Основные требования и описание приложения:
- Главная страница: Отображение списка задач с возможностью фильтрации по сложности, категории и популярности.
- Страница задачи: Отображение описания задачи, примеров входных и выходных данных, а также интерактивного редактора кода для написания и отправки решения.
- Обратная связь: Раздел комментариев под каждой задачей, где пользователи могут обсуждать решения и задавать вопросы.
- Профиль пользователя: Отображение статистики пользователя, решенных задач и рейтинга.

Технологии:
- Vue.js
- Желательно, TypeScript
- Для стилей можно использовать Bootstrap, Tailwind CSS или Material-UI. Желательно, чтобы интерфейс корректно отображался на различных устройствах, включая мобильные телефоны и планшеты.

Advanced Vue

применять анимацию в компонентах;
создавать плагины;
разбираться в тонкостях Change Detection.

30 октября, 20:00 — 21:30

Лектор: Алексей Кадочников

Консультация по ДЗ

получить ответы на вопросы по ДЗ и по курсу.

6 ноября, 20:00 — 21:30

Лектор: Алексей Кадочников

Angular

Подробно изучим язык TypeScript и преимущества его использования. Разберем паттерн проектирования Observable на базе библиотеки RxJS. Научимся работать с фреймворком Angular - создавать компоненты и формы, управлять Routing, использовать Dependency Injection для сервисов, а также тестировать и собирать приложения с помощью Webpack

Введение в Angular

настроить себе окружение IDE, а также скачать зависимости и библиотеки, коммандные утилиты для TypeScript и создания проектов для работы с Angular;
различать TypeScript и JavaScript;
писать и понимать код на языке TypeScript.

18 ноября, 20:00 — 21:30

Лектор: Евгений Трацевский

Компоненты и директивы

декомпозировать макет страницы на компоненты;
различать директивы и компоненты во фреймворке Angular;
создавать простые директивы и компоненты.

20 ноября, 20:00 — 21:30

Лектор: Виталий Бобров

Observables - RxJS

отличать основные понятия паттерна;
применять шаблон проектирования Observables, используя библиотеку RxJS.

25 ноября, 20:00 — 21:30

Лектор: Евгений Трацевский

Создание и управление формами в Angular

создавать формы, используя техники Dynamic Forms, Reactive Forms;
описывать валидацию и другие функции для элементов форм.

27 ноября, 20:00 — 21:30

Лектор: Виталий Бобров

Домашние задания: 1

ДЗ

Клон LeetCode CMS - Angular - Шаг 1 - Компоненты и формы. - Создать основные компоненты и формы для CMS платформы.
- Управление задачами: Разработайте компоненты для добавления, редактирования и удаления задач. Каждая форма должна включать поля для названия, описания, примеров входных и выходных данных, уровня сложности и тегов.
- Управление тегами: Создайте компоненты и формы для добавления, редактирования и удаления тегов.
- Управление пользователями: Разработайте компоненты для просмотра списка пользователей и формы для редактирования их ролей.
- Для стилей рекомендуется использовать Angular Material или Bootstrap.

Signals

изучить сигналы, применить на практике.

2 декабря, 20:00 — 21:30

Лектор: Евгений Трацевский

Сервисы и состояние приложения

создавать сервисы для получения, отправки и хранения данных для приложений Angular;
разбираться в особенностях шаблона проектирования Dependency Injection и его имплементации в Angular.

4 декабря, 20:00 — 21:30

Лектор: Виталий Бобров

Routing, тестирование и сборка в Angular

создавать Routing систему для приложений, используя внутренние подходы Angular - такие как Router, router-outlet и другие;
применять хэндлеры навигации Guards;
писать и запускать тесты для приложений Angular;
настраивать сборку приложений Angular;
использовать возможность сборки Server-side Rendering.

9 декабря, 20:00 — 21:30

Лектор: Евгений Трацевский

Домашние задания: 1

ДЗ

Клон LeetCode CMS - Angular - Шаг 2 - Routing. Реализовать управление состоянием приложения и маршрутизацию для CMS платформы

- Маршрутизация: Реализуйте маршруты для компонент, созданных в первой части задания.
- Состояние приложения: Используйте NgRx или другие библиотеки управления состоянием, совместимые с Angular, для управления данными задач, тегов и пользователей.
- Добавить routing, ссылки на страницы и переходы между компонентами приложения.
- Добавить и актуализировать тесты для компонент приложения.
- Безопасность: Реализуйте систему аутентификации и авторизации для доступа к CMS. Только администраторы должны иметь доступ к этой системе.

Пожалуйста, прикрепите ссылку на Pull Request в вашем репозитории на Github.

Консультация по ДЗ

получить ответы на вопросы по ДЗ и по курсу.

11 декабря, 20:00 — 21:30

Лектор: Виталий Бобров

React.js

Мы подробно изучим стэк технологий React. Рассмотрим особенности синтаксической шаблонизации JSX, особенности передачи данных и хранения состояния с помощью state и props. Разберем свойства компонентного подхода для декомпозиции React приложений, жизненный цикл и типы компонент, например, High-Order Components. Изучим шаблон проектирования Flux и его реализацию на примере библиотеки Redux. Будем настраивать и оптимизировать приложения с Server-Side Rendering, а также освоим идею микрофронтенд архитектуры

Обзор React

настроить себе окружение для работы с React и использовать его;
применять синтаксис JSX;
создавать простые приложения на React;
разрабатывать полноценные React-компоненты в различных стилях;
применять жизненный цикл компонент;
использовать Lifecycle API для управления компонентами приложения;
моделировать состояние через state / props.;
корректно управлять данными React приложения.

16 декабря, 20:00 — 21:30

Лектор: Виктория Борель

Hooks в React

разбираться в техниках и использовать различные hooks.

18 декабря, 20:00 — 21:30

Лектор: Алексей Кадочников

Higher-Order Components, Custom Hooks и другие паттерны React

свободно декомпозировать компоненты;
делать переиспользуемые контейнеры children;
переиспользовать state-логику и лайфсайкл- хуки через HOC;
написать умные компоненты с конфигурируемым отображением через render pro.

23 декабря, 20:00 — 21:30

Лектор: Александр Литкевич

Домашние задания: 1

Состояние приложения с Redux и Mobx

эффективно разрабатывать приложения на React, учитывая последние тенденции в разработке front-end;
использовать Advanced React;
применять на практике Best-Practices разработки на React.

25 декабря, 20:00 — 21:30

Лектор: Эдгар Пилипсон

Routing в React - Оптимизация приложения

создавать систему routing для React приложений, использовать библиотеку react-router;
использовать специальные возможности библиотеки для оптимизации отрисовки;
ленивая загрузка страниц при работе с React.

13 января, 20:00 — 21:30

Лектор: Виктория Борель

Домашние задания: 1

Архитектура фронтенд приложений - микрофронтенды

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

15 января, 20:00 — 21:30

Лектор: Дмитрий Сенькевич

Современные рендеринг фреймворки и аспекты SSR

различать подходы проектирования приложений; использовать Next.js или Remix для быстрого старта SSR; использовать плюсы стэка React для создания кросс; платформенных приложений.

20 января, 20:00 — 21:30

Лектор: Алексей Кадочников

Домашние задания: 1

Проектная работа

Заключительный месяц курса посвящен проектной работе. Это то, чем интересно заниматься студенту на базе знаний, полученных на курсе.
При этом не обязательно закончить его за месяц. В процессе написания по проекту можно получить консультации преподавателей.

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

Вводное занятие по проектной работе. Обзор пройденных фреймворков и технологий

выбрать и обсудить тему проектной работы;
спланировать работу над проектом;
ознакомиться с регламентом работы над проектом.

22 января, 20:00 — 21:30

Лектор: Алексей Кадочников

Домашние задания: 1

Карьерная консультация

понять какие бывают задачи на собеседованиях;
подготовиться к собеседованиям с технической, моральной и практической точки зрения;
сформулировать для себя цели в профессии javascript разработки.

3 февраля, 20:00 — 21:30

Лектор: Алексей Кадочников

Защита проектных работ

защитить проект и получить рекомендации экспертов.

24 февраля, 20:00 — 21:30

Лектор: Алексей Кадочников

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

Юрий Дворжецкий

Ведущий full-stack разработчик, кандидат физико-математических наук.
Программирует с начальных классов, преподаёт со студенчества.

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

Влюблён в ОТУС, как в платформу с неограниченными возможностями как для учащихся, так и для преподавателей.