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

THAT Conf 2021

THAT Conf 2021

Opportunity, documentation, and making the tech approachable are all core principles for onboarding any new platform into any size organization. How can we make it easy for new devs to consume? How could we make it easy for new devs to contribute? Design has a pivotal role in this as well. The speed at which new or updated features and experiences are shipped is critical to business success.

In this talk, I want to share the experience our teams had with building a new design system during one of the most critical times in our history. I will discuss how we are leveraging a technology that most were unwilling to consider and using this as an opportunity to shape a new and innovative future for the org.

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

July 29, 2021
Tweet

Transcript

  1. Bridge the gap HTML Web Components

  2. Opinions expressed are my own, and not specifically the opinions

    of my employer
  3. None
  4. None
  5. None
  6. @anotheruiguy Dale Sande | Principal Engineer

  7. @anotheruiguy Dale Sande | Principal Engineer

  8. Bridge the gap HTML Web Components

  9. You… HTML custom elements, 
 design system, design/product lead development

    Other teams (aka customers) THE GAP… is real!
  10. what’s the problem? So… But, make it simple for me

    :)
  11. != 3x

  12. None
  13. != v1.1 2x 1x

  14. None
  15. None
  16. None
  17. None
  18. You fought for change So… now do the work

  19. 2019

  20. None
  21. None
  22. 2020 This is the year to KICK IT!

  23. zero sum === shift the balance
 (take no risks)

  24. This talk is not normal!
 
 2020 was not normal!


    
 Where we are now 
 is not normal!
  25. None
  26. None
  27. None
  28. ME Peers who would not let me fail

  29. How do you build CEs? So… Let’s look at the

    docs
  30. None
  31. That’s a lot to learn… Wow… Is there an easier

    way?
  32. None
  33. None
  34. None
  35. Dude… I already know React! You say I ‘need’ to

    learn ‘that’ so 
 that people who don’t use React
 will use my components? Nope.
  36. Now what? Sh!t…

  37. None
  38. Building CEs is hard I am a lazy dev… do

    you have a generator, docs, support?
  39. None
  40. None
  41. None
  42. None
  43. None
  44. A generator sets up new 
 devs for success with


    guardrails, & links to 
 documentation, 
 communication 
 and support.
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. No CE lives in a vacuum Hold up… How does

    this work?
  53. None
  54. None
  55. Tokens WCSS Icons CEs

  56. None
  57. None
  58. Tokens WCSS Icons CEs

  59. None
  60. Tokens WCSS Icons CEs

  61. None
  62. Tokens WCSS Icons CEs

  63. None
  64. None
  65. Value, Opportunity and lots of education Illustrating Providing

  66. None
  67. None
  68. How to you use CEs? Nice architecture… If there is

    a giant config, I will scream!
  69. –super smart engineer “HTML custom elements are… just HTML o_O”

  70. None
  71. None
  72. None
  73. None
  74. –super smart engineer “Anywhere you can use HTML, 
 you

    can use HTML custom elements”
  75. None
  76. None
  77. None
  78. Lit 2.0 supports SSR; 
 any CE built with Lit

    will work inside a Svelte project
  79. React is still slightly a pain in the ass
 


    You can SHIP CEs in React, `rel` is your friend 
 Lit 2.0 support easy-to- buld React wrappers
  80. If you like Vue <template> then you will love HTML

    tagged template literals
  81. CEs work in Angular. Make Angular dev better by NOT

    using Angular :)
  82. Let’s see something Nice talk… I mean, something big!

  83. None
  84. None
  85. None
  86. – Some Managing Director “This ‘flight status’ view, how do

    I say… SUCKS!”
  87. – Super Smart Designer and Engineer “What do we get

    for free? 
 And, what do we have to design/build?”
  88. 14

  89. – Super Smart Product Owner “What do I get for

    free? 
 And, what will cost me?”
  90. 6

  91. None
  92. None
  93. None
  94. None
  95. – Super Smart Product Owner “This is amazing… where is

    this
 list of free stuff?”
  96. None
  97. None
  98. – Concerned Product Owner “Who builds all this stuff?”

  99. None
  100. None
  101. None
  102. None
  103. None
  104. The bridge is long In conclusion… But the gap is

    now short
  105. None
  106. None
  107. “Thanks!”

  108. “Thanks!” @anotheruiguy Dale Sande | Principal Engineer Auro Design System