Getting Started with Polymer

Published in

Amruth Pillai

8 min readNov 19, 2016

Web Development is at the prime of it’s game now, especially with the introduction of Web Components. It has been the most smartest update to web there has been since Bootstrap came out, and it makes productivity rise up like a phoenix from a flame.

Introduction to Web Components

So, what are Web Components? Let me put it in the simplest way possible: I’ve written code to display a Twitter Follow button as seen above. I tend to add this button to all of my websites, but it doesn’t necessarily have to point to the same account — I could have a personal Twitter account and a business Twitter account on two different websites. If I had to create another website, I would have to copy paste code from the old website, change the necessary tags and use it on this website.

But with Web Components, you can just as easily create a component of this Twitter Follow button and use it on as many websites you want, just by importing it via bower or npm. What’s the beauty of this? You could share your component with the world using GitHub, so others could just pick it up, plug it in on their website and start tweaking around with it, like linking it to their own username. You would be amazed with the amount of components that are already available out there, most of them from Google.

Introduction to Polymer

Polymer is a web components framework from Google. I think that’s introduction enough? Basically, since it’s from Google, we can expect good support from it’s home grown developers and also, great support with it’s own services, such as Firebase and it’s many Google APIs. Moreover, the elements available on Polymer follow Material Design standards, which has been the most minimalistic and widely adopted design trend since… well, since color.

So, why Polymer? If you’re into the Web Development scene, you might have heard of the frameworks: AngularJS, ReactJS, EmberJS, MeteorJS, VueJS… whew, that’s a lot of JSes. Essentially, all of these frameworks are built or being built with the notion of Web Components in mind, but with Polymer, you get a whole lot of simplicity and design standards. It follows material design, and that was the only reason I saw Polymer to be over the rest. There can be no *one* framework that rules them all.

Web Development is a bit tough to get into right now, only because of the confusion of so many frameworks available, but what’s important to remember is all of them follow the MVC pattern, all of them are built on Javascript, and if you’ve learnt one, you’ve learnt them all. Stop deciding on a framework, and start building on one already.

Let’s begin, shall we?

I believe in teaching via example, so this is going to be *probably* your first project on Polymer. Do follow along the blocks of code and if you get stuck somewhere, do drop a comment below:

Step 1: Install NodeJS, NPM & Bower

To begin installing Polymer, you need NodeJS. You might have heard about this amazing server-side Javascript runner. We aren’t actually going to be working with NodeJS, so calm your horses. We’re actually going to be using something called the Node Package Manager (NPM) that comes with NodeJS to install a lot of our cool components.

How to install NodeJS you ask? Just hit the following link, and get the latest version (v7+): https://nodejs.org/en/. It’ll download a version specific to your Operating System and CPU Architecture.

Once NodeJS is installed, verify that you have Node and NPM installed by running the following commands on your Command Prompt or Terminal:

node --version
v7.1.0npm --version
v3.10.9

If you get the output similar to the above, give yourself a cookie! ☺

Now, how do you install Bower? Things are gonna get a lot easier from here, now that you have npm installed on your computer. Let me show you how you can install bower, a component package manager exclusive for the web, with just one command:

npm install -g bower

If this didn’t work, it’s probably cause you might need to run the Command Prompt as Administrator. On Mac/Linux Terminals, you will need to prefix the command with sudo to make it work with superuser privileges:

sudo npm install -g bower

For any future commands/code you see on this post, with npm install, just assume that you’ll need to be either using Command Prompt with Administrator privileges or prefixing sudo on your UNIX Terminal.

Step 2: Install Polymer-CLI

npm install -g polymer-cli

This will install Polymer’s command line tool globally on your system, so you can start using the polymer generator from anywhere on your system. Once this is installed, you can run commands like:

polymer init
- this creates a new polymer projectpolymer serve
- this runs a local server to showcase your projectpolymer test
- this runs any test cases you might have written for your project

We’ll be using those commands in a little while, but let’s take on one hurdle at a time. So, to verify that you have Polymer on your system globally, just run the following command:

polymer --version
0.17.0

Step 3: Create your first Polymer Project

This is going to be a much easier step than you think it’ll be. All you need to do to scaffold your new Polymer Project is run the commands below:

mkdir new-app
- creates a new directory called 'new-app'cd new-app
- changes the directory to 'new-app'polymer init
- runs the Polymer CLI to initialize a new app

Once you run polymer init, you’ll see the following four options:

1) element - A blank element template
2) application - A blank application template
3) shop - The "Shop" Progressive Web App demo
4) starter-kit - A starter application template, with navigation and "PRPL pattern" loading

Every one of the four options are pretty self explanatory, but I’ll give you a brief rundown of all of the 4 options, with example screenshots:

1) Element

It’s the best option for those who choose to create their own custom web component. You just need to create your view and provide the functionality, while Polymer will take care of the boring documentation and demo work for you, so you can focus more on releasing your component into the wild.

2) Application

This is as barebones as a Polymer Project gets: no CSS, no This is basically a blank Hello, World template for those who are courageous enough to run without shoes. It’s great for understanding how Polymer works at it’s very basic, and I will be covering the blank template soon.

It says application-app since I named my application… well, … application! ☺

3) Shop

This is the exact opposite of the blank application you saw before… Shop creates a complete shopping website, and a pretty great looking one at that, complete with a checkout box, responsive design, a few products and categories and literally, anything you would want in a personalized store shopping website.

But don’t let me just fool you with words, feast your eyes on the screenshots:

4) Polymer Starter Kit

This is the one that we’ll be working on, because it kind of hits the sweet spot between the Blank Application Template and the Shop Template. The (PSK) scaffolds a multi-view single-page application with a few material design components. Maybe I contradicted myself there a little bit, but you can understand clearer when you check out the screenshots:

Polymer Starter Kit, on tables and mobile phones (from left to right)

So, like I said, we’ll be starting off with the amazing Starter Kit that Google Polymer ships with, so just select the 4) starter-kit option in the polymer init menu, and wait for the packages to get downloaded.

Once the starter-kit has been downloaded, just run the following command which will create a local web server that will allow you to demo your application, and also open it on your default browser for you:

polymer serve --open

This will fire up your default browser to open up a website much like the one you saw in the above screenshots. Just play around with this for a while and check out how cool the animations and transitions from different views work. The beauty of using Polymer Elements is that, all of them have these animations and transitions embedded within them, which means less design work and more backend work for the web developer.

That’s all folks!

Now, for some people, that might have been too overwhelming having to work with a whole new framework right out of the blue and not even knowing a single line of Javascript or HTML even, but that’s the beauty of this tutorial and all the frameworks out there right now. You can learn them on-the-go.

For those who felt this was too less of content to begin with, please bear with me while I write up more tutorials for this amazing framework. This is my very first tutorial, so I am very much eager to know the kind of mistakes I have made, the portions of the learn-up that I can improve on and essentially, with your support and criticism, I hope that both of us can grow and learn ☺

Thank you all so much for getting this far through the tutorial, do follow me on Facebook or Twitter.

Until next time,