Designing Component API

As a JS developer worked with AngularJS and Angular, I've cached myself with idea that one of the best examples of clean components API is web standards. They are created with care about multiple use-cases and provide clear declarative APIs.

Transcript

1. Designing Component API
2. 2 HELLO! Vitalii Bobrov ╺ brewing components 5 years ╺ building enterprise web apps ╺ components with Polymer, React, Angular and Web Components @bobrov1989 vitaliy-bobrov.github.io
3. 3 MOI! Vitalii Bobrov ╺ brewing components 5 years ╺ building enterprise web apps ╺ components with Polymer, React, Angular and Web Components @bobrov1989 vitaliy-bobrov.github.io
4. 4 1. API Shape Definition 2. State management 3. Theming
5. 1. API Shape Definition 5
6. “ 6 HTML: 28 years of incremental evolution 1995 HTML 2.0 1990 HTML 1.0 1997 HTML 3.2 1999 HTML 4.01 2014 HTML 5
7. <select> 7
8. <naive-dropdown> 8
9. <select> + additional content 9
10. <select> + additional content 10
11. <select> + additional content 11
12. <content-dropdown> 12
13. <content-dropdown> 13
14. 14 ╺ Be FOCUSED
15. <bar-chart> 15
16. <bar-chart> 16
17. tabindex 17
18. <bar-chart> + composition 18
19. 19 ╺ Be FOCUSED ╺ Be CONSISTENT
20. <line-chart> consistent 20
21. 21 ╺ Be FOCUSED ╺ Be CONSISTENT ╺ Be FAST
22. 22 ╺ Be FOCUSED ╺ Be CONSISTENT ╺ Be FAST ╺ Be LAZY
23. “ State ACCESSIBLE and CONTROLLED from outside. 23 2. State Management
24. <select> 24
25. <state-dropdown> 25
26. <state-dropdown> 26
27. <select> 27
28. <state-dropdown> 28
29. <state-dropdown> 29
30. “ Give styling FREEDOM. 30 3. Theming
31. <select> 31
32. <select> 32
33. <fancy-dropdown> 33
34. <fancy-dropdown> shadow dom + css variables 34
35. <fancy-dropdown> themes + css variables 35
36. “ Learn the stranger, and do not be afraid of yours. Taras Shevchenko 36
37. Thank you! 37 @bobrov1989 vitaliy-bobrov.github.io