Jun 14, 2013

Checkvist mobile: notes on WIP

Some more notes along the way.

More on browser caches

Refreshing cached pages and templates is a PITA. But I've found a great Google Chrome's DevTools "Disable cache" option.

Also, when using remote debugging of Chrome on Android, one have to use Android's settings to reset browser caches, "reset cache" command from DevTools didn't work for me.

Routing

Adding a login page inevitably lead to the need to navigate through the app, so I need to add routing support.

I've tried can.route from CanJS - but it doesn't support HTML5 history API yet. So I'm going to use this simple routing library instead.

Given that I have a single-page app, with different URLs which actually point to the same index.html file, I have to patch NGinx configuration to redirect all pages to /index.html internally. To do this, I used information from this post.

Login

For actual login, I had to add CORS support to the Checkvist site. After that, AJAX requests to Checkvist API work nicely.

Internationalization

At some point, I understood that I want to have I18N in the app. So I went with a very simple custom solution: create a separate JSON file with mapping between messages and message codes + simple utility function which does the actual mapping in EJS templates. No need for external library :)

Testing

Time to add tests. Because it is a right thing, and right now I want to make sure that such thing as token expiration is handled correctly.

So, I added QUnit support for Javascript testing, JQuery.mockajax for mocking AJAX requests, added service messages extension for TeamCity continuous integration.

Automated testing task in the Rakefile, to run tests for every test_*.html file under "tests" directory:

    task :test do
      Dir.foreach("test") do |name|
        if name =~ /test_.*.html$/
          system("cd test && phantomjs run.qunit.js ./#{name}")
        end
      end
    end

Feel on a safe side.

AJAX loading of view templates

To allow AJAX loading of local files (in tests), start Chrome on Mac with this command:

open -a "Google Chrome" --args --allow-file-access-from-files

Loading lists from the server

Using CanJS can.Model to implement lists model for the Checkvist. The model is cached locally, into IndexedDB and updated from the server. To interact with IndexedDB so far I use DB.js + IndexedDBShim to emulate IndexedDB over WebSQL when native support is not available.

Post a Comment