Интернет постоянно растет и развивается, сайты становятся сложнее, появляется всё больше комплексных веб-приложений. Чтобы завтра не попасть впросак, нужно быть готовым к сложностям, которые ожидают нас за поворотом.
Автор поделится своим опытом разработки интерфейсов для больших проектов; покажет, как за пару простых шагов можно перейти на следующий качественный уровень верстки и как максимально автоматизировать рабочие процессы, чтобы разрабатывать сайты быстрее, чем их рисуют.
Содержание программы
День первый: верстка больших проектов
На протяжении мастер-класса будут рассмотрены и разобраны основные подходы и лучший опыт разработки интерфейсов: от упрощенных вариантов до строгости БЭМа. Все, что вам нужно знать о серьезной верстке за пределами сайтов-визиток: от кодстайла и методологий до инструментов и собственных фреймворков.
- Обзор и разбор существующих методологий организации верстки и кодстайлов.
- Экспресс-курс по лучшим практикам организации кода.
- SMACSS, БЭМ, OOCSS, MCSS — их особенности и отличия.
- Зачем нужна методология, или как научится говорить на одном языке с другими разработчиками.
- Чеклист разработки под большие проекты — что нужно учесть, чтобы интерфейсы жили долго и не ломались.
- Как разрабатывать верстку, которую не хочется переписывать на каждой итерации.
- Чеклист для дизайнеров, или как сдавать задачи не открывая редактор.
- Как не навредить препроцессорами и не выкопать себе яму.
- Работа с общей библиотекой компонентов.
- Разбор существующих фреймворков (Bootstrap, Pure и др.).
- Принципы разработки собственного фреймворка.
- Стандарты не только для разработчиков, но и для дизайнеров.
- Практическое задание.
- Подробное ревью каждого выполненного задания на Github после мастер-класса.
День второй: автоматизация
Оптимизация, тестирование приложений, препроцессоры, автоматический анализ кода и быстрое разворачивание окружения — все это доступно уже сейчас, но как не потеряться в инновациях? Роберт расскажет об основных направлениях автоматизации процессов фронтенд-разработки, поделится мыслями о будущем этих инструментов и научит с ними работать.
Большая часть мастер-класса состоит из практических заданий на примере реальных проектов. Новички в сфере автоматизации получат множество материалов и полезных советов для быстрого старта. А кто успеет подготовиться, сможет также следовать за процессом и пробовать результат по ходу мероприятия, так что обязательно берите с собой ноутбуки!
- Введение в процессы автоматизации фронтенда.
- Что можно и нужно автоматизировать.
- Обзор готовых решений.
- Будущее инструментов.
- Знакомство с «исполнителями задач» (task runners).
- Изучаем и сравниваем самые популярные инструменты: Grunt, Gulp, Brunch.
- Пробуем их на практике и пишем первые скрипты.
- Обзор скаффолдеров grunt-init, Yeoman.
- Тестирование.
- Серия практических заданий по автоматической оптимизации ресурсов на примере реальных проектов.
- Замеры производительности.
- Простое функциональное тестирование.
- Модульные CSS препроцессоры.
- Немного о развертывании (deployment) веб-приложений.
Сертификат
После прослушивания курса «Профессиональный фронтенд» выдается сертификат Webskola.