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

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

Monica Dinculescu

May 20, 2016
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

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