How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io(trigger.io)
trigger.io
How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io
http://trigger.io/cross-platform-application-development-blog/2012/03/02/can-html5-apps-be-as-fast-as-native-we-think-so/
39 comments
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.
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.
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.
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?
// 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?
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.
$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...
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.
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.
Oh, Thank you. how weird..
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.
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.
It's fine for a quick demo, but that’s definitely not where such logic belongs for any kind of maintainable project.
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.
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.
css transitions are now typically hardware accelerated, so yes, I'm guessing they would be more performant (especially on mobile).
I'm curious about how much worse using something like jQuery mobile performs.
jQuery mobile is ~25KB, zepto is ~20KB. However, the deal breaker for us was that jQuery mobile requires the full-fat (93KB) jQuery.
Our Experience With jQuery Mobile and Sencha Touch - http://blog.roveb.com/post/17259708005/our-experience-with-j...
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.
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.
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!
Does Trigger handle the UI elements? Or is there another project to fill the gap? I don't want the bloat of jQuery Mobile.
Actually the $ refers to Zepto, which is a lightweight jQuery replacement designed for mobile browsers.
I'm aware of that - but Zepto and Backbone don't have a UI layer
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
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
No, I'm pretty sure he's referring to the "theme" component of jQuery Mobile (http://jquerymobile.com/themeroller/) which isn't "taken care of" with this combo. That said, since it's just markup and CSS it shouldn't be too difficult to roll in.
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).
[deleted]
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.
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.
Does anyone know what the Trigger.io logo looks like on the splashscreen?
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!
Where is this backbone mobile app?
The code for the basic template app which we reference in the article is here:
https://github.com/trigger-corp/Forge-Bootstrap
I downloaded the code, opened index.html and all I get is a black page...
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.
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.
If your target is Android and iOS why wouldn't you go with the fastest and slimmest library you can find?
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.
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.
I think that may have been his point. There's a small group of people who insist that Microsoft's mobile devices will take off. Those will run IE. I know I've been pushed away from using certain libraries for that reason.
Conditional comment for IE, load jQuery instead of Zepto. Done.
(Yes, this really works. I use it in production.)
(Yes, this really works. I use it in production.)
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.