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

input I <3 you, but you're bringing me down

input I <3 you, but you're bringing me down

Browsers have had native DOM elements since the dawn of time, and yet any time you talk to web developers about it, everyone complains about them. Key events are bananas. The element is unpredictable and grumpy. Have you ever tried to fill in one of those credit card forms where you can’t figure out what format the phone number should be in? Yeah, that’s what we’re talking about. Forms? Forms are magic, and not in a good way. Web Components let you stand up to browsers and build your own DOM elements that work the way they should, and Polymer is a new library that makes it easier than ever to do this.

Video: https://vimeo.com/144980655

Monica Dinculescu

November 06, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. I YOU
    BUT YOU’RE BRINGING ME DOWN

    View full-size slide

  2. LET ME
    TELL YOU A STORY

    View full-size slide

  3. 1993
    THE EARLY YEARS

    View full-size slide

  4. HTML2
    TEXT
    PASSWORD
    CHECKBOX
    RADIO
    IMAGE
    HIDDEN
    SUBMIT
    RESET
    >

    View full-size slide

  5. HTML2
    TEXT
    PASSWORD
    CHECKBOX
    RADIO
    IMAGE
    HIDDEN
    SUBMIT
    RESET
    >

    View full-size slide

  6. COOL
    COOL COOL COOL

    View full-size slide

  7. 1995-2011
    BIT SLOW, TBH

    View full-size slide

  8. BECAUSE INPUT.

    View full-size slide

  9. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View full-size slide

  10. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View full-size slide

  11. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View full-size slide

  12. HTML5
    COLOR
    DATE/ TIME
    WEEK/ MONTH
    NUMBER
    RANGE
    SEARCH
    EMAIL
    TEL / URL
    >

    View full-size slide

  13. BUT AS WE KNOW,
    JAVASCRIPT

    View full-size slide

  14. $(‘input[ type=number ]’).value

    View full-size slide

  15. $(‘input[ type=number ]’).value

    View full-size slide

  16. $(‘input[ type=number ]’).value

    View full-size slide

  17. WAIT FOR IT
    IT GETS BETTER

    View full-size slide

  18. AN
    IS AN
    HTMLInputElement
    HTMLInputElement

    View full-size slide

  19. $(‘input[ type=checkbox ]’).checked = true

    View full-size slide

  20. $(‘input[ type=checkbox ]’).checked = true

    View full-size slide

  21. $(‘input[ type=checkbox ]’).checked = true
    number

    View full-size slide

  22. $(‘input[ type=checkbox ]’).checked = true
    number

    View full-size slide

  23. $(‘input[ type= text ]’).selectionStart = 4

    View full-size slide

  24. $(‘input[ type= text ]’).selectionStart = 4

    View full-size slide

  25. $(‘input[ type=number ]’).selectionStart = 4

    View full-size slide

  26. $(‘input[ type=number ]’).selectionStart = 4

    View full-size slide

  27. LET’S DO BETTER!

    View full-size slide

  28. 2012
    A NEW HOPE

    View full-size slide

  29. 2012
    WEB COMPONENTS

    View full-size slide

  30. WE
    ENCAPSULATION

    View full-size slide

  31. WHAT WOULD IT
    LOOK LIKE?

    View full-size slide



  32. Make a batman!






    View full-size slide



  33. Make a batman!






    View full-size slide



  34. Make a batman!






    View full-size slide

  35. WHAT
    DO WE NEED?

    View full-size slide

  36. SPECS!
    IN THE MEANTIME…

    View full-size slide

  37. A BIT OF MAGIC
    POLYFILLS

    View full-size slide

  38. HTML IMPORTS

    View full-size slide

  39. CUSTOM ELEMENTS
    document.registerElement

    View full-size slide

  40. THE SHADOW DOM
    ENCAPSULATION

    View full-size slide

  41. THE SHADOW DOM
    THIS ISN’T NEW

    View full-size slide

  42. ONCE MORE
    WITH FEELING

    View full-size slide


  43. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  44. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  45. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  46. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  47. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman';
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  48. var proto = Object.create(HTMLElement.prototype);
    proto.attachedCallback = function() {
    this.innerText = this.getAttribute(‘name') + ‘ is batman’;
    };
    document.registerElement(‘a-batman', {prototype:proto});

    View full-size slide


  49. LETS DO BETTER!

    View full-size slide

  50. WEB COMPONENTS
    EVERYWHERE!!!

    View full-size slide

  51. SHOULD BE
    EASY TO WRITE

    View full-size slide



  52. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View full-size slide



  53. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View full-size slide



  54. <br/>:host { color: red; }<br/>
    My name is {{name}}


    View full-size slide



  55. <br/>span { color: red; }<br/>
    My name is {{name}}


    View full-size slide

  56. EASY TO USE
    SHOULD BE

    View full-size slide