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
   

   View Slide

2. THE MEOWNICA SCHOOL FOR KIDS
   WHO WANT TO WEB GOOD
   AND DO OTHER THINGS GOOD TOO
   

   View Slide

3. Meow meow protips meow meow
   - @addyosmani
   

   View Slide

4. @notwaldorf
   

   View Slide

5. emojineer!
   @notwaldorf
   

   View Slide

6. @notwaldorf
   

   View Slide

7. web components
   
   

   View Slide

8. View Slide

9. API
   

   View Slide

10. MAINTENANCE
    API
    

    View Slide

11. MAINTENANCE
    PERFORMANCE
    API
    

    View Slide

12. MAINTENANCE
    A11Y
    PERFORMANCE
    API
    

    View Slide

13. MAINTENANCE
    A11Y
    API
    PERFORMANCE
    

    View Slide

14. 1990s
    HTML 1
    

    View Slide

15. BODY A H2 IMG UL LI
    HTML 1
    1990s
    

    View Slide

16. HTML2
    1995
    

    View Slide

17. INPUT FORM SELECT
    HTML2
    1995
    

    View Slide

18. VIDEO AUDIO
    DIALOG CANVAS
    TEXTAREA DATALIST IMG PROGRESS
    INPUT FORM SELECT BUTTON
    HTML5
    2016
    

    View Slide

19. UNIX
    1970s
    

    View Slide

20. SED AWK
    GREP CAT
    TAR PWD CHMOD LS SORT RM
    UNIX
    1970s
    

    View Slide

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
    

    View Slide

22. be like grep
    not input
    

    View Slide

23. do one thing
    if you do it well
    it’s ok to
    

    View Slide

24. View Slide

25. play nice with others
    composition
    

    View Slide

26. 
    one
    two
    
    button?
    
    
    
    
    
    
    
    

    

    View Slide

27. 
    one
    two
    
    button?
    
    
    
    
    
    
    
    

    

    View Slide

28. 
    one
    two
    
    button?
    
    
    
    
    
    
    
    

    

    View Slide

29. 
    
    one
    two
    
    button?
    
    
    
    
    
    
    
    
    
    

    View Slide

30. 
    
    one
    two
    
    button?
    
    
    
    
    
    
    
    
    
    

    View Slide

31. 
    
    one
    two
    
    button?
    
    
    
    
    
    
    
    
    
    

    View Slide

32. extensibility
    plan for the future
    

    View Slide

33. make
    no assumptions
    have no regrets
    

    View Slide

34. transparency
    don’t hide the state
    

    View Slide

35. value = “1234”
    

    View Slide

36. value = “1234”
    value = “”
    

    View Slide

37. value = “1234”
    value = “”
    value = “”
    

    View Slide

38. nobody actually
    likes surprises
    (srsly)
    

    View Slide

39. can i have
    the polyfill
    on the side pls?
    

    View Slide

40. be like grep
    not input
    

    View Slide

41. MAINTENANCE
    A11Y
    API
    PERFORMANCE
    

    View Slide

42. earns trust
    maintenance
    

    View Slide

43. semver
    builds trust
    

    View Slide

44. versions have meanings!
    1.2.3
    

    View Slide

45. 1.2.4
    patch version
    

    View Slide

46. 1.3.4
    minor version
    

    View Slide

47. 2.3.4
    major version
    

    View Slide

48. builds trust
    semver
    

    View Slide

49. builds trust
    testing
    

    View Slide

50. what to test:
    the public api
    

    View Slide

51. lol JavaScript
    fake
    the “private” api
    

    View Slide

52. what to test:
    the accessibility
    

    View Slide

53. what to test:
    the accessibility
    /accessibility-developer-tools
    /
    

    View Slide

54. what to test:
    the look & feel
    

    View Slide

55. HUXLEY PHANTOMCSS GHOSTSTORY MOGO

    CACTUS NEEDLE CSSCRITIC SIKULI QUIXOTE
    GEMINI

    PERCY
    what to test:
    the look & feel
    

    View Slide

56. what to test:
    element integration
    

    View Slide

57. have trust
    users
    

    View Slide

58. (WTFM)
    need docs
    users
    

    View Slide

59. MAINTENANCE
    A11Y
    API
    PERFORMANCE
    

    View Slide

60. do one thing
    if you do it well
    it’s ok to
    

    View Slide

61. do one thing
    it’s ok to
    if you do it fast
    

    View Slide

62. first paint
    focus on
    

    View Slide

63. do less & be lazy
    first paint
    

    View Slide

64. do less
    first paint
    

    View Slide

65. attached: function() {
    Polymer.RenderStatus.afterNextRender(this, function() {
    this.style.pointerEvents = this.disabled ? 'none' : '';
    this.addEventListener('click', this._onClick.bind(this));
    });
    });
    

    View Slide

66. attached: function() {
    Polymer.RenderStatus.afterNextRender(this, function() {
    this.style.pointerEvents = this.disabled ? 'none' : '';
    this.addEventListener('click', this._onClick.bind(this));
    });
    });
    

    View Slide

67. be lazy
    first paint
    

    View Slide

68. testing your
    performance
    first paint
    

    View Slide

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’);
    

    View Slide

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’);
    

    View Slide

71. View Slide

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);
    }
    

    View Slide

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);
    }
    

    View Slide

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);
    }
    

    View Slide

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);
    }
    

    View Slide

76. MAINTENANCE
    A11Y
    API
    PERFORMANCE
    

    View Slide

77. accessibility is like
    a blueberry muffin
    - @cordeliadillon
    

    View Slide

78. accessible elements
    make accessible apps
    

    View Slide

79. focus states
    

    View Slide

80. Departure City Arrival City Click Me!
    focus states
    

    View Slide

81. tabindex = 0
    focus states
    use the platform!
    

    View Slide

82. document.activeElement
    focus states
    use the platform!
    

    View Slide

83. aria
    use the platform!
    

    View Slide

84. NAV A ARIA-CHECKED ARIA-SELECTED
    ARIA-LABEL ARIA-LABELLEDBY
    ARIA-HIDDEN ARIA-DISABLED
    aria
    use the platform!
    

    View Slide

85. accessible
    elements apps
    

    View Slide

86. elements apps
    fast
    

    View Slide

87. elements apps
    maintainable
    

    View Slide

88. elements apps
    amazing
    

    View Slide

89. @notwaldorf
    

    View Slide