SERP или просто страница результатов поисковой выдачи — это действительно большой проект с огромной аудиторией. Над ним работают около 40 фронтендеров из разных городов. Эта страница показывается больше 200 000 000 раз в день. При таких размерах даже модульная архитектура уже не слишком спасала нас от странных, неочевидных зависимостей, лишних стилей и нескольких разных реализаций почти одинаковых компонентов. Процесс разработки новой, даже довольно простой на первый взгляд фичи занимал чудовищное количество времени и представлял из себя хаотичное взаимодействие большого количества людей: фронта, бэкенда, дизайнеров и менеджеров. Стала закрадываться мысль, что пора что-то менять. И мы поменяли. В докладе я расскажу о том, как мы с помощью проекта на стыке фронтендеров, менеджеров, и дизайнеров, навели во всем этом идеальный порядок. Каким образом поменяли наш код процессы и инструменты, а также что нам это дало, и как будем жить с этим дальше. Если вам знакомы похожие проблемы, то наш опыт может оказаться вам чертовски полезным.

1. 1

2. Конструктор
2

3. 3

4. Команда
Москва
Санкт-Петербург
Екатеринбург
Симферополь
Минск
Киев
35 Фронтендеров
6 городов
4

5. Источник: http://giphy.com/posts/10-best-minions-gifsИсточник:http://img0.ndsstatic.com/wallpapers/c42ac6a0c2aaee69c79955d1d32c54b4_large.jpeg
5

6. 6

7. 7

8. Source
Source
priv.js
браузер
пользователя
Report
…
Source
Backend Frontend
8

9. Разработка: v.0
Собираем
данные
9

10. {
"type": “new-devices"
"models": [{
"category_id": "91491",
"img_src": "//mdata.yandex.net/i?...",
"name": "Apple iPhone 6 Plus 16Gb",
"url": “//market.yandex.ru/product/...",
}, {
"category_id": "91491",
"img_src": "//mdata.yandex.net/...",
"name": "Apple iPhone 5S 32Gb восстановленный",
"url": "//market.yandex.ru/product/...",
}]
}
Фича: колдунщик новых девайсов
10

11. Разработка: v.0
Собираем
данные
Рисуем дизайн
11

12. {
"type": “new-devices"
"models": [{
"category_id": "91491",
"img_src": "//mdata.yandex.net/i?...",
"name": "Apple iPhone 6 Plus 16Gb",
"url": “//market.yandex.ru/product/...",
}, {
"category_id": "91491",
"img_src": "//mdata.yandex.net/...",
"name": "Apple iPhone 5S 32Gb восстановленный",
"url": "//market.yandex.ru/product/...",
}]
}
Фича: колдунщик новых девайсов
12

13. Разработка: v.0
Собираем
данные
Рисуем дизайн
Создаем
компонент
Базовые блоки
13

14. Разработка: v.0
Собираем
данные
Рисуем дизайн
Создаем
компонент
Базовые блоки
Тестируем
14

15. Тестирование
1. Все браузеры и платформы (десктоп, планшеты,
телефоны)
2. Счетчики
3. Поведение фичи на реальных данных
15

16. Разработка: v.0
Собираем
данные
Рисуем дизайн
Создаем
компонент
Базовые блоки
Тестируем В продакшн!
16

17. Фича: колдунщик новых девайсов
/blocks
/feature-new-devices
17

18. Прошёл месяц
18

19. Фича: Колдунщик Одежды
{
"type": "clothing"
"data": {
"category_name": "Женские платья",
"clusters": [{
"currency": " руб.",
"picture": “//0.cs-ellpic.yandex.net/…”,
"price": "7483",
"url": “//market.yandex.ru/product/1642…”,
}, {
"currency": " руб.",
"picture": “//0.cs-ellpic.yandex.net/…”,
"price": "805",
"url": “//market.yandex.ru/…”,
}]
}
}
19

20. 20

21. /blocks
/feature-new-devices
/feature-clothing
21

22. Проходит время…
22

23. Фича: Еще один колдунщик
{
"type": “yet-another-feature“
"data": {
"clusters": [{
"currency": “руб.",
"model": “Lumia 920",
"img": “//0.cs-ellpic.yandex.net/…”,
"price": "16100",
"url": “//market.yandex.ru/product/1642…”,
"feedback_count": "10",
}, {
"currency": “руб.",
"model": “808 Pure View",
"img": “//0.cs-ellpic.yandex.net/…”,
"price": "16100",
"url": “//market.yandex.ru/…”,
"feedback_count": "1032",
}]
}
}
23

24. /blocks
/feature-new-devices
/feature-clothing
/feature-vendor
24

25. и ещё…
25

26. /blocks
/feature-new-devices
/feature-clothing
/feature-vendor
/feature-something
…
26

27. и опять…
27

28. /blocks
/feature-new-devices
/feature-clothing
/feature-vendor
/feature-something
/feature-oh-shi
…
28

29. Источник: pinterest.com/pin/166140673726880415/
29

30. В чем проблема-то?
1. Фичи делаются ДОЛГО.
2. Приводить их к одному виду - АД.
30

31. Почему ?
31

32. Дизайн
32

33. Решения
1. Дизайнеры начинают делать прототипы.
33

34. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
34

35. 35

36. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент.
36

37. Разработка: v.1
Собираем
данные
Прототипируем
дизайн
Создаем
компонент
Construct
Тестируем В продакшн!
Depot
37

38. Фича: колдунщик туров
38

39. Время для следующей
фичи
39

40. Фича: маркет
40

41. Источник: http://replygif.net/1288Источник: http://memesvault.com/wp-content/uploads/What-Meme-Face-08.jpg 41

42. Почему так произошло ?
42

43. Решения: Дизайн
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & Cинхронизация.
43

44. 44

45. Разработка: v.2
Собираем
данные
Прототипируем
дизайн
Создаем
компонент
Construct
Тестируем В продакшен!
Depot
45

46. Все в Depot!
46

47. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & синхронизация
5. Адаптеры.
47

48. Адаптеры
48

49. Адаптер
1. Чистая функция.
2. Один адаптер - одна фича.
3. Абсолютно независим от других адаптеров.
49

50. Адаптеры
Код бэкенда Адаптер Конструктор
Произвольные
данные
Данные в
формате API
конструктора
Браузер
Разметка
50

51. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка компонент и фич - раздельные процессы.
51

52. Разработка: v.3
Собираем
данные
Прототипируем
дизайн
ConstructDepot Тестируем
В продакшн!
ТестыАдаптер
52

53. А зачем фронтам
писать адаптеры ?
53

54. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка блоков и фич - раздельные процессы.
7. Адаптеры для всех :)
54

55. Не все менеджеры
умеют git и вот это всё
55

56. Менеджеры и код
1. Web Морда, через которую можно просто прокинуть
данные и написать адаптер.
56

57. Менеджеры и код
1. Web Морда, через которую можно просто прокинуть
данные и написать адаптер.
2. Документация, чтобы менеджеры знали, что,
собственно, писать :)
57

58. Веб интерфейс
58

59. 59

60. Документация
60

61. 61

62. К чему мы в итоге
пришли
62

63. Профиты
1. Вместо недель фича делается за часы.
2. И зачастую даже не нами :)
3. Консистентность дизайна.
63

64. Разработка: v.3
Собираем
данные
Прототипируем
дизайн
ConstructDepot Тестируем
В продакшн!
ТестыАдаптер
64

65. Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка компонент и фич - раздельные процессы.
7. Адаптеры для всех :)
65

66. Вы можете использовать
наш опыт
66

67. Денис Паясь
Разработчик интерфейсов
Контакты
@twitter
facebook
+7 (966) 384 88 44
lostsoul@yandex-team.ru источник: http://gif-finder.com/wp-content/uploads/2014/08/Minions-Joy.gif
67