Getting declarative with Polymer / Boyan Mihaylov

Polymer is Google’s implementation of WebComponents for today’s browser. If you are not familiar with it, check out this nice tutorial by Pankaj Parashar. The main idea behind WebComponents is that we should be able to create our own web components (hence the name). A web component is just a custom HTML element with some styles and behavior attached to it. An example can be the following:

<my-video-player url="movie.mp4" width="250" height="150" auto-play>

1	<my-video-player url="movie.mp4" width="250" height="150" auto-play>

Polymer provides two sets of components one can use directly or build on:

Core – basic elements, both visual and non-visual, that can help one built layouts, scaffolding, and user interaction
Paper – these elements implement the material design philosophy of Google

Besides some standard elements in the core set (f.x., core-dropdown, core-menu, core-tooltip), one can find non-visual elements that perform some action. Such an element is core-ajax. What it does is basically an AJAX request. Here is how you can make use of it on your page:

<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"polymer"}' handleAs="json" on-core-response="{{handleResponse}}"></core-ajax>

1	<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"polymer"}' handleAs="json" on-core-response="{{handleResponse}}"></core-ajax>

I wrote a simple HTML site that fetches a list of videos related to a search string. It demonstrates one way of using Polymer’s core elements.

<input type="text" id="search-string-input" placeholder="Search string...">
<button id="load-button">Load</button>
<core-ajax url="http://gdata.youtube.com/feeds/api/videos/" handleAs="json"></core-ajax>
<core-list id="results-list" style="width: 100%; height: 300px; overflow: auto">
  <template>
    <h2>{{model.title}}</h2>
 </template>
</core-list>

<core-ajax url="http://gdata.youtube.com/feeds/api/videos/" handleAs="json"></core-ajax>

<core-list id="results-list" style="width: 100%; height: 300px; overflow: auto">

<h2>{{model.title}}</h2>

</template>

</core-list>

And you need a couple of good old JavaScript lines underneath:

var loadButton = document.querySelector('#load-button');
var ajax = document.querySelector('core-ajax');
ajax.addEventListener('core-response', function(evt) {
  var entries = evt.detail.response.feed.entry;
  var titles = entries.map(function(entry) { return { title: entry.title.$t }; });
  document.querySelector('#results-list').data = titles;
});
loadButton.addEventListener('click', function() {
  var searchString = document.querySelector('#search-string-input').value;
  ajax.params = { "alt": "json", "q": searchString };
  ajax.go();
});

var loadButton = document.querySelector('#load-button');

var ajax = document.querySelector('core-ajax');

ajax.addEventListener('core-response', function(evt) {

var entries = evt.detail.response.feed.entry;

var titles = entries.map(function(entry) { return { title: entry.title.$t }; });

document.querySelector('#results-list').data = titles;

});

loadButton.addEventListener('click', function() {

var searchString = document.querySelector('#search-string-input').value;

ajax.params = { "alt": "json", "q": searchString };

ajax.go();

});

Another similar HTML element is core-signals, which provides basic publish-subscribe functionality. This reminds me a lot to ASP.NET, where one can use non-visual ASP.NET server controls and instruct them to ahieve a goal, f.x., SqlDataSource. The nice thing about these non-visual elements is they are very good for prototyping. In some small projects where you want to check whether a concept works, it can be quite convenient to use them. However, in my personal opinion, these behavior-only elements are not suitable for large projects, because we couple too much the visual representation (i.e. the views) with the “business” logic (that should be part of some controller or service). In this case, I would rather stick to traditional ways of firing an AJAX request. 🙂