Pomodoro…… GO!

I find myself with the time to start a new project, and I’m planning on logging the development process so here goes. It’s going to be a digital implementation of the small but very helpful productivity process called the Pomodoro Technique.

The key goal of the project is to create a comprehensive implementation of a HTML5 Offline Application that addresses the following criteria:

  • Client Application for Mobile and Desktop that works with or without an internet application.
  • Server Application that functions entirely as anĀ  API, for authentication, backup and synchronisation.
  • Support for client side translation.
  • Full application is accessible for screen readers, and usable by those without sight.
  • Application is usable across the full spectrum of modern mobile and desktop browsers, at least on the mobile side: iOS, Android and WinPhone; and on the desktop side: IE9/10, Chrome, Firefox, Safari, Opera.

While I don’t know how things will turn out in the end, my initial plan is to use the following tech:

Client Side

  • AngularJS for client side application control, templates and code modularity.
  • JayData for offline storage abstraction, to support both WebSQL and IndexedDB without having to write low level code for both.
  • ngTundra, an Angular Module I’ve written for client side translation.

Server Side

  • Written is Scala, ethos being the server API should be as rock solid as possible to keep all other clients honest. This means having type safety, plus using a functional style as much as possible to reduce side effects.
  • More exploration needs to be done in this space, but I’m hoping to work with Finagle + routing delivered through something like Finatra.
  • The server will avoid doing anything beyond API communication as much as possible.

Anyway, it’s just the beginning and at the moment I’m scaffolding the code base and wire-framing. I’ll use this blog as a development log, looking to talk about all sorts of things such as implementation details, the tools I’ll be using, and any major difficulties I experience working through the above plan. Here we go!


Generating a Javascript Loader with Grunt

If you’re building a web application you’re going to end up with a sizable body of Javascript code, which you’ll usually want to keep separate until deployment. The best way to do this, that won’t require you to change the HTML on deployment, is to use a generated loader file that will load the full body of javascript code.

Recently I’ve made a Grunt Specific task for automating this based on ways I’ve done it in the past. It parses using Coffeescript but it’d be really trivial to change for your purposes. The script also assumes the presence of head.js You can find the Gist of it here: https://gist.github.com/MalucoMarinero/5473658

You can then configure it using options like the ones below.

  grunt.initConfig {
        # The directory to look for javascript files.
        srcDir: 'www/clients/desktop/js'

        # The loader file to generate
        dest: 'www/clients/desktop/js/loader.js' 
        # Javascript files that must be loaded first due to dependency, when they
        # match they'll get pushed to the top of the head.js caal.
        priorityMatches: ['**/app.js', '**/module.js']

        # Patterns which will not get included in the loader. If the loader ends up in the source
        # you'll want to make sure the loader filename is in there.
        ignorePattern: 'loader.js'

        # A URL Prefix to make sure the filenames work in the browser. Without it all file paths
        # will be relative to the srcDir.
        prefix: 'js/'

        # What global variable the loader call will be attached to. This makes the loader a function
        # that can perform callback actions once the load is complete.
        varName: 'desktopLoader'

Once the loader is generated, on your HTML page all you need is to load that single loader.js file, and then run the function, at which point your application will come into being. Any initialisation that needs to be done after loading can be done by running the function with a callback.

When it comes time for deployment, the same HTML will be all you need, the loader will just point to a concatenated and minified file instead and everything will work as before. Hope you find it useful.