Embed Size (px)
Citation preview
PolymerSami Suo-HeikkiTurku <3 Frontend2016-02-24
What is Polymer?
Polymer is a library utilizing web components for building elements and applications
So what Polymer really is?
Polymer
Polymer uses web components
Polymer isn’t a framework
With Polymer DOM is the frameworkScoping provided by Shadow DOM
Polymer
Polymer works well with JS frameworks
With Polymer you can build your own elements and apps
Polymer is created by Google
“Using HTML with web components is a revolution how we do front-end development”
Components all the way down
Everything is an element
Today’s topic
Development Design Deploy
Development
<video src="identio_startup_journey.mp4" controls></video>
<video src="identio_startup_journey.mp4" controls></video>
<video src="identio_startup_journey.mp4" controls></video>
Polymer is easy - index.html
<head> <title>Polymer is easy</title> <script src=”webcomponents-lite.min.js”></script> <link rel=”import” href=”polymer.html”> <link rel=”import” href=”my-element.html”></head><body> <my-element myname=”Turku”></my-element></body>
Polymer is easy - index.html
<head> <title>Polymer is easy</title> <script src=”webcomponents-lite.min.js”></script> <link rel=”import” href=”polymer.html”> <link rel=”import” href=”my-element.html”></head><body> <my-element myname=”Turku”></my-element></body>
Polymer is easy - index.html
<head> <title>Polymer is easy</title> <script src=”webcomponents-lite.min.js”></script> <link rel=”import” href=”polymer.html”> <link rel=”import” href=”my-element.html”></head><body> <my-element myname=”Turku”></my-element></body>
Polymer is easy - index.html
<head> <title>Polymer is easy</title> <script src=”webcomponents-lite.min.js”></script> <link rel=”import” href=”polymer.html”> <link rel=”import” href=”my-element.html”></head><body> <my-element myname=”Turku”></my-element></body>
Polymer is easy - index.html
<head> <title>Polymer is easy</title> <script src=”webcomponents-lite.min.js”></script> <link rel=”import” href=”polymer.html”> <link rel=”import” href=”my-element.html”></head><body> <my-element myname=”Turku”></my-element></body>
Polymer is easy - my-element.html
<dom-module id="my-element"> <template> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> <script> Polymer({ is: 'my-element', properties: { myname: String } }); </script></dom-module>
Polymer is easy - my-element.html
<dom-module id="my-element"> <template> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> <script> Polymer({ is: 'my-element', properties: { myname: String } }); </script></dom-module>
Polymer is easy - my-element.html
<dom-module id="my-element"> <template> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> <script> Polymer({ is: 'my-element', properties: { myname: String } }); </script></dom-module>
Polymer is easy - my-element.html
<dom-module id="my-element"> <template> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> <script> Polymer({ is: 'my-element', properties: { myname: String } }); </script></dom-module>
Output
Design
Polymer is easy - my-element.html
<dom-module id="my-element"> <template> <style> /* Add style here */ </style> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> ...</dom-module>
Polymer Paper Elements
Polymer Paper Elements
Polymer Paper Elements
Polymer Paper Elements
Polymer Paper Elements
Polymer is easy - my-element.html (OLD)
<dom-module id="my-element"> <template> <input value="{{myname::input}}"><br/> <span>Hello {{myname}}!</span> </template> ...</dom-module>
Polymer is easy - my-element.html (NEW)
<link rel="import" href="paper-input.html"><link rel="import" href="paper-card.html"><dom-module id="my-element"> <template> <paper-input label="Your name" value="{{myname::input}}"></paper-input> <paper-card heading="Hello {{myname}}!"></paper-card> </template> ...</dom-module>
Polymer is easy - my-element.html (NEW)
<link rel="import" href="paper-input.html"><link rel="import" href="paper-card.html"><dom-module id="my-element"> <template> <paper-input label="Your name" value="{{myname::input}}"></paper-input> <paper-card heading="Hello {{myname}}!"></paper-card> </template> ...</dom-module>
Polymer is easy - my-element.html (NEW)
<link rel="import" href="paper-input.html"><link rel="import" href="paper-card.html"><dom-module id="my-element"> <template> <paper-input label="Your name" value="{{myname::input}}"></paper-input> <paper-card heading="Hello {{myname}}!"></paper-card> </template> ...</dom-module>
Output
Deploy
Database User authentication Hosting
Realtime Database
ref.on(‘value’, function(snapshot) { console.log(snapshot.val());});
<firebase-collection data={{myData}} location=”https://turkupolymer.firebaseio.com”></firebase-collection>
User authenticatio
nref.authWithOAuthPopup(‘google’, function(error, authData) { console.log(authData.uid);});
<firebase-auth provider=”google” location=”https://turkupolymer.firebaseio.com”></firebase-auth>
Hosting
$ npm install -g firebase-tools$ cd “Polymer is easy”
$ firebase init
$ firebase deploy
https://turkupolymer.firebaseapp.com/
Getting started
This project: https://github.com/samiheikki/turkupolymer
Polymer: https://www.polymer-project.org
Polymer Elements: https://elements.polymer-project.org/
Polymer Starter Kit: https://developers.google.com/web/tools/polymer-starter-kit/
Advanced
High class components: https://vaadin.com/elements
Even more components: https://customelements.io
Thank You!
Sami Suo-Heikki @samisuoheikkigithub.com/samiheikki
