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

Find all .DS_Store files under the directory /Users/jsmith/www

sudo find /Users/jsmith/www -name .DS_Store -depth

And remove them as well.

sudo find /Users/jsmith/www -name .DS_Store -depth -exec rm {} \;

Add the command to crontab so it does it at 10:15am and 3:15pm every day.

# Enter the command and your password when prompted.
sudo crontab -e

# The command should have opened an editor of your choice.
# If an editor is not assigned, you can temporarily assign nano editor.
export EDITOR=nano

# In the editor, enter this line, save it and exit.
15 10,15 * * * root find /Users/jsmith/www -name .DS_Store -depth -exec rm {} \;

I could have removed all .DS_Store files in the system, but doing it with a directory that contains web sites, which can be copied over the network, was good enough for me. Version control softwares usually make exceptions for .DS_Store file by default, so no worry on unwillingly putting them in the code repositories, but it would not hurt to clean them up locally too.