Exploring Polymer js through the Polymer CLI

Exploring Polymer js through the Polymer CLI

Lehel Matyus's picture

A few words about Polymer's World View before we get started. Polymer has a sort of back to nature approach in the sense that it puts elements in the center of developing the web. From polymer's perspective web applications should be built using and extending the web components instead of scripts hanging here and there acting and reacting to user action.

If that philosophy resonates with you and you want to try polymer.js quickly by using the Polymer CLI then this blogpost is for you.

The polymer CLI can be used two ways:

  • Creating an element project, to create elements then later reuse those elements in different projects.
  • Creating an app project, to build your own application composed of Polymer elements.

Older browsers do not support custom components, so in order to maximize support for your app you should look into using webcomponents js. With that said let's build a Polymer JS app of our own. In this example I will be using the Polymer CLI, please note that Polymer CLI is still pre-release. Some options may be subject to change.

Create the Polymer Js App

Once you have Git and Node.js (4.x or newer) installed.

1. Install the latest version of Bower.

npm install -g bower

2. after which install Polymer CLI

npm install -g polymer-cli

3. To view a list of commands run

polymer help

4. Create a directory for your app

 mkdir app
 cd app

5. Initialize your app

polymer init

Polymer CLI will ask you what type of project you want to start, select "application"

6. Enter a name for your app, I will name it "ui-app"

7. Enter name for the main element I will use "ui-app"

8. Enter a description

9. To run Local web server type

polymer serve

Your app should be accessible at http://localhost:8080/ Your app should show: 'Hello [app-name]'

Congratulations, you now have a polymer App!

Adding Polymer elements

The 'init' command created the following structure.

Let's add a polymer element From the Element catalog, if you are not interested to much about design and just want your app up and running asap, using paper elements for UI is the way to go. Let's add Paper Toolbar and paper icon button.

1. Get paper toolbar and paper icon button library with bower by running

2. Include webcomponents lite polyfil support in index.html, add the following line in the "head"

3. Include paper toolbar and paper button in your index.html

4. Now lets implement the well known Hello "[your name here]" demo that we are so used to from angular and any other js library by adding the following.

The Polymer library is abundant with elements that you can use out of the box, once you get familiar with the Catalog building rich user interfaces will be blast.

I hope you found the post usefull!

Post new comment

About Urban Insight

We create elegant, mobile-friendly websites.

We solve complex problems using Drupal and open source software.

Learn More

Snippet

If you manage to install binaries and run it, that's much simpler. If you need to compile yourself, then these tips can save you some time.

These are prerequisites to installing node.js. You can skip the ones that are already installed.

1) Install g++

$ yum install sudo gcc-c++

2) Install bzip2-devel (besides bzip2)

$ yum install bzip2-devel

3) Upgrade python to 2.7.3 (from 2.4)
- Node.js requires python 2.6 or 2.7
- If you have 3.0, see https://github.com/joyent/node/wiki/Installation

$ curl -O http://python.org/ftp/python/2.7.3/Python-2.7.3.tgz
$ tar xfz Python-2.7.3.tgz
$ cd Python-2.7.3
$ ./configure
$ make
# You'd need to be either root or a sudoer
$ sudo make install

After these, I was able to compile node.js without an error. Latest version of node.js may be different from the example.

$ curl -O http://nodejs.org/dist/v0.8.14/node-v0.8.14-linux-x64.tar.gz
$ tar -zxf node-v0.8.14.tar.gz
$ cd node-v0.8.14
$ ./configure
$ make
# You'd need to be either root or a sudoer
$ sudo make install