Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
25. 1. Определение модуля FE JS
2. Формат данных FE
3. HTML-шаблон FE
4. Вёрстка FE
5. Анимация FE
6. DOM-тесты FE JS
7. Внутримодульная логика JS
8. Интеграция модуля JS
9. Ревью FE JS
25
34. 6. DOM-тесты
— Наличие важных элементов, классов и стилей
— Отработка скриптов по событиям
— Показ или скрытие каких-то элементов при определенных условиях
— ...
34
35. Пример DOM-тестов
it('Не заполнено имя', function() {
$('.feedback__name').empty();
$('.feedback__form').trigger('submit');
var hasErrCls = $('.feedback__name').hasClass('error');
assert(hasErrCls, 'Выставлен класс ошибки');
});
01.
02.
03.
04.
05.
06.
35
40. 1. Определение модуля FE JS
2. Формат данных FE
3. HTML-шаблон FE
4. Вёрстка FE
5. Анимация FE
6. DOM-тесты FE JS
7. Внутримодульная логика JS
8. Интеграция модуля JS
9. Ревью FE JS
40
42. Передача верстки в разработку
1. Определение модуля FE JS
2. Формат данных FE
3. HTML-шаблон FE
4. Вёрстка FE
5. Анимация FE
6. DOM-тесты FE
7. Ревью FE
1. Внутримодульная логика JS
2. Интеграция модуля JS
3. Ревью JS
42
43. Процесс
Дизайн
Разработка
Тестирование
Дизайн
Разработка
Тестирование
Дизайн
Разработка
Тестирование
43