Polymer
The future of web. Today.
Sometimes, in order to create the future, we need to go back to our past. The simplicity of the past is often sacrificed for the functionality of the future. The web is a perfect example of this phenomenon.
Polymer is Google’s new javascript library. It is spearheading the revolution called Web Components. Web components ushered in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. This means that you can now use a simple HTML tag to do practically anything without worrying about the scripts running inside it. It is encapsulation at its elegant best. It is utter brilliance. It brings back the pure joy of declarative tags to web development.
Polymer tries to see the web with a different view. It is based on the philosophy that “Everything is an element”.
“Elements are pretty great. They’re the building blocks of the web. Unfortunately, as web apps got more complex, we collectively outgrew the basic set of elements that ships in browsers. Our solution was to replace markup with gobs of script. In that shift, we’ve lost the elegance of the element.”
It goes back to our roots. Every browser is shipped with default elements, like the <div> tag. Some elements are UI-based. Some are utility-based. As web apps got more complex, these elements did not keep up. Markup was replaced, as the folks at polymer say, with ‘Gobs of Script’
This made web development ugly. Human-readable html was replaced by complex scripts nested inside 10s of div tags. Try to read the source of any decent website and you’ll be amazed at the number of nested div tags. Everybody wished for a way to develop for the web without complex scripts driving them crazy.
Then, the Web Components technology redefined what an HTML tag could do. It kind of granted it superpowers.
“In the old world, the script was your concrete, and the solution to most of your problems was to use gobs of it. In the new world, elements are your bricks; the script is like mortar. Select the bricks that fit your needs more closely and use only a judicious amount of mortar to hold them together. This is what we mean when we say everything is an element.” –The Polymer Team
Say you need to build a login system. Polymer allows you to do it with simple tags like <username> or <password>. Developers can create such custom elements. Then you can reuse these components anywhere. No need to worry about their implementation.
This encapsulation is the key. You can take a few low level elements, combine them to make a more powerful element with its internals safely encapsulated. You can use such elements to make even bigger elements. Combine some more elements and you can build a completely encapsulated reusable app. All this, with just declarative tags like <head> and <body>. This is done through ‘html import’ specification of Web Components. It allows the use of html documents within other html documents.
Polymer packs in the power of scripts with the beauty and ease of use of markup.
It is open source & highly modular. This means you can directly use a lot of top class elements made by the polymer team and several other top developers. You can reuse your own projects in other projects. Everything is modular. Since it runs on Web Components, a technology which isn’t yet supported on all browsers, it needs a library called polyfills for compatibility on older browsers. This allows use of Polymer on all platforms. Google Chrome & Opera have full support, Firefox is catching up fast & IE, is being IE.
Material Design for the Web
Polymer also brings Material Design to the web. It has special Material Design elements called ‘Paper Elements’. They allow you to build an immersive experience using material design. Elevation, shadows, ink effect, ripples, transitions, all are possible through Polymer. Again, you only need to use tags like <paper-button> to create buttons with full material attributes. Polymer is magic. It allows you to do what was considered impossible. It empowers you to build web apps that look equally beautiful on desktops as well as mobiles.
With polymer you can build web apps with the functionality and looks of a native app.
The polymer team has released a few core elements like the <core-ajax> which allows you to perform complex ajax tasks with the ease of markup. It also makes transitions and animations usually associated with native apps possible on web apps.
Web Components have caused a tectonic shift in web development. Polymer, along with x-tags from Mozilla, is going to completely revolutionize the way web apps are made. Although it might not be stable enough or mature enough for production-ready projects, getting on the Polymer train early will be beneficial. It is an amazing time to do web development and Polymer is one of the main reasons!
Update : Since I published this article, Polymer 1.0 has been released. It is Production-Ready and has many more elements including elements that allow you to connect to Google APIs using just a tag!
If this article has helped you, please hit the recommend button below ☺
