Dive into Polymer - GDG SouthWest DevFest 2016

An Introduction to The Polymer Project By Google.

Transcript

1. DIVE INTO POLYMER LYNDA CHIWETELU @lyndachiwetelu GDG DEVFEST SOUTH WEST 2016
2. NAME: LYNDA CHIWETELU WEB DEVELOPER @ HOTELS.NG hEp://lynda.chiwetelu.com @lyndachiwetelu
3. Web Components
4. Browser Compatibility
5. Polymer
6. This talk is about Polymer, but let’s allow Web Components distract us for a bit.
7. Features being added to the HTML and DOM specificaTons, that allow for the creaTon of reusable components in web documents and applicaTons. What Web Components Are:
8. 4 Main features of web components.
9. 1. Custom Elements <dom-module id="paper-spinner"> <template strip-whitespace> <style include="paper-spinner-styles"></ style> … </template> <script> Polymer({ is: 'paper-spinner', behaviors: [ Polymer.PaperSpinnerBehavior ] }); </script> </dom-module> PAPER SPINNER ELEMENT Write your own elements, HTML, STYLE, BEHAVIOR
10. 2.Shadow DOM NOT THIS SHADOW…OKAY SORT OF
11. Shadow DOM is the ability of the browser to include a subtree of DOM elements into the rendering of a document without affecting the main document DOM tree.
12. 3. HTML Imports Import Components in HTML to use your elements <link rel="import" href=“component.html”>
13. 4. HTML Templates Separate Logic from your markups, Load resources only when needed
14. WEB COMPONENTS
15. THE POLYMER PROJECT Polymer Library is one that helps you take advantage of all the features of Web Components Polymer App ToolBox helps you builds Progressive Web Apps with minimal overhead. It leverages powerful features like service workers and Web components
16. WITH POLYMER YOU CAN USE: Use already built and tested Elements Create Your own Elements Build Apps!
17. Features of POLYMER Library Lots of Already built collections of elements you can use in your application https://elements.polymer-project.org
18. The good news is: Polymer works on every major Browser!
19. Advantages of POLYMER Elegant Code Less Expensive to Maintain Clean Code Reusable elements – of course Great documentation Speedy Development – Of course Mobile Power! Custom CSS properties for elements
20. IT’S SUPER EASY TO USE AN ELEMENT To use a polymer element in your app… Visit the Polymer Catalog (https://elements.polymer-project.org/browse) Star the elements you want Download the bower.json file Add it to your app directory Run bower install Ready to be used! Install Node, npm and bower
21. DEMO ELEMENT USAGE Iron elements, Paper Elements App Elements
22. Visit the Elements Catalog and choose the elements you want, then download the bower.json
25. bower.json
26. To install: Add the bower.json file to your app directory Run bower install
27. DEPENDENCIES, INCLUDES
28. STYLING
29. “MARKUP”
30. WHAT’S NEW IN POLYMER? POLYMER 2.0
31. RESOURCES hEps://elements.polymer-project.org/ hEp://webcomponents.org/ hEps://www.polymer-project.org/ hEps://builtwithpolymer.org/ - Check out the Cool Things People are Building With Polymer and add yours to the list.
32. REFERENCES hEps://elements.polymer-project.org/ hEp://webcomponents.org/ hEps://www.polymer-project.org/
33. IMAGE CREDITS hEp://ccl.northwestern.edu/images/generic.png IllustraTons by @thevunderkind hEp://images.clipartpanda.com/moving-laughing-smiley-face-zyTke9LiE.jpeg
34. THANK YOU