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

Осень 2015

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

Описание
Этот курс посвящен разработке той части веб-приложения, которая работает на стороне клиента – в браузере. Отсюда и название – клиент-сайд. Другое название – front-end, тогда как часть веб-приложения, работающая на стороне сервера, называется back-end. В веб-приложениях логика распределена между клиентом и сервером, а обмен информацией происходит по сети. Предполагается, что студент имеет базовые знания веб-технологий (HTML, CSS, JavaScript) и практические навыки решения задач с помощью базовых алгоритмов и структур данных.
На протяжении семестра студентами выполняется проект, параллельно с прослушиванием лекционного материала и участием в практических занятиях. Цель проекта - создание веб-приложения. Серверная часть приложения разрабатывается в рамках курса “Углубленное изучение JAVA”.
Подробнее
Чему научитесь
В результате изучения курса студенты освоят: разработку клиент-сайда веб-приложений, узнают технологии HTTP, HTML5, CSS, JavaScript, DOM/Event/Host Objects, AJAX. Также смогут получить необходимую базу знаний о работе браузера (десктоп, смартфоны, планшеты), клиент-серверной архитектуре, архитектуре веб-приложений (события, модули, организации кода) и приобретут навыки работы с DOM, асинхронного и событийно-ориентированного программирования, сетевого взаимодествия (AJAX, WebSockets), организации многопоточности в браузере, использования CSS препроцессоров, отладки веб-приложений, сборки проекта (склейка, минификация, GruntJS).
Подробнее

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

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

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

Иван Чашкин Иван Чашкин

Front end разработчик для мобильных устройств

Егор Дыдыкин Егор Дыдыкин

Руководитель группы frontend-разработки Облака Mail.Ru

Программа

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

Лекция №1: Фронтенд Введение  
+ ДЗ №1

Знакомство с курсом. Тестирование. Обсуждение проекта. Обзор современных JavsScript фреймворков.
Домашнее задание №1: ДЗ №1 "Прототип веб-приложения"
Сформировать идею игры. Определиться с группой и ролями в ней.
4 часа + 4 часа СР

Смешанное занятие №1: Инструменты, настройка окружения  
+ ДЗ №2

Необходимые технологии.
JavaScript за 60 минут.
Chrome DevTools.
GIT. Настройка окружения.
Домашнее задание №2: ДЗ №2 "Прототип с использованием AMD и MV*"
Самостоятельно изучить документацию Grunt и сопутствующие расширения, Fest и jQuery. Создать прототип веб-приложения по техническому заданию.
4 часа + 2 часа СР

Смешанное занятие №2: Архитектура и отладка веб-приложений  
+ ДЗ №3

Веб-приложение. Модульность. БЭМ. RequireJS.
Домашнее задание №3: ДЗ №3 "Механизмы регистрации/авторизации пользователя"
Самостоятельно изучить документацию Underscore, Backbone, RequireJS и БЭМ. Доработать прототип в соотвествии техническому заданию. Приступить к реализация игровой механики.
4 часа + 3 часа СР

Лекция №2: HTML формы. AJAX.  
+ ДЗ №4

Верстка веб-форм и их назначение. Варианты клиент-серверного взаимодействия. Валидация данных.
Домашнее задание №4: ДЗ №4 "Соответствие стилям"
Реализовать форму регистрации/авторизации
4 часа + 1 часа СР

Лекция №3: HTML верстка  
+ ДЗ №5

Принципы и подходы к HTML верстке страниц.
Домашнее задание №5: ДЗ№5 "Верстка проекта"
Реализация игровой механики. Сверсать все страницы проекта в BEM методологии.
4 часа + 4 часа СР

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

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

Лекция №4: Работа с DOM, Events  
+ ДЗ №6

Прототипная модель наслевования в JS. Объектная модель документа (DOM) и API для работы с ней. Событийная модель.
Домашнее задание №6: ДЗ №6 "Механизм publish-subscribe"
Задействовать механизм publish–subscribe и реализовать ViewManager в соответствии с техническим заданием.
4 часа + 4 часа СР

Смешанное занятие №3: Основы работы с canvas, three.js  
+ ДЗ №7

Основные методы и свойства контекста Canvas. Анимации. Обзор возможностей работы с 3D графикой.
Домашнее задание №7: ДЗ №7 "Реализация игровой механики"
Творческое ДЗ на работу с графикой. Будет озвучено непосредственно после лекции.
4 часа + 4 часа СР

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

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

Лекция №5: Сетевое асинхронное взаимодействие  
+ ДЗ №8

HTTP. AJAX. REST.
Домашнее задание №8: ДЗ №8 "Взаимодействие с сервером"
Реализовать работу с API с помощью Backbone.Sync.
4 часа + 4 часа СР

Лекция №6: Хранение данных на клиенте  
+ ДЗ №9

Cookies. LocalStorage. SessionStorage.
Домашнее задание №9: ДЗ №9 "Сохранение результатов"
Реализовать сохранение таблицы результатов на стороне клиента.
4 часа + 2 часа СР

Лекция №7: Web Inspector и препроцессоры CSS  
+ ДЗ №10

Углубленное изучение возможностей Chrome DevTools. SASS vs LESS.
Домашнее задание №10: ДЗ №10 "CSS"
main.css необходимо отрефакторить, разбив на scss блоки и собирать с помощью Grunt
4 часа + 2 часа СР

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

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

Лекция №8: Производительность  
+ ДЗ №11

Загрузка страницы и ее ресурсов. HTTP кэширование. Оптимизации JS.
Домашнее задание №11: ДЗ №11 "Оптимизация проекта"
Оптимизировать скорость загрузки и работы проекта.
4 часа + 2 часа СР

Лекция №9: Возможности смартфонов  
+ ДЗ №12

Viewport
TouchEvents
Особенности работы мобильных устройств и их датчиков.
Домашнее задание №12: ДЗ №12 "Мобильная страница джойстика"
Сделать страницу-джойстик, адаптированную для работы на мобильных устройствах.
4 часа + 2 часа СР

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

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

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

На итоговой защите проекта студенты могут повысить оценку в случае, если набранные баллы за курс их не устраивают.
4 часа + 2 часа СР

РАСПИСАНИЕ

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