#1 Overview

By -
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.

Comments

Post a Comment

Popular posts from this blog

Double-side Nav Drawer

By -
Image
Hello guys, this post will teach you how to add both Left and Right Navigation Drawers in your Android App. You may need one Nav Drawer on the right to give your users a different set of options, not to distract them from the main navigation items on the left. I have used  Android Studio 1.5.1 Build 141.2456560 .  So here we go. 1) Navigation Drawer Activity      When creating a New Project, choose Navigation Drawer Activity. This makes things easy. If this option is not available, you can the simply choose Blank Activity and later make the project structure similar to Navigation Drawer Activity. See the layout files here . If you run the app at this point, you will see the Left Nav Drawer.                                           2)   Navigation Views     As you can see I have added 2 Navigation Views inside Drawer Layout...one for left-side and other for right-side. For the Right-side, add android:layout_gravity="end" Other th
Keep reading

5 Chrome Experiments you must try

By -
Image
1) 100,000 Stars     http://stars.chromeexperiments.com/ --> by Google Data Arts Team This one is my favorite .  It shows the real location of over 100,000 nearby stars. Zooming in reveals 87 major named stars and our solar system. The galaxy view is an artist's rendition. 2) WebGL Water Simulation      http://madebyevan.com/webgl-water/ --> by Bruno Quintela This is the best in its types.  A pool of water rendered with reflection, refraction, caustics, and ambient occlusion. The pool is simulated with a heightfield and contains a sphere that can interact with the water's surface. 3) GPU Text    http://cabbi.bo/Text/ --> by Isaac Cohen GPGPU Physics simulation using signed distance field text. It adds some crazy effects to the text when you hover or scroll over it. This one is a MUST try. 4) Harmony     http://mrdoob.com/projects/harmony/ --> by Mr.doob Believe me, you will not like
Keep reading

Quotographics

By -
Image
Hey everyone, long time no see. Summer holidays have started and I am kinda free these days. So I created some "Quotographics". Of course, the graphics are not mine, but the thoughts are. (Took the graphics from Google images) If you want to download these, get them here - >  https://drive.google.com/open?id=0B4wLjZdRHjylRmVpckNaakRuTlk Hope you like them. Leave your comments below.
Keep reading