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.
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.
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.
This pattern takes advantage of lexical scope and uses simple objects. For a more complete example of this pattern, take a look at MobilePages.
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.
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.
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.