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

Весна 2020

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

Видео о курсе

Наверх

Описание
Существует распространённое мнение о том, что Frontend — это всего лишь вёрстка и больше ничего. Но это большое заблуждение, потому что Frontend — это одна из крупнейших и самая драйвовая и динамичная сфера IT.

В течение семестра студенты, разбившись на группы по 2–4 человека, выполняют семестровые проекты. Семестровый проект — это полноценное web-приложение, которое представляет собой мультиплеерную игру, работающую в браузере. Наш курс тесно интегрирован с курсами "Разработка веб-сервисов на Golang" и "Проектирование интерфейсов". Это значит, что один и тот же семестровый проект команды выполняют как на курсе Фронтенда, так и на курсе Golang, так и на курсе интерфейсов. У нас разрабатывается клиентская часть web-приложения, на курсе Golang — серверная.

В курсе делается очень большой упор на изучение JavaScript и программирование на нём. JavaScript — это основной инструмент Frontend-разработчика, и поэтому так важно знать его особенности, нюансы и "подводные камни". Мы рассказываем про последние стандарты ECMAScript, уделяем много времени обсуждению тонкостей языка и учим писать на нём хорошо, знакомим студентов с Node.js. Так же в курсе освещается TypeScript, на нём разрешено разрабатывать семестровые проекты.

Для успешного прохождения курса требуется подготовка: во-первых, студенты должны на базовом уровне знать JavaScript и иметь хотя бы минимальный опыт программирования на нём. Кроме этого студенты должны быть знакомы с HTML и CSS: необходимо уметь верстать. Ещё одно обязательное требование — умение работать с git.
Подробнее
Получаемые навыки
В процессе обучения студенты получают теоретические знания о протоколах HTTP/1.1, HTTP/2 и WebSocket, о том как работают браузеры, как десктопные, так и мобильные, о клиент-серверной архитектуре и о архитектуре современных web-приложений.

Теория подкрепляется практикой: в процессе разработки семестровых проектов студенты получают навыки программирования на JavaScript и TypeScript, навыки работы с браузерами (работа с DOM, шаблонизация, работа с сетью, программирование графики и разработка игр в браузере), навыки вёрстки (использование стандартов HTML5 и CSS3, навыки организации продуктивной работы со стилями, использование препроцессоров CSS, CSS-in-JS), навыки работы с git, nginx, docker, навыки использования Node.js.

Мы рассказываем студентам о том, как делать расширяемые и тестируемые web-приложения, как оптимизировать производительность web-приложений, следить за безопасностью пользователей, как улучшать User Experience от использования вашего продукта и, что не менее важно, Developer Experience от разработки вашего продукта, знакомим с практиками DevOps.

В середине семестра мы проводим хакатон в офисе компании Mail.Ru Group. На нём студенты целый день разрабатывают фичу для своих семстровых проектов.
Подробнее

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

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

Выпускник ИУ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 часа

Лекция №2: Современное состояние 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 часа СР

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

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

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

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

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

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

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

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

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

84 часа + 114 часа СР

РАСПИСАНИЕ

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

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

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

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

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

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