Before we get started there is one thing we have to know: the latest version of Polymer at this moment is 0.5.4 and it was launched on January 28th, 2015 and is still in developer preview.
This should give us an idea about the stage of this technology and make us ask ourselves if it really is ready to be used on production?
Luckily, someone from Polymer thoughtfully answered that question:
Polymer is currently in “developer preview.” However, despite the label many people have already had success using Polymer in production. Although things might still change, we encourage developers to take Polymer out for a test drive.
Polymer is both a development library for web components, which uses native implementations where available and polyfills* where not, and a UI library with common elements and patterns built using its own technology.
*A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
In other words, Polymer’s main parts are: Web Components and Material Design.
Web componentsare a suite of connected technologies aimed at making elements reusable across the Web.
it’s more revealing to us by experiencing the feeling than to think too much about it. So…
I feel i can’t close this chapter without telling you about materialize.css.
“A modern responsive front-end framework based on Material Design” they say. I’ll leave it to you to decide this, so give it a try.
Polymer – “Everything is an element”
As I earlier said, Polymer embodies a development library and a UI library, and we can clearly see this from how it’s elements are grouped in the two main packages: the Core elements and the paper elements.
Play with them so you can get a better feeling about what they’re useful for.
If you’re not satisfied with what Polymer is already bringing to the table, you can create your own element anytime. And this is a fairly easy thing to do!
OK, so how do I get started?
First thing you’ll need is a web server. You need it so you can import the template files without upsetting the browser.
Get the Polymer files. One way to do this (and the way I prefer) is to install the package with bower. This infers that you have to install bower first if you didn’t already do this. Get started here. After doing this, run the following command:
Using the component could not be easier. Just add the component tag in your page :
If you want to create your own element
Create the element file. What you have to know is that the element name has to be the same as the file name and this name has to include a hyphen . For example if you’d want an element called “banana-tree”, the file has to be named “banana-tree.html”.
Create your element. You can find a simple tutorial on how to create a basic element here. You’ll see here the great powers of Polymer elements (like styling handlers or two way binding). Be sure to have used them 100%.
Include it and use it. Do this just like you include an already existing Polymer element. See above.
It’s that simple!
You can see an example element I built for presentation purposes here.
Even though I tried to keep it short and simple, I know that looking through all the external references in this article can take some time. If you are part of the generous people who gave some of their time to get to this paragraph, I thank you for that and I hope the information matched your expectations. If so, sharing this article is highly appreciated.
Have fun creating new useful web elements!
IntelligentBee respects and applies the new policy regarding personal data protection as well as the changes proposed by European Regulation (EU) 2016/679. Before continuing to browse our website, please take time to read and understand the contents.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.