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

DIY Components: Why and how?

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.

194dd05650fb6e5d5eec46ce267d4f1f?s=128

Julien Benchetrit

April 03, 2019
Tweet

Other Decks in Programming

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

  14. None
  15. None
  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?
  21. None
  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? "#
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  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

  48. None
  49. None
  50. None
  51. #2 Reuse your API

  52. None
  53. None
  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? "#
  58. None
  59. None
  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? "#
  63. None
  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? "#
  65. None
  66. None
  67. None
  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.