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 full-size slide

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

    View full-size slide

  3. Meow meow protips meow meow
    - @addyosmani

    View full-size slide

  4. emojineer!
    @notwaldorf

    View full-size slide

  5. web components

    View full-size slide

  6. MAINTENANCE
    API

    View full-size slide

  7. MAINTENANCE
    PERFORMANCE
    API

    View full-size slide

  8. MAINTENANCE
    A11Y
    PERFORMANCE
    API

    View full-size slide

  9. MAINTENANCE
    A11Y
    API
    PERFORMANCE

    View full-size slide

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

    View full-size slide

  11. INPUT FORM SELECT
    HTML2
    1995

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. be like grep
    not input

    View full-size slide

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

    View full-size slide

  17. play nice with others
    composition

    View full-size slide


  18. one
    two

    button?








    View full-size slide


  19. one
    two

    button?








    View full-size slide


  20. one
    two

    button?








    View full-size slide



  21. one
    two

    button?









    View full-size slide



  22. one
    two

    button?









    View full-size slide



  23. one
    two

    button?









    View full-size slide

  24. extensibility
    plan for the future

    View full-size slide

  25. make
    no assumptions
    have no regrets

    View full-size slide

  26. transparency
    don’t hide the state

    View full-size slide

  27. value = “1234”

    View full-size slide

  28. value = “1234”
    value = “”

    View full-size slide

  29. value = “1234”
    value = “”
    value = “”

    View full-size slide

  30. nobody actually
    likes surprises
    (srsly)

    View full-size slide

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

    View full-size slide

  32. be like grep
    not input

    View full-size slide

  33. MAINTENANCE
    A11Y
    API
    PERFORMANCE

    View full-size slide

  34. earns trust
    maintenance

    View full-size slide

  35. semver
    builds trust

    View full-size slide

  36. versions have meanings!
    1.2.3

    View full-size slide

  37. 1.2.4
    patch version

    View full-size slide

  38. 1.3.4
    minor version

    View full-size slide

  39. 2.3.4
    major version

    View full-size slide

  40. builds trust
    semver

    View full-size slide

  41. builds trust
    testing

    View full-size slide

  42. what to test:
    the public api

    View full-size slide

  43. lol JavaScript
    fake
    the “private” api

    View full-size slide

  44. what to test:
    the accessibility

    View full-size slide

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

    View full-size slide

  46. what to test:
    the look & feel

    View full-size slide

  47. HUXLEY PHANTOMCSS GHOSTSTORY MOGO

    CACTUS NEEDLE CSSCRITIC SIKULI QUIXOTE
    GEMINI

    PERCY
    what to test:
    the look & feel

    View full-size slide

  48. what to test:
    element integration

    View full-size slide

  49. have trust
    users

    View full-size slide

  50. (WTFM)
    need docs
    users

    View full-size slide

  51. MAINTENANCE
    A11Y
    API
    PERFORMANCE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. first paint
    focus on

    View full-size slide

  55. do less & be lazy
    first paint

    View full-size slide

  56. do less
    first paint

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. be lazy
    first paint

    View full-size slide

  60. testing your
    performance
    first paint

    View full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

  67. MAINTENANCE
    A11Y
    API
    PERFORMANCE

    View full-size slide

  68. accessibility is like
    a blueberry muffin
    - @cordeliadillon

    View full-size slide

  69. accessible elements
    make accessible apps

    View full-size slide

  70. focus states

    View full-size slide

  71. Departure City Arrival City Click Me!
    focus states

    View full-size slide

  72. tabindex = 0
    focus states
    use the platform!

    View full-size slide

  73. document.activeElement
    focus states
    use the platform!

    View full-size slide

  74. aria
    use the platform!

    View full-size slide

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

    View full-size slide

  76. accessible
    elements apps

    View full-size slide

  77. elements apps
    fast

    View full-size slide

  78. elements apps
    maintainable

    View full-size slide

  79. elements apps
    amazing

    View full-size slide