Disclaimer
Polymer is in alpha. So some of the code described in this article may or may nor work properly in your browser.
For more information on current polymer compatibility status check out http://www.polymer-project.org/resources/compatibility.html
What's all this then?
So, this polymer thing. Other sites explain it better than I can (mostly because they actually know what they are talking about) but in a nut shell, polymer wants to put an end to all the "hackery" that is associated with creating the more dynamic web that we are accustomed to now. HTML 5 is great! it really is, but we still rely on hacked together javascript frameworks, mountains of CSS files, javascript files and what not to make websites "come alive". And while none of that matters to the end users of a site, it sure matters to the developers of the site (or app). Eventually, the more sliding bits, blinking and rotating gizmos and external code you implement in your site, the more you feel the life being sucked out of you. Slowly but surely it stops feeling like development and more like herding cats.
Polymer aims to solve this with web components. As the polymer website puts it:
"Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond."
And i for one, welcome our new component overlords. The key phrase to take away from that description is "extend HTML". This is what for me as a developer who likes to focus on "making cool stuff fast" the key part of polymer. What it means is "everything is a tag".
HTML as it is has a set of standard tags that behave in predefined ways. There a "p-tags" for paragraphs, "img-tags" for images and so forth. But there is no "this cool slider with the rotating button that you once saw on some site-tag" because that cool slider was probably a collection of div-tags, img-tags mixed in with a ton of custom javascript based upon some version of jquery and some css files. So if you wanted that cool slider (remember, it had a rotating button!) you would have to go through a lot of effort to reverse engineer it. And even if the person who made the cool slider wanted to share it with the world, you too would have to have try and implement all those tags, scripts and css files into your site, hoping that you won't break anything that was already on your site.
While web components still rely on all those things, polymer puts it much further into the background. I marries the concepts of object oriented programming with HTML tags. Making it much easier to build, document, share and implement. But...
It's not THAT easy... yet
For some time now I've been watching the development of polymer from a distance. I would have liked to get closer sooner, but there where a few hurdles in the way.
Currently getting polymer to work is a bit tricky. The website gives instructions on how to get and install polymer in it's current state. However they assume that we all have access to some console that lets us install what ever we bloody like on the server.
Well... most of us don't. But a few days ago (as of writing this article) some examples and files were made available for download so that we, who can't just install bower on a whim, can hack together the pieces and upload the files in a more "traditional" way. So i managed to hack some things together using files from the polymer website and from git. And so far, it works... but it was not as easy as they said it would be. It will be, eventually.
Example
So this is my first working test. At the bottom of this article you should see a google map. Of course having a google map implemented on a website is not a revolution, but how it is implemented IS.
Traditionally if you want to put a map on your site, you'll get some code from the maps site that you can paste into your own code. And that is fine. But if you wanted to do more things with that map, such as putting in your own markers, controlling zoom, or have the map being generated from values from a database or what not, you would be back to … a bunch of divs, a ton of javascript, etc. Then hope that nothing breaks.
The map on this page uses polymer. And with that the implementations is reduced to the following:
<link href="components/google-map/google-map.html" rel="import" />
This part imports all the code needed to make a "google-map tag"
<google-map fittomarkers>
<google-map-marker draggable="false" icon="images/iroiro/marker_denmark.png" latitude="54.7520395" longitude="11.8904685" title="Where i live"></google-map-marker>
<google-map-marker draggable="false" icon="images/iroiro/marker_japan.png" latitude="35.2973022" longitude="136.8695648" title="Where i want to live"></google-map-marker>
</google-map>
This part is the map.. using a google-map tag. Something that does not exist in HTML... but now works as an extension to HTML. With custom markers and all.
This is a map. It's a big deal!!!
This is the future of the web. More importantly: It's the future of the web, put in the hands of those who make it.
More info:
There is a lot more to say about polymer and web components. And it is already being said by people who a much better at telling the real story than i am. And while i'm not smart enough to fully explain why this is important, i am smart enough to know: THIS IS REALLY IMPORTANT!
For more info visit : http://www.polymer-project.org/
… And watch these videos:
