Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Денис Паясь

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

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Денис Паясь

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

×