Build a native app with PhoneGap and Angular JS



The application

A basic app like so many others, for search of cinema showtimes. It can locate you, find nearby cinemas and save them in your favorites for faster searching.


A short description


· Six different views
· Seven different API endpoints
· Native application for Android
· Available here on play store
· Time spent < 10h
· Only available in France






The frameworks and librairies

PhoneGap

I know nothing about Java or Android SDK. I’m just a front-end developer who wants to play with mobile stuff. PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web technologies I know and love : HTML, CSS, and JavaScript.

Angular JS

As I said, I’m front-end developer, Angular JS is a framework I use daily. It is a tool with which I am going fast, and it’s perfect for this kind of small app.

ngRoute

The ngRoute Angular module provides routing and deeplinking services and directives for angular apps.

Moment JS

Moment JS is a library to parse, validate, manipulate, and display dates in JavaScript. Perfect to handle the days and hours of showtimes, movies duration and release date.

The easy part

The debugging

Because the application uses standard web technologies, 80% ( the remaining 20% are in the hard part ) of the debug can be made in the classical dev tool of your browser. You can simply inspect the DOM of your app, log values in the console and check API call in the network part.

The templating

Everything is going great with CSS, a responsive layout and Angular directives. I was UI designer before and I exported a lot of mockup for mobile developers. Each button, each icon have to be exported and managed. What is very fastidious. With PhoneGap all is CSS. You have many icons ? Use a web icon font to manage easily size, color, spaces or background color with CSS. Or use SVG images to avoid all these stuff of Retina screens.

The routing and the API calls

Everything is going very well on this side because Angular offers a lot of modules to handle this easily.

The hard part


The PhoneGap documentation

I think this is the worst. Many of the following problems could be avoided if the documentation was complete and well done. But this is not the case. I think I spent more time looking for answers on Google than to code. And when you find a thread about your problem, you have 10 different solutions, and of course none of them work. It’s sure, these solutions worked in the past, but this is not the case with the latest version you are using because phonegap changes quickly.

The debugging

In the remaining 20% of debugging, you have to test the PhoneGap plugins and events. Impossible to debug in your browser, you have to build the app and test it in an emulator or an Android device. I find it’s long, tedious and impractical. Plenty of other ways to debug your app are listed on this github page, but none really convinced me.

The compatibility

The compatibility of an application is influenced by too many factors :

  • The PhoneGap version you are using
  • The platform ( Android, iOS, … ) and its version
  • The device of the user
  • The CSS / JavaScript or HTML API used
  • The way you set the build

So, I am unable to say precisely what is compatible with my app.

The publication and the final build of the app

To build your app you can use the Cordova command line and the Android SDK or the PhoneGap service available on build.phonegap.com. I chose the second method that is the easiest but the least flexible. To have a .apk file ready for production, the app have to be signed. If you are not familiar with Java or the Android SDK, it can be complicated. A Useful documentation is here.

Conclusion


The compatibility

PhoneGap allow you build native applications for Android, iOS, and many other mobile platforms as if they were simple web apps. By reusing the same code for the multiple devices, you can cover more platforms with less code. You can even reuse some of the code on a desktop app. Less code to write also means less code to maintain.

The Performance

I don’t think performance is a big problem. There are clear cases where native development is unavoidable such as games or apps with a lot of calculation. But for a simple application like this, the user will not see the difference with a native application. I noticed one little detail with the scrolling lists that tend to blur when moving too fast. That’s it.
I don’t think to be the only one to think that the performance is correct when you see projects like Chrome OS by Google, Firefox OS by Mozilla or HTML5 apps in Windows 8. The web technologies have a bright future in the native applications.

PhoneGap & Angular JS

Although there are some warnings to make a PhoneGap app with AngularJS, it was pretty straightforward, and really empowering. PhoneGap API map pretty naturally to JavaScript, I was pleasantly surprised.