Friday, May 19, 2017

Xamarin Forms Hybrid Apps

Why Hybrid Apps?



This has always been a common approach if you do Cordova or PhoneGap and it should do a great job for simple apps that doesn't rely too much platform specific feature, The question is why should we do it in Xamarin? Or what scenario would persuade us to use hybrid approach?


My early days with Xamarin development, That time where there were no reliable Charting library available yet, My team were force to use other alternative and so we decided to use webview with the help of Xlab's HybridWebview library and highcharts javascript library we were able to satisfy our customers need.


Be aware that Xlabs project is no longer maintained. It may NOT work with newer versions of Xamarin.Forms. Though it has done a great job i am not recommending it for use because its somewhat bloated, things that we are not gonna need. Fortunately for us i have found this lightweight HybridWebview library thanks to Ryan Dixon. Now we should be able to do Hybrid apps, Later we will discuss how to setup our web files per each platform, I will provide two examples, First is we will gonna use Highcharts and second we will gonna use Pignoise calendar.


This libraries along with hybridwebview is a better alternative if you cannot afford a pricey libraries from known component vendors (you know them), Though they have done a great job in bringing this native component it is of course your choice.









Creating Your Xamarin.Forms project



Very straightforward just a create a xamarin project and you should be able to create three platforms project atleast and one PCL project. Then you must install Webview nuget package by Ryan Dixon this is a very lightweight library, Make sure to install it on all platforms. In our case we used TabbedPage to showcase each javascript library.











Setup Your Highcharts and Calendar page



Now to setup your highcharts library, keep in mind that the file structures differs per each platform, For Android project, all your html, styles and javascript file must be placed under Assets folder while in iOS project it should be placed under Resources folder and For UWP or WindowsPhone project must be under its root. You can take a look how it should be structured per platform.


Android





iOS





UWP









Communicate Your Web Page to Backend



If you want to know the details how the communication between your page and your Backend explains so much in this documentation. First thing you should do is to register a callback using RegisterLocalCallBack method (the complete documentation and source code can be found here).
In our case we use the calendar selectdate method(to call backend method).

Register a callback something like this in You Xamarin Code:




Now in your html page you can call a method like this to invoke the callback from Xamarin Code








Additional Note



Here is the minimal reason in my case that if we do hybrid we should do it in Xamarin.Forms rather than Cordova.
  • It’s performant; it compiles down to native.
  • Implements most logic in C# with minimal amounts of native code specific to Android or iOS.
  • You can use most javascript libraries like Jquery, Ember and AngularJs




Wrapping Up


Doing native is not always the silver bullet, there were times we need to do simple stuff to accomplish the needed business needs. But Xamarin.Forms can always do both if it needs to. I hope this article have helped you. If you want the full sample source you can check it right here LINK.













3 comments:

  1. This is extremely helpful info!! Very good work. Everything is very interesting to learn and easy to understood. Thank you for giving information. Good Work. Keep it up!
    xamarin development company
    xamarin app development services

    ReplyDelete
  2. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing..
    ios App Development Company
    Mobile App Development Company
    Best Mobile App Development Company

    ReplyDelete
  3. Technically speaking, it is the shared code base which makes it possible to combine all platforms into one single app.

    Xamarin mobile app development Company in India

    ReplyDelete