How to proceed with Hybrid Mobile Application Idea? [ Ionic <AngularJS> + PhoneGap + loopback ]

We have monetizable Mobile Application Idea, and will be building our first mobile Hybrid application.

I looked into few things and figured out that to achieve my end-to-end goal I would need:

  1. Front End UI Framework : possible options: Ionic / AngularGap [but documentation seems parse].

  2. Then I think we need to wrap it up with PhoneGap for various platforms.

  3. Have a BackEnd framework - Loopback / Parse

I have yet to look into specific documentations, but it would be very helpful to have a experienced suggestion if the path is right.

What I don't know right now -

A. What I am thinking is right and how I should proceed.

B. Ionic is an UI framework and how do I connect it with Phonegap, like how to access native features. I think I have to use angular to call Phonegap apis ?

C. If I get the front end part set, how do I call backend apis like that of loopback? through REST calls? or there are other more efficient ways to do that?

Are there simpler ways to achieve this?

Please bare with me, I am quite new into this field. Thanks.

I am also working on mobile app for last few months. Tried lot many UI frameworks for hybrid app developmet, tried lot many server side and NOSQL DB technologies and below is my learning for UI frameworks from my experience.

  • Sencha Touch - Early entrant in hybrid app space, most known till date, best cross device support but steep learning curve as they have their own framework rules. Moreover app is bulky and run all JS to build HTML at run time which hits performance to some extent. Surely not a good idea to build whole app IN JS, if compared to HTML5.

  • jQueryMobile - Poor performance on mobile

  • BootStrap - Good UI but poor performance on mobile. It was not dev at first place with mobile in mind

  • PhoneJS - Neat / clean UI but not free for non-open-source apps.

  • Chocolate-chip UI - Light weight, native look and feel, but not well supported in cross device cases, new player and not much adoption. Surely the work done is good and hopefully it will improve in future as its backed by company.

  • Ionic Framework - Great UI framework in dev. As of now in alpha and I would not recommend or prod apps. Did some quick tests and found few issues on Android like slider does not work properly, you need to tweak something. I think, its developing fast (recently got investors funding too), so hopefully it will soon be a matured UI framework and best out of lot, but till then its just good for prototyping not prod apps.

  • LungoJS - Light-weight UI framework. Good transition, native look and feel, Good cross-phone support (Android + iPhone), Bad tab support (have UI issues on tab), Not actively maintained as developer is busy creating some new framework.

For my app, I picked up LungoJS and will eventually move to Ionic once it get matured and have decent adoption.

All of these can be used with PhoneGap / Cordova to access native device APIs and package it as mobile app.

Advice on jQuery vs Angular - Surely Angular is better option over jQuery, it makes performance (UI transitions) faster on mobile app when compared with jQuery implementation.

Hope it help.

Gaurav

http://www.linkedin.com/in/gauravdhiman

I am also trying to study Ionic framework to use with an Android app. Ionic seems to be a very good framework, but the lack of documentation is blocking me from advancing.

From what I have seen so far, it looks like Ionic+Angular already integrates Cordova. So you don't need to create a Cordova app anymore, just create an Ionic app and it has Cordova underneath it:

Did it using Ionic CLI, which uses ionic-angular-cordova-seed

About the backend, Angular provides $http and $resource for AJAX requests, take a look at the Angular documentation, I assume Ionic didn't change the way Angular makes these calls.

My conclusion: I think when Ionic becomes a more mature framework (which won't take long) with better documentation, it will be the best UI framework. From what I have seem, it looks very native with very good performance. And I still plan to keep going with it for having no better option, although it is taking me some time because there are things I still can't understand.

C. If I get the front end part set, how do I call backend apis like that of loopback? through REST calls? or there are other more efficient ways to do that?

Most backend-as-a-service solutions offers REST APIs these days. Both Parse and Loopback provide SDKs for javascript clients, wrapping the REST calls in a more friendly API.

LoopBack

If you decide to use LoopBack for your backend and AngularJS for your front-end, then you can use the loopback-angular project to automatically generate $resource services for your Models. It comes with a Grunt plugin too.

Check out loopback-example-access-control app, it is built on LoopBack + AngularJS + Ionic.

Parse

I am not very familiar with Parse, a quick search revealed these links:

Disclaimer: I am one of the LoopBack developers.

If you are looking for developing a hybrid app (phonegap + angularJS + backend), I would like to recommend Monaca. I've just recently discover it. It is very cool since it has phonegap inside its framework and its own backend. Moreover, it also has a UI framework called OnsenUI which is based on Topcoat and AngularJS.

It also provides native components to use in your hybrid apps. What is impressive about it, you don't even need to build and install your app to your device everytime during development. That's what I love the most about this.

I hope it helps since I think it is just like what you are asking for. I'm just a novice developer and I find it is very easy to use.