Polymer Web Framework - Swecha Boot Camp
•
0 gefällt mir•606 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Polymer Web Framework - Swecha Boot Camp
Ähnlich wie Polymer Web Framework - Swecha Boot Camp (20)
Mehr von Swecha | స్వేచ్ఛ
Polymer Web Framework - Swecha Boot Camp
- 2. What? Yet another JS 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 Web Design? Reusable Components?
- 4. What is it? Web Components 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 Polymer fit into all this?
- 6. Shadow DOM? What? Why?
- 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>
- 9. How do I use 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> <script src="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-map lat="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. Thank You