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

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

Весна 2016

Цель курса — Дать студентам навыки клиентской разработки, навыки работы с базовыми технологиями 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 баллов (сданы все теоретически вопросы, понятен код всего приложения, на все модули есть тесты, группа прошла ревью кода, и защитила проект на открытой защите).

Подробнее

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

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

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

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

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

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

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

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

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

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

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

Программа

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

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

Знакомство с курсом. Тестирование. Обсуждение проекта. Обсуждение Workflow. Настройка Express. Обзор возможностей браузера. Обзор современных JavsScript фреймворков. ДЗ 1.1 Сформировать идею игры. Определиться с группой. Изучить Git и попробовать workflow. Сделать первый pull-requst.
Домашнее задание №1: "Формирование команды и идеи игры"
Сформировать идею игры. Определиться с группой и ролями в ней.
4 часа + 4 часа СР

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

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

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

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

Семинар №1: Мастер-класс "Разработка фичи"   + ДЗ №4

Разработка фичи “Форма логина”. ДЗ 1.4 Реализовать форму регистрации/авторизации
Домашнее задание №4: Разработка форм
Реализовать форму регистрации/авторизации в приложении.
4 часа + 4 часа СР

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

Проверка ДЗ первого модуля.
Домашнее задание №5: Правки по макетам
Внести изменения в проекты в соответсвии с рекомендациями, полученными на РК.
4 часа + 4 часа СР

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

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

Смешанное занятие №4: Основы работы с Canvas.   + ДЗ №7

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

Семинар №2: Возможности современного JavaScript. Презентация в HTML.   + ДЗ №8

Обзор изменений, внесенных в JS со спецификацией ES-2015. Подготовка презентации в HTML.
Домашнее задание №8: Реализация игровой механики
Реализация игровой механики для одного игрока
4 часа + 4 часа СР

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

Показ проектов.
4 часа + 2 часа СР

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

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

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

HTTP. AJAX. REST. WebSockets
Домашнее задание №9: Взаимодействие с сервером
Реализовать работу с API с помощью XHR и WebSockets
Домашнее задание №10: --- УДАЛЕНО ---
-
4 часа + 2 часа СР

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

HTTP Cookies. LocalStorage. SessionStorage. ДЗ 3.2 Реализовать сохранение таблицы результатов на стороне клиента.
Домашнее задание №11: Хранение данных на клиенте
Организовать кэширование данных приложения на стороне браузера.
4 часа + 2 часа СР

Лекция №4: Web Inspector и препроцессоры CSS.   + ДЗ №12

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

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

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

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

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

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

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

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

Сдача ДЗ модуля.
4 часа + 10 часа СР

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

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