Pro Yearly is on sale from $80 to $50! »

Building web components: lessons, I have them.

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

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

May 20, 2016
Tweet

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>

  8. None
  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
  24. None
  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’);
  71. None
  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