Getting Started with Polymer
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.
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
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:
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:
- this creates a new polymer project
- this runs a local server to showcase your project
- 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:
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:
- creates a new directory called 'new-app'
- changes the directory to 'new-app'
- 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:
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.
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.
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:
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!
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 ☺
Until next time,