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.

Компонент-платформа / Александр Лобашев (Avito)

138 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 6 июля, 17:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2561

Компонентный подход принес много пользы, а вместе с тем и проблему переиспользования компонентов. В проекте появились сотни, тысячи компонентов, но со временем мы совсем забыли, где они живут, как их использовать и как они выглядят.

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Компонент-платформа / Александр Лобашев (Avito)

  1. 1. Component Platform Alexander Lobashev, @limarc
  2. 2. Тогда
  3. 3. 4 2014
  4. 4. 2014 • 6 разработчиков фронтенда • Простой код ($ + $.fn) • Небольшое количество компонентов • Простые инструменты тестирования (Chai + Mocha) • Свежий код 5
  5. 5. Создание продукта 6 Product Design Engineering
  6. 6. Дизайн-система
  7. 7. 8 2016 2014
  8. 8. 2016 • 26 разработчиков фронтенда • Формальные процессы в разработке • Сложные задачи (react, basis, no jquery) • SPA приложения и много компонентов (HOC, Composition) • Сложные инструменты тестирования (Chai + Mocha + Karma) • Со временем код устаревает 9
  9. 9. Создание продукта 10 Product Design Engineering Нет уникального стиля Нет базовых элементов Дизайнеры + Разработчики = ⚔️ Нет UI компонентов Сложно найти компонент Нет просмотра компонентов
  10. 10. 11
  11. 11. Много компонентов = ниже ценность компонента 13
  12. 12. 14
  13. 13. 15
  14. 14. 16 Open + In Progress Invalid In ReviewПроблема переиспользования компонентов
  15. 15. Проблемы • Отсутствие синхронизации (дизайнера и разработчика) • Поиск нужного компонента • Много разных версий компонента (какую использовать?) • Сложное тестирование компонентов • Изменения связанных компонентов (могут сломать продукты) • Страдание нового разработчика (обучение) 17
  16. 16. Покажите, где выход? 18
  17. 17. Потребности
  18. 18. 20 Разработчики Знания о компонентах
  19. 19. 21
  20. 20. Потребности • Максимальное переиспользование • UI компоненты • Каталог компонентов • Состав компонента • История компонента • Документация 22
  21. 21. 23 Дизайнеры Каталог компонентов
  22. 22. 24 «… х■■ найдешь актуальный макет»
  23. 23. Потребности • Унификация стилей (стандартные гайдлайны) • Актуальный каталог компонентов • Возможность поиграться с компонентами • Экспорт во внешние системы (Sketch, Figma) • Прототипирование интерфейсов • Дизайнеры + Разработчики = 😍 25
  24. 24. 26 Климат кода React, Basis.js и нативный код
  25. 25. Сейчас 27
  26. 26. 28 ▲ Component Platform
  27. 27. 29 Технологии и процессы эффективного создания продуктов
  28. 28. 30 ◉ Прозрачные процессы
  29. 29. Процессы • Манифест создания приложений • Манифест хранения данных приложений • Мониторинг ключевых метрик • Оптимизация старых процессов • Проект “Инициативы” 31
  30. 30. 32 ◉ Дизайн-система
  31. 31. 33 Способ коммуникации между дизайнером и разработчиком
  32. 32. Зачем? • Индустриализация разработки интерфейсов • Много “продуктовых” команд (дорого изобретать с нуля) • Согласованность разработки • Повышение качества разработки • “Дизайн-система” звучит круто • Набор стандартных шаблонов • Технологическая платформа компонентов 34
  33. 33. 35 Тренд
  34. 34. 36 Готовые решения
  35. 35. Carte Blanche /Playground/ https://github.com/carteb/carte-blanche https://github.com/meteor/chromatic/ Meteor Chromatic /Showcase/ https://github.com/airbnb/react-sketchapp React Sketchapp /Sync to Sketch/ 37 https://reactstudio.com React Studio /Visual Editor/
  36. 36. React Cosmos /Redux/ https://github.com/react-cosmos/react-cosmos https://github.com/electrode-io/electrode-explorer Electrode Explorer /Versions with npm/ https://github.com/storybooks/react-storybook React Storybook /Logger + addons/ 38 https://github.com/storybooks/react-storybook React Styleguidist /Redactor/
  37. 37. Vue Play /Vue.js/ https://github.com/vue-play/vue-play https://github.com/bhauman/devcards Devcards /ClojureScript/ https://sourcejs.com Source.js /JavaScript/ 39 https://github.com/yandex/dpt Yandex Depo /BEM-based/
  38. 38. Protein /Tool/ http://theprotein.io http://compositor.io/ Build components /Tool/ https://www.figma.com Figma, Atomic /Prototype/ 40 https://atomic.io
  39. 39. React или 🤷♀️ 41
  40. 40. Phakt 42
  41. 41. Инструмент для визуального отображения кода 43
  42. 42. Ценности 44
  43. 43. Язык коммуникации 45
  44. 44. Унификация визуального стиля 46
  45. 45. Скорость создания продукта 47
  46. 46. Гибкость изменения продукта 48
  47. 47. Демо 49
  48. 48. 50
  49. 49. 51 Playground
  50. 50. 56 ◉ Инструменты оценки качества
  51. 51. Видеть изменения
  52. 52. Контролировать изменения
  53. 53. Не бояться делать изменения
  54. 54. 1. Платформа тестирования
  55. 55. Требования к платформе — простота, скорость и юзерфрендли
  56. 56. TDD, BDD или test() — как нравится вам
  57. 57. Git, Watch, Cache, Parallelizes test — умное использование окружения
  58. 58. Messages, Interactive mode, Zero Configuration, Instant Feedback — дружелюбность
  59. 59. Jest
  60. 60. 2. Snapshot.js
  61. 61. Инструмент для исследования компонента
  62. 62. Возможности • Информация о структуре компонента • Генерация дерева компонента (jest.snapshot) • Генерация разных состояний компонента • Поиск элементов в компоненте • Поиск компонента в компоненте • Эмуляция событий в компоненте 69
  63. 63. // Snapshot test test('button', () => { const snap = snapshot(<Button>Button</Button>); expect(snap.snapshot).toMatchSnapshot(); }); Генерация структуры
  64. 64. События компонента // Event test test('button with onClick', () => { const fn = jest.fn(); const snap = snapshot(<Button onClick={fn}>Button</Button>); snap.find('button').simulate('click'); expect(snap.snapshot).toMatchSnapshot(); expect(fn).toHaveBeenCalled(); });
  65. 65. Поиск элемента // Find test test('alert with close', () => { const snap = snapshot(<Alert hasClose={true}>Alert</Alert>); const elementClose = snap.find(element => { return element.props.className.includes('close'); }); expect(elementClose.type).toBe('button'); });
  66. 66. 3. Debug.js
  67. 67. Инструмент для проверки компонента
  68. 68. Возможности • Позволяет писать правила, по которым будет проверяться компонент • Проверка свойств компонента • Проверка сложных зависимостей в компоненте • Возможность задания кастомных правил для проверки 75
  69. 69. Нашли ошибки после первого релиза
  70. 70. Компонент платформа • Прозрачные процессы • Технологическая платформа для промышленной разработки • Инструменты оценки качества изменений 77
  71. 71. 78 Развивайте платформу и делитесь опытом
  72. 72. Спасибо @limarc
  73. 73. Image refs • Fabricio Rosa Marques https://dribbble.com/shots/2810191-Lego-Brick-Loader • Kee Lee https://dribbble.com/shots/3106656-10000-Layers-Of-Legos-2x • Berin Catic https://dribbble.com/shots/3274286-Microservices-illustration-for-magazine-4 • Clip Art Bunny Rabbits http://olddesignshop.com/2017/02/free-vintage-clip-art-bunny-rabbits/ 80

×