What the component does basically loads any RSS feed and displays it

Starting up

We’ll be using Polymer as the library for the polyfills and creation of the element, and the help of Yeoman the tool I told you about in another post, and you will need to have NodeJS installed too.

We’ll begin by stalling Yeoman:

npm install -g yo

Then we’ll install the Polymer Generator

npm install -g generator-polymer

Then create a new folder mkdir my-element && cd $_

And start the generator yo polymer

This will create the base app structure, and will also install grunt and bower, go make a cup of tea.

Once all dependencies are downloaded we can create our element using:

yo polymer:element my-element

This command will ask us if we want to include a constructor, we mark the check, and we also mark that we want to import to our index.html using HTML imports.

Then it will ask if we want to import local elements, we leave blank.

Then it will ask if we want to import installed Bower elements, we are going to write polymer-json since we’ll be using it later.

Finally this will create our element in app/elements/my-element.html.

Since we said we wanted the polymer-jsonp element we have to install it: bower install --save Polymer/polymer-jsonp

The --save option ensure that this gets added to your bower.json file, if you are asked to choose a suitable version for polymer, I usually choose the one that specifies a version number.

Our web component

So we have our element in app/elements/my-element.html, you should replace every ocurrence of polymer-my-element for simply my-element, this is a bug of the generator that they’re going to fix very soon.

Now we have our element and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/polymer-ajax/polymer-jsonp.html">
<polymer-element name="my-element"  constructor="MyElementElement" attributes="">
  <template>
    <style>
      /* styles for the custom element itself - lowest specificity */
      :host { display: block; }
      /* 
      style if an ancestor has the different class
      :host(.different) { } 
      */
    </style>
    <span>I'm <b>polymer-myElement</b>. This is my Shadow DOM.</span>
        <polymer-ajax></polymer-ajax>
  </template>
  <script>
    Polymer('my-element', {
      //applyAuthorStyles: true,
      //resetStyleInheritance: true,

      // element is fully prepared
      ready: function(){ },
      // instance of the element is created
      created: function() { },
      // instance was inserted into the document
      enteredView: function() { },
      // instance was removed from the document
      leftView: function() { },
      // attribute added, removed or updated
      attributeChanged: function(attrName, oldVal, newVal) { }
    });
  </script>

What we see here is the base structure of our web component, the <template> tag you see is what creates the shadow DOM, so everything inside should be encapsulated, we have our style rules, our html and templates and our js.

Creating the display-rss component

The first thing we need to do is learn how the <polymer-jsonp> element works, it behaves like the <polymer-ajax> one, you can find the documentation here.

To be able to get a cross domain feed we can use Google Feed url, which takes a feed url, transforms it to json and give us the result using jsonp.

The idea is that you can make it all work with declarative sintax, so we’ll configure it like this:

1
2
3
4
5

<polymer-jsonp  id="feed_data"
                    url="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num={{entries}}&q={{url}}&callback="
                    auto="true"
                    response="{{data}}"
                    on-polymer-response="{{responseHandler}}"></polymer-jsonp>

To understand this code we need some notions of how data-binding works in Polymer, take a quick read at this article.

In the code we are saying that this element has the id feed_data the {{url}} means its data-binded to the variable data and {{entries}} with the entries variable, fires up automatically, puts the response on the data variable, and on-response calls the responseHandler function.

We also going to define the url and entries variables in the attributes so can be changed from outside: attributes="url entries"

Then we modify the Polymer function to reflect those variables and functions:

1
2
3
4
5
6
7
8
9
10
11

Polymer('my-element', {
  url: 'http://feeds.bbci.co.uk/news/england/rss.xml',
  entries: 10,
  data: null,
  // element is fully prepared
  ready: function(){ },

  responseHandler: function(){
    console.log(this.data);
  }
});

Ok lets try if this works, before go to the app/index.html and change <polymer-my-element></polymer-my-element> for <my-element></my-element>, and lets fire up the server, run this in the root of your project:

grunt serve

This command should prepare everything, and pop up a browser with the website running, if we take at the console in our dev tools we should see an object containing our feed.

Now is the time to display this data, we’ll show the feed title, the last time it was updated and we’ll loop through the entries using templates:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="container">
    <h1 class="feed_title">{{feed.title}}</h1>
    <small>Last updated: {{lastUpdated}}</small>
    <ul class="entries">
    <template repeat="{{entry in feed.entries}}">
        <li>
            <a href="{{entry.link}}" target="_blank" class="entry_title">{{entry.title}}</a>
            <small class="entry_published">{{entry.publishedDate}}</small>
            <p>{{entry.contentSnippet}}</p>
        </li>
    </template>
    </ul>
</div>

We also can refresh the feed every X milliseconds, the whole thing looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Polymer('my-element', {
  //applyAuthorStyles: true,
  //resetStyleInheritance: true,
  url: 'http://feeds.bbci.co.uk/news/england/rss.xml',
  entries: 10,
  refresh: 1000,
  lastUpdated: 'Not updated yet',

  ready: function() {
      var that = this;
      if (this.refresh) {
          setInterval(function(){
              that.$.feed_data.go();
          }, this.refresh);
      }
  },

  responseHandler: function() {
    if (this.data.responseStatus === 200) {
        this.lastUpdated = new Date()
        this.feed = this.data.responseData.feed;
    }
  }

 });

The code is pretty self explanatory, the only curious line is perhaps line 13 where we select by id directly using this.$.feed_data feed_data is the id of our polymer-jsonp element that has a js API called go() to fire up the ajax call.

And that’s it! Is that easy!We now have a functional custom element that we can configure via attributes like this:

<my-element url="http://rss.news.yahoo.com/rss/topstories" entries="20" refresh="10000"></my-element>

Fire up your grunt serve and you should see a news feed.

When I say major players I mean Mozilla and Google, both of them started writing javascript libraries that provide polyfills for the features needed to make web components work today.

Ok, but what are web components? In words of Zeno Rocha, project lead of customelements.io:

Web Components are a collection of standards which are working their way through the W3C. They enable truly encapsulated and reusable components for the web. And if you think HTML5 changed the web, wait to see what Web Components will do.

Those standards working their way through the future are:

• Custom Elements: Enables authors to define and use new types of DOM elements in a document.
• Shadow DOM: Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots. It provides a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
• HTML Imports: HTML Imports are a way to include and reuse HTML documents in other HTML documents.

These are the foundation of web components.

Mozilla is developing x-tags library and Google is developing the Polymer library, both of them have their own way of declaring the component and the interface, but the end result is the same:

<some-component></some-component>

A new element that has an encapsulated structure, style and functionality; it’s highly reusable, and customisable through attributes and maybe a javascript API.

In customelements.io you can find a directory of web components ready to use, most of them also can be installed via bower, and they’re really fun to use.

I’ve created three web components so far:

• boris-bikes: It provides a component that fetches the Boris Bike data (free bikes, free docks, etc) and provides and interface for it, getting your location and showing the bikes location on a map (which is another web component).
• tfl-status: It provides a component that fetches the Tube Status updates and shows the line status in real time.
• display-rss: Displays any RSS feed that you put on the url attribute

In a future post I’ll explain how I did it, what challenges did I face and some advises too.

I’ve been searching and trying new workflows when starting a front end project/project phase, there are a lot of interesting open source projects for rapid prototyping ‘static’ websites in a reusable, collaborative, optimised and intelligent way.

I’ve been trying tools like:

• Grunt for automating build tasks like optimising images, minifying and uglifying javascript, css and html.
• Bower a package manager for the web (meaning front end).
• Compass I know it can do a lot of things but I’m using it only to compile Sass files.

But it wasn’t until I found Yeoman that everything came toghether.

It’s a tool that scaffolds, downloads and prepares all these tools for you doing the tedious configuration part and using best practices approach in all parts.

Instalation

If you have node already you just have to run:

npm install -g yo

Yeoman has lots of generators which basically are different scaffold variations using different libraries and components depending on which tools you need for the project.

The basic one is called generator-webapp you can install it running:

npm install -g generator-webapp

An then create a new project like this:

yo webapp

It will ask you if you if you want some additional things:

And BOOM, you have a project structure ready to build using grunt, you can create a web server on the fly running grunt serve or build the project into the /dist folder running grunt build.

Then you can use bower to install other js libraries you need like:

bower install --save underscore

The --save parameter ensures that the new library is saved on the bower.json file.

All your bower dependencies will end up in the bower_components folder which is not version controlled, when you want to install it somewhere else you’ll run bower install inside and it will download all the libraries you need, just as Composer does for the back end.

Using other generators

That’s one way of doing it, another way is to use other generators that are more specific to what you’ll use in your project, for example I usually use Backbone.js in my projects, I could install it via bower, or I could use the generator-backbone, which also gives me other interesting tools when building my app like generate models, collections, routers or views:

yo backbone # generates your application base and build workflow
yo backbone:model blog
yo backbone:collection blog
yo backbone:router blog
yo backbone:view blog

There’s a very thorough and extensive post about how to use it in NetTuts

There’re quite a few official generators and tons of community generators, you can even write your own with your own specifications.

I’ve lost the count on how many blogs I started and abandoned, and I always tell myself, “this is going to be the one, I’m gonna crush it with this one”, and the farthest I get is 10 posts or less. This is because I normaly enjoy more setting up, designing, customizing the blog than actually writing on it.

But hey, this one is going to be different, I’m gonna crush it with this one!

I will honestly try to put in here the things I learn and use in a daily basis, new technologies, techniques and stuff that obsesses me for a briefly amount of time.

This blog is being served from Github using Jekyll and Octopress.