Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to build a web application with Polymer

1,753 views

Published on

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.

Published in: Technology

How to build a web application with Polymer

  1. 1. Polymer Sami Suo-Heikki Turku <3 Frontend 2016-02-24
  2. 2. What is Polymer?
  3. 3. Polymer is a library utilizing web components for building elements and applications
  4. 4. So what Polymer really is?
  5. 5. Polymer Polymer uses web components Polymer isn’t a framework With Polymer DOM is the framework Scoping provided by Shadow DOM
  6. 6. 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”
  7. 7. Components all the way down
  8. 8. Everything is an element
  9. 9. Today’s topic
  10. 10. Development Design Deploy
  11. 11. Development
  12. 12. <video src="identio_startup_journey.mp4" controls></video>
  13. 13. <video src="identio_startup_journey.mp4" controls></video>
  14. 14. <video src="identio_startup_journey.mp4" controls></video>
  15. 15. 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>
  16. 16. 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>
  17. 17. 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>
  18. 18. 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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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>
  22. 22. 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>
  23. 23. 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>
  24. 24. Output
  25. 25. Design
  26. 26. 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>
  27. 27. Polymer Paper Elements
  28. 28. Polymer Paper Elements
  29. 29. Polymer Paper Elements
  30. 30. Polymer Paper Elements
  31. 31. Polymer Paper Elements
  32. 32. 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>
  33. 33. 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>
  34. 34. 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>
  35. 35. 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>
  36. 36. Output
  37. 37. Deploy
  38. 38. Database User authentication Hosting
  39. 39. Realtime Database ref.on(‘value’, function(snapshot) { console.log(snapshot.val()); }); <firebase-collection data={{myData}} location=”https://turkupolymer.firebaseio.com”> </firebase-collection>
  40. 40. User authentication ref.authWithOAuthPopup(‘google’, function(error, authData) { console.log(authData.uid); }); <firebase-auth provider=”google” location=”https://turkupolymer.firebaseio.com”> </firebase-auth>
  41. 41. Hosting $ npm install -g firebase-tools $ cd “Polymer is easy” $ firebase init $ firebase deploy https://turkupolymer.firebaseapp.com/
  42. 42. 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/
  43. 43. Advanced High class components: https://vaadin.com/elements Even more components: https://customelements.io
  44. 44. Thank You! Sami Suo-Heikki @samisuoheikki github.com/samiheikki

×