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!
