Developing a hybrid phone app with Monaca and Phonegap

Developing a hybrid phone app with Monaca and Phonegap

Background

What was the problem?

We needed a phone app for our commercial application. Our web stack is built on ASP.net MVC and we use C# on the backend.

Xamarin - Not right for us

Naturally there has been alot of buzz around Xamarin, so I gave it a spin, I have to say I was a little disappointed.
Perhaps I didn't stick with it long enough but the 'out of the box' experience with Xamarin was poor, I could find no template projects, no example code, it was a blank canvas. I persisted but it felt as though even though I know C#, I was still learning a new way of developing.

I think theres alot to be said about giving developers a leg-up onto the ladder of success when starting a new framework/technology, perhaps if I felt like I was succeeding I would have stuck with it, after a few days of developing I was annoyed with myself for not having more to show.

If you have a strong web dev team, maybe hybrid is best?

The constant nagging feeling that our skills in HTML and .js could get us to our goal both quicker and with better quality was always there. In the end I gave up with Xamarin, thats not saying its a bad product, I just think that you need to think carefully about the skills of your team first. We have a strong web development team, so we looked for the ideal hybrid app development platform.

What is Monaca?

I came across Monaca after a bit of searching, and haven't looked back since.
I tried Telerik Icenium but didn't like the online IDE. I tried to build an app in VS2013, but the tooling isn't quite there yet IMO.

Monaca is an online HTML5 + Phonegap IDE, it enables you to build cross platform (iOS, Andrioid, Windows Phone etc..) applications in the browser. They have a 'cloud build' service that enables you to compile your appilications for each platform.

I feel like I am fairly well connected to the development community, and that I have a decent understanding of technologies new and old, its very rare that an excellent software tool comes completely out of left-field, generally I will have heard about it, even if I haven't used it... however Monaca is the exception to this rule. It seems to be popular in Japan, and they say they have 45,000 users.

Why is Monaca so great?

  • You can build apps for free

We built 80% of the app on the free tier.

There are limitations, i.e. if you want a custom phonegap plugin, you'll have to get a paided-for licence. You can view the pricing page and see that their are paid for versions. Compared to Xamarin and Icenium this product is far less expensive.

  • You can get something working really quickly

There are lots of working sample apps that you can use, debug and view the code of in their sample apps gallery this is such a timesaver and enables you to look through the code of other apps to see how they got things working.
Also, when you create a new project, you can select one of the sample projects as the template. This is exactly what we did, we chose the sliding menu template which, for a data presentation app is perfect.

  • The online IDE is fantastic
Monaca IDE

It gives you an awesome interactive preview window, you can combine this with a HTML debug tool like FireBug to tweak and change your HTML/js.

If you are comfortable with web-dev the experience is pretty seemless. There is a live reload of the preview window, which can be docked to one window or seperated into a window of its own.

  • There is a free debugger that works on your device

Think 'BrowserLink' for the mobile app.

You can download the Monaca debugger to any device, log in and see your app working on your device.

Think about that.

This is the holy grail of app development: Seeing changes instantly on a device.

Monaca IDE

I save my changes in the online IDE, the debugger app on my device reloads and sees the changes instantly, truely awesome.

its like apple test flight with zero hassle, an no need to sign up to any developer programmes.

  • It works seemlessly with OnsenUI

Technically this has nothing to do with Monaca, but I'm giving props for introducing us to OnsenUI.
Onsen allows you to stop worrying about making complicated elements of your UI look great across all devices.
Essentially it allows you to create UI's that scale across devices if you use their controls. Their controls are simply bespoke HTML tags.
We don't use it everywhere, but for elements of a page that can be tricky, like menus and lists of items Onsen does all of the heavy lifting, and its great.

  • Getting the App into the App Stores is simple and easy

One of my main concerns was how straight-forward it would be to publish the applications we built into the app store. Although we havent launched yet, we have stepped through the process.
I needn't have worried, you can submit your app via the online IDE in a few steps. The documentation is great and guides you all the way through the process.

In Summary

Monaca makes hybrid app development really simple, and thats what I liked about it. There were no complicated steps involved in getting set up, the tools provided like the IDE and debugger are exactly the sort of tools you need when developing an app.

Certainl worth checking out if you are looking to build a mobile app.