Polymer - how to create a youtube video list

During the last fuseday at Tikal, the javascript group focused on yet another javascript stack.

In this post i’m sharing my experience with Google’s Polymer project led by Eric Bidelman.

The Javascript stack that we used for the project was:

• sailsjs for server side
• Polymer for client side
• mongodb for database
• monogohq for cloud mongo database
• grunt for automation tasks (build, concat, etc..)
• nodejitsu for deploying

Polymer - intro

Polymer is an open source project by Google, which aims to follow future standard of web components and use them in browsers today.

All in all, it provides good and solid polyfills for some of the standards that define web components:

• Templates
• HTML imports
• Custom elements
• Shadow DOM

So, once browser vendors implements these standards, Polymer will use the native implementation.

Fuseday and Polymer

The project for December 2013 fuseday was to creat a youtube application which has 2 main modules:

1. Screen - a page where a youtube video is played
2. Remote - a page to search for youtube videos and select and control one video to be played in the Screen

So, eventually, one would open the application in 2 clients: TV for Screen, mobile device for Remote.

I had the challange of working with Polymer and implement the Remote module with it.

Polymer - mantra

Polymer follows one mantra: Everything is an element.

It tries to elimintate js boilerplate code by embracing back html standards - and for anyone who’ve been using angular’s directives - it will look much simliar in concept.

All i needed for the Remote module was a simple module that will display a list of youtube items, searching youtube and controls for the currently played video. So, basically, my custom element should be in its simplest form like so:

and for using it:

	<youtube-list></youtube-list>

Polymer provides both basic platform elements and ui widgets. For starters, I chose to focus on the platform elements and create the youtube list module.

Polymer - platform elements

The platform elements aims to provide “tools” for various use cases: let it be ui widgets, modules and in general: any custom elements or procedures you can think of.

The “youtube-list” module requires few polymer elements:

• polymer.html - for creating polymer elements
• polymer-ajax - for using ajax

Now, For creating the new module “youtube-list”, we start with this snippet:

	
	<template></template>
	
</polymer-element>

This code actually creates an incapsulated code which runs within the “youtube-list” module context.

“style” tag can be used for any custom style of this module - and will be implemented to the inside contents of this element.

“template” is the html markup that this module is created with. inside this tag we’ll use the “polymer-ajax” element.

“script” is the js script that will define the js polymer object and will hold the logics and behaviour of this module.

“attributes” may be a space seperated string of attributes that is exposed outside of this element (think of “input” attributes: “type”, “value”) - which will be defined as: attributes=“type value”

template

The “template” tag is part of the html5 standards and may consists html markup code with the commonly used templating syntax of mustasch/angularjs - {{ title_value }} - which is also used for data binding.

The evaluation of the expressions is done towards the polymer’s element local public (defined with “this” inside the Polymer definition in the script tag) variables and attributes variables as well.

The ‘template’ tag may be nested and used. Its most common use is using it in a “repeat” expression.

Much like angularjs directive “ng-repeat”, you would use the repeat like so:

	

<h2 videoid="{{item.id.videoId}}">
  {{item.snippet.title}}
</h2>
	...
	...
</template>

The polymer-ajax element is declared inside the main template tag for this module as so:

<polymer-ajax id="ajax" url="/search/list" 
    params=''
    handleAs="json"
    on-polymer-response="{{handleResponse}}">
</polymer-ajax>

In the next section we’ll see what the “id” attribute is used for, and how easy it is to use the polymer-ajax with js code. The ‘handleResponse’ is a function which is defined in the script tag.

script

The “script” tag holds the logics of the custom element that we’ve created. Its important to note that it is not required if your custom element doesn’t have any js logics - otherwise - it’s a must.

For declaring and inteacting with the new custom element “youtube-list”, we need to declare this element using the Polymer function:

Polymer('youtube-list', {
	ready: function() {
		this.nowPlaying = 'choose something below...';
		this.items = [{
			snippet: {
				title: 'loading...',
				description: ''
			}];
	}
});

The ‘ready’ function runs once Polymer has been initialized. Then, on any change to local, public properties attached to “this” context, the relevant expressions which have been defined in the template tag will be evaluated and rendered to the DOM of this element.

Lets inspect the “script” more and focus on the ‘handleResponse’ method that is defined in the polymer-ajax element.

This method id defined as a method of the ‘youtube-list’ polymer element:

handleResponse: function(ev, res){
	this.items = res.response.items;
	this.loading = '';
}

Notice that all it has to do in order to update the dom with the new items is updating the “this.items” property. The rest is being taking care of by Polymer’s data binding - so the new items that were retreived from the ajax call will be rendered accrodingly.

One of the many features that I like in Polymer is that it saved a reference to an element with an id attribute. Lets see how we use it here.

For searching youtube videos, a form is defined in the template:

First, a submit event handler is defined on Polymer's ‘ready' function. Notice how I can easily refer to the search form by quering the "this.$" property. Also, the callback function sends the input's value to the ‘query' method. Eventualy, the query method refers to the ‘ajax' element using the ‘this.$ajax' and runs the ‘go' method. The ‘go' method is a built in method that comes with polymer-ajax.

```typescript
ready: function(){
....
	var that = this;
	this.$.search.addEventListener('submit', function(ev){
		that.query(that.$.query.value);
		ev.preventDefault();
	});
},
..
..

query: function(q){
  var that = this;
  this.loading = "finding your query now...";
  var params = {
  	alt: "json",
  	q: q
  };
  this.$.ajax.params = JSON.stringify(params);
  this.$.ajax.go();
}

Summary

Polymer was fun to experiment with. Coming from angularjs background felt just like home with its native templating engine.

One of the nicest things in using polymers is seeing the actual elements in the source of the html inside the devtools. I also like the way devtools seperates the various ingridients of the custom polymer to its own files in the “sources” tab of devtools.

Polymer is an interesting concept and has lots of gems to play with - both ui elements (tabs, navigation, cards, lists, menu etc..) and platform elements (ajax, animation ,localstorage etc..).

Polymer truly promotes and takes the javascript module methodology to a high level in web development while exposing the future platform of html5 web components standards.

The project of fuseday is open source and the full code is on github.