Polymer tutorial: Scafolding and making the first app with polymer js

In part 0 of Polymer tutorial, we’ve discussed what Polymer and web components are and why do we need polyfills. In this article we will see how to make the boilerplate for a polymer app. And how we can develop a basic app using Polymer.

Setting up Polymer

Polymer has few dipendencies (as web components are still not native to browsers). So eithefr you can manually download all the dependencies and link them to your project or you can use bower which is a dependency management tool, so that you no longer have to manually download and manage your scripts.

Setup polymer using bower

If you don’t have bower already installed, install it via npm using the following command.

npm install -g bower

If you don’t wanna install globally, remove the “-g” from the command.

Run the following command and bower will ask you a set of questions

bower init

Below is the way I answered the questions
bower init snapshot

* Now it’s time to install Polymer. So run the following command so that the bower can install Polymer and all it dependencies.

bower install polymer

Now add index.html in your root folder which will make your folder structure just like the following.

polymer folder structure


So now after finishing all installation parts and all, we can focus on the core part; that is the programming part; to make our first ever web component or to be more specific, polymer element.

Making sample polymer js app

First of all you abviously need a html file to put you code. So create one in your root folder. I’ve named it index.html. After that include webcomponents.js and import polymer.html in the html file. Below is the code.


Polymer test by voidcanvas.com

 	<link href="bower_components/polymer/polymer.html" rel="import" /></pre>
<h1>This is a polymer tutorial</h1>
<pre>

Now, after importing all the libraries code a component. Inside yourput the code below.

</pre>
<h1>This is a polymer element</h1>
<pre>

So, first we’ve created an element of type polymer-element and given it a name, “an-element”. You can give any name of your choice, but a dash (-) is mandatory in the name. The cause is described here. An attribute “noscript” is also added while defining the element as we have not included any script for the element. If you neither put any script not add the “noscript” attribute, it will cause an error.

Let’s run the app now

To run the app you need a server. Without server the html “import” will not work. You can use apache, iis, node or any other server to host your files. I am doing that with node’s server module. If you don’t have that module install, you can install it via npm. “npm install -g serve”.

To host with serve run the following command

serve

So after hosting the files, you will see the following output.

polymer output 1

It’s just the basic web component or polymer element. The following will cover scopped styling and nested scripts also.

Scoped styling with polymer

Inside the template you can add a <style> tag and the css rules inside it will be native to the element. This is the concept of shadow DOM.

	<polymer-element name="an-element" noscript>
		<template>
			<h1>This is a polymer element</h1>
			<style>
			h1{
				color:green;
			}
			</style>
		</template>
	</polymer-element>
	

Below is the output of the program and you can see though there are two h1 tags inside the page but only the one inside the polymer-element is colored as green. That means the style we wrote is applied only to the h1 tag inside the element.

polymer output 2

JavaScript in polymer element

Including script is as easy as including style in polymer. You have to add a <script> tag in the element and can easily play with variables; predefined functions like ready() is also available. Below is a basic example of it. Our next articles will describe the script part in polymer js with more brief.

<polymer-element name="an-element">
	<template>
		<h1>This is a polymer element</h1>
		<h2>My name is {{name}}</h2>
		<style>
		h1{
			color:green;
		}
		</style>
	</template>
	<script>
		Polymer({
			name:'Paul Shan',
			ready:function () {
				alert("an-element is loaded");
			}
		})
	</script>
</polymer-element>

After running the above code, it will prompt you with an alert box as we’ve put an alert function on ready function. Similarly the property name is also accessible from the template. Similar to the css, the script is also scoped here and not accessible outside the polymer element.

polymer output 3

There are more coming

This article described just the scaffolding and making the very basic polymer application; just how to make a basic web component. Polymer provides a layer of abstraction, basing on what we can make paper element, core element etc. very easily. The next articles of this series (polymer tutorial) in VoidCanvs will cover the in depth of polymer and its use.


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.