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.

Transcript

1. Bridge the gap HTML Web Components
2. Opinions expressed are my own, and not specifically the opinions of my employer
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
13. != v1.1 2x 1x
18. You fought for change So… now do the work
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!
28. ME Peers who would not let me fail
29. How do you build CEs? So… Let’s look at the docs
31. That’s a lot to learn… Wow… Is there an easier way?
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…
38. Building CEs is hard I am a lazy dev… do you have a generator, docs, support?
44. A generator sets up new 
 devs for success with
 guardrails, & links to 
 documentation, 
 communication 
 and support.
52. No CE lives in a vacuum Hold up… How does this work?
55. Tokens WCSS Icons CEs
58. Tokens WCSS Icons CEs
60. Tokens WCSS Icons CEs
62. Tokens WCSS Icons CEs
65. Value, Opportunity and lots of education Illustrating Providing
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”
74. –super smart engineer “Anywhere you can use HTML, 
 you can use HTML custom elements”
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!
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?”
89. – Super Smart Product Owner “What do I get for free? 
 And, what will cost me?”
95. – Super Smart Product Owner “This is amazing… where is this
 list of free stuff?”
98. – Concerned Product Owner “Who builds all this stuff?”
104. The bridge is long In conclusion… But the gap is now short
107. “Thanks!”
108. “Thanks!” @anotheruiguy Dale Sande | Principal Engineer Auro Design System