Polymer Web Framework - Swecha Boot Camp

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?

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/

Polymer Web Framework - Swecha Boot Camp

Related slideshows

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Polymer Web Framework - Swecha Boot Camp

Similar to Polymer Web Framework - Swecha Boot Camp (20)

More from Swecha | స్వేచ్ఛ

More from Swecha | స్వేచ్ఛ (7)

Polymer Web Framework - Swecha Boot Camp