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.

Unified component library_egormiron

Presentation

  • Be the first to comment

  • Be the first to like this

Unified component library_egormiron

  1. 1. Единая библиотека компонентов между дизайном и фронтендом _Egor Miron, Hypervsn
  2. 2. Первое правило разработки библиотеки компонентов
  3. 3. Не разрабатывайте
  4. 4. UI Libraries
  5. 5. Критерии библиотеки компонентов
  6. 6. Последовательная _Consistency
  7. 7. Простая в поддержке _Maintainable
  8. 8. Абстрактная _Abstracted
  9. 9. Изолированная _Isolated
  10. 10. Организованная _Organized
  11. 11. Покрытая тестами _Fully Tested
  12. 12. Атомарный дизайн _Atomic Design
  13. 13. _Atoms
  14. 14. _Molecules
  15. 15. _Organisms
  16. 16. _Templates
  17. 17. _Pages
  18. 18. Дизайн AbstractSketch Invision
  19. 19. Варианты добавления новых компонентов в библиотеку
  20. 20. Добавление новых компонентов
  21. 21. Добавление новых фич
  22. 22. Style guide
  23. 23. Хранение Guide List’a •Все хранится в переменных •Все изменения глобальные
  24. 24. Соглашение по наименованию _Name Convention
  25. 25. CSS Handling
  26. 26. Коллизия имен _Name collision
  27. 27. Наследование классов _Inheritance
  28. 28. Глобальные ассеты _Global assets
  29. 29. Поддержка старых браузеров _Browser supporting
  30. 30. + + Code Review
  31. 31. PostCSS
  32. 32. • autoprefixier ( поддержка старых браузеров ) • postcss-modules ( проблема изоляции ) • autoreset ( проблема наследования ) • postcss-assets ( работа с ассетами ) • cssnano ( сжатие )
  33. 33. Storybook Add-ons: Knobs
  34. 34. Storybook Add-ons: Knobs
  35. 35. Storybook Add-ons: Viewport
  36. 36. Storybook Add-ons: Actions
  37. 37. Storybook Add-ons: Actions
  38. 38. Storybook Add-ons: Events
  39. 39. Storybook Add-ons: Jest
  40. 40. Storybook Add-ons: A11y
  41. 41. Тестирование •Jest + Enzyme •Юнит тесты •Снапшоты •Скриншоты
  42. 42. Документация •PropTypes •Notes •Storybook Docs
  43. 43. Не символьный элемент в дизайне - что делать?
  44. 44. Баланс между добавлением всего и сразу и не добавлением вообще
  45. 45. Проблема долгосрочной и краткосрочной перспективы Фича нужна вчера и нету времени на процессы
  46. 46. UI Lead - человек ответственный за целостность библиотеки
  47. 47. Создание стори до полной имплементации
  48. 48. Держите руку на пульсе актуального дизайн видения
  49. 49. Минусы • Увеличение времени на разработку • Дополнительная абстракция • Влияние на будущую архитектуру
  50. 50. Плюсы •Скорость разработки •Единая база знаний •Консистентная архитектура •Быстрый онбординг
  51. 51. Заключение
  52. 52. Thank you for listening Ссылка на слайды @egormiron QR Code

×