Let's build some apps with Polymer!

Check out the video: https://www.youtube.com/watch?v=kV0hgdMpH28#t=607

This talk will cover what it takes to build a single page app in Polymer. Rob will demonstrate how to quickly scaffold the structure of an application by leveraging Material Design elements, explore best practices around lazy loading elements to keep our app speedy, and also touch upon the tools we can use to debug and test our app.

Transcript

2. Let’s build some apps with Polymer! +Rob Dodson @rob_dodson
3. Photos make for excellent segue slides Photo: goo.gl/lxSPr7 Time to tackle the next challenge We have a growing ecosystem
4. Photo:
6. Toolbar Content list Secondary toolbar Tabs Icon buttons
8. It’s time for the web to have a mobile SDK
9. Agenda Structure Transitions Offline Performance
10. Structure
12. <core-toolbar></core-toolbar> <core-toolbar> A basic container for controls like tabs or buttons
13. <core-toolbar> <paper-icon-button icon=“menu”> </paper-icon-button> <div>All Contacts</div> </core-toolbar> <core-toolbar> A basic container for controls like tabs or buttons
14. The flex attribute tells a child to expand to fill its parent <core-toolbar> … <div flex>All Contacts</div> </core-toolbar> <core-toolbar>
15. <paper-menu-button> <paper-icon-button icon="more-vert"> </paper-icon-button> </paper-menu-button> <paper-menu-button> An animating context menu, composed of other elements
16. <paper-menu-button> <paper-icon-button icon=“more-vert"> </paper-icon-button> <paper-dropdown class=“dropdown" halign=“right"> </paper-dropdown> </paper-menu-button> <paper-menu-button> An animating context menu, composed of other elements
17. <paper-menu-button> <paper-icon-button icon=“more-vert"> </paper-icon-button> <paper-dropdown class=“dropdown" halign=“right"> <core-menu class="menu"> <paper-item>Settings</paper-item> <paper-item>Help</paper-item> <paper-item>Feedback</paper-item> </core-menu> </paper-dropdown> </paper-menu-button> <paper-menu-button>
18. <paper-menu-button> <paper-icon-button icon=“more-vert"> </paper-icon-button> <paper-dropdown class=“dropdown" halign=“right"> <core-menu class="menu"> <paper-item>Settings</paper-item> <paper-item>Help</paper-item> <paper-item>Feedback</paper-item> </core-menu> </paper-dropdown> </paper-menu-button> <paper-menu-button>
19. A simple container with a header section and a content section <core-header-panel> <core-toolbar>…</core-toolbar> <div class=“content”>…</div> </core-header-panel> <core-header-panel>
20. <core-scroll-header-panel condenses> <core-toolbar> ... </core-toolbar> </core-scroll-header-panel> The condenses attribute creates a nice cross-fade effect <core-scroll-header-panel>
21. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel> A responsive scaffold
22. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel> A responsive scaffold
23. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel> A responsive scaffold
27. A virtualized, “infinite” list <core-list id=“list" flex> <template> <div> <div>{{model.name}}</div> </div> </template> </core-list> this.$.list.data = [ {name: ‘Ada Blick’}, {name: ‘Addy Osmani’}, … ];
28. #ProTip Use core-image to prevent stale images in your list
29. <core-list flex> <template> <div layout horizontal center> <core-image src=“{{model.avatar}}” sizing=“cover" preload></core-image> <div flex>{{model.name}}</div> </div> </template> </core-list> <core-image>
30. #ProTip Set core-list’s scrollTarget to core-header-panel’s scroller
31. <core-header-panel id=“hPanel"> <core-list id=“list"> … </core-list> </core-header-panel> this.$.list.scrollTarget = this.$.hPanel.scroller; Bind core-list’s scrollTarget to core-header-panel’s scroller
32. <core-header-panel id=“hPanel”> <core-list id=“list” scrollTarget="{{$.hPanel.scroller}}"> … </core-list> </core-header-panel> Bind core-list’s scrollTarget to core-header-panel’s scroller
33. <core-toolbar> <paper-menu-button> <core-header-panel> <core-list> <core-drawer-panel> <paper-icon-button>
35. <core-toolbar> <paper-menu-button> <core-header-panel> <core-list> <core-drawer-panel> <paper-icon-button>
38. Transitions
39. A pluggable system for creating smooth transitions from one view to the next. <core-animated-pages> <core-animated-pages selected=“0” transitions="slide-from-right"> <section>…</section> <section>…</section> <section>…</section> </core-animated-pages> EXPERIMENTAL
40. <core-drawer-panel> <core-header-panel drawer> … </core-header-panel <core-header-panel main> <core-toolbar> … </core-toolbar> <div class=“content”> <core-list> … </core-list </div> </core-header-panel> </core-drawer-panel>
41. <contacts-page></contacts-page>
42. <core-animated-pages selected=“0”> <section> <contacts-page></contacts-page> </section> </core-animated-pages>
43. <core-animated-pages selected=“1” transition=“fade-scale”> <section> <contacts-page></contacts-page> </section> <section> <info-page fade-scale></info-page> </section> </core-animated-pages>
44. <core-animated-pages selected=“2” transition=“fade-scale fade-slide-up”> <section> <contacts-page></contacts-page> </section> <section> <info-page fade-scale></info-page> </section> <section> <add-page fade-slide-up></add-page> </section> </core-animated-pages>
45. #ProTip Listen for core-animated-pages-transition-prepare and call measureHeaderHeight on your header panels
46. That feels like a wart. Thoughtful Developer
47. You’re right.
48. <core-animated-pages selected=“2” transition=“fade-scale fade-slide-up”> <section> <contacts-page></contacts-page> </section> <section> <info-page fade-scale></info-page> </section> <section> <add-page fade-slide-up></add-page> </section> </core-animated-pages>
49. Routing
50. router.on(‘/some/route’, function() { pages.selected = 1; });
51. router.on(‘/user/:id’, function(userId) { userPage.user = userId; pages.selected = 2; });
52. #ProTip Lazy load elements with Polymer.import
53. router.on('/some/route', function() { Polymer.import(['more-elements.html'], function () { pages.selected = 2; }); });
54. <app-router> github.com/erikringsmuth/app-router my-site.com/order/:id <app-router> <!-- matches an exact path --> <app-route path="/home" import="/pages/home-page.html"></app-route> ! <!-- matches using a path variable --> <app-route path="/order/:id" import=“/pages/order-page.html"></app-route> </app-router>
56. Performance
57. Performance Photo:
58. index.html <script> if ('registerElement' in document && 'createShadowRoot' in HTMLElement.prototype && 'import' in document.createElement('link') && 'content' in document.createElement('template')) { // We're using a browser with native WC support! } else { document.write( '<script src=“bower_components/webcomponentsjs/webcomponents.js"><\/script>' ); } </script> ! <!— credit to Glen Maddern (geelen on GitHub) for this —>
59. 109 requests 943KB :(
61. Vulcanize? Photo:
62. Vulcanize $ vulcanize -o build.html index.html \ --csp --strip npm install -g vulcanize
63. grunt-vulcanize
64. gulp-vulcanize
65. 3 requests 114KB
66. Offline
67. // Install Service Worker if (navigator.serviceWorker) { navigator.serviceWorker.register('/worker.js').then(function(reg) { console.log('◕‿◕', reg); }, function(err) { console.log('ಠ_ಠ', err); }); } root scope
68. self.addEventListener('install', function(event) { // pre cache a load of stuff: event.waitUntil( caches.open('myapp-static-v1').then(function(cache) { return cache.addAll([ '/', '/styles/main.css', '/scripts/app.js', ‘/elements/elements.critical.vulcanized.html’, ‘https://polymer-contacts.firebaseio.com/all.json' ]); }) ) }); worker.js
69. self.addEventListener('fetch', function(event) { var requestURL = new URL(event.request.url); ! if (requestURL.hostname == 's3.amazonaws.com') { event.respondWith(s3Response(event.request)); } else { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } }); worker.js
71. Structure Transitions Performance Offline
72. core-* and paper-* elements give your app structure Transitions Performance Offline
73. Structure Move between states with animated pages and routing Performance Offline
74. Structure Transitions Conditional polyfills. Vulcanize all the things. Lazy loading. Offline
75. Structure Transitions Performance Service Worker’s got your back
76. github.com/robdodson/contacts-app
77. itshackademic.com
78. polymer-project.org
79. <thank-you> @polymer #itshackademic +Rob Dodson @rob_dodson