Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Библиотека UI компонентов, о которой вы всегда мечтали (RU)

Rob
June 01, 2016
Technology
1
960

Библиотека UI компонентов, о которой вы всегда мечтали (RU)

Видео: https://youtu.be/OpBo7hNpz6o

Уже много лет все говорят о компонентном вебе и мире, где новые интерфейсы строятся из готовых блоков на раз-два, но чего мы в итоге достигли? Пока БЭМ, Polymer, Angular и создатели других технологий ищут лучшие пути организации клиентского кода, создавая сложные абстракции, сообщество React уже давно наслаждается отличными и простыми инструментами для работы с UI компонентами.

В рамках доклада Роберт поделится опытом мирового React-сообщества в создании удобных и простых в обращении библиотек UI компонентов.

Вы научитесь:
- Разрабатывать компоненты таким образом, что их можно будет легко интегрировать в любые проекты.
- Создавать удобную, изолированную среду для разработки UI компонентов.
- Делиться описанием всевозможных состояний имплементаций компонентов с командой разработчиков и дизайнеров.

Rob

June 01, 2016
Tweet

More Decks by Rob

See All by Rob
The Truth Is Out There... Monitoring Your Isomorphic Application
operatino
0
120
Advanced SSR Caching in React
operatino
0
110
Building React Components Library (Conf Edition)
operatino
2
360
React Europe 2016 Recap
operatino
0
120
React - новая эра фронтенд разработки (RU)
operatino
3
460
The Developer's Guide to the React Component Libraries
operatino
3
590
Entering the new era of Front-end development with ReactJS
operatino
4
420
Building React Component Library (Meetup Edition)
operatino
1
500
The Style Guide Platform
operatino
6
1.4k

Other Decks in Technology

See All in Technology
Google Cloudで始めるLLM
john_smith
0
150
Company Overview for Engineers（Japanese）
caddi_eng
14
110k
TechNight#71 - Oracle Database 23c 新機能#1 Microservices関連新機能
oracle4engineer
PRO
0
160
テスト駆動開発でダイエットに挑戦して失敗した話
terahide
0
380
【IoT-Tech Meetup #5】IoTとは？WireGuard概要とIoTで通信を守る理由
soracom
PRO
0
440
KubeCon China 2023: Adventures in Platform Building
salaboy
0
140
Fivetranでデータ移動を自動化する
hankehly
0
150
Sansan LabsにおけるGPT活用事例 / GPT Application Case Studies at Sansan Labs
sansan_randd
3
880
テスト版水平思考クイズ〜不具合から原因を想像しよう〜/xpjug2023
yoshitake_1201
1
360
AWS CDKでインフラ、アプリを分離した際に困ったこと
smt7174
1
130
Amazon FSx for NetApp ONTAPを 利用するときに気をつけることn選 〜移行プロセスを添えて〜 #devio2023
non97
0
190
プロダクトオーナーとしてSLOに向き合う 〜Mackerelチームの事例〜 / SRE NEXT 2023
tatsuru
PRO
0
300

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
Learning to Love Humans: Emotional Interface Design
aarron
265
38k
Done Done
chrislema
178
15k
Git: the NoSQL Database
bkeepers
PRO
420
61k
Adopting Sorbet at Scale
ufuk
66
8.1k
Building Effective Engineering Teams - LeadDev
addyosmani
21
970
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.4k
Designing for Performance
lara
601
66k
Navigating Team Friction
lara
177
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
YesSQL, Process and Tooling at Scale
rocio
159
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.7k

Transcript

  1. БИБЛИОТЕКА UI
    КОМПОНЕНТОВ
    о которой вы всегда
    мечтали
    Роберт Харитонов
    @operatino & rhr.me

    View Slide

  2. Front-end Development Lead
    Liberty Global / Ziggo
    Роберт Харитонов @operatino

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. SourceJS
    The Living Style Guide Platform

    View Slide

  8. @operatino
    Предыдущие доклады
    • http://bit.ly/building-react-library
    • http://bit.ly/the-style-guide-platform
    • http://bit.ly/style-guide-tools-overview
    • http://bit.ly/documenting-the-markup

    View Slide

  9. Начнем наш
    КВЕСТ
    • Выбираем технологии
    • Выбираем инструменты
    • Разрабатываем

    View Slide

  10. @operatino
    Технологии

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. @operatino
    1816 компонентов 2288 компонентов
    http://react-components.com
    http://ngmodules.org

    View Slide

  15. @operatino

    View Slide

  16. @operatino
    Хороший компонент должен
    • Быть полностью инкапсулированным
    • Хорошо расширяться
    • Легко устанавливаться

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. @operatino
    Инструменты

    View Slide

  21. react-styleguidist

    View Slide

  22. View Slide

  23. View Slide

  24. react-storybook

    View Slide

  25. View Slide

  26. @operatino
    Разрабатываем

    View Slide

  27. Начинаем с малого

    View Slide

  28. View Slide

  29. Добавим стилей

    View Slide

  30. View Slide

  31. View Slide

  32. Добавим propTypes

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. @operatino
    Рабочая станция

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. Роберт Харитонов
    @operatino & rhr.me
    Спасибо!

    View Slide