AngularJS powered mobile boilerplate app that also does offline out of the box | Hacker News Reader

AngularJS powered mobile boilerplate app that also does offline out of the box

github.com

68 pointsjanjongboom19 comments

So I'm not a mobile dev but looking into it.

Can someone explain the meaning of this sentence? "It uses the HTML/CSS that all the system apps use as well, which means they're rock solid, and will have a native look 'nd feel". Wot?

If there was "some HTML/CSS" that'd let me avoid Sencha or jQmobile or Dojo or whatever, that'd be pretty neat. Now I love Ratchet but it seems "yeah this is just for prototyping" and so there's no real push behind it to make it the mobile-UI lib par excellence it could otherwise easily become.

So anyway, "the HTML/CSS that all the system apps use as well" --- what does this mean exactly?

The Firefox UI library (presented here at http://buildingfirefoxos.com) is part of Firefox OS. It contains HTML/CSS elements that are used to build up the Firefox OS core system. These elements are all included. However, the 'native look nd feel' applies to Firefox OS, not to other platforms. That doesn't mean that it won't work there either of course, it'll just look Firefox OS'y :-)

OT: Currently we are only utilising Sencha because of it's handling for native touch events on iPad/iPhone. You wouldn't happen to have come across this hurdled and cleared it in your journey, would you? That is a refactor I genuinely relish the chance to cook.

What do you mean with 'native touch events'? The touchmove events should give you all touches etc. also on iOS.

FYI: This app comes with a gesture detector (source: https://github.com/mozilla-b2g/gaia/blob/master/shared/js/ge...) as well that can handle swipes, pans, multi-finger transforms.

Sorry, to clarify I want a solution so that we do not have to bake our own - Sencha abstracts it all away and handles everything the same across all devices (so I'm led to believe by the dev that chose and implemented it - I have very little experience with it). By 'native touch events' I mean very much like the link you've provided (which is a very promising resource, so thankyou for that), in that it offers a 'doubletap', 'swipe', and 'pinch' event for instance. (So more precisely _emulating_ native touch events?).

I've found a good list of libraries in my research [1] but I was wondering if anyone had specific experience that could tip the balance in favour of one lib above Sencha (which to my eyes seems bloated and awkwardly constructed).

[1: https://github.com/bebraw/jswiki/wiki/Touch]

If you check out the next version of angular (currently 1.1.5) it includes an enhanced ngClick directive in a mobile module that handles click / touch directly to overcome the 300ms delay, etc.

Initiate it with app.module('myapp', ['ngMobile'], .. )

I'll give this one a look, thank you.

I was ready to say that angularjs plus mobile does not work based on our experience but at least your demo works well, though I think it has few bindings. I'll try it later in android browser on froyo and see if it can handle that. We had kinda written off angularjs on mobile but have to say this looks good.

Thanks! The entire javascript package (r.js + angular + mobile-nav + actual app) is 100K minified and is cached by appcache, so it's pretty darn fast. I've tested on iOS as well and it runs pretty nice, let me know about experiences with Android.

Does not work because of the digest cycle consuming too much CPU for mobile hardware, or some conflict with Froyo, or what? This is kind of an alarming statement.

The mobile app I've been working on for a while called Kona (http://kona.com) is an angular.js app. It's on the Google Play store and iOS App Store.

Kona looks great. Our main app (voltageCRM.com) is built in Angular I think we're going to go that route when we go mobile. Any tips/what back end are you running?

We use a true hybrid approach for the mobile app, meaning in addition to using phonegap we also use some native UI elements; namely the top and bottom nav bars. It does add some overhead because you have to write that stuff in java/objective-c but it helps the app feel much closer to a native app than pure HTML5 does at this point. I would check out http://trigger.io if you're not interested in writing any native code and don't have any special requirements for your UI design.

Our backend is a ruby on rails app.

I want grunt :). That would make this usable as yo seed and much more modular. Where are tests?

The only thing we'd use grunt for in this case would be to do the requirejs step; which is covered in a simple 3 line build script. It would make sense if adding stuff like coffee or LESS; but I want to keep it clean, simple and stupid.

When you talk about 'mobile app', are you referring to an alternative mobile site the user sees in the browser or packaging it up in something like PhoneGap (or putting it in a native WebView)?

In this case: mobile website. This 'app' runs in the browser and all strategies used here don't rely on anything like PhoneGap. If you need access to certain PhoneGap features you can of course package the app up but it's not required at all.

Ah ok, makes sense. Good stuff!

mobile or not, its nice to see a good example of require + angular, thanks a lot

Reply on news.ycombinator.com