Downloaded 11 times
Uploaded bySwecha | స్వేచ్ఛ
Polymer Web Framework - Swecha Boot Camp
Polymer is a library that makes it easier to create reusable web components using Web Component standards like custom elements, shadow DOM, HTML imports, and templates. It fits into the web components model by providing polyfills for backwards compatibility and tools to define, register, and use custom elements. The Polymer library encapsulates components and their styling using shadow DOM to make them reusable across projects. Developers can install Polymer using Bower and build web applications with reusable custom elements that encapsulate functionality like maps, forms, or other UI components.
More Related Content
Similar to Polymer Web Framework - Swecha Boot Camp
Polymer Web Framework - Swecha Boot Camp
- 1.
- 2. What? Yet anotherJS Framework?!! “ The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web. ”
- 3. WebComponents? Modular WebDesign? Reusable Components?
- 4. What is it? WebComponents are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements. Support for Web Components is present in some WebKit-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). Microsoft's Internet Explorer has not implemented any Web Components specifications at the time of writing. Backwards compatibility with older browsers is implemented using JavaScript-based polyfills. Web Components consist of 4 main elements which can be used separately or all together: ● Custom Elements ● Shadow DOM ● HTML Imports ● HTML Templates
- 5. Where does Polymerfit into all this?
- 6.
- 7. Huh? With Shadow DOM,elements can get a new kind of node associated with them. This new kind of node is called a shadow root. An element that has a shadow root associated with it is called a shadow host. The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead. <button>Hello, world!</button> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); root.textContent = 'こんにちは、影の世界!'; </script>
- 8.
- 9. How do Iuse this? ● install node,js ● install bower: npm install -g bower (as root or admin) ● run bower init to initialize the directory ● run bower install --save Polymer/polymer#^1. 0.0 to download and install Polymer ● install elements as bower install Polymer/iron- input ● Have fun.
- 10. Some Magic? <!DOCTYPE html> <html> <head> <scriptsrc="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
- 11. What?? <link rel="import" href="components/google-map/google-map.html"> <google-maplat="51.508742" long="-0.120850"></google-map>
- 12. Yada Yada Yada,Can we please see it working? Demo
- 13. Any more resources?? ●https://www.polymer-project.org ● http://www.sitepoint.com/introduction-to-web-components- and-polymer-tutorial/ ● https://elements.polymer-project.org/ ● http://builtwithpolymer.org/
- 14.