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

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

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

Подробнее

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

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



1 РК - 35 баллов

2 РК - 25 баллов

3 РК - 20 баллов

4 РК - 10 баллов



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



Ограничений по времени и штрафов нет. Любой модуль можно сдавать на любом РК, но после того, как все желающие сдали текущий РК. Иными словами, на последнем РК может просто не остаться времени, что сдать все хвосты. Если вы набрали меньше максимума баллов за модуль, его можно досдавать на следующем РК. Проект выполняется в группах 2-3 человека.



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

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

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

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

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

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



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

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

Подробнее

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

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

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

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

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

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

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

Программа

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

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

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

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

Необходимые технологии.

JavaScript за 60 минут.

Chrome DevTools.

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

Смешанное занятие №1: Архитектура и отладка веб-приложений   + ДЗ №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 часа СР

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Viewport

TouchEvents

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

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

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

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

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