Getting started with Polymer 1.1.0

//Getting started with Polymer 1.1.0

Getting started with Polymer 1.1.0

I just took a short insight look to the Polymer 1.1.0 library, that replaces the shadow DOM polyfill with a shim that is far more lightweighted than it was before in the old 0.5.0 version. Polymer is build for modern web browsers and makes use of the popular web components. To be honest I started with Polymer 1.0.0 but on the same day the 1.1.0 was released, so I stepped over to the newest version.

In this short tutorial we wills start building a Material design (in Polymer: „paper design“) app with a drawer and five sections in an single-site application. This tutorial will be splitted into more than one post, but they will be linked to each other.

It is a good idea, to start here.

You will need npm and bower installed to start with this tutorial.

Setting up the environment

In the first step, we are setting up the environment and after that continue with our first Polymer app.

  1. Create a directory, that will be your working directory
  2. Open a CLI and navigate to that directory. We are starting from here with  bower init
  3. Answer the questions like presented below and you will have bower creating a bower.json for you, that you can later build on.
The bower.json will now look somehow like presented below: In the next step we are installing Polymer: Bower will install now the polymer and webcomponentsjs packages to your project directory.

You can also take another way and just extend your bower.json (most practical way for further development). When you have installed polymer, you will find a new section „dependencies“ in your bower.json, that you can extend to add new web components and polyfills to your app:

If you browse through the Polymer Catalog on the left side you will always find a Bower Command, where you can copy the command from for installing the element directly through bower.

For instance, the „paper-card“ element can be installed by:  bower install --save PolymerElements/paper-card. The same can be achieved if, you just change the dependencies. Just change this section to the following and we will have everything in place for our first steps:

Now just run a  bower update and all dependencies will be installed. On GitHub and in the Polymer Catalog, you will find more PolymerElements ready to use in your app.

To take a look to the examples we are building later on, we are going to install polyserve, to locally test with a simple web server. After that, you will be ready to start with the development part

This will install polyserve globally, so it will be accessible also for other projects.

Base HTML-Template

In your working directory, you will find a bower.json and a folder bower_components. These components we will import to a basis HTML 5 template.

Create a new directory in the working directory. I called it „app“. In this directory create a new file index.html and add the following content there:

 

With this basis template we will start over. First check, if you can start polyserve and see the results in your browser:

As you can see, the server was started on port 8080. If we point our webserver to the URL http://localhost:8080/components/Polymer_1.1.0/app/  there should be output as follows:

 

Polyserve is working as intended

Polyserve is working as intended

 

To continue, see the next post Getting started with Polymer 1.1.0 – Part 2

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
By | 2017-01-29T10:32:03+00:00 September 23rd, 2015|Internet and Web Engineering|0 Comments

Leave A Comment