top | item 3658157

How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io

110 points| benarent | 14 years ago |trigger.io | reply

38 comments

order
[+] voodoomagicman|14 years ago|reply
So how does the monthly payment work? Is it just to use the packaging tools, or will your apps already in the stores break if you stop your subscription?

I am a javascript developer, Trigger.io seems cool, and I wouldn't mind paying to make it easy to write in coffee instead of java and objective c, but I wouldn't want a splash screen and wouldn't want to be locked into a subscription.

[+] amirnathoo|14 years ago|reply
There's no 'off' switch for apps in the store or if users have already downloaded them.

But we ask for the subscription payment as long as you keep distributing the app if it is a paid app or if you want to put your own splash page in.

[+] studiomohawk|14 years ago|reply
Would you please explain a bit more on

// This fix was hard-won - // just doing .css(property, '') doesn't work! $old.get(0).style["margin-left"] = "" $old.get(0).style["-webkit-transform"] = ""

What wasn't working and how this lines solved the problem?

[+] Groxx|14 years ago|reply
I was wondering about that too. It seems like they're trying to remove an attribute... which is what $old.removeAttr('margin-left') is meant for.
[+] 0atman|14 years ago|reply
Hi, I wrote that line. I was doing my initial testing on Chrome and css() wasn't removing the attributes properly, which was causing problems with the animation.
[+] felixchan|14 years ago|reply
Great introduction to Backbone.js + trigger. I've used Backbone.js and trigger for one of my projects and it works really well. Didn't know about the CSS reset tip, I'm going to check that out.
[+] jacobolus|14 years ago|reply
I hope these guys aren’t trying to suggest that hard-coding the specific css-animation logic into the "show" function of a generic "page" view is generally good practice when building some complex app.

It's fine for a quick demo, but that’s definitely not where such logic belongs for any kind of maintainable project.

[+] twalling|14 years ago|reply
I've heard anecdotally that setting those css animations via JavaScript vs defining them in a stylesheet, then toggling classes in the code, yields slightly better performance. I have nothing to back that up but would be interested in hearing if other's have noticed the same thing.
[+] kwellman|14 years ago|reply
I did something similar to this when developing my backbone.js + phonegap + jquery android app (https://market.android.com/details?id=com.celebnoise).

Edit: I didn't post this to just promote my app. I noticed that there's no android market link on the blog post and thought some people might like to try out a backbone.js app without having to build it. I know it's not the same, but I do think it shows how responsive an html5 mobile app can be.

[+] Ecio78|14 years ago|reply
I'd like to test your app (just to see if it's more responsive than, for example, the linkedin app) but can you explain why it requires permission to access the phone status/identity? thanks!
[+] swanson|14 years ago|reply
Does Trigger handle the UI elements? Or is there another project to fill the gap? I don't want the bloat of jQuery Mobile.
[+] fiznool|14 years ago|reply
I've been musing the same thing for a little while now. I think Zepto, Backbone, RequireJS and HTML5 Mobile Boilerplate makes a solid foundation for a mobile app framework, much more lightweight than jQuery Mobile, which is IMO unusable for anything but the simplest of apps. All that is missing is a CSS library to take care of the UI elements and perhaps transitions too.

One idea I had was to take the CSS from Sencha /KendoUI / jQTouch and combine with the components above to create a 'Backbone Mobile' framework. I just haven't had the time yet to figure out if this would work.

[+] oscilloscope|14 years ago|reply
Actually the $ refers to Zepto, which is a lightweight jQuery replacement designed for mobile browsers.
[+] picklefish|14 years ago|reply
Does anyone know what the Trigger.io logo looks like on the splashscreen?
[+] Porter_423|14 years ago|reply
Hey I have checked out your backbone mobile app.Its really awesome.The thing that charms me more is that you have used backbone for for presenting responsive interface,Great!
[+] marknutter|14 years ago|reply
Where is this backbone mobile app?
[+] k33n|14 years ago|reply
Zepto doesn't support IE at all. I'm all for not spending much effort getting stuff to work in IE, but it seems like a bad idea to take it so far as to use Zepto.
[+] Sujan|14 years ago|reply
Conditional comment for IE, load jQuery instead of Zepto. Done.

(Yes, this really works. I use it in production.)

[+] mmorey|14 years ago|reply
If your target is Android and iOS why wouldn't you go with the fastest and slimmest library you can find?