DIY Components: Why and how?

[ABSTRACT] You've been given a design which is going to require a complex dropdown menu. You would've liked to save time and use a tag but it's missing some features. Do you use a component library or do you courageously build your own component from scratch? We'll look into why the DIY route is so challenging, learn to think like a component developer and understand the implications of going DIY vs component library vs built-in HTML.

Transcript

1. DIY Components Why and how? by Julien Benchetrit
2. DIY Components Who am I? • I'm Julien. I've been building web apps and websites since 2009.
3. DIY Components Who am I? • I'm Julien. I've been building web apps and websites since 2009. • I work at Healthy.io, a digital healthcare company.
4. DIY Components Who am I? • I'm Julien. I've been building web apps and websites since 2009. • I work at Healthy.io, a digital healthcare company. • I contribute to react-boilerplate.
5. DIY Components Who am I? • I'm Julien. I've been building web apps and websites since 2009. • I work at Healthy.io, a digital healthcare company. • I contribute to react-boilerplate. • I'm (sort of) on Twitter. @julienbenc
6. DIY Components What are we talking about? • Web components... • But not "Web Components"! • Small, interactive and reusable widgets. • You mean inputs? Kind of, yes. • They're a basic building block in most of our work.
7. DIY Components What about them? • Knowing how to build components is a skill in itself. • Alas, it's often a very complex endeavor. Why? • How do we get better at it?
8. <input> <select> <form>
9. <input> <textarea> <select> <form> <video> <audio> <button> <button> <progress> <dialog>
10. DIY Components DIY Components DIY Components
11. DIY Components DIY Components DIY Components
12. <dialog> <form method="dialog">
13. DIY Components DIY Components DIY Components
16. DIY Components Why not component libraries? • Not always maintained • Much harder to debug • Sometimes bloated
17. DIY Components How do we do it? • Write the API • Build the UX • Make it accessible • Make it performant • Maintain it
18. DIY Components Won't somebody please think of the users?
19. DIY Components DIY Components DIY Components Won't somebody please think of the users?
20. DIY Components DIY Components DIY Components Won't somebody please think of the users?
22. DIY Components DIY Components DIY Components Won't somebody please think of the users?
23. #1 Is it the responsible choice?
24. DIY Components Caveat? Won't somebody please think of the users?
25. DIY Components DIY Components DIY Components
26. #2 Make it feature-complete
27. #3 Make it accessible
28. DIY Components Won't somebody please think of the users? 1. Affects more people than you might think 2. Not just about vision and screen readers. Accessibility
29. DIY Components So make it accessible! ...but how? https://khan.github.io/tota11y/ Download JAWS
30. DIY Components DIY Components DIY Components 1. Is it the responsible choice? 2. Make it feature-complete 3. And, above all, accessible Won't somebody please think of the users?
31. DIY Components Won't somebody please think of the developers? "#
32. #1 __________ ______ __ _____ ___ __ ____ ___ _____
33. #1 _o__o_e___ __ou__ _e __a__ a__ _o o___ o_e __i__
34. #1 _o__o_e__s s_ou__ _e s_a__ a__ _o o___ o_e __i__
35. DIY Components Disclaimer •We're looking at controlled components. •Code samples use React. Won't somebody please think of the developers? "#
44. button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text daterange time url week
45. button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text daterange time url week
46. #1 _o__o_e__s s_ou__ _e s_a__ a__ _o o___ o_e __i__
47. #1 Components should be small and do only one thing
51. #2 Reuse your API
54. DIY Components HTML elements have interoperability Won't somebody please think of the developers? "#
55. DIY Components <form> •FormData •Built-in Validation •Browser Autofill •Accessibility Won't somebody please think of the developers? "#
56. DIY Components How do we make a custom input compatible with other Web APIs? In the case of forms... • Place an <input type="hidden"> inside your custom element and sync the values. • Custom Elements and the "is" attribute. Won't somebody please think of the developers? "#
57. DIY Components Hold on.... Custom Elements and the "is" attribute? Won't somebody please think of the developers? "#
60. DIY Components DIY Components DIY Components Won't somebody please think of the developers? "#
61. #3 When possible, give the gift of interoperability
62. DIY Components DIY Components DIY Components Won't somebody please think of the developers? "#
64. DIY Components Flexibility •Use strings like in a regular <select> •Pass a custom component or markup Won't somebody please think of the developers? "#
68. #4 Be ready to refactor
69. DIY Components DIY Components DIY Components 1. Make it single-purpose 2. Reuse APIs and patterns 3. Add interoperability 4. Refactor if necessary Won't somebody please think of the developers? "#
70. DIY Components RECAP • Building custom components isn't always the best path. • When it is, make sure that what you build is feature-complete. • It's our responsibility to our users. • Developing components is very challenging. • There's always downsides compared to native elements. • Make the right tradeoffs. • New standards will help. Eventually.