Monday, 27 February 2017

Build web components using polymer.js

Polymer takes the Web Component standard and makes it available for the latest browsers. This allows you to write custom tags in a standard manner. Polymer.js is a library for creating Web Components which are a set of W3C standards and upcoming browser APIs for defining your own custom HTML elements.With the help of polyfills and sugar, it can create these custom elements and bring Web Component support to browsers that don’t play nice with the standard just yet.The Polymer library to make the most of Web Components, a powerful new platform feature for extending HTML and componentizing your apps.

Polymer.js


What is web components ?
Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements.What's truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS.That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.

The easiest way to understand how web components allow for custom HTML elements is to first look at an existing element we already know from HTML5.the <video> tag. Using this element you can place a video with just a few of lines of code, for example:


<!DOCTYPE html>
<html>
<body>

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

You may only seen the 5 lines of clean code but have you ever think how it will work of just writing a small piece of code.By default the browser will hide the verbose code.But imagine if you could use this same approach and create you own web component like .

<google-map lat="33.790" long="233.390"></google-map>

Instead of using a google libary for map and including external css and js of google map just create a simple web component of writing one line of code and automatically include the google map in your page. it's really amazing.Instead of using a google libary for map and including external css and js of google map just create a simple web component of writing one line of code and automatically include the google map in your page. it's really amazing.

Browser Support:

Chrome Android
Chrome
Canary
Firefox
IE 10+
Safari 6+
Mobile Safari

You can use the polymer using it's offical documentation.It's quite easy and simple to learn.Polymer.js

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts