Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Конструктор / Денис Паясь (Яндекс)

989 views

Published on

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

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

Стала закрадываться мысль, что пора что-то менять. И мы поменяли.

В докладе я расскажу о том, как мы с помощью проекта на стыке фронтендеров, менеджеров, и дизайнеров, навели во всем этом идеальный порядок. Каким образом поменяли наш код процессы и инструменты, а также что нам это дало, и как будем жить с этим дальше.

Если вам знакомы похожие проблемы, то наш опыт может оказаться вам чертовски полезным.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Конструктор / Денис Паясь (Яндекс)

  1. 1. 1
  2. 2. Конструктор 2
  3. 3. 3
  4. 4. Команда Москва Санкт-Петербург Екатеринбург Симферополь Минск Киев 35 Фронтендеров 6 городов 4
  5. 5. Источник: http://giphy.com/posts/10-best-minions-gifsИсточник:http://img0.ndsstatic.com/wallpapers/c42ac6a0c2aaee69c79955d1d32c54b4_large.jpeg 5
  6. 6. 6
  7. 7. 7
  8. 8. Source Source priv.js браузер пользователя Report … Source Backend Frontend 8
  9. 9. Разработка: v.0 Собираем данные 9
  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/...", }] } Фича: колдунщик новых девайсов 10
  11. 11. Разработка: v.0 Собираем данные Рисуем дизайн 11
  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/...", }] } Фича: колдунщик новых девайсов 12
  13. 13. Разработка: v.0 Собираем данные Рисуем дизайн Создаем компонент Базовые блоки 13
  14. 14. Разработка: v.0 Собираем данные Рисуем дизайн Создаем компонент Базовые блоки Тестируем 14
  15. 15. Тестирование 1. Все браузеры и платформы (десктоп, планшеты, телефоны) 2. Счетчики 3. Поведение фичи на реальных данных 15
  16. 16. Разработка: v.0 Собираем данные Рисуем дизайн Создаем компонент Базовые блоки Тестируем В продакшн! 16
  17. 17. Фича: колдунщик новых девайсов /blocks /feature-new-devices 17
  18. 18. Прошёл месяц 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/…”, }] } } 19
  20. 20. 20
  21. 21. /blocks /feature-new-devices /feature-clothing 21
  22. 22. Проходит время… 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", }] } } 23
  24. 24. /blocks /feature-new-devices /feature-clothing /feature-vendor 24
  25. 25. и ещё… 25
  26. 26. /blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something … 26
  27. 27. и опять… 27
  28. 28. /blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something /feature-oh-shi … 28
  29. 29. Источник: pinterest.com/pin/166140673726880415/ 29
  30. 30. В чем проблема-то? 1. Фичи делаются ДОЛГО. 2. Приводить их к одному виду - АД. 30
  31. 31. Почему ? 31
  32. 32. Дизайн 32
  33. 33. Решения 1. Дизайнеры начинают делать прототипы. 33
  34. 34. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 34
  35. 35. 35
  36. 36. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент. 36
  37. 37. Разработка: v.1 Собираем данные Прототипируем дизайн Создаем компонент Construct Тестируем В продакшн! Depot 37
  38. 38. Фича: колдунщик туров 38
  39. 39. Время для следующей фичи 39
  40. 40. Фича: маркет 40
  41. 41. Источник: http://replygif.net/1288Источник: http://memesvault.com/wp-content/uploads/What-Meme-Face-08.jpg 41
  42. 42. Почему так произошло ? 42
  43. 43. Решения: Дизайн 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент для нас. 4. Версионирование & Cинхронизация. 43
  44. 44. 44
  45. 45. Разработка: v.2 Собираем данные Прототипируем дизайн Создаем компонент Construct Тестируем В продакшен! Depot 45
  46. 46. Все в Depot! 46
  47. 47. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент для нас 4. Версионирование & синхронизация 5. Адаптеры. 47
  48. 48. Адаптеры 48
  49. 49. Адаптер 1. Чистая функция. 2. Один адаптер - одна фича. 3. Абсолютно независим от других адаптеров. 49
  50. 50. Адаптеры Код бэкенда Адаптер Конструктор Произвольные данные Данные в формате API конструктора Браузер Разметка 50
  51. 51. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент для нас. 4. Версионирование & синхронизация. 5. Адаптеры. 6. Разработка компонент и фич - раздельные процессы. 51
  52. 52. Разработка: v.3 Собираем данные Прототипируем дизайн ConstructDepot Тестируем В продакшн! ТестыАдаптер 52
  53. 53. А зачем фронтам писать адаптеры ? 53
  54. 54. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент для нас. 4. Версионирование & синхронизация. 5. Адаптеры. 6. Разработка блоков и фич - раздельные процессы. 7. Адаптеры для всех :) 54
  55. 55. Не все менеджеры умеют git и вот это всё 55
  56. 56. Менеджеры и код 1. Web Морда, через которую можно просто прокинуть данные и написать адаптер. 56
  57. 57. Менеджеры и код 1. Web Морда, через которую можно просто прокинуть данные и написать адаптер. 2. Документация, чтобы менеджеры знали, что, собственно, писать :) 57
  58. 58. Веб интерфейс 58
  59. 59. 59
  60. 60. Документация 60
  61. 61. 61
  62. 62. К чему мы в итоге пришли 62
  63. 63. Профиты 1. Вместо недель фича делается за часы. 2. И зачастую даже не нами :) 3. Консистентность дизайна. 63
  64. 64. Разработка: v.3 Собираем данные Прототипируем дизайн ConstructDepot Тестируем В продакшн! ТестыАдаптер 64
  65. 65. Решения 1. Дизайнеры начинают делать прототипы. 2. Depot - реестр компонент для дизайнеров. 3. Construct - библиотека компонент. 4. Версионирование & синхронизация. 5. Адаптеры. 6. Разработка компонент и фич - раздельные процессы. 7. Адаптеры для всех :) 65
  66. 66. Вы можете использовать наш опыт 66
  67. 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

×