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

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

November 06, 2015
Tweet

Transcript

  1. I YOU BUT YOU’RE BRINGING ME DOWN

  2. @NOTWALDORF

  3. None
  4. LET ME TELL YOU A STORY

  5. 1993 THE EARLY YEARS

  6. 1995 HTML2

  7. HTML2 > <input type =

  8. <input type = HTML2 TEXT PASSWORD CHECKBOX RADIO IMAGE HIDDEN

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

    <input type =
  10. None
  11. (710, 303)

  12. <input type=image src=“cat.png”>

  13. <input type=image>

  14. None
  15. None
  16. None
  17. <input type=file>

  18. None
  19. None
  20. None
  21. None
  22. COOL COOL COOL COOL

  23. 1995-2011 BIT SLOW, TBH

  24. 1999 HTML4

  25. <input type=button> HTML4

  26. None
  27. None
  28. None
  29. BECAUSE INPUT.

  30. 2011 HTML5

  31. HTML5 COLOR DATE/ TIME WEEK/ MONTH NUMBER RANGE SEARCH EMAIL

    TEL / URL > <input type =
  32. HTML5 COLOR DATE/ TIME WEEK/ MONTH NUMBER RANGE SEARCH EMAIL

    TEL / URL > <input type =
  33. HTML5 COLOR DATE/ TIME WEEK/ MONTH NUMBER RANGE SEARCH EMAIL

    TEL / URL > <input type =
  34. HTML5 COLOR DATE/ TIME WEEK/ MONTH NUMBER RANGE SEARCH EMAIL

    TEL / URL > <input type =
  35. None
  36. BUT AS WE KNOW, JAVASCRIPT

  37. <input type=number>

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

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

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

  41. WAIT FOR IT IT GETS BETTER

  42. AN IS AN HTMLInputElement HTMLInputElement

  43. <input type=checkbox>

  44. <input type=checkbox checked>

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

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

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

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

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

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

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

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

  53. None
  54. None
  55. LET’S DO BETTER!

  56. 2012 A NEW HOPE

  57. 2012 WEB COMPONENTS

  58. WE ENCAPSULATION

  59. <button></button>

  60. <link rel=”stylesheet” … href=“fancy.css” /> <button></button>

  61. <button class=“button”></button> <link rel=”stylesheet” … href=“fancy.css” />

  62. <button></button> <link rel=”stylesheet” … href=“fancy.css” /> <button class=“button”></button>

  63. <link rel=”stylesheet” … href=“shiny.css” /> <button></button> <link rel=”stylesheet” … href=“fancy.css”

    /> <button class=“button”></button>
  64. <button class=“button”></button> <link rel=”stylesheet” … href=“fancy.css” /> <button class=“button”></button> <link

    rel=”stylesheet” … href=“shiny.css” />
  65. <fancy-button></fancy-button> <shiny-button></shiny-button>

  66. WHAT WOULD IT LOOK LIKE?

  67. <html> <head> <title>Make a batman!</title> <link href=“a-batman.html" rel=“import"> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>
  68. <html> <head> <title>Make a batman!</title> <link href=“a-batman.html" rel=“import"> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>
  69. <html> <head> <title>Make a batman!</title> <link rel=“import” href=“a-batman.html”> </head> <body>

    <a-batman name=“monica”></a-batman> </body> </html>
  70. WHAT DO WE NEED?

  71. SPECS! IN THE MEANTIME…

  72. A BIT OF MAGIC POLYFILLS

  73. HTML IMPORTS <link rel=“import” href=“…” >

  74. CUSTOM ELEMENTS document.registerElement

  75. THE SHADOW DOM ENCAPSULATION

  76. THE SHADOW DOM THIS ISN’T NEW

  77. None
  78. None
  79. ONCE MORE WITH FEELING

  80. <link rel=“import” href=“a-batman.html">

  81. <link rel=“import” href=“a-batman.html"> <a-batman name=“monica”></a-batman>

  82. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  83. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  84. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  85. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  86. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  87. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman’; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  88. KINDA HARD

  89. LETS DO BETTER!

  90. 2014 POLYMER

  91. WEB COMPONENTS EVERYWHERE!!!

  92. SHOULD BE EASY TO WRITE

  93. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  94. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  95. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  96. <dom-module id='a-batman'> <template> <style> span { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  97. EASY TO USE SHOULD BE

  98. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  99. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  100. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  101. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude=“37.790" longitude=“-122.390"></google-map>

  102. <script src=“components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href=“components/emoji-rain/emoji-rain.html”> <emoji-rain></emoji-rain>

  103. <better-input> </better-input>

  104. @NOTWALDORF