by Jason Buffin

Built out of the web


Tackk uses the latest in web technologies. When we set out to build our app for Android and iOS, we wanted to leverage those same web technologies. We wanted to do something that we haven't seen before; something truly unique. We set ambitious goals for ourselves. We said that the viewing experience on mobile should be just as beautiful as what you are used to from tackk.com. We said that you should have a simple, clean creation experience on the go. All of this brought us to PhoneGap.

PhoneGap allows developers to make an app with HTML, CSS and JavaScript. It allows us to give our users a consistant experience across devices. PhoneGap promises write once, run everywhere and it largely delivers on that promise. It isn't without its drawbacks.

Many complain about performance; that a hybrid app can't have the same as native performance. We believed that we had the team to build an hybrid app that could rival native performance. But in order to do that, we had to start from square one.

No Frameworks


From the outset, we said no to frameworks. We were going to write everything from scratch and only pull in libraries that were the best in class. We limited the use of jQuery, said "no" to Angular, jQuery Mobile, Ember. Instead, we opted to write our own page switching library, MobilePages (every page in the app is a MobilePage), a Back library (a MobilePages plugin), libraries for lazy-loading and pull-to-refresh. We required the use of 'use strict' everywhere. For external libraries, we used Knockout for data-binding, Medium.js for the editor, FastClick to help with touch events, Pusher for Tackk Stream, and a couple of jQuery plugins. The app is single-page and event-driven. All of this was to squeeze out the best performing app that we could make. It's not perfect but we think we've made a great start at the future of hybrid mobile apps.

A simple JavaScript pattern for libraries


I use a somewhat different approach to writing JavaScript libraries. Overly complex JavaScript is just that, overly complex. JavaScript is not an OO language, so why treat it like one? JavaScript has a very elegant way to directly create objects. Each library is wrapped in a IIFE with various functions that the particular library needs. Then, at the end, we expose whatever API is needed. It would look something like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
(function MyLibrary(window) {
var privateVar;
function init() {
// do whatever is necessary here
privateVar = 'initial state';
}
function publicMethod() {
// this function is exposed
}
function privateMethod() {
// this function is protected in the IIFE
}
window.MyLibrary = {
init : init,
publicMethod : publicMethod
};
})(window);
view raw gistfile1.js hosted with ❤ by GitHub

This pattern takes advantage of lexical scope and uses simple objects. For a more complete example of this pattern, take a look at MobilePages.

CSS Animations


Most animations in the app use CSS transformations. The simple reason for this is that, in our tests, they performed better. They feel native and look great. Kudos to @dan for working hard to make our CSS as clean as possible. We use a handful of SVGs throughout the app and they work and look so much better than the typical spinning GIFs.

PGProxy


Our app runs entirely in the browser with no extensions, or tricks. We use Vagrant to create a VM to get around CORS issues and can run the app in the browser. This gives us a great tool for development with a hit-refresh workflow. This feat is accomplished with PGProxy. All calls to the PhoneGap API are made through PGProxy which returns the PG plugin if we are running on a device or a mock if we are running in the browser.

1 2 3 4 5 6 7 8 9 10 11 12 13 14
window.PGProxy = {
navigator : {
camera : {
getPicture : function(a, b, c) {
if(navigator.camera) {
return navigator.camera.getPicture(a, b, c);
} else {
console.log('navigator.camera.getPicture');
a('imageData');
}
}
}
}
};
view raw gistfile1.js hosted with ❤ by GitHub

That's an example of what a proxied PhoneGap API might look like. We built out every API we used in the entire app and put it in one place.

"Mobile creation can't be done"


I beg to differ. We did it, and it's awesome. I think building our app out of the web was exactly the right fit and embodies what Tackk is, a simple way to create beautiful pages on the web. Give it a try and I'd love to hear what you have to say.