Building web components: lessons, I have them.

or: Meownica's school for kids who want to web component good and do other things good too.

Web components are the new shiny thing on the web, but what makes a good web component? How do you design a useful API that works for all of your users and all of their browsers? How do you make it render quickly and how do you teach people how to use it? After a year of working on the Polymer Elements, I've made sure to make all the possible mistakes so that you don't have to. This talk is about the things I've learned from that.

Video: https://www.youtube.com/watch?list=PLNYkxOF6rcIDnSm7bZRJC36Ca1DYXSQ70&v=zfQoleQEa4w

Transcript

1. LESSONS I HAVE ‘EM OR: WEB COMPONENTS BUILDING
2. THE MEOWNICA SCHOOL FOR KIDS WHO WANT TO WEB GOOD AND DO OTHER THINGS GOOD TOO
3. Meow meow protips meow meow - @addyosmani
4. @notwaldorf
5. emojineer! @notwaldorf
6. @notwaldorf
7. web components <fancy-button>
9. API
10. MAINTENANCE API
11. MAINTENANCE PERFORMANCE API
12. MAINTENANCE A11Y PERFORMANCE API
13. MAINTENANCE A11Y API PERFORMANCE
14. 1990s HTML 1
15. BODY A H2 IMG UL LI HTML 1 1990s
16. HTML2 1995
17. INPUT FORM SELECT HTML2 1995
18. VIDEO AUDIO DIALOG CANVAS TEXTAREA DATALIST IMG PROGRESS INPUT FORM SELECT BUTTON HTML5 2016
19. UNIX 1970s
20. SED AWK GREP CAT TAR PWD CHMOD LS SORT RM UNIX 1970s
21. SED AWK GREP CAT TIME WHO HEAD TAIL TALK YES FIND ECHO MORE LESS WHOAMI DIFF GZIP GUNZIP MKDIR QUOTA KILL PS TELNET FTP LYNX DATE LPR CP ALIAS RMDIR MAN TAR PWD CHMOD LS SORT RM DU UNIX 1970s
22. be like grep not input
23. do one thing if you do it well it’s ok to
25. play nice with others composition
26. <select> <option>one</option> <option>two</option> <option> <button>button?<button> </option> <option> <input value=“input?”> </option> <option> <img src=“kitten.png”> </option> </select>

27. <select> <option>one</option> <option>two</option> <option> <button>button?<button> </option> <option> <input value=“input?”> </option> <option> <img src=“lemon.png”> </option> </select>

28. <select> <option>one</option> <option>two</option> <option> <button>button?<button> </option> <option> <input value=“input?”> </option> <option> <img src=“lemon.png”> </option> </select>

29. <paper-dropdown-menu> <paper-listbox> <paper-item>one</paper-item> <paper-item>two</paper-item> <paper-item> <button>button?</button> </paper-item> <paper-item> <input value=“input?”> </paper-item> <paper-item> <img src=“lemon.png”> </paper-item> </paper-listbox> </paper-dropdown-menu>
30. <paper-dropdown-menu> <paper-listbox> <paper-item>one</paper-item> <paper-item>two</paper-item> <paper-item> <button>button?</button> </paper-item> <paper-item> <input value=“input?”> </paper-item> <paper-item> <img src=“lemon.png”> </paper-item> </paper-listbox> </paper-dropdown-menu>
31. <paper-dropdown-menu> <paper-listbox> <paper-item>one</paper-item> <paper-item>two</paper-item> <paper-item> <button>button?</button> </paper-item> <paper-item> <input value=“input?”> </paper-item> <paper-item> <img src=“lemon.png”> </paper-item> </paper-listbox> </paper-dropdown-menu>
32. extensibility plan for the future
33. make no assumptions have no regrets
34. transparency don’t hide the state
35. value = “1234”
36. value = “1234” value = “”
37. value = “1234” value = “” value = “”
38. nobody actually likes surprises (srsly)
39. can i have the polyfill on the side pls?
40. be like grep not input
41. MAINTENANCE A11Y API PERFORMANCE
42. earns trust maintenance
43. semver builds trust
44. versions have meanings! 1.2.3
45. 1.2.4 patch version
46. 1.3.4 minor version
47. 2.3.4 major version
48. builds trust semver
49. builds trust testing
50. what to test: the public api
51. lol JavaScript fake the “private” api
52. what to test: the accessibility
53. what to test: the accessibility /accessibility-developer-tools /
54. what to test: the look & feel
55. HUXLEY PHANTOMCSS GHOSTSTORY MOGO
 CACTUS NEEDLE CSSCRITIC SIKULI QUIXOTE GEMINI
 PERCY what to test: the look & feel
56. what to test: element integration
57. have trust users
58. (WTFM) need docs users
59. MAINTENANCE A11Y API PERFORMANCE
60. do one thing if you do it well it’s ok to
61. do one thing it’s ok to if you do it fast
62. first paint focus on
63. do less & be lazy first paint
64. do less first paint
65. attached: function() { Polymer.RenderStatus.afterNextRender(this, function() { this.style.pointerEvents = this.disabled ? 'none' : ''; this.addEventListener('click', this._onClick.bind(this)); }); });
66. attached: function() { Polymer.RenderStatus.afterNextRender(this, function() { this.style.pointerEvents = this.disabled ? 'none' : ''; this.addEventListener('click', this._onClick.bind(this)); }); });
67. be lazy first paint
68. testing your performance first paint
69. results = []; for (let i = 0; i < 1000; i++) { console.time(‘total’); let console.time(‘task 1’)('video'); // Do something here (‘task 2’); console.timeEnd(‘total’);
70. results = []; for (let i = 0; i < 1000; i++) { console.time(‘total’); let console.time(‘task 1’)('video'); // Do something here console.time(‘task 2’); console.timeEnd(‘total’);
72. results = []; for (let i = 0; i < 1000; i++) { let start = performance.now(); let element = document.createElement('video'); // Do something here element.offsetWidth; let end = performance.now(); document.body.removeChild(element); results.push(end - start); }
73. results = []; for (let i = 0; i < 1000; i++) { let start = performance.now(); let element = document.createElement('video'); document.body.appendChild(element); element.offsetWidth; let end = performance.now(); document.body.removeChild(element); results.push(end - start); }
74. results = []; for (let i = 0; i < 1000; i++) { let start = performance.now(); let element = document.createElement('video'); document.body.appendChild(element); element.offsetWidth; let end = performance.now(); document.body.removeChild(element); results.push(end - start); }
75. results = []; for (let i = 0; i < 1000; i++) { let start = performance.now(); let element = document.createElement('video'); document.body.appendChild(element); element.offsetWidth; let end = performance.now(); document.body.removeChild(element); results.push(end - start); }
76. MAINTENANCE A11Y API PERFORMANCE
77. accessibility is like a blueberry muffin - @cordeliadillon
78. accessible elements make accessible apps
79. focus states
80. Departure City Arrival City Click Me! focus states
81. tabindex = 0 focus states use the platform!
82. document.activeElement focus states use the platform!
83. aria use the platform!
84. NAV A ARIA-CHECKED ARIA-SELECTED ARIA-LABEL ARIA-LABELLEDBY ARIA-HIDDEN ARIA-DISABLED aria use the platform!
85. accessible elements apps
86. elements apps fast
87. elements apps maintainable
88. elements apps amazing
89. @notwaldorf