Денис Паясь Яндекс "Конструктор", или идеальный порядок в большом проекте

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

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

5. Источник: http://giphy.com/posts/10-best-minions-gif

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

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

10. 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/...",
}]
}
Фича: колдунщик новых девайсов

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

12. 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/...",
}]
}
Фича: колдунщик новых девайсов

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

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

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

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

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

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

19. Фича: Колдунщик Одежды
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/…”,
}]
}
}

20. 20

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

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

23. Фича: Еще один колдунщик
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",
}]
}
}

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

25. и ещё…

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

27. и опять…

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

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

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

31. Почему ?

32. Компоненты которые мы пишем невозможно
реиспользовать.
32
Почему?

33. А почему ?

34. В чем проблема то ?
Нет эталона в дизайне. Дизайн всегда разный, и есть
сильные сомнения что отличия всегда осознанные.
34

35. Дизайн

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

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

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

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

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

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

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

44. Источник: http://replygif.net/1288

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

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

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

49. Все в Depot!

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

51. Адаптеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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