Advertisement
Check these out next
How to build a web application with Polymer
Feb. 25, 2016•0 likes•3,663 views
8 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
In this presentation I'll share the basics of Polymer and Web Components. The presentation is divided in three sections; Development, Design and Deploy your Polymer project. The presentation was held 2016-02-24 in Turku <3 Frontend meetup.
Sami Suo-HeikkiFollow
Software developer creating web & mobile applications / Engineer at VaadinAdvertisement
How to build a web application with Polymer
- Polymer Sami Suo-Heikki Turku <3 Frontend 2016-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 framework Scoping 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 authentication ref.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 @samisuoheikki github.com/samiheikki
Advertisement