Componentize your app with Polymer

Building components that can stand the test of time is tough! Frameworks change, new fads emerge, and often we're left with an aging codebase that needs to be rewritten if we want to stay current. Polymer and Web Components aim to change this cycle by building on new platform primitives which will allow us to finally create interoperable components that work in any environment. In this session we'll look at the current Web Component ecosystem, and I'll show you how to start to integrate these tools into your projects.

Transcript

1. Componentize your app with Polymer +Rob Dodson @rob_dodson
2. JAM https://goo.gl/0HxSK2
3. https://goo.gl/5oqPUy
4. https://goo.gl/c06yLS
5. when presented with an abundance of choice, you can feel increasingly unsure of whether yours is the right one - Addy Osmani
8. LET’S WORK TOGETHER Image:
9. What is Polymer?
10. Polymer is not a framework.
11. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
12. The Polymer Experiment https://goo.gl/sjeFN6
13. https://goo.gl/ulZRgU LIKES!
14. Data binding is sweet! Reuse other components Easy to get started
15. https://goo.gl/sjeFN6 DISLIKES
16. https://goo.gl/sjeFN6 Cross-browser weirdness Polyfills are slow Theming is hard
18. actual Polymer engineer
20. 1.0 121kb 42kb 0.5
21. 1.0 0.5 121kb 42kb
22. READY FOR PRODUCTION
23. Let me show you
24. Success! Your first component!
25. <!-- inside quick-alert.html --> <link rel=“import” href=“../polymer/polymer.html”>
26. <!-- inside quick-alert.html --> <link rel=“import” href=“../polymer/polymer.html”> <script> Polymer({ is: 'quick-alert' }); </script>
27. <quick-alert>
28. <!-- inside quick-alert.html —> <dom-module id="quick-alert"> <template> </template> </dom-module>
29. Local DOM - The DOM an elements is in charge of creating and managing
30. <dom-module id="quick-alert"> <template> <div class=“alert”>Alert!!</div> </template> </dom-module>
31. <dom-module id=“quick-alert"> <style> .alert { background: green; } </style> <template> <div class=“alert”>Alert!!</div> </template> </dom-module>
32. <quick-alert></quick-alert>
33. Alert!!!
34. <dom-module id=“quick-alert"> <style>…</style> <template> <div class=“alert”> Alert!! </div> </template> </dom-module>
35. Light DOM - The world outside your component’s Local DOM
36. <dom-module id=“quick-alert"> <style>…</style> <template> <div class=“alert”> Alert!! </div> </template> </dom-module>
37. <dom-module id="quick-alert"> <style>…</style> <template> <div class=“alert”> <content></content> </div> </template> </dom-module>
38. <quick-alert> Success! Your first component! </quick-alert>
39. Success! Your first component!
40. Properties & Data Binding
41. Polymer({ is: ‘name-tag’, properties: { first: String, last: String } }); Property type
42. Polymer({ is: ‘name-tag’, properties: { first: String, last: String, age: { type: Number, value: 42 } } }); Default value
43. Polymer({ is: ‘name-tag’, properties: { first: String, last: String, age: { type: Number, value: 42, observer: ‘_ageChanged' } } }); Observer function
44. Polymer({ is: ‘name-tag’, properties: { first: String, last: String, age: { type: Number, value: 42, observer: ‘_ageChanged’, notify: true } } }); Notify event / bindings
45. Polymer({ is: ‘name-tag’, properties: { first: String, last: String, fullname: { type: String, computed: ‘_computeFullName(first, last)' } } }); Computed property
46. Success! Your first component!
47. quick-alert.html Polymer({ is: 'quick-alert', properties: { shown: { type: Boolean, value: false, notify: true } } });
48. <dom-module id="quick-alert"> <style>…</style> <template> <div class="alert"> <content></content> </div> </template> </dom-module>
49. <dom-module id="quick-alert"> <style>…</style> <template> <div class="alert" hidden="{{!shown}}"> <content></content> </div> </template> </dom-module>
50. <quick-alert> Thanks for signing up! </quick-alert> <paper-checkbox> Sign up for our newsletter </paper-checkbox>
51. <quick-alert shown="{{isSignedUp}}"> Thanks for signing up! </quick-alert> <paper-checkbox checked=“{{isSignedUp}}"> Sign up for our newsletter </paper-checkbox>
52. <quick-alert [shown]=“isSignedUp”> Thanks for signing up! </quick-alert> <paper-checkbox [checked]=“isSignedUp”> Sign up for our newsletter </paper-checkbox>
54. Styling & Theming
55. <dom-module id=“quick-alert"> <style> .alert { background: green; } </style> <template> <div class=“alert”>Alert!!</div> </template> </dom-module>
56. <dom-module id=“quick-alert"> <style> .alert { background: var(--quick-alert-background); } </style> <template> <div class=“alert”>Alert!!</div> </template> </dom-module> A custom property
57. <dom-module id=“quick-alert"> <style> .alert { background: var(--quick-alert-background, green); } </style> <template> <div class=“alert”>Alert!!</div> </template> </dom-module>
58. <!-- my-theme.html --> <style is="custom-style"> quick-alert { --quick-alert-background: #FF5722; } </style>
60. <dom-module id=“quick-alert"> <style> .alert { background: green; @apply(--quick-alert-theme) } </style> <template> <div class=“alert”>Alert!!</div> </template> </dom-module>
61. <!-- my-theme.html --> <style is="custom-style"> quick-alert { } </style>
62. <!-- my-theme.html --> <style is="custom-style"> quick-alert { --quick-alert-theme: { }; } </style>
63. <!-- my-theme.html --> <style is="custom-style"> quick-alert { --quick-alert-theme: { background: linear-gradient(135deg, #3D7EAA, #FFE47A); font-size: 24px; text-shadow: 0px 3px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6); }; } </style>
65. Elements Building blocks for a better web
66. There’s an element for that!
67. core paper
68. core paper
72. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube>
76. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …
80. <gold-cc-input> <gold-zip-input> <gold-cc-expiration-input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> …
82. elements.polymer-project.org
85. There’s an element for that!
86. Applications Combining elements into something great
87. Polymer Starter Kit
88. Polymer Starter Kit
89. Image: App templates
90. Navigation Cards Layout
91. Navigation List Detail
92. List Card Over
93. Image: Responsive breakpoints
94. Material Design breakpoints
95. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color
96. Web App install banner Mobile Web defaults Meta theme color
97. Icons
98. Offline-first (in your app)
100. // While there is only one cache in this example, the same logic will handle the case where // there are multiple versioned caches. var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { // If this cache name isn't present in the array of "expected" cache names, then delete it. console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); // This sample illustrates an aggressive approach to caching, in which every valid response is
101. There’s an element for that!
103. Service Worker caching Take your app offline with ease <link rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
105. There’s an element for that too!
106. Push Notifications Stay informed of messages from your app <platinum-push-messaging title="You have new stories" message="4 RSS feeds have new stories" icon-url="rss.png" click-url=“feeds/new/“> </platinum-push-messaging>
107. Production-ising Apps
108. image: http://gulpjs.com
109. Build process out of the box
110. Live-reload and cross-device development
111. DOWNLOAD developers.google.com/web/tools/polymer-starter-kit
112. Polymer Starter Kit + Angular 2 The best of both worlds
114. angular/zone.js #138
117. index.html <head> … <script src=“lib/traceur-runtime.js"></script> <script src="lib/system.js"></script> <script src="lib/angular2.alpha.26.dev.js"></script>
118. Polymer Starter Kit
119. index.html <body> … <template is="dom-bind" id="app"> <paper-drawer-panel id="paperDrawerPanel"> <div drawer> <!-- Drawer Toolbar --> <paper-toolbar id="drawerToolbar"> <span class="paper-font-title">Menu</span> </paper-toolbar> … </template> Delete this element and move the content to your own Angular template
120. my-app.ts @Component({ selector: 'my-app' }) @View({ templateUrl: 'views/my-app/my-app.html' }) // Component controller export class MyAppComponent { } bootstrap(MyAppComponent);
121. my-app.html <paper-drawer-panel id="paperDrawerPanel"> <div drawer> <!-- Drawer Toolbar --> <paper-toolbar id="drawerToolbar"> <span class="paper-font-title">Menu</span> </paper-toolbar> <!-- Drawer Content --> <paper-menu class="list"> <a data-route="home" href="/"> <iron-icon icon="home"></iron-icon> <span>Home</span> </a> …
122. Remove old data bindings: {{param.user}}
123. Remove old data bindings: {{param.user}} Remove event handlers: on-iron-select=“onMenuSelect"
124. Remove old data bindings: {{param.user}} Remove event handlers: on-iron-select=“onMenuSelect" Update routes: selected=“{{route}}”
125. Remove old data bindings: {{param.user}} Remove event handlers: on-iron-select=“onMenuSelect" Update routes: [selected]=“route”
126. my-app.ts // Component controller export class MyAppComponent { }
127. my-app.ts // Component controller export class MyAppComponent { page('/', () => { this.route = 'home'; }); page('/users', () => { this.route = 'users'; }); page('/contact', () => { this.route = 'contact'; }); // add #! before urls page({ hashbang: true }); }
129. Adding components Dealing with content distribution
131. WAT?
132. Local DOM - The DOM an elements is in charge of creating and managing
133. index.html <head> ... <script src=“bower_components/webcomponentsjs/webcomponents-lite.js"> </script> ... </head>
134. index.html <head> ... <script src=“bower_components/webcomponentsjs/webcomponents.js"> </script> <script> // Tell Polymer to use Shadow DOM var Polymer = Polymer || {}; Polymer.dom = 'shadow'; </script> ... </head>
136. NativeShadowDomStrategy?
137. NativeShadowDomStrategy? Shady DOM Adapters?
138. NativeShadowDomStrategy? Shady DOM Adapters? Ship Shadow DOM!
139. Listening for events Going old school
140. my-app.html <platinum-sw-register auto-register clients-claim skip-waiting> … </platinum-sw-register>
141. my-app.html <platinum-sw-register auto-register clients-claim skip-waiting (^service-worker-installed)="displayInstalledToast"> … </platinum-sw-register>
142. service-worker-installed
143. serviceWorkerInstalled
145. my-app.ts import {Component, View, bootstrap, ElementRef} from 'angular2/angular2'; constructor(elementRef: ElementRef) { // Access DOM with elementRef.domElement } Access the DOM for this component
146. my-app.ts // Show toast when Service Worker registration completes var el = elementRef.domElement; var sw = el.querySelector('platinum-sw-register'); var toast = el.querySelector('#caching-complete'); sw.addEventListener('service-worker-installed', function() { toast.show(); });
149. Recap Wow, that was a lot of stuff
150. Polymer is lean, and production ready
151. Components for nearly any app, out of the box.
152. Components for nearly any app, out of the box. Complete build chain for bringing your app to production.
153. Components for nearly any app, out of the box. Complete build chain for bringing your app to production. Flexible app theming using custom properties
154. Components for nearly any app, out of the box. Complete build chain for bringing your app to production. Flexible app theming using custom properties Responsive app layout boilerplate & routing
155. Components for nearly any app, out of the box. Complete build chain for bringing your app to production. Flexible app theming using custom properties Responsive app layout boilerplate & routing Material Design ready
156. bit.ly/polycasts
157. Polymer Summit September 15, 2015 Amsterdam
158. polymer-project.org Componentize the web!
159. +Rob Dodson @rob_dodson Thank You!