Creating Reusable Polymer Elements

In this talk, you'll learn how to create your own reusable elements using Polymer.

Transcript

1. Polymer Google Developer Group Hackathon.
2. Creating Reusable Elements +AddyOsmani @addyosmani
3. Apps should be composed of reusable, responsive & testable elements.
4. Examples
5. Bad Reusable <google-map>
6. Bad Reusable <core-toolbar>
7. Not
8. Not
10. <awesome-element> Today you might write an
11. Element Docs Tests
12. Element Create a component we’ve all written before.
13. Tabs http://drbl.in/bAsu http://drbl.in/esYL
18. PILE ON THE JAVASCRIPT
19. https://www.flickr.com/photos/ darkismus/4179361946
20. https://www.flickr.com/photos/ goodspeed/2669719176
21. http://goo.gl/lKk7iT
22. Tabs using web components
23. ! <my-tabs> <my-tab>Tab 1</my-tab> <my-tab>Tab 2</my-tab> <my-tab>Tab 3</my-tab> </my-tabs> HTML
26. ! <paper-tabs selected=“0”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> HTML
27. Building a tabs element
31. Start with <seed-element> github.com/PolymerLabs/seed-element
33. Download Boilerplate
34. /development /seed-element /tests .bowerrc bower.json demo.html index.html README.md seed-element.css seed-element.html Unzip it locally Workspace Element
35. /development /seed-element /tests .bowerrc bower.json demo.html index.html README.md seed-element.css seed-element.html Boilerplate files Rename for my-tabs
36. /development /my-tabs /tests .bowerrc bower.json demo.html index.html README.md my-tabs.css my-tabs.html Renamed files
37. bower.io
38. $ npm install -g bower Terminal
39. $ npm install -g bower ! npm http GET https://registry.npmjs.org/bower npm http 200 https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http 200 https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http GET https://registry.npmjs.org/bower-endpoint-parser npm http GET https://registry.npmjs.org/bower-json npm http GET https://registry.npmjs.org/bower-config npm http GET https://registry.npmjs.org/bower-logger npm http GET https://registry.npmjs.org/bower-registry-client npm http GET https://registry.npmjs.org/insight … Terminal
40. ~/development/my-tabs $ bower install Terminal
41. ~/development/ $ ls ! core-action-icons core-component-page my-tabs platform polymer chai mocha Terminal
42. ~/development/ $ ls ! core-action-icons core-component-page my-tabs platform polymer chai mocha Terminal Avoids nested dependency trees my-tabs / bower_components my-toolbar / bower_components my-button / bower_components
43. ! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" attributes=“notitle author"> ! <template> <link href="seed-element.css" rel="stylesheet" /> </template> ! <script> Polymer(‘seed-element’, {…}); </script> </polymer-element> my-tabs.html
44. ! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" noscript> ! <template> <link href="seed-element.css" rel="stylesheet" /> </template> ! </polymer-element> my-tabs.html noscript if not using JS
45. RE-USING ELEMENTS
46. polymer-project.org/docs/elements/
47. http://polymer.github.io/core-docs/ #core-selector
48. http://polymer.github.io/core-docs/ #core-selector
49. http://polymer.github.io/core-docs/ #core-selector
50. ! $ bower install Polymer/core-selector —save Terminal
51. ! $ bower install Polymer/core-selector —save ! bower cached git://github.com/Polymer/core-selector.git#0.3.0 bower validate 0.3.0 against git://github.com/Polymer/core-selector.git#* bower not-cached git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0 bower resolve git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0 bower not-cached git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 bower resolve git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 Terminal
52. ! <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../core-selector/core-selector.html"> ! ! <!-- Element providing solution to no problem in particular. ! ##### Example ! <my-tabs></my-tabs> my-tabs.html
53. ! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css" rel="stylesheet" /> <content></content> ! </template> ! </polymer-element> my-tabs.html
54. ! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css" rel="stylesheet" /> ! </template> ! </polymer-element> my-tabs.html
55. :host { font-family: ‘Roboto’, ‘Arial’, sans-serif; } ! polyfill-next-selector { content: ':host > .core-selected'; } ::content > .core-selected { background: #5599FF; color: white; } ! polyfill-next-selector { content: ':host > *'; } ::content > * { min-width: 60px; height: 60px; line-height: 60px; text-align: center; padding: 0 8px; font-size: 14px; color: #999; } my-tabs.css
56. ! <my-tabs selected=“0”> <span>Tab 1</span> <span>Tab 2</span> <span>Tab 3</span> </my-tabs> Ideal usage
57. ! <my-tabs selected=“0”> <span>Tab 1</span> <span>Tab 2</span> <span>Tab 3</span> </my-tabs> Ideal usage
58. ! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css" rel="stylesheet" /> <div horizontal layout> <shadow></shadow> </div> </template> ! </polymer-element> my-tabs.html
59. <html> <head> <title>my-tabs Demo</title> <script src="../platform/platform.js"></script> <link rel="import" href=“my-tabs.html"> ! </head> <body unresolved> ! <my-tabs></my-tabs> ! </body> </html> demo.html
60. <html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span> <span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html
61. <html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span> <span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html selected=“0” selects the first tab
62. ! $ python -m SimpleHTTPServer 8000 Terminal
65. Deployment
66. ELEMENTS CAN BE SHARED
69. Push <my-tabs> to master!
70. Push docs, demos, landing page to gh-pages! Next
71. ~/development/my-tabs $ cd .. Terminal
72. $ mkdir temp && cd temp Terminal
73. $ git clone git://github.com/Polymer/tools.git ! Cloning into 'tools'... remote: Reusing existing pack: 1201, done. remote: Total 1201 (delta 0), reused 0 (delta 0) Receiving objects: 100% (1201/1201), 834.45 KiB | 277.00 KiB/s, done. Resolving deltas: 100% (476/476), done. Checking connectivity... done. ! ! Terminal
74. $ ./tools/bin/gp.sh <username> my-tabs Terminal
75. http://bit.ly/NZmXRP
76. http://addyosmani.github.io/my-tabs
81. Docs Automatically scraped and generated from source.
86. https://www.flickr.com/photos/ bensutherland/2274353620
87. Tests Unit testing your elements
89. ! var myEl = document.querySelector('seed-element'); assert.equal(myEl.author, 'Dimitri Glazkov'); Test properties
90. ! var hello = myEl.sayHello(); assert.equal(hello, 'seed-element says, Hello World!'); ! var greetings = myEl.sayHello('greetings Earthlings'); assert.equal(greetings, 'seed-element says, greetings Earthlings'); Test methods
91. ! myEl.addEventListener('seed-element-lasers-success', function(event) { ! assert.equal(event.detail.sound, 'Pew pew pew!'); done(); }); ! myEl.fireLasers(); Test events
93. Elements ! Docs ! Tests !
95. GO COMPONENTIZE THE WEB TODAY
96. Thank you! #componentizetheweb +AddyOsmani @addyosmani
97. <seed-element> github.com/PolymerLabs/seed-element