Using Polymer, today

How web-components, through Polymer can provide a true separation of concerns when building a pattern library

Transcript

1. Using Polymer, Using Polymer, today. today. Sam Beckham @samdbeckham
2. http://nodividestudio.com
3. https://frontendne.co.uk
5. WTF is a WTF is a pattern pattern library? library?
6. A coded A coded style guide style guide
7. A collection A collection of code of code examples examples
8. A bit like A bit like bootstrap bootstrap
9. A separation A separation of concerns of concerns (Between the front and back end)
10. Pretty Pretty freaking freaking awesome awesome
14. Copy this Copy this <ul class="pagination"> <li>1</li> <li class="pagination__current-page">2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
15. Get this Get this
16. What's the What's the beef then? beef then?
17. Lots of Lots of copying and copying and pasting pasting
19. <ul> <li class="field__location"> <span class="field__location__name">Location</span> <div class="field__location__map"> <div class="location__loading-indicator"> <svg viewbox="0 0 100 100" class="icon icon__logoma <use xlink:href="/resources/images/sprite/icon- </svg> </div> </div> <div class="field__location__search"> <input type="search" value="" placeholder="Enter a post </div> <ul class="form-fields grid"> <li class="column column__6-of-12"> <label for="lat">Latitude</label> <input type="text" pattern="-?[0-9]{0,2}\.?[0-9]*" </li> <li class="column column__6-of-12"> <label for="lon">Longitude</label> <input type="text" pattern="-?[0-9]{0,3}\.?[0-9]*" </li> </ul> </li>
20. Code can be Code can be hard to hard to understand understand
21. <ul> <li class="field__location"> <span class="field__location__name">Location</span> <div class="field__location__map"> <div class="location__loading-indicator"> <svg viewbox="0 0 100 100" class="icon icon__logoma <use xlink:href="/resources/images/sprite/icon- </svg> </div> </div> <div class="field__location__search"> <input type="search" value="" placeholder="Enter a post </div> <ul class="form-fields grid"> <li class="column column__6-of-12"> <label for="lat">Latitude</label> <input type="text" pattern="-?[0-9]{0,2}\.?[0-9]*" </li> <li class="column column__6-of-12"> <label for="lon">Longitude</label> <input type="text" pattern="-?[0-9]{0,3}\.?[0-9]*" </li> </ul> </li>
22. They're They're difficult to difficult to maintain maintain
24. <div class="pagination"> <a href="#" class="button button--disabled pagination__paddle" <input class="pagination__page" type="text" inputmode="number" <span class="pagination__limit">52</span> <a href="#" class="button pagination__paddle">Next ></a> </div> Pagination Pagination Component Component
25. <ul class="pagination"> <li>1</li> <li>2</li> <li>3</li> <li class="pagination__current-page">4</li> <li>5</li> <li>6</li> <li>7</li> </ul> Pagination Pagination Component Component
26. Markup Markup changes changes funk you up funk you up
27. A separation A separation of concerns? of concerns?
28. Not quite Not quite
29. It's good… It's good…
30. …but it's not right …but it's not right
31. Enter, Enter, Polymer Polymer
32. WTF is WTF is Polymer? Polymer?
33. Web Web component component framework framework
34. Web Web component component easierifier easierifier
35. WTF are web WTF are web components? components?
36. "Web Components are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements."
37. tl:dr; tl:dr;
38. Create your Create your own HTML own HTML elements elements
39. Contain Contain your styles your styles within them within them
40. Add some Add some Javascript Javascript lovelyness lovelyness
41. A separation A separation of concerns of concerns
42. Pretty Pretty Freaking Freaking Awesome. Awesome.
44. Let's mix Let's mix them them together together
45. <div class="pagination"> <a href="#" class="button button--disabled pagination__paddle" <input class="pagination__page" type="text" inputmode="number" <span class="pagination__limit">52</span> <a href="#" class="button pagination__paddle">Next ></a> </div> Pagination Pagination Component Component
47. <my-pagination></my-pagination> Pagination Pagination Component Component
48. <my-pagination currentpage="1" totalpages="52"> </my-pagination> Pagination Pagination Component Component
49. How it's How it's made made
50. <link rel="import" href=".../polymer.html"> Import Polymer Import Polymer
51. <link rel="import" href=".../polymer.html"> <dom-module id="my-pagination"> </dom-module Polymer Element Polymer Element
52. <link rel="import" href=".../polymer.html"> <dom-module id="my-pagination"> <template> <!-- Element markup goes here --> </template> </dom-module> Element Template Element Template
53. <link rel="import" href=".../polymer.html"> <dom-module id="my-pagination"> <template> <!-- Element markup goes here --> </template> <script> Polymer({ is: 'my-pagination' }); </script> </dom-module> Scripts Scripts
54. <dom-module id="my-pagination"> <template> <!-- Element markup goes here --> </template> <script> Polymer({ is: 'my-pagination', properties: { currentPage: {}, totalPages: {} } }); </script> </dom-module> Element Attributes Element Attributes
55. <template> <!-- Element markup goes here --> </template> Template Template
56. <template> <div class="pagination"> <a class="pagination__paddle">Prev</a> <input class="pagination__page" type="text" max="52" value="1"> <span class="pagination__limit">52</span> <a href="#" class="pagination__paddle">Next</a> </div> </template> Static HTML Static HTML
57. <link rel="stylesheet" href="my-pagination.css"> <template> <div class="pagination"> <a class="pagination__paddle">Prev</a> <input class="pagination__page" type="text" max="52" value="1"> <span class="pagination__limit">52</span> <a href="#" class="pagination__paddle">Next</a> </div> </template> Styles Styles
58. <link rel="stylesheet" href="my-pagination.css"> <template> <div class="pagination"> <a class="pagination__paddle">Prev</a> <input class="pagination__page" type="text" max="{{ totalpages }}" value="{{ currentpage ::input }}"> <span class="pagination__limit">{{ totalpages }}</span> <a href="#" class="pagination__paddle">Next</a> </div> </template> Attribute injection Attribute injection
59. <html> <head> <link rel="import" href=".../my-pagination.html"> </head> <body> <!-- Content goes here --> </body> </html> Import it Import it
60. <html> <head> <link rel="import" href=".../my-pagination.html"> </head> <body> <my-pagination currentpage="1" totalpages="52"> </my-pagination> </body> </html> Use it Use it
61. That's it That's it
63. What does What does this solve? this solve?
64. Lots of Lots of copying and copying and pasting pasting
66. <ul> <li class="field__location"> <span class="field__location__name">Location</span> <div class="field__location__map"> <div class="location__loading-indicator"> <svg viewbox="0 0 100 100" class="icon icon__logoma <use xlink:href="/resources/images/sprite/icon- </svg> </div> </div> <div class="field__location__search"> <input type="search" value="" placeholder="Enter a post </div> <ul class="form-fields grid"> <li class="column column__6-of-12"> <label for="lat">Latitude</label> <input type="text" pattern="-?[0-9]{0,2}\.?[0-9]*" </li> <li class="column column__6-of-12"> <label for="lon">Longitude</label> <input type="text" pattern="-?[0-9]{0,3}\.?[0-9]*" </li> </ul> </li>
67. <location-field lon="-1.608489" lat="54.981308"> </location-field>
68. Some Some copying and copying and pasting pasting
69. Code can be Code can be hard to hard to understand understand
70. <ul> <li class="field__location"> <span class="field__location__name">Location</span> <div class="field__location__map"> <div class="location__loading-indicator"> <svg viewbox="0 0 100 100" class="icon icon__logoma <use xlink:href="/resources/images/sprite/icon- </svg> </div> </div> <div class="field__location__search"> <input type="search" value="" placeholder="Enter a post </div> <ul class="form-fields grid"> <li class="column column__6-of-12"> <label for="lat">Latitude</label> <input type="text" pattern="-?[0-9]{0,2}\.?[0-9]*" </li> <li class="column column__6-of-12"> <label for="lon">Longitude</label> <input type="text" pattern="-?[0-9]{0,3}\.?[0-9]*" </li> </ul> </li>
71. <location-field lon="-1.608489" lat="54.981308"> </location-field>
72. Code is Code is super easy to super easy to understand understand
73. It's difficult It's difficult to maintain to maintain
75. <my-pagination totalpages="7" currentpage="4"> </my-pagination> Pagination Pagination Component Component
77. <my-pagination currentpage="1" totalpages="52"> </my-pagination> Pagination Pagination Component Component
78. It's easy to It's easy to maintain maintain
79. A A TRUE TRUE separation separation of concerns of concerns
80. Pretty Pretty Freaking Freaking Awesome. Awesome.
81. Can I use Can I use it now? it now?
82. YES! YES!
84. Harder Harder
85. Harder Harder Better Better
86. Harder Harder Better Better Faster Faster
87. PRODUCTION PRODUCTION READY READY
89. 3 3o oo o
91. Polymer Starter Kit Polymer Starter Kit
92. Polymer Starter Kit Polymer Starter Kit
93. http://polymer-project.org
94. http://webcomponents.org
95. http://reddit.com/r/polymerjs
96. Thanks! Thanks! Sam Beckham @samdbeckham