Фронтенд-разработка

Весна 2020

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

Видео о курсе

Наверх

Описание
Распространено мнение, что фронтенд не более чем верстка. Это заблуждение, потому что фронтенд — одна из крупнейших и самая драйвовая и динамичная сфера IT. 
Вы разделитесь на группы по 2–4 человека и будете готовить семестровый проект — полноценный сервис e-commerce. Курс интегрирован с курсами «Разработка веб-сервисов на Golang» и «Проектирование интерфейсов», семестровый проект по этим дисциплинам единый. На этом курсе вы разработаете клиентскую часть веб-приложения, на курсе по Go — серверную.
В курсе изучаем JavaScript — основной инструмент фронтенд-разработчика, исследуем последние стандарты ECMAScript, уделяем много времени обсуждению тонкостей языка и учимся писать на хорошо, знакомимся с Node.js. Дополнительно осваиваем TypeScript, на нем разрешено разрабатывать семестровые проекты.
В середине семестра примите участие в хакатоне в офисе компании Mail.Ru Group, где будете целый день разрабатывают фичу для своих проектов.
Подробнее
Чему научитесь
Получите навыки программирования на JavaScript и TypeScript, научитесь работать с браузерами (работа с DOM, шаблонизация, работа с сетью, программирование графики и разработка игр в браузере), овладеете версткой (использование стандартов HTML5 и CSS3, навыки организации продуктивной работы со стилями, использование препроцессоров CSS, CSS-in-JS), освоите работу с git, nginx, docker и на практике изучите Node.js.
Поймете, как делать расширяемые и тестируемые веб-приложения, оптимизировать производительность приложений, следить за безопасностью пользователей, как улучшать User Experience от использования продукта и, что не менее важно, Developer Experience от разработки продукта.
Подробнее

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

Дмитрий Дорофеев Дмитрий Дорофеев

Выпускник ИУ6 и Технопарка.
Руководитель группы разработки Почты

Aлексей Тюльдюков Aлексей Тюльдюков

Whatever Dan Abramov says to do

Сергей Володин Сергей Володин

Руководитель команды разработки в Почте Mail.ru
Евангелист Frontend и всего, что с ним связа...


Подробнее

Александр Цветков Александр Цветков

Выпускник Технопарка 2015 года и ИУ3.
Руководитель группы разработки проекта Mail.ru Почта.

Игорь Дружинин Игорь Дружинин

Frontend-разработчик Почты Mail.ru
https://t.me/Edwardgrolsh

Программа

занятие Часы в ауд. + сам. работа

Смешанное занятие №1: Введение во Frontend  
+ ДЗ №1

- Введение и структура курса;
- Порядок работы и требования к проекту;
- Почему Frontend-разработка — это не только вёрстка;
- Клиент-серверное взаимодействие;
- Node.js, npm и git: создание и деплой приложения.
Домашнее задание №1: Объединение в команды и начало работы над проектом
- Разбиться на команды;
- Сверстать макеты страниц приложения, написать сервер, раздающий их и задеплоить результат.
4 ак. ч. + 8 ак. ч. СР

Смешанное занятие №2: Работа с DOM, браузерные события, работа с сетью  
+ ДЗ №2

- Работа браузера, связь и взаимодействие HTML, CSS и JS в браузере;
- DOM и браузерные события. Структура SPA (Single Page Application);
- Основы HTTP, методы HTTP;
- Организация работы с сетью из браузера. Авторизация с использованием cookies.
Домашнее задание №2: SPA
- Разработать SPA-прототип приложения, и запрограммировать его взаимодействие с сервером.
4 ак. ч. + 8 ак. ч. СР

Смешанное занятие №3: Модульность, разработка компонентов, шаблонизация  
+ ДЗ №3

- Классы в JS и JS-модули, различные системы определения модулей;
- Модульный и компонентный подходы к разработке, использование шаблонизаторов.
Домашнее задание №3: Модули и компоненты, шаблонизация
- Разбить код приложения на модули;
- Написать модули и компоненты, необходимые для работы приложения, внедрить их в приложение и настроить их взаимодействие;
- Выбрать и использовать в проекте шаблонизатор.
4 ак. ч. + 10 ак. ч. СР

Смешанное занятие №4: Безопасность web-приложений, архитектура web-приложений и разработка API  
+ ДЗ №4

- Принципы безопасности в web-приложениях;
- Понятие Same Origin Policy, способы её обхода и методы защиты от них;
- Базовая архитектура семестрового проекта, понятие CORS, понятие 3rd-party cookies;
- Понятие API, разработка и документирование AP;
- Promise в JavaScript. Продвинутые способы работы с сетью, использование Fetch API.
Домашнее задание №4: Разработка API
- Разработать и документировать API, по которому будет взаимодействовать клиентская и серверная части приложения;
- Интегрироваться с бэкендом, добиться работы приложения.
4 ак. ч. + 6 ак. ч. СР

Рубежный контроль №1: Рубежный контроль №1  

Проверка всех ДЗ первого модуля
4 ак. ч. + 2 ак. ч. СР

Смешанное занятие №5: Архитектура web-приложений, роутинг, методологии написания CSS  
+ ДЗ №5

- Архитектура web-приложений, принципы проектирования SOLID, паттерны MV* и другие архитектуры, паттерны и концепции, используемые при разработке web-приложений;
- Роутинг в одностраничных приложениях, использование History API;
- Методологии вёрстки.
Домашнее задание №5: Архитектурное решение, роутинг, интеграция прототипа
- Разработать и реализовать архитектурное решение в приложении;
- Написать роутер, реализовать необходимые view и добавить роутинг в ваше приложение;
- Интегрировать разработанный на курсе "Проектирование интерфейсов" макет игры и уже реализованный прототип, используя одну из известных вам методологий вёрстки.
4 ак. ч. + 10 ак. ч. СР

Смешанное занятие №6: Производительность web-приложений и работа с данными в браузере, WebSockets, HTTP/2  
+ ДЗ №6

- Производительность web-приложений: из чего складывается и от чего зависит, оптимизация производительности;
- Хранение данных на клиенте;
- Service Workers и оффлайн-работа веб-приложений;
- Протокол WebSocket, взаимодействие клиента и сервера;
- Протокол HTTP/2.
Домашнее задание №6: Сборка проекта, взаимодействие с бекендом
- Настроить сборку проекта для различных окружений;
- Оптимизировать производительность загрузки и реализовать оффлайн-работу приложения;
- Разработать модуль для организации передачи данных через WebSocket-соединение.
4 ак. ч. + 6 ак. ч. СР

Смешанное занятие №7: Современные возможности CSS, разработка под мобильные устройства  
+ ДЗ №7

- Содержание современных стандартов CSS, использование препроцессоров CSS, CSS-модули;
- Разработка под мобильные устройства и устройства с сенсорными экранами, особенности мобильных браузеров и ограничения мобильных платформ.
Домашнее задание №7: Адаптация приложения для мобильных устройств
- Реализовать корректное отображение и работу приложения на мобильных устройствах;
- Реализовать multiplayer-версию игры.
4 ак. ч. + 12 ак. ч. СР

Лекция №1: Графика, Frontend Ops  
+ ДЗ №8

- Графика в браузере, работа с Canvas API и создание анимации;
- Frontend Oops — говорим про Developer Experience в разработке проекта.
Домашнее задание №8: Разработка игры
- Приступить к написанию игры. Реализовать игровую механику и графическую составляющую игры;
- Реализовать singleplayer-версию игры.
4 ак. ч. + 12 ак. ч. СР

Рубежный контроль №2: Рубежный контроль №2  

Проверка всех ДЗ второго модуля
4 ак. ч. + 2 ак. ч. СР

Контрольное занятие №1: Совместная предзащита  

Демонстрация MVP (Minimum Viable Product): приложение и singleplayer-игра
4 ак. ч. + 6 ак. ч. СР

Смешанное занятие №8: Продвинутые подходы разработки SPA  

- Компонентный подход. Data-binding и разработка реактивных компонентов;
- Использование Virtual DOM;
- Веб-компоненты с использованием Custom Elements, Shadow DOM и CSS Scoping.
4 ак. ч.

Смешанное занятие №9: Современное состояние Frontend  
+ ДЗ №9

- Что такое Web сегодня?
- История развития JavaScript, содержание современных стандартов ECMAScript: ES2015, ES2016, ES2017 и ES2018
- Процесс развития JavaScript;
- TypeScript.
- WebAssembly
Домашнее задание №9: Настройка сборки
Переписать проект на ES6-модули, настроить транспиллятор для сборки проекта.
4 ак. ч. + 4 ак. ч. СР

Хакатон №1: Разработка фичи  

Совместный хакатон всех студентов второго семестра. Проводится в офисе Mail.Ru Group
12 ак. ч.

Рубежный контроль №3: Рубежный контроль №3  

Проверка всех ДЗ третьего модуля
4 ак. ч. + 2 ак. ч. СР

Смешанное занятие №10: Отслеживание проблем производительности web-приложений, инфраструктура и деплой web-приложений, практики DevOps  
+ ДЗ №10

- Ошибки и утечки памяти JavaScript. Отслеживание проблем производительности web-приложений. Использование инструментов разработчика, DX (developer experience);
- Инфраструктура разработки и деплоя web-приложений, практики DevOps. Использование Docker.
Домашнее задание №10: Deploy приложения
- Организовать деплой проекта на выделенный сервер, поднять и настроить всю необходимую для этого инфраструктуру.
4 ак. ч. + 8 ак. ч. СР

Лекция №2: Резюме Frontend-разработчика в 2020 году  

- Современное состояние WEB-технологий и развитие стандартов;
- Резюме Frontend-разработчика в 2020 году;
- Как дальше развиваться Frontend-разработчику;
- Почему Frontend-разработка — это не только web;
- Заключение.
4 ак. ч.

Рубежный контроль №4: Рубежный контроль №4  

Проверка всех ДЗ четвёртого модуля
4 ак. ч. + 2 ак. ч. СР

Контрольное занятие №2: Совместная защита  

Совместная защита проектов перед преподавателями семестра, администрацией Технопарка, членами жюри и приглашёнными экспертами
4 ак. ч. + 16 ак. ч. СР

Итого 19 занятий, 10 ДЗ

84 ак. ч. + 114 ак. ч. СР

РАСПИСАНИЕ

Полное расписание

Посмотрите, чему еще учатся наши студенты

Первый семестр

Второй семестр

Третий семестр

Четвертый семестр