Документ описывает организацию процесса frontend-разработки на крупном проекте, выделяя основные этапы: дизайн, разработка и тестирование. Автор акцентирует внимание на важности адаптации процессов разработки под специфику frontend, а также на роли команды и инструментов в этом процессе. Приведены примеры модульной структуры, шаблонов HTML и методов тестирования.

1. Организация frontend-разработки
на крупном проекте
Кузнецов Дмитрий
01

2. Обо мне
Новосибирск 2GIS
Online Lead Frontend
02

3. Давным-давно
03

4. 04

5. Сейчас же
05

6. 06

7. 07
Много всякого
разного фронтенда

8. Проблемы
1. Анимация на каждый чих
2. Бизнес-логика на клиенте
3. Высокая связность внутри frontend-команды
08

9. Да ладно ✌
09

10. 10

11. Нельзя так просто взять
и переиспользовать процессы разработки backend-приложений для frontend-приложений!
11

12. Команда
Процесс Ó
Процесс
Инструмент
12

13. Frontend
Design
Testing
JavaScript
Команда
Management
13

14. Frontend-
разработчик
14

15. JavaScript-
программист
15

16. 16
Все другие ♘♙♖

17. Команда
Процесс Ó
Процесс
Инструмент
17

18. Процесс
1. Дизайн
2. Разработка
3. Тестирование
18

19. 1. Дизайн
19

20. 2. Разработка
— Конвертация psd в html / css / js
— Смотрите в следующих слайдах... DOM-тесты спасают вёрстку!
20

21. 3. Тестирование
— Функциональные тесты
21

22. Процесс
1. Дизайн
2. Разработка
3. Тестирование
22

23. Передача контекста
23

24. Процесс
1. Дизайн
2. Разработка
3. Тестирование
24

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

26. 26

27. 1. Определение модуля
27

28. 2. Формат данных
{
title: ITmozg.ru, Информационный сайт
address: Обуховской обороны проспект, 70 к2
attrs: Наличный расчет, Visa, MasterCard, Безналичный расчет, MaestroCard
status: Открыто
}
28

29. 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

30. 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. Проверяем верстку
Вёрстка
31

32. 5. Анимация
32

33. 33

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

36. Контентные тесты
36

37. 7. Внутримодульная логика
37

38. 8. Интеграция модуля
38

39. 9. Ревью
39

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

41. Команда
Процесс Ó
Процесс
Инструмент
41

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

44. Команда
Процесс Ó
Процесс
Инструмент
44

45. 45

46. 46

47. 47

48. Команда
Процесс Ó
Процесс
Инструмент
48

49. Резюме
— Frontend-разработчик и javascript-программист
— Передача контекста — самое важное в процессе
— Делайте инструменты под себя
49

50. Вопросы?
d.kuznecov@2gis.ru
github.com/diokuz
@diokuz
50