Hey guys..how have you been ? It's been a long time since I posted any article. So this time, I have come up with some stuff to fill the 'Coding' tab of this blog. I was learning how to build Chrome Packaged Apps... and recently at Google I/O'15 , Polymer v1.0 was released.
So the Good News : You will be learning to integrate Polymer with Chrome,
but the Bad News : I will be using Polymer v0.5 .
This post briefly describes some hot keywords you need to know if you are working with Polymer.So let's get started with POLYMER 101.
What is Polymer ?
Polymer is NOT a framework. As quoted from polymer-project.org -- "Polymer is a pioneering 'library' that makes it faster and easier than ever before to build beautiful applications on the web.Polymer is the embodiment of material design for the web."
"Polymer is built on top of a set of powerful new web platform primitives called Web Components."
Now what the heck are Web Components ?
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 webcomponent.js polyfills enable Web Components in (evergreen) browsers that lack native support.
Web Components has got the following specs: (source: webcomponents.org)
Custom Elements : This spec describes the method for enabling the author to define and use new types of DOM elements in a document.
HTML Imports : These are a useful way to include and reuse HTML documents in other HTML documents.
Templates : This spec describes a method for declaring inert DOM subtress in HTML and manipulating them to instantiate document fragments with identical contents.
Shadow DOM : This spec describes a method of establishing and maintaining functional boundaries between DOM tress and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
What are Polyfills ?
According to Wikipedia, "In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape. For example, many features of HTML5 are not supported by versions of Internet Explorer older than version 8 or 9, but can be used by web pages if those pages install a polyfill." You may also search for 'shims'- a similar topic.
If you want to clearly understand things...take a look at https://www.polymer-project.org/0.5/resources/faq.html. Here you can find answers to your doubts. You can also refer to excellent article https://css-tricks.com/modular-future-web-components/. Since I will not be able to explain each and everything in my posts, I recommend you guys to explore things yourself first if you come across any problem, otherwise leave comments below...I will definitely try to answer them.
Now let's have a look at what are we going to build....
In the Next Tutorial, we'll set the environment to making a chrome app.