Polymer Library Intro for Building Web Components
•Als PPTX, PDF herunterladen•
8 gefällt mir•3,667 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (18)
Ähnlich wie Polymer Library Intro for Building Web Components
Ähnlich wie Polymer Library Intro for Building Web Components (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Polymer Library Intro for Building Web Components
- 1. Polymer Sami Suo-Heikki Turku <3 Frontend 2016-02-24
- 3. Polymer is a library utilizing web components for building elements and applications
- 4. So what Polymer really is?
- 5. Polymer Polymer uses web components Polymer isn’t a framework With Polymer DOM is the framework Scoping provided by Shadow DOM
- 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. Components all the way down
- 10. Today’s topic
- 12. Development
- 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. 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. 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. 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. 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>
- 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. 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. 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. 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>
- 25. Output
- 26. Design
- 27. 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>
- 35. 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>
- 36. 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>
- 37. 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>
- 38. 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>
- 39. Output
- 40. Deploy
- 45. Hosting $ npm install -g firebase-tools $ cd “Polymer is easy” $ firebase init $ firebase deploy https://turkupolymer.firebaseapp.com/
- 47. 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/
- 48. Advanced High class components: https://vaadin.com/elements Even more components: https://customelements.io