Episode IV: A New Platform (Backbone.js + Require.js)

Blog
The best minds from Teradata, our partners, and customers blog about whatever takes their fancy.
Teradata Employee

This is the final installment of a four part series on modularizing the Backbone.js Todos application using Require.js. It examines porting the application to the Pokki platform. 

Introduction

In the last post we examined using the application cache to improve performance and priming the cache for browsers that do not yet support this feature. But what if we never needed to prime the cache? What if your application files were always served from local disk? Now that we are going to a galaxy far, far away... What if you could write an application using the technologies you love and not have to concern yourself with browser inconsistencies? Imagine getting to focus on the fun parts of development. Guess what? It is not in a galaxy far, far away. It is happening right here on an insignificant blue planet in the Milky Way thanks to the Pokki platform.  Jason why are you blogging about this? Good question...

HTML5 and JavaScript

HTML5 and JavaScript have been slowly working their way into and powering a number of platforms from PhoneGap and Appcelerator to Node.js. JavaScript can be seen in MongoDB and as a full stack language in Wakanda (+HTML5). Development is also underway on AppJS, which is another SDK for building desktop applications using HTML5 and JavaScript in Node.js. The point is that I see HTML5 and JavaScript as being major players in application development across all platforms now and even more so in the future, so I wrote this article to demonstrate how easy it is to port your application to another platform that uses the browser as its environment. Disclaimer: This is a very, very simple application. Obviously, more complex applications would take a little more work to port to something like PhoneGap. However, if you keep thing well-structured using libraries like Backbone.js and Require.js it will make porting much easier. 

On to the code...

Preface

I am not going to attempt to rewrite the Pokki documentation or tutorials. The people who built the Pokki platform are the best source for those materials, https://developers.pokki.com/. I am only going to cover the steps it took to port the Todos application to the Pokki platform.

Notes

I removed the application cache suorce files since all files will now be served locally. There are only a few other minor differences.

1. Combine Core Files

First thing I did, which has nothing to do with porting the application, was combine all the global core files into a single file named mvc.js. This is the approach I have taking lately. In standard web applications it saves network calls. Additionally, I use all of them in conjunction and they provide core functionality. This greatly simplified the bootstrapping in main.js.

2. Additional Pokki Files

Next I added the manifest file for a Pokki application. The Pokki platform uses this to identify key files. It is nothing more than a conf file. The only files I needed to add for the Pokki were backend.html and backend.js. These are not required files for a Pokki, but I will discuss why I added them shortly. Lastly I copied over the icons from the Pokki Atom (hello world Pokki ) tutorial. These icons are used in the task bar and Pokki store.

3. Code Changes

Porting the application to the Pokki platform did not require many code changes. In fact the only changes were additions made to populate the Pokki badge. Each time a todo is added or removed the Pokki badge is updated. To accomplish this I bound a new function to collection.

this.collection.bind('all',    this.badge, this); // views/app.js line 37

badge: function () { // views/app.js line 42
var count = this.collection.remaining().length;
count ? pokki.setIconBadge(count) : pokki.removeIconBadge();
}

The next change was to add a back-end to the Pokki, so that when the Pokki is launched the badge count is populated before showing the Pokki, i.e., accessing the “front-end”.  To accomplish this I just grab the todos local storage item and count the todo records that are not marked as “done”.

;(function () { // backend.js
var todos = JSON.parse(localStorage.getItem('todos')), count = 0, key;

for (key in todos) {
if (!todos[key].done)
count++;
}

count ? pokki.setIconBadge(count) : pokki.removeIconBadge();
})();

4. HTML and CSS Changes

No HTML changes were required. As for the CSS I pulled out some styling from the Pokki Atom files and applied it to a few elements in the todos markup. The gist of the changes was creating a scrollable area and styling the scrollbar. The new styles are contained at the end of todos.css.

Wrap Up

That was all it took to port a backbone.js + require.js application to another platform. Simple, huh? Hopefully, I will see you in future on any platform.

After Thought

My approach to organizing applications using Backbone.js and Require.js has evolved since I started posting about the subject as I have been learning along the way (not even close to being done learning), so there are probably some inaccuracies and approaches that are not necessarily considered best practice. Please use reason and experience when developing, and kindness when analyzing my first thoughts on the subject.