My 2 months with Ionic/Cordova

I have been developing experimenting with cross platform mobile development these 2 months. I have had some experience with Xamarin, no production applications yet so most of this are just based on my nascent experience with Xamarin. My opinions may change at a later date so this is just a snapshot in time on why I decided to experiment elsewhere.

Xamarin is a good tool but I have some issues with it. Namely:

Where is the instant feedback, REPL like development?

This is my biggest gripe. Every time I need to do a markup change, code change or any change for that matter, I need to recompile. A time waster and gets in the way of turn around time.

When I compare Xamarin to WebView based cross-platform solutions, it is frustrating. Those frameworks, allow instant feedback like when you are developing PHP, Python or AngularJS based applications. Just refresh and you are good to go. No waiting for the compiler to recompile everything just because you changed a font color. Xamarin however, requires you to recompile 99% of the time.

It is not that waiting to compile is bad or frameworks that need compiling. I personally am a big fan of Microsoft ASP.NET MVC and Web.API. However, even MVC and ASP.NET 5 are now embracing the instant feedback model, especially the latter. Waiting around to compile for something as trivial as a style change really gets on my nerve and makes things less conducive when development.

Where is the write once deploy everywhere?

Once of the selling points of Xamarin is the cross platform capability....on the business logic end of things. This means that I can use the model-view-presenter pattern to centralize 'business logic'. The UI layers will be native. One UI project per-platform.

In some cases where I need to do REALLY FANCY UI or close-to-native customization, this may make sense. Regarding the former, lets face it, most business users want things simple, clean and usable, rarely do we need to do flipboard esque UI. Regarding the latter, I use the close-to-native because in the end of the day Xamarin is a middle layer and while it purportedly allows close to native level customization, it is still close and not true native. Again, do we need this for most main stream use cases? In my humble opinion, no. If we need to go really crazy, we will probably spend more time finessing Xamarin than doing actual productive work.

I know there is Xamarin.Forms but based on what I have seen and also discussions with other Xamarin developers, it caters towards the lowest common denominator across platforms in terms of UX. A lot of the native customization or fancy UI that Xamarin supports, aren't available. Never mind that Xamarin.Forms is Silverlight redux (a customized version of WPF) with some mobile additions. Compared to many web view solutions which leverage HTML5 + JS technologies, there are very little resources that can be used. Note that this is like Silverlight, customized version of WPF which means that there is a chance that there are certain WPF things that may not work with Xamarin.Forms. Never-mind that there are very few resources on Xamarin.Forms as it is still very new, plus, at the time of this writing, the designer screen does not work that well and the lack of instant feedback from your code/markup/style changes makes this painful to say the least.

Whats the alternative then?

Well, WebView based solutions have been gaining traction in recent times. Why is it getting more and more popular?

  1. It leverages HTML5 + JS/TypeScript, there are more resources on this than you can shake a stick at.
  2. Developers who have experience which web technologies can use their skills already acquired. Minimal learning curve in the UX which is where most of the action is in a mobile app for most mainstream use cases.
  3. It is easier to scale a team, most developers already know HTML5 + JS, that, coupled with the vast resources on web based technologies makes this easier to get developers. It also helps that every fresh graduate and their dog knows HTML5 + JS as it is required learning in college as well.
  4. It has the backing of big boys like Adobe, Sencha, Microsoft, Telerik and the list goes on.
  5. It has been used by high profile organizations such as the BBC, IGN, etc.

Alright, which one to use?

There are many options when it comes to WebView based technologies. There is Apache Cordova, Facebook React Native, Appcelerator Titanium, etc.

I selected Apache Cordova which is the open source version of Adobe PhoneGap. I was a Flex and ColdFusion developer back in the day, I have good experience with their tools so I chose Apache Cordova.

I initially tried it with jQuery Mobile and Boot Strap, results were interesting to say the least. It was too bloated, especially with bootstrap which was a tad bloated since it was doing too much. It also felt too much like a mobile web site and not a mobile application. I tried finessing bootstrap but it became tedious. I decided to give Ionic a shot. Ionic is basically Apache Cordova with AngularJS goodness baked in.

Ionic was really godsend, not only did it have AngularJS baked in, it also is a full bown UI/UX framework. Such as but not limited to:

  1. Very usable starter projects.
    1. However, Apache Cordova now also has some cool looking ones @ Cordova Multiplatform Template.
  2. Pull to refresh gesture.
  3. Infinite scroll.
  4. Professional looking icons.
  5. Popover dialogs.
  6. Cool looking modal window.
  7. Cool looking popups.
  8. Hardware button scripting.
  9. Platform specific CSS.
  10. Code driven styling for dirrentt plaaatforms via AngularJS.
  11. Platform Specifc UX.
    1. This is basically what Xamarin does but not as 'native'. It basically allows you to have platform specifc UX but sharing he same JS logic blocks.
  12. Ionic Serve
    1. This will launch your Chrome browser and with the live change functionality, you can rapidly develop your application as it will refresh your JS, CSS and HTML files every-time you make a change. REPL esque instant feedback for the win.

Well, that is just my shortlist. If you want to know more, hear it from the team themselves here. However, the section I find useful is the UI Components section. I constantly refer to that and learn new things as time goes on.

Granted you caan download plugins, scripts, CSS and all that via Cordova's plugin system, Bower, NPM and all that. However, why bother when you get everything in one place, a turnkey soluttion as they say. With such a strong base, you can always download he additionaal plugins to augment Ionic rather than do all that boiler plate stuff yourself.

Best of all, both Apache Cordova and Ionic are free an open souce :)

I can now leverage my web development skills and server side skills with little overhead in terms of learning curve. A website as a native app, why the hell not?

As you can tell, I have lots of good to say about Ionic, however, there are some downsides to this. However, in my time with Ionic, I found solutions to most of the issues I faced. I will also share them here.

The following sections assume:

  1. Apache Cordova and Ionic are installed.
  2. You will be dealing mainly with Android and iOS.

Ionic does not play nice with phones with highly a customized ROM (shorthand for highly customized Android)

From experience, the biggest offender here would be XiaoMi's MiUI and some of Samsung's older devices. Apple's iOS is fine from my experience as it is only one hardware spec, unlike Android.

Ionic uses lots of Angular and like desktop browsers, not all phone WebViews are created equal. The issue is that Angular is quite a heavy framework with lots of stuff going on, some WebViews would rather you use jQuery, DOM and plain HTML5. However, the good folks at the Crosswalk Project have come up with a rather nifty solution. Currently Apache Cordova/Ionic applications are deployed to your phone with just your code and plugins. You hope and pray that they work on the Android device you are interested in. XiaoMi's MiUI however, won't budge, no matter how much I wished it did. What Crosswalk Project does is that it will embed its own WebView engine together with your application, thereby simplifying the task of standardizing your UX across all devices, especially with Android where there are more flavors than you can shake a stick at. Furthermore, the WebView that is being embedded in the application is based on Chromium. A very stable platform.

The one caveat to this is that your files will be quite big. Say your application is 3MB in size, the embedded WebView engine is 20MB and so now your application is 23MB in size. Not really a deal breaker but it is something to note.

You can add this wonderful plugin to your Ionic application via the following command line command:

cordova plugin add cordova-plugin-crosswalk-webview

or

ionic plugin add cordova-plugin-crosswalk-webview

You can also do this via Visual Studio's Tools for Apache Cordova @ TACO as seen below:

Adding Crosswalk to Visual Studio's Tools for Apache Cordova - Step 1

Adding Crosswalk to Visual Studio's Tools for Apache Cordova - Step 2

It has worked very well for me so far, however there are still some exceptions to this. More on that later.

The pull to refresh @ ion-refresher directive is causing my scroll to lock up !!

This is the later I was talking about from the previous section. I found that on XiaoMi RedMi which uses MiUI 7 has certain issues that can't even be solved via the Crosswalk Project. When I added the directive that enables the pull to refresh gesture via the ion-refresher directive, the application can no longer scroll. One might say that is a bad thing, especially considering that screen was supposed to be a feed. When you can't scroll in a feed, it is quite a rubbish screen as you can imagine.

I have found a solution, at least for my scenario. What I was doing was the following:

<ion-content class="padding"
             overflow-scroll="true"
             has-bouncing="true"
             scroll="true" 
             delegate-handle="mainScroll">
    <ion-refresher pulling-text="Pull to refresh..."
                   on-refresh="refresh()" 
                   spinner="none">
    <ion-list>
        <ion-item ng-repeat="item in items track by $index"
                      class="item-remove-animate item-icon-right"
                      type="item-text-wrap"
                      href="#/app/items/{{  item.id  }}">

Care to guess what here caused it?

If you guessed it was the ngRepeat directive, you got a cookie.

Yes, the ngRepeat directive, like in desktop browser AngularJS can caused issues. In this case the solution was rather straight forward:

<ion-content class="padding"
             overflow-scroll="true"
             has-bouncing="true"
             scroll="true" 
             delegate-handle="mainScroll">
    <ion-refresher pulling-text="Pull to refresh..."
                   on-refresh="refresh()" 
                   spinner="none">
    <ion-list>
        <ion-item collection-repeat="item in items track by $index"
                  class="item-remove-animate item-icon-right"
                  item-width="95%"
                  item-height="100px"
                  type="item-text-wrap"
                  href="#/app/items/{{  item.id  }}">

Yes folks, Ionic actually has an optimized version of ngRepeat. Only thing extra I needed to do is specify width and size of the element. When I used this, I not only got the pull to refresh to work, the screen actually sped-up and is more responsive. I coupled that with the overflow-scroll="true" attribute on the ion-content directive and it was buttery smooth. In case you are wondering what does overflow-scroll="true" do, it basically enables native scrolling. Ionic primarily uses its own framework for scrolling as previous engines WebView engines on both iOS and Android(s) were less than serviceable. However, with the advent of Android 4.1 and above, the boffins at Google has seen fit to add native scrolling events which is not only now serviceable but VERY performant. The iOS end was more or less similar where iOS 7 and below did not support native scrolling events, however, with iOS 8, it is now fully supported. If you need to support iOS 7 however, I would suggest you use code to turn native scrolling on or off via code via the platform classes or, as I would do, via the Ionic platform utilities.

Visual Studio 2015 Tools for Apache Cordova are spewing weird errors that are preventing me from debugging my app via emulators.

The error message most likely causing this is:

2>  Command finished with error code 0: cmd /s /c "C:\MyApp\MyApp\platforms\android\cordova\run.bat --debug --nobuild --buildConfig=C:\MyApp\MyApp\build.json --target=169.254.138.177:5555"
2>  Executing "after_run"  hook for all plugins.
2>  
2>The format of cordova.raw.* methods "options" argument was changed in 5.4.0. "options.options" property now should be an object instead of an array of plain strings. Though the old format is still supported, consider updating your cordova.raw.* method calls to use new argument format.

I personally no longer use this much but if you MUST use Visual Studio 2015, the short answer to why you are getting this error is most likely due to the fact you are using a version of Apache Cordova that is too new.

The highest version that I know of that works well with Visual Sttudio 2015's Tools for Apache Cordova (TACO) is version 5.3.3.

If you do not know how to set this up, well here you go:

Downgrading Visual Studio's Tools for Apache Cordova to Cordova CLI 5.3.3 - Step 1

Downgrading Visual Studio's Tools for Apache Cordova to Cordova CLI 5.3.3 - Step 2

I however think using a combination of your code editor of choice, Chrome and emulator is a much better tool chain. It is what most non-Windows guys use and from experience, it is typically smoother than Visual Studio 2015 at the time of this writing. I will write more about this at a later post.

Can I use Microsoft's Visual Studio Emulator for Android via command line and no Visual Studio?

First of all, I would like to commend Microsoft on these Android Emulators. They are godsend as they are faster and more responsive than Google's own Android emulators. The Microsoft's Visual Studio Emulator for Android is really a great product.

Second of all, I stopped using Visual Studio 2015 Tools for Apache Cordova because I just feel that the gains I get from it are not that much. Granted there are lots of UI things that make things easier but there are also a lot of things that the UI can't do like setting custom properties on your config.xml. You will need to use the Visual Studio XML editor for that.

I also find that Visual Studio 2015 Tools for Apache Cordova tends to crash quite often and swallow the error, especially while debugging.

In the end I find myself just using Visual Studio 2015 Tools for Apache Cordova simply for debugging along with the Visual Studio Emulator for Android. One thing I did gain from using this waas a very neat integration with this excellent emulator.

However, as time went on, I was looking for a lighter weight development tool chain. I am more than happy to live without IntelliSense as most of my JavaScript work is done via Sublime Text 3 although I have been trying out Adobe Brackets and Visual Studio Code (basically Microsoft's take on something like Brackets). Code editors are much faster and lighter than full blown IDEs and when something is as dynamic as JavaScript, IntelliSense does not help you all that much anyway.

I found the solution to this and in hindsight, it was painfully obvious. All I needed to do was use Apache Cordova's emulate utility and connect to the IP address of the Visual Studio Android Emulator.

How can we get the IP you may ask, simples as a meerkat would say:

Getting the Emulator's IP Address - Step 1

Getting the Emulator's IP Address - Step 2

NOTE: Remember to navigate your command prompt to your project's root directory

Getting the Emulator's IP Address - Step 3

After you have done all the above, you can now debug your Apache Cordova's/Ionic as if it were you run of the mill web application in Chrome's excellent developer tools.

That is all I want to share for now on my 2 months with the aforementioned tool kits. I will write more specific blog posts later so they are more concise and easier to read.

Thanks.