Uncomplexify your app with Polymer Starter Kit

Uncomplexify your app with Polymer Starter Kit +Rob Dodson @rob_dodson

JAM https://goo.gl/0HxSK2

https://goo.gl/5oqPUy

https://goo.gl/c06yLS

when presented with an abundance of choice, you can feel
increasingly unsure of whether yours is the right one - Addy Osmani

LET’S WORK TOGETHER Image:

What is Polymer?

Polymer is not a framework.

Existing Frameworks Applications Web Platform Web Components built with Polymer
(or not)

READY FOR PRODUCTION

Polymer Starter Kit

Image: App templates

Navigation Cards Layout

Navigation List Detail

List Card Over

Image: Responsive breakpoints

Material Design breakpoints

Web App install banner Mobile Web defaults Meta theme color

Offline-first (in your app)

// 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

There’s an element for that!

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>

DOWNLOAD developers.google.com/web/tools/polymer-starter-kit

Let’s build an app!

Prepare for code

polymer-starter-kit/ app/ .editorconfig .jscsrc .jshintrc bower.json gulpfile.js package.json

todo-item todo-list

Single source of truth

todos Unidirectional data

todos <todo-list> Unidirectional data

todos <todo-list> <todo-item> Unidirectional data

todos <todo-list> <todo-item> change events Unidirectional data

index.html <body> <template is="dom-bind" id="app"> … </template> </body>

index.html <body> <template is="dom-bind" id="app"> … </template> </body> Use bindings
without creating a new element

index.html <body> <template is="dom-bind" id="app"> … </template> </body> var app
= document.querySelector(‘#app’); app.js

= document.querySelector(‘#app’); app.todos = [ { todo: ‘Go for a jog’, isComplete: false }, { todo: ‘Get some lunch’, isComplete: true }. … ]; app.js Our single source of truth

Finish talk so we can play <todo-item> A minimal component

<link rel=“import” href=“../polymer/polymer.html”>

<link rel=“import” href=“../polymer/polymer.html”> <script> Polymer({ is:
'todo-item' }); </script>

<todo-item>

todo-item.html <dom-module id="todo-item"> <template> </template> <script> Polymer({ is: 'todo-item' });
</script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”>

todo-item.html <dom-module id="todo-item"> <template> </template> <script> Polymer({ is: 'todo-item' });
</script> </dom-module> Local DOM is the DOM an elements is in charge of creating and managing <link rel=“import” href=“../polymer/polymer.html”>

Shadow DOM || “Shady DOM” == Local DOM

todo-item.html <dom-module id="todo-item"> <template> <paper-checkbox checked></paper-checkbox> <span>…</span> </template> <script> Polymer({
is: 'todo-item' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-checkbox/paper-checkbox.html”>

is: 'todo-item' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-checkbox/paper-checkbox.html”> Import additional dependencies

is: 'todo-item' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-checkbox/paper-checkbox.html”> Add ‘em to your template

is: 'todo-item' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-checkbox/paper-checkbox.html”>

is: 'todo-item' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../paper-checkbox/paper-checkbox.html”> These values should be passed in

is: 'todo-item', properties: { todo: String, isComplete: { type: Boolean, default: false } } }); </script> </dom-module> Properties!

todo-item.html <dom-module id="todo-item"> <template> <paper-checkbox checked="[[isComplete]]"></paper-checkbox> <span>[[todo]]</span> </template> <script> Polymer({
is: 'todo-item', properties: { todo: String, isComplete: { type: Boolean, default: false } } }); </script> </dom-module> Bindings are one-way*

is: 'todo-item', properties: { todo: String, isComplete: { type: Boolean, default: false } } }); </script> </dom-module> Bindings are one-way* * two-way also supported

<todo-item todo=“Go for a jog” is-complete=“true”> </todo-item>

Go for a jog

Announce changes

is: 'todo-item', properties: {…} }); </script> </dom-module>

todo-item.html <dom-module id="todo-item"> <template> <paper-checkbox checked="[[isComplete]]" on-tap="_notifyCheckedToggled"></paper-checkbox> <span>[[todo]]</span> </template> <script>
Polymer({ is: 'todo-item', properties: {…}, _notifyCheckedToggled: function() { this.fire(‘todo-item-checked-toggled’); } }); </script> </dom-module> Wire-up handlers declaratively

Data flows in via one-way bindings

Data flows in via one-way bindings User interacts with the
element

Data flows in via one-way bindings Changes flow out via
events User interacts with the element

Data flows in via one-way bindings Changes flow out via
events Application state is modified User interacts with the element

Finish talk so we can play Go to the grocery
store Take the recycling out Book a flight for upcoming Contemplate world domina Steal all of Addy’s ideas <todo-list> A collection of components

todo-list.html <dom-module id="todo-list"> <template> </template> <script> Polymer({ is: 'todo-list', properties:
{ todos: Array } }); </script> </dom-module>

todo-list.html <dom-module id="todo-list"> <template> </template> <script> Polymer({ is: 'todo-list', properties:
{ todos: Array } }); </script> </dom-module> Data flowing in one-way

todo-list.html <dom-module id="todo-list"> <template> <template is="dom-repeat" items="[[todos]]"> </template> </template> <script>
Polymer({ is: 'todo-list', properties: { todos: Array } }); </script> </dom-module> Stamp out DOM, for each item

todo-list.html <dom-module id="todo-list"> <template> <template is="dom-repeat" items="[[todos]]"> <todo-item todo=“[[item.todo]]" is-complete="[[item.isComplete]]">
</todo-item> </template> </template> <script> Polymer({ is: 'todo-list', properties: { todos: Array } }); </script> </dom-module>

todo-list.html <dom-module id="todo-list"> <template> <template is="dom-repeat" items="[[todos]]"> <todo-item todo=“[[item.todo]]" is-complete="[[item.isComplete]]">
</todo-item> </template> </template> <script> Polymer({ is: 'todo-list', properties: { todos: Array } }); </script> </dom-module> Pass data on to todo-items

<todo-list todos=‘[{…}, {…}, {…}]’> </todo-list>

Go for a jog Work on slide deck Upgrade Firebase
account Buy some coffee Grab some lunch Close some GitHub bugs

= document.querySelector(‘#app’); app.todos = [ { todo: ‘Go for a jog’, isComplete: false }, { todo: ‘Get some lunch’, isComplete: true }. … ]; app.js Our single source of truth

index.html <body> <template is="dom-bind" id="app"> <todo-list todos="[[todos]]"></todo-list> </template> </body> var
app = document.querySelector(‘#app’); app.todos = [ { todo: ‘Go for a jog’, isComplete: false }, { todo: ‘Get some lunch’, isComplete: true }. … ]; app.js Our single source of truth

todos <todo-list> <todo-item> change events Unidirectional data

Thinking by Edward Boatman from the Noun Project Sign in?
Storing data? Deploying?

REALTIME DATABASE AUTHENTICATION HOSTING

REALTIME DATABASE

// Write some data ref.set({ name: ‘Rob Dodson’ }); //
Push Array-like data ref.push({ isComplete: false, todo: ‘A new todo!’ }); app.js // Create a connection to Firebase var ref = new Firebase(‘https://<YOUR-FIREBASE-APP>.firebaseio.com');

app.js // Listen for changes from Firebase ref.on('value', function(snapshot) {
console.log(snapshot.val()); });

index.html <body> <template is="dom-bind" id="app"> <todo-list todos="[[todos]]"></todo-list> </template> </body> var
app = document.querySelector(‘#app’); app.todos = [ { todo: ‘Go for a jog’, isComplete: false }, { todo: ‘Get some lunch’, isComplete: true }. … ]; app.js Our single source of truth

Single source of truth

app.js this.ref.on('value', this.renderTodos.bind(this));

app.js this.ref.on('value', this.renderTodos.bind(this)); app.renderTodos = function(snapshot) { this.todos = [];
}; Throw away old state

app.js this.ref.on('value', this.renderTodos.bind(this)); app.renderTodos = function(snapshot) { this.todos = [];
snapshot.forEach(function(childSnapshot) { var item = childSnapshot.val(); this.push('todos', item); }.bind(this)); };

AUTHENTICATION

{ "rules": { "users": { "$uid": { ".write": "auth.uid ===
$uid", ".read": "auth.uid === $uid" } } } }

app.js // Authenticate a user with Google Sign in ref.authWithOAuthPopup('google',
function(error, authData) { console.log(authData); });

app.js // Check to see if the user is already
signed in var authData = this.ref.getAuth();

app.js // Check to see if the user is already
signed in var authData = this.ref.getAuth(); if (authData) { // Get the user’s todo list this.userRef = this.ref.child(‘users/‘ + authData.uid); } else { // Show sign in screen this.$.signInDialog.open(); }

HOSTING

npm install -g firebase-tools

Polymer is lean, and production ready

Starter Kit gets you up and running

Firebase gets you into production

bit.ly/polycasts

Polymer Summit September 14-15, 2015 polymer-project.org/summit

polymer-project.org

+Rob Dodson @rob_dodson Thank You!

code_slides.txt For format coloring, visit j.mp/iohighlighter in Safari  and copy
+ paste into Keynote If your code snippet is over 6 lines, use a full- page slide of code in this style code_slides.txt protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }

Uncomplexify your app with Polymer Starter Kit

Uncomplexify your app with Polymer Starter Kit

More Decks by Rob Dodson

Other Decks in Technology

Featured

Transcript