Polymer & the web components revolution 6:25:14
98
-
Upload
mattsmcnulty -
Category
Software
-
view
655 -
download
3
description
Polymer & the Web Components Revolution from Google I/O on 6/25/14 by Matthew McNulty. An overview of Web Components, Polymer, and the ecosystem and tools being created surrounding them.
Transcript of Polymer & the web components revolution 6:25:14
About Me
+Matthew McNulty @mattsmcnulty
About This Talk
Overview of Polymer
The Polymer Ecosystem
Material Design
But first…
…Topeka?
Topeka.
polymer-project.org/apps/topeka or
http://goo.gl/4UYwXQ
Demo Time.
Now that you are all distracted…
This isn’t supposed to be possible.
The web is for contentdocuments the boring part of a hybrid app
So how did we do this?
What is Polymer?
What is Polymer?
Polymer is a library that makes building applications easier
Polymer is different than what has come before
What is Polymer?
Polymer was built differently
What is Polymer?
+
What is Polymer?
Polymer doesn't fight the platform
What is Polymer?
If you see something (broken), say something
What is Polymer?
(to the person at the next desk)
What is Polymer?
Polymer is the first of its kind
What is Polymer?
Polymer is built on Web Components
What is Polymer?
Web Components are standards
What is Polymer?
Web Components change the web
What is Polymer?
interoperable with custom elements
What is Polymer?
composable with Shadow DOM
What is Polymer?
consumable with HTML Imports
What is Polymer?
Native in Chrome 36! (Beta)
What does Polymer do?
What does Polymer do?
Polymer does a lot that reduces boilerplate
that you have to write over and over and over
What does Polymer do?
<polymer-is-declarative> </polymer-is-declarative>
How do you use Polymer?
How do you use Polymer?
1. Using Elements 2. Creating Elements
Using Elements
1. Find the element you want
Using Elements
2. Import it
<link rel="import" href=“my-button.html”>
Using Elements
3. Use it.
<my-button label=“Press Me!”></my-button>
Using Elements
That’s it.
Using Elements
Polymer elements are “just” HTML
Using Elements
With Polymer the framework is DOM
Creating Elements
1. Register new tag & prototype 2. Define view 3. Handle events 4. Sync view with data 5. Respond to attribute changes
Creating Elements
<my-counter>Users</my-counter> <my-counter counter="20">Developers</my-counter>
Creating Elements <template> <style> /* ... */ </style> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> ! <script> (function() { var tmpl = document.querySelector('template'); var MyCounterProto = Object.create(HTMLElement.prototype); MyCounterProto.createdCallback = function() { var self = this; var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); var counterValue = this.getAttribute('counter') || 0; var counter = root.querySelector('#counter'); counter.innerText = counterValue; root.querySelector('#inc').addEventListener('click', function() { counter.innerText = ++counterValue; }); new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName == 'counter') { counter.innerText = counterValue = self.getAttribute('counter') || 0; } }); }).observe(this, {attributes: true}); }; MyCounter = document.registerElement('my-counter', { prototype: MyCounterProto }); })(); </script>
!
Using Standard API’s !
That’s a lot of typing
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer('my-counter', { publish: { counter: 0 }, increment: function() { this.counter++; }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
!
Using Polymer !
Aaaah, nice and DRY
Creating Elements <polymer-element name="my-counter"> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> </template> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */ </style> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> </polymer-element>
!:host { background: lightgray; padding: 10px; display: inline-block; } #label { font-weight: bold; }
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id=“counter"></span><br> <button id="inc">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); }, increment: function() { this.counter++; } }); </script> </polymer-element>
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer('my-counter', { publish: { counter: 0 }, increment: function() { this.counter++; }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
What can you make with Polymer?
What can you make with Polymer?
Apps out of Elements out of Elements out of Elements out of
What can you make with Polymer?
Sets of elements
Polymer Core Elements
Image:
<core-icon> <core-ajax> <core-localstorage> <core-style> <core-tooltip>
Polymer Paper Elements
Buttons Inputs Tabs Cards Panels …
Polymer Paper Elements
Fancy.
Polymer Paper Elements
The Web Components revolution
The Web Components revolution
Polymer is at the forefront of a revolution
The Web Components revolution
But Polymer is not alone
The Web Components revolution
<x-tags>
The Web Components revolution
Polymer is bootstrapping an ecosystem of interoperable components
Image:
The Web Components ecosystem
webcomponents.org
The Web Components revolution
A new ecosystem needs new tools
The Web Components revolution
Polymer Designer
The Web Components revolution
$./tools/vulcanize index.html --inline --strip -o build.html
Polymer Vulcanizer
Demo: Polymer & The Web Components Ecosystem
What have we learned?
Web Components
Polymer
Core, Paper Elements
What have we learned?
Ecosystem
This ecosystem is just getting started
Join the revolution
Join the revolution
• Build an element • Wrap an API • Build an app • Stay put for Eric’s talk • Come check out Rob @4
We’re just getting started
Polymer Developer Preview
Paper Elements
Public today
Designer, Tutorials & more
polymer-project.org
What’s next?Polymer & Web Components Change Everything You Know About Web Development Eric Bidelman - Same room, in a few minutes
Unlock the next era of UI development with Polymer Rob Dodson - 4pm, Room 4
+Matthew McNulty @mattsmcnulty
Thank you!
@polymer
FEEDBACK QR CODE
(provided by I/O team)
FEEDBACKhttp://goo.gl/UhIJMk
