Экскурсии в офис Mail.ru. Успейте записаться!

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

Осень 2019

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

В процессе обучения студенты получают теоретические знания о протоколах 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. На нём студенты целый день разрабатывают фичу для своих семстровых проектов.

Подробнее

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

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

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

Для успешного прохождения курса требуется подготовка: во-первых, студенты должны на базовом уровне знать JavaScript и иметь хотя бы минимальный опыт программирования на нём. Кроме этого студенты должны быть знакомы с HTML и CSS: необходимо уметь верстать. Ещё одно обязательное требование — умение работать с git.

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

Кроме рубежных контролей в программе дисциплины есть два особенных занятия: совместная предзащита и совместная защита проектов. На этих занятиях присутствуют преподаватели всех дисциплин, а студенты проводят презентацию своих проектов. Предзащита проводится в середине семестра, а защита — на последнем занятии. На защите кроме преподавателей присутствуют приглашённые гости и эксперты, а студенты демонстрируют уже готовые и законченные проекты.

Для получения удовлетворительной оценки по курсу "Frontend-разработка" необходимо набрать определённое количество баллов, а так же выполнить определённый список требований, предъявляемых к семестровому проекту. Баллы зарабатываются на рубежных контролях, на защите и предзащите, на хакатоне, за выполнение домашних заданий, а также за индивидуальные достижения студентов.

Максимальное количество баллов за семестр — 100. Для получения оценки "удовлетворительно" необходимо набрать как минимум 70 баллов, для получения "хорошо" — 85 баллов, и оценка "отлично" даётся за 100 баллов.

Подробнее

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

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

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

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

Whatever Dan Abramov says to do

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

Разработчик Frontend почты Mail.Ru
Студент ИУ6

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

Выпускник Технопарка 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: Графика и разработка браузерных игр   + ДЗ №7

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

Лекция №1: Современное состояние JavaScript   + ДЗ №8

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

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

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

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

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

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

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

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

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

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

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

Лекция №2: Продвинутые подходы разработки SPA  

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

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

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

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

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

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

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

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

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