Introduction To Polymer

Polymer introduction presentation for Google I/O Extended Yangon 2015

Transcript

1. Introduction to Polymer Google I/O Extended Yangon
2. About Me Nyan Lynn Htut Software Engineer Hexcores Web and Mobile Studio Twitter - @nyanlynnhtut Github - @nyanlynnhtut
3. What is Polymer
5. Polymer is CSS Framework X
6. Javascript Library ❏ Modern Web Technology ❏ To Create Custom HTML Elements
7. What is Custom HTML Element?
8. Before we talk about Custom Elements Need to known Web Components
9. What is Web Components?
10. Web Component ❏ New era of Web Development ❏ Collection of Standards
11. Web Component Create reusable components. Encapsulate with DOM
12. Four Different Specifications Custom Elements Html Template Shadow DOM Html Import
13. Custom Elements Define new element in HTML <my-tabs> <my-tab>Tab 1</my-tab> <my-tab>Tab 2</my-tab> <my-tab>Tab 3</my-tab> </my-tabs>
14. HTML Template Fragment of HTML mockup that can be cloned and reuse <template id=”my-template”> <h2>Hello</h2> <p>Good Afternoon!</p> </template>
15. Shadow DOM Encapsulate DOM subtrees and the associated CSS
16. HTML Import HTML Imports are a way to include and reuse HTML documents in other HTML documents <link rel=”import” href=”ads-page.html”>
21. Web Component JS Polyfill http://webcomponents.org
22. Go Back to Polymer
23. Polymer is Web Components Polymer is Elements X
24. Mobile SDK for Web
25. Polymer is Middle Layer of Web Components and Custom Elements
27. Provides a declarative syntax that makes it simpler to define custom elements Templating, two-way data binding and property observation
28. Polymer Element Catalog
29. <google-map latitude=’16.771748’ longitude=’96.160557’> </google-map>
30. https://customelements.io/
31. http://builtwithpolymer.org
32. <thanks> <polymer> Google I/O Extended Yangon </polymer> </thanks>