

How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io - benarent
http://trigger.io/cross-platform-application-development-blog/2012/03/02/can-html5-apps-be-as-fast-as-native-we-think-so/

======
voodoomagicman
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
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.

~~~
kalid
I'd suggest making this more clear on your pricing page -- I was initially
interested, but confused about what a subscription meant to existing apps.

------
studiomohawk
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
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
$old.removeAttr("margin-left") doesn't work for some reason (in Chrome), hence
I went for the get(0) way. I'd be interested to know why it doesn't work...

~~~
Groxx
Oh, hah, sorry - that's manipulating styles. Though I'm not sure why
.css('attr', '') didn't work. I've been diving into the depths of jQuery more
lately though, and every time I do I find new and... _interesting_ things...
my suggestion is to read the source. There are some wonky things in there
that'll explain a lot of weird, edge-casey behavior.

------
felixchan
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
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
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.

~~~
jacobolus
To clarify: I don’t have a problem with triggering animations from JS
directly. I just have a problem with hard-coding several blobs of unexplained
magic css directly into an unrelated function, instead of building a general-
purpose animation framework, and calling it by some clear and readable API. As
soon as you want to tweak the effect, in this version, you’re in for a pile of
trouble. Or if you want to use the same effect on a different view, you’re
left copy/pasting. It’s the kind of unplanned code placement that works okay
for a demo but quickly falls apart when requirements change or the project
grows.

------
marknutter
I'm curious about how much worse using something like jQuery mobile performs.

~~~
nreece
Our Experience With jQuery Mobile and Sencha Touch -
[http://blog.roveb.com/post/17259708005/our-experience-
with-j...](http://blog.roveb.com/post/17259708005/our-experience-with-jquery-
mobile-and-sencha-touch)

------
kwellman
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
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
Does Trigger handle the UI elements? Or is there another project to fill the
gap? I don't want the bloat of jQuery Mobile.

~~~
oscilloscope
Actually the $ refers to Zepto, which is a lightweight jQuery replacement
designed for mobile browsers.

~~~
swanson
I'm aware of that - but Zepto and Backbone don't have a UI layer

~~~
politician
I'm not really sure what you mean by that - Zepto is a DOM editor and Backbone
provides an MVC structure which represents the logical state of the UI.
Higher-level organization in a Backbone app is accomplished by view
composition.

If, however, you are referring to the weak link between Zepto-managed DOM and
Backbone Views via hand-rolled render functions, then check out outback.js, a
declarative data binding layer for Backbone in the same spirit as Knockout.js
- well, more than spirit, the binding extensibility layer uses roughly the
same API and much of the same documentation.

<https://github.com/politician/outback>

~~~
swanson
Sorry - I wasn't being clear. I am looking for some kind of CSS framework that
will do Android/iOS styles for buttons, tabs, transitions, etc. You get this
kind of stuff with jQuery Mobile - but I didn't see how it was done with the
Backbone/Zepto stack (aside from the kind of hacky animations in the demo).

------
picklefish
Does anyone know what the Trigger.io logo looks like on the splashscreen?

------
Porter_423
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
Where is this backbone mobile app?

~~~
amirnathoo
The code for the basic template app which we reference in the article is here:
<https://github.com/trigger-corp/Forge-Bootstrap>

~~~
speg
I downloaded the code, opened index.html and all I get is a black page...

~~~
amirnathoo
The code is written to use some trigger.io APIs so you'd need to build the app
per the instructions in the blog post.

------
k33n
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.

~~~
mmorey
If your target is Android and iOS why wouldn't you go with the fastest and
slimmest library you can find?

~~~
blntechie
As a Windows phone user myself, I will be happy if you can support IE. I am
not asking you to make decisions based on IE support but if you can support IE
with only little tweaks to your iPhone/Andoid codebase, I would recommend you
to do that. If it works in desktop IE9 it will work in mobile IE9.

~~~
gsmaverick
I've had some experience with trying to make things that work on iOS/Android
work on WP7 and it's nearly impossible. For starters mobile IE does not
implement tap/touch handlers; which is a dealbreaker for mobile web apps.

