Powered by Blogger.

Monday, January 5, 2015

Tag: , , , , , ,

Dev Environment for Hybrid Apps

[UPDATE: this blog was moved to a new one]


Just to let you know, I am a .Net developer certified for Store Apps development (now call Universal Apps). It means that most of the time I spent on creating mobile applications was native development. It also implies that I feel very comfortable on my Windows 8 machine with my beloved Visual Studio!

Hybrid Apps Development - Ionic + AngularJS

So, now called Hybrid Apps are supposed to run cross-platform (mostly iOS and Android, and sometimes on other environments like Windows Phone, Windows 8, Firefox, Blackberry ... )

Switching from native Store Apps to Hybrid meant I had to say goodbye to C# and XAML and adopt HTML and Javascript. 

I started to look for the right things to use. A quick search at Google will probably lead you to jQuery Mobile, Bootstrap, Kendo UI, Onsen UI... and a lot more. But, I have to say, that after giving a try to almost all of them, Ionic Framework was my winner.

Why? Several reasons: 
  • It is very well integrated with AngularJS and you can forget about some issues you will find with jQuery Mobile for instance. 
  • The look and feel is great just out of the box. Now, with update 14 (the last beta) platform specific magic is about to happen!
  • Documentation is excellent. Very easy to get started and familiar with.
  • Support is great.
  • They keep going together with AngularJS evolution. But that is not all, as they are creating other products around like the Ionic Creator to make Ionic development easier.

Hybrid Apps Dev Environment

Cool, having decided what technologies to use is one step, but now, you have to decide your setup for your dev environment. If you are like me, a Microsoft guy, you are going to have a hard time! (not really now).

Your first option will be Visual Studio (of course!). Now, with the Apache Cordova tools for Visual Studio they've made it easier. You can code, configure your plugins, debug and run (either using the emulator or a real device - not that straight forward when talking about iOS) from your Visual Studio.

But, what if, like me, you don't have the same enviroment wherever you go? Visual Studio is only installed on my work laptop ( I have no personal computer at home beside my wife's... I know, I am strange). As I do not want to polute her machine, I have a second option: Code Anywhere! I can just log in to my account and keep writing code on my wife's laptop's browser. Or even better, I can just turn on my iPad (yes, I said I am a MS guy but have an iPad, but I have my reasons for that - testing!), start the Code Anywhere app and keep going (there is a drawback here... the Code Anywhere app does not fully support keyboard: arrows don't work. They promised to fix it in the November 2014 release, but there was no release yet)

You might be thinking about how to move code back and forth between both. There are two options here: you can copy paste (just kidding, forget about it), or use a Git repository (this is specially helpful for making builds, but we will talk about it in the next section).

Testing your Apps

As I said before, you can run the emulator or the App on a device directly from Visual Studio. This is only "true" for Android and Windows devices. Ok, it is also true for iOS, but Visual Studio alone won't do the magic. Now you need a Mac machine listening, and, I personally do not have it (yet).

Now you probably understand why I have an iPad. The other alternative to test it as a native App beside using Visual Studio is using PhoneGap Build. Still you will need your Apple Developer Certificate when building for iOS devices.

If you are not using plugins at all, you can run it directly from CodeAnywhere as well. If you are in the browser, a new tab will open with your App. If you are using the iPad, Safari will be launch and you will see your App there.


Developing Hybrid Apps is funny and possible switching from different environments. It does not matter where you are and what device you are on. Technologies like Ionic and Angular make it easy to deliver a high quality app with a beautiful modern look and feel. All the development process will be almost free (as Visual Studio has released its community version now). But when it comes to test it on a real iOS device, you will need either a Mac or an active iOS Developer account. 

Feel free to leave your comments and share your experience or your setup. I am sure you will have some hints to improve my current scenario. 

Hope it helps!

About Anonymous

Hi, this is Nereo. I've spent my first professional years as .Net Software Engineer, and then moved more into Agile Methodologies. Anyway, I keep playing with all the new technologies that appear, and specially love Hybrid Apps!

1 comentarios:

Note: Only a member of this blog may post a comment.