Javascript frameworks are pretty hot to build web applications these days. Anyone can build a web app without getting their hands dirty with vanilla javascript. Don’t get offended here, I’m not saying vanilla javascript is bad thing, but why vanilla when you can go with one of javascript frameworks.

Anyway, if you consider the silent battle between Angular and React, Angular is larger, feels like a framework, great for big projects, while React is smaller, more like a library than a framework and great for smaller projects.

We all know, these frameworks are component based. Now I want to introduce a new framework/library, actually not that new but not well known as others.

What Is Polymer?

Polymer is a component based framework that gives advantages to developers to create their own custom web components and keeping the project minimal. Polymer is being developed by Google and contributors on GitHub. Polymer provides set of features that lets developers create their own very custom web components. It’s pretty lightweight — 45kb when imported — , fun to work with, also syntax looks like React, I’m sure React lovers won’t feel the difference a lot 😛

Polymer isn’t meant to create huge, bloated web applications. While keeping everything modular and on the minimal level, Polymer lets developers to be in the center of the control of their project, do the necessary things and use the full power of JavaScript.

What Do We Need to Begin?

Installation process of Polymer is very easy. Basically you need 4 things to install in order to create and run the polymer app successfully. Lets go over it step by step:

NodeJs

Git

npm

Polymer CLI — npm install -g polymer-cli@next

Now Let’s Start to Create Our First Polymer Application.

Since Polymer 3.0 doesn’t support templates yet, and it’s starter application is too much for starters, so I created a repo for this article, you can either clone my repo or clone Polymer’s from here.

After you finish these steps, go to your command line, type:

Once you see this output, open http://127.0.0.1:8081 in your browser and you are supposed to see this screen.

Well I’m not an CSS artist and I write code and write article simultaneously so don’t blame me 😁