View
644
Download
13
Category
Preview:
DESCRIPTION
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
Citation preview
Организация frontend-разработкина крупном проектеКузнецов Дмитрий
01
Обо мне
Новосибирск 2GIS
Online Lead Frontend
02
Давным-давно
03
04
Сейчас же
05
06
Много всякогоразного фронтенда
07
Проблемы
1. Анимация на каждый чих
2. Бизнес-логика на клиенте
3. Высокая связность внутри frontend-команды
08
Да ладно ✌
09
10
Нельзя так просто взять
и переиспользовать процессы разработки backend-приложений для frontend-приложений!
11
Команда
Процесс ☆
Процесс
Инструмент
12
Frontend
Design
TestingManagement
Java
Scrip
t
Команда
13
Frontend-разработчик
14
JavaScript-программист
15
Все другие ♘♙♖
16
Команда
Процесс ☆
Процесс
Инструмент
17
Процесс
1. Дизайн
2. Разработка
3. Тестирование
18
1. Дизайн
19
2. Разработка
— Конвертация psd в html / css / js
— Смотрите в следующих слайдах... DOM-тесты спасают вёрстку!
20
3. Тестирование
— Функциональные тесты
21
Процесс
1. Дизайн
2. Разработка
3. Тестирование
22
Передача контекста23
Процесс
1. Дизайн
2. Разработка
3. Тестирование
24
1. Определение модуля FE JS
2. Формат данных FE
3. HTML-шаблон FE
4. Вёрстка FE
5. Анимация FE
6. DOM-тесты FE JS
7. Внутримодульная логика JS
8. Интеграция модуля JS
9. Ревью FE JS
25
26
1. Определение модуля27
2. Формат данных
{
title: ITmozg.ru, Информационный сайт
address: Обуховской обороны проспект, 70 к2
attrs: Наличный расчет, Visa, MasterCard, Безналичный расчет, MaestroCard
status: Открыто
}
28
3. HTML-шаблон
<article class="mini-card">
<h1 class="mini-card__title"> {{title}} </h1>
<address class="mini-card__address"> {{address}} </address>
<div class="mini-card__attrs"> {{attrs}} </div>
<div class="mini-card__status"> {{status}} </div>
</article>
29
4. Верстка
.mini-card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-user-experience: fantastic;
background: url(assets/baron.svg);
}
30
Проверяем верстку
Вёрстка
31
5. Анимация32
33
6. DOM-тесты
— Наличие важных элементов, классов и стилей
— Отработка скриптов по событиям
— Показ или скрытие каких-то элементов при определенных условиях
— ...
34
Пример 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
Контентные тесты36
7. Внутримодульная логика37
8. Интеграция модуля38
9. Ревью39
1. Определение модуля FE JS
2. Формат данных FE
3. HTML-шаблон FE
4. Вёрстка FE
5. Анимация FE
6. DOM-тесты FE JS
7. Внутримодульная логика JS
8. Интеграция модуля JS
9. Ревью FE JS
40
Команда
Процесс ☆
Процесс
Инструмент
41
Передача верстки в разработку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
Команда
Процесс ☆
Процесс
Инструмент
44
45
46
47
Команда
Процесс ☆
Процесс
Инструмент
48
Резюме
— Frontend-разработчик и javascript-программист
— Передача контекста — самое важное в процессе
— Делайте инструменты под себя
49
Вопросы?
d.kuznecov@2gis.ru
github.com/diokuz
@diokuz
50
Recommended