Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's build some apps with Polymer!

Rob Dodson
December 04, 2014

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.

Rob Dodson

December 04, 2014

More Decks by Rob Dodson

Other Decks in Technology


  1. Photos make for excellent segue slides Photo: goo.gl/lxSPr7 Time to

    tackle the next challenge We have a growing ecosystem
  2. The flex attribute tells a child to expand to fill

    its parent <core-toolbar> … <div flex>All Contacts</div> </core-toolbar> <core-toolbar>
  3. <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>
  4. <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>
  5. 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>
  6. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main

    panel... </div> </core-drawer-panel> A responsive scaffold
  7. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main

    panel... </div> </core-drawer-panel> A responsive scaffold
  8. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main

    panel... </div> </core-drawer-panel> A responsive scaffold
  9. 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’}, … ];
  10. <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>
  11. 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
  12. <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>
  13. <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>
  14. 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 —>
  15. 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
  16. 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