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

Весна 2017

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

В результате изучения курса студенты освоят: разработку клиент-сайда веб-приложений, узнают технологии HTTP, HTML5, CSS, JavaScript, DOM/Event/Host Objects, AJAX. Также смогут получить необходимую базу знаний о работе браузера (десктоп, смартфоны, планшеты), клиент-серверной архитектуре, архитектуре веб-приложений (события, модули, организации кода) и приобретут навыки работы с DOM, асинхронного и событийно-ориентированного программирования, сетевого взаимодествия (AJAX, WebSockets), организации многопоточности в браузере, использования CSS препроцессоров, отладки веб-приложений, сборки проекта (склейка, минификация, GruntJS).

Подробнее

Этот курс посвящен разработке той части веб-приложения, которая работает на стороне клиента – в браузере. Отсюда и название – клиент-сайд. Другое название – front-end, тогда как часть веб-приложения, работающая на стороне сервера, называется back-end. В веб-приложениях логика распределена между клиентом и сервером, а обмен информацией происходит по сети. Предполагается, что студент имеет базовые знания веб-технологий (HTML, CSS, JavaScript) и практические навыки решения задач с помощью базовых алгоритмов и структур данных.

Втечение семестра студентами выполняется проект, параллельно с прослушиванием лекционного материала и участием в практических занятиях. Цель проекта - создание веб-приложения. Серверная часть приложения разрабатывается в рамках курса “Углубленное изучение JAVA”.

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

Для того, чтобы чувствовать себя уверенно, нужно знать JavaScript. Чем лучше его знает front-end разработчик, тем увереннее он себя чувствует.
Подтянуть знания по этому языку можно с помощью замечательного учебника Ильи Кантора. https://learn.javascript.ru/

Во-вторых, необходимо выполнить несколько технических условий. Про них подробно написано вот здесь: https://park.mail.ru/blog/topic/2545/

Курс состоит из 4 модулей и защиты проекта. После каждого модуля проводится рубежный контроль (РК), на котором можно получить не больше определенного количества баллов.



1 РК - 30 баллов

2 РК - 30 баллов

3 РК - 20 баллов

4 РК - 10 баллов



Студенты, защитившие проект получают 10 баллов и возможность получить оценку 5 (отлично) за курс.



Весь курс логически разделен на две части. Результатом выполнения первой части является Предзащита проектов, которая проводится после второго РК совместно с Предзащитой по курсу “Углубленное изучение JAVA”.
Студенты, не сдавшие первых два РК не допускаются к сдаче последующих. При этом сдачей РК считается любое количество баллов, полученных студентом на РК.


Проект выполняется в группах 2-3 человека.



На всех РК оценка зависит от следующих критериев:

• Соответствие техническому заданию

• Оптимальность

• Практичность

• Качество оформления

• Доказательность аргументации



Для успешной аттестации по данному курсу студентам необходимо набрать пороговый рейтинг — 60 баллов и представить законченный проект на итоговой защите, за которую будут начислены дополнительные 10 баллов в случае успешной демонстрации проекта.


При пересчете баллов студенты могут получить итоговую оценку: 0–59 неудовлетворительно, 60–84 удовлетворительно, 85–99 хорошо, 100 отлично. Обращаем ваше внимание, что отличная оценка за курс это 100 баллов (сданы все теоретически вопросы, понятен код всего приложения, на все модули есть тесты, группа прошла ревью кода, и защитила проект на открытой защите).

Подробнее

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

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

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

Артём Мезин Артём Мезин

Выпускник МГТУ им. Н.Э. Баумана 2012 г. Front end разработчик проекта Почта в Mail.Ru.

Анатолий Остапенко Анатолий Остапенко

https://t.me/akamandusa
Студент 6 курса МГТУ им. Н.Э.Баумана. Frontend-разработчик Почты@Mai...


Подробнее

Илья Бурлак Илья Бурлак

Выпускник Петрозаводского Государственного Университета Team Lead проекта Почта в Mail.Ru.

Артур Удалов Артур Удалов

Frontend-разработчик Почты Mail.Ru. Так же работал над почтой QIP.ru, онлайн кинотеатром IVI.ru д...


Подробнее

Программа

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

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

Введение и структура курса. Порядок работы и требования к проекту. Клиент-серверное взаимодействие. NodeJS, npm и git. Создание и деплой приложения.
Домашнее задание №1: Формирование команды и идеи. Верстка страниц.
Разбиться на команды и определиться с идеей игры.
Сверстать основные страницы приложения, написать сервер, раздающий их и задеплоить результат.
4 часа + 4 часа СР

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

- Работа браузера, связь и взаимодействие HTML, CSS и JS в браузере.
- DOM и браузерные события.
- Структура SPA (Single Page Application).
- Основы работы с сетью.

Домашнее задание №2: SPA
Объединить отдельные страницы приложения в SPA.
4 часа + 4 часа СР

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

- Классы в JS и JS-модули в виде IIFE (Immediately-Invoked Function Expression).
- Компонентный подход к разработке, использование шаблонизаторов.
Домашнее задание №3: Шаблоны и компоненты
- Написать необходимые шаблоны и разработать компоненты приложения.
- Внедрить их в приложение и настроить их взаимодействие.
4 часа + 4 часа СР

Смешанное занятие №4: Работа с сетью, разработка API   + ДЗ №4

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

Рубежный контроль №1: Проверка всех ДЗ первого модуля.  

Проверяем:
Проект собирается
Настроен CI
Использован компонентный подход
Есть описание API
Шаблонизация FEST
Есть три экрана приложения
Страница лучших игроков
Валидация форм
Написаны какие-то тесты
4 часа + 4 часа СР

Смешанное занятие №5: Архитектура проекта и роутинг, сборка проекта   + ДЗ №5

- Архитектура проекта, методология BEM, принципы проектирования SOLID.
- Роутинг в одностраничных приложениях.
- Сборка проекта и автоматизация сборки, переход к ES6 модулям.
Домашнее задание №5: Роутер, рефакторинг, ES6 модули и сборка проекта
- Написать роутер, реализовать необходимые view и добавить роутинг в ваше приложение.
- Найти в приложении места, которые не удовлетворяют принципам BEM и SOLID и исправить их.
- Перейти к ES6-модулям, внедрить в ваш проект инструменты сборки.
4 часа + 4 часа СР

Смешанное занятие №6: Графика, разработка игр в браузере   + ДЗ №6

- Графика в браузере, возможности браузеров.
- Основы разработки игр в браузере.
- Введение в 3D-графику.
Домашнее задание №6: Старт разработки игры
- Приступить к написанию игры.
- Реализовать игровую механику и графическую составляющую игры.
- Реализовать singleplayer-версию игры.
4 часа + 4 часа СР

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

- История развития JavaScript, содержание современных стандартов ECMAScript: ES2015, ES2016 и ES2017.
- Процесс развития JavaScript.
- Разработка на JavaScript не только для WEB: NodeJS, NativeScript, Electron.
4 часа + 4 часа СР

Рубежный контроль №2: Проверка ДЗ  

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

Контрольное занятие №1: Предзащита.  

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

Смешанное занятие №7: Работа с данными в браузере   + ДЗ №7

- Кэширование данных в браузере, использование cookies, хранение данных на клиенте.
- Service Workers и оффлайн-работа веб-приложений.
- Протокол WebSocket, взаимодействие клиента и сервера.
- HTTP/2.
Домашнее задание №7: Использование WebSocket для оффлайн и мультиплеера
Реализовать оффлайн-работу приложения.
Реализовать multiplayer в игре, организовать передачу игровых данных через WebSocket-соединение.
4 часа + 2 часа СР

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

- Использование препроцессоров CSS, CSS-модули.
- Разработка под мобильные устройства, особенности мобильных браузеров и ограничения мобильных платформ.
Домашнее задание №8: Препроцессоры CSS и адаптация под мобильные
- Использовать препроцессоры CSS, переписать стили с использованием модулей CSS.
- Реализовать корректное отображение и работу приложения на мобильных устройствах.
4 часа + 2 часа СР

Лекция №2: Веб-компоненты и Virtual DOM  

- Веб-компоненты с использованием Custom Elements, Shadow DOM и CSS Scoping.
- Virtual DOM.

4 часа + 2 часа СР

Рубежный контроль №3: Проверка ДЗ  

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

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

- Загрузка страницы и её ресурсов.
- Производительность и оптимизация веб-приложений.
- Использование инструментов разработчика. Ошибки и утечки памяти JavaScript.
Домашнее задание №9: Оптимизация проекта.
Оптимизировать скорость загрузки и работы проекта.
4 часа + 4 часа СР

Лекция №3: Современное состояние web  

- Современное состояние WEB-технологий и развитие стандартов.
- Понятие прогрессивности и подходы к разработке прогрессивных веб-приложений.
- PWA и Web App Manifest.
- Спецификации WebBluetooth и WebRTC.
- TypeScript и Dart.
4 часа + 4 часа СР

Рубежный контроль №4: Проверка знаний  

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

Контрольное занятие №2: Защита  

Защита проектов.
4 часа + 4 часа СР