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. 2.
  2. 8.
  3. 9.

    API

  4. 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
  5. 24.
  6. 65.

    attached: function() { Polymer.RenderStatus.afterNextRender(this, function() { this.style.pointerEvents = this.disabled ?

    'none' : ''; this.addEventListener('click', this._onClick.bind(this)); }); });
  7. 66.

    attached: function() { Polymer.RenderStatus.afterNextRender(this, function() { this.style.pointerEvents = this.disabled ?

    'none' : ''; this.addEventListener('click', this._onClick.bind(this)); }); });
  8. 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’);
  9. 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’);
  10. 71.
  11. 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); }
  12. 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); }
  13. 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); }
  14. 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); }