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.
bower init
? name: Polymer_1.1.0
? version: 0.0.1
? description: First steps with Polymer
? main file: app/index.html
? what types of modules does this package expose? node
? keywords: polymer
? authors: Sven Seiler
? license: MIT
? homepage: https://seiler.it
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

The bower.json will now look somehow like presented below:

{
 name: 'Polymer_1.1.0',
 version: '0.0.1',
 description: 'First steps with Polymer',
 main: 'app/index.html',
 moduleType: 
[ 'node' ], keywords: [ 'polymer' ], authors: [ 'Sven Seiler' ], license: 'MIT', homepage: 'https://seiler.it', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] }

In the next step we are installing Polymer:

bower install --save Polymer/polymer#^1.1.0
bower polymer#1.1.0 cached git://github.com/Polymer/polymer.git#1.1.0
bower polymer#1.1.0 validate 1.1.0 against git://github.com/Polymer/polymer.git#1.1.0
bower webcomponentsjs#^0.7.2 cached git://github.com/Polymer/webcomponentsjs.git#0.7.12
bower webcomponentsjs#^0.7.2 validate 0.7.12 against git://github.com/Polymer/webcomponentsjs.git#^0.7.2
bower polymer#1.1.0 install polymer#1.1.0
bower webcomponentsjs#^0.7.2 install webcomponentsjs#0.7.12

polymer#1.1.0 bower_components\polymer
└── webcomponentsjs#0.7.12

webcomponentsjs#0.7.12 bower_components\webcomponentsjs

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:

  "dependencies": {
    "polymer": "Polymer/polymer#1.1.0"
  }

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:

  "dependencies": {
 "google-chart": "GoogleWebComponents/google-chart#~1.0.2",
 "google-map": "GoogleWebComponents/google-map#~1.1.0",
 "iron-elements": "PolymerElements/iron-elements#~1.0.3",
 "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3",
 "iron-form": "PolymerElements/iron-form#~1.0.9",
 "iron-icons": "PolymerElements/iron-icons#~1.0.3",
 "iron-pages": "PolymerElements/iron-pages#~1.0.3",
 "paper-button": "PolymerElements/paper-button#~1.0.5",
 "paper-card": "PolymerElements/paper-card#~1.0.5",
 "paper-checkbox": "PolymerElements/paper-checkbox#~1.0.10",
 "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#~1.0.1",
 "paper-drawer-panel": "PolymerElements/paper-drawer-panel#~1.0.3",
 "paper-header-panel": "PolymerElements/paper-header-panel#~1.0.5",
 "paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
 "paper-input": "PolymerElements/paper-input#~1.0.14",
 "paper-item": "PolymerElements/paper-item#~1.0.2",
 "paper-menu": "PolymerElements/paper-menu#~1.1.0",
 "paper-slider": "PolymerElements/paper-slider#~1.0.6",
 "paper-tabs": "PolymerElements/paper-tabs#~1.0.2",
 "paper-toast": "PolymerElements/paper-toast#~1.0.0",
 "paper-toolbar": "PolymerElements/paper-toolbar#~1.0.4",
 "polymer": "Polymer/polymer#1.1.0"
 }

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

npm install -g polyserve

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:

<!doctype html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>First steps with Polymer 1.1.0</title>
		<meta name="description" content="First steps with Polymer 1.1.0">
		<meta name="author" content="Sven Seiler">
		
		<!-- Polyfill Web Components support for older browsers -->
		<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

		<!-- Import elements 
			We will add the elements later here.
			-->
		
		
		<!-- We will add custom CSS later -->
		<style is="custom-style">
		</style>
		
	</head>

	<body class="fullbleed vertical layout">
		<!-- Content starts here -->
		Placeholder content
		<!-- Content ends here -->
	</body>
</html>

 

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

polyserve
Starting Polyserve on port 8080
Files in this directory are available at localhost:8080/components/Polymer_1.1.0/...

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

2019-01-03T16:47:07+02:00Tags: , , , , , , , , , , , , , , , , |

Share This Story, Choose Your Platform!

Leave A Comment