Embed Size (px)
Citation preview
{{ Polymer }}
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. ”
WebComponents? Modular Web Design? Reusable Components?
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
Where does Polymer fit into all this?
Shadow DOM? What? Why?
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>
Awesome!!
Hello World! こんにちは、影の世界!
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.
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>
What??
<link rel="import" href="components/google-map/google-map.html">
<google-map lat="51.508742" long="-0.120850"></google-map>
Yada Yada Yada, Can we please see it working?
Demo
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/
Thank You
