Организация 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