Designing Component API

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.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

March 01, 2018
Tweet

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