Polymer

Introduction to Ploymer

Transcript

1. Polymer Jigar Solanki
2. Web Components
3. Web Components are set of emerging standards that allow developers to extend HTML and its functionality.
4. <select></select>  
6. Web Component Specs •  Shadow DOM •  HTML Templates •  Custom Elements •  HTML Imports
7. Templates HTML Imports Custom Elements Shadow DOM
8. Polymer is a library utilizing Web Components for building elements and applications.
9. •  Set of polyfill libraries for missing specs •  Polymer API layer •  Set of UI Components
10. Playform.js (polyfills) •  Enables you to use future technologies, now! •  Eventually it will shrink
11. Polymer Layer •  Sugaring layer on the top of web components Everything is an element Components all the way Write less code
12. UI Components core-elements paper-elements
13. Use Existing Elements
14. 1.  Install (github, bower, zip) bower install Polymer/core-input 2.  Include platform.js <script src="bower_components/platform/platform.js"></script> 3.  Import the element <link rel=“import” href=“bower_components/core-input/core-input.html”> 4.  Use the element <core-input></core-input> Use Existing Elements
15. Creating New Elements
16. Awesome data-bindings!   •  Element it self is a model •  Two ways data-binding •  The <template> tag –  top-level element –  Render dynamic content •  Declarative event handling –  on-event syntax •  Changed watchers –  propertyNameChanged •  Expressions –  Custom filters –  Most of the operations are supported
17. Extend Elements
18. Life Cycle Methods   Polymer('tag-name', { created: function() { ... }, ready: function() { ... }, attached: function () { ... }, domReady: function() { ... }, detached: function() { ... }, attributeChanged: function(attrName, oldVal, newVal) { … }, });
19. Communication & Message Passing   •  Data binding •  Changed Watcher •  Custom events •  Using element’s API
20. Some Facts •  Current version: Alpha •  Plans to go beta –  Once at least browser starts supporting native features •  Although some companies already have started using it in production –  Github –  Sales force
21. <thank-you />