{{ Polymer }}
What? Yet another JS Framework?!!
“ The Polymer library is designed to make it easier and faster for
developers to create ...
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...
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 r...
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 initiali...
Some Magic?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function...
What??
<link rel="import" href="components/google-map/google-map.html">
<google-map lat="51.508742" long="-0.120850"></goo...
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-poly...
Thank You
of 14

Polymer Web Framework - Swecha Boot Camp

Published on: Mar 4, 2016
Source: www.slideshare.net


Transcripts - Polymer Web Framework - Swecha Boot Camp

  • 1. {{ Polymer }}
  • 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>
  • 8. Awesome!! Hello World! こんにちは、影の世界!
  • 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

Related Documents