The holy grail of application development is the ability to write an application once and target multiple platforms simultaneously.  These types of applications are known as cross-platform applications.  They span multiple platforms such as Windows, Mac, iOS and Android and multiple devices such as iPhone, iPad, Android Phones, Laptops, and PCs.  At MILL5 we have extensive experience in building cross-platform applications using a variety of tools and frameworks such as Angular, Ionic, Framework7, PhoneGap, and Visual Studio for Mac.

One of our favorite tools for building cross-platform applications is Visual Studio for Mac (formerly Xamarin Studio).  Visual Studio for Mac is the replacement of Xamarin Studio which was acquired by Microsoft after the purchase of Xamarin.  Visual Studio for Mac gives us the ability to access the full capabilities of the underlying platform as well as running native code on the devices. This eliminates several complaints when building cross-platform applications such as access to platform capabilities (ex. cameras, location, video), native look-and-feel, and performance.  This is especially important for applications that require direct access to platform capabilities such as camera, location, and video.

We will demonstrate building a cross-platform application using Visual Studio using sample application.  We have chosen to build an advanced sample application, called “Hello Zoom”, that targets both desktop and mobile devices on multiple platforms.  In this series of articles, we will create an application that targets Windows, Mac, iOS, and Android.  From there we will look at what needs to be done to share common code, use native libraries on each platform, and build both cross-platform and native user interface components.

So what is “Hello Zoom”?  Zoom is a video conferencing solution from Zoom.  “Hello Zoom” is a sample application that integrates with the Zoom SDK to join a meeting (i.e. video conferencing).  We chose this application because there are many interesting solutions that can be built based on video conferencing and it affords us the opportunity to discuss more advanced topics like native user interfaces and leveraging platform capabilities.

At the time of this article, Zoom does not support the .NET platform directly.  What this means is that Zoom does not provide native .NET libraries.  Instead, they provide libraries which are based on C++, Objective-C, and Java.  These are platform specific languages.  For example, C++ is for Windows, Objective-C for Mac OS X and iOS, and Java for Android.  This represents an interesting challenge of “How do we talk to the Zoom library from .NET?”.  This is a challenge that cross platform developers face often.  If you are lucky, you will find a cross platform component that is published to a package repository like the NuGet gallery.  Even then, you hope that the cross platform component is built in such a way that it is usable for your needs.  In this case, we are not so lucky since there is no cross platform component available.

At this point you might ask “Why would you build an application that is cross platform?  Why not go with native tools such as Xcode and Android Studio?”.  There are so many reasons.

First, is time to market.  If you have ever needed to build an application that targets multiple platforms, you are faced with building an application for each platform.  That means you have to build and test every aspect of that application for each platform you target.  That includes the business logic, user interface, and every other component needed to create the application.  Cross platform applications simplify this effort by offering the ability to reuse code across each platform.

A question that often arises is “How much code can you reuse?”.  For this sample application we will demonstrate reuse of business logic and user interface components.  We would like to see 70% or more reuse before considering cross platform development.  Using Visual Studio for Mac we expect to see much higher code reuse, 70 to 95 percent, in production scenarios.

Second, is consistency.  The application we are about to build is a great example of this.  When you look at the Zoom SDK, you will see that Zoom has taken liberties with their libraries on each platform.  What that means is that there are differences such as naming, method signatures, and even features.  By creating a cross platform component we are able to build the same application across many platforms with a consistent set of capabilities.  This means a common set of features using the exact same API.

Third, is common user interface.  This is a choice.  There are many products and technologies that offer the ability to build common user interfaces.  Each product and technology that offers the ability to create a cross platform user interface has their own advantages and disadvantages.  Most take a least common denominator approach to building user interfaces.  They often leverage technologies that are available on all platforms (ex. HTML) for building user interfaces, but lack the native capabilities of the underlying platform.  Some offer great performance, others do not.  Your choice of a cross-platform user interface technology should be based on the experience you want to create.

You must choose, but choose wisely.  The true Grail will bring you life, the false Grail will take it from you. – Grail Knight

Here at MILL5 we have experience building common user interfaces using a variety of products and technologies.  For our sample application we are going to use Xamarin Forms.  Xamarin Forms offers the best of all worlds, a cross platform user interface  technology with native capabilities, look-and-feel and performance.  To understand this choice, we will discuss a very common set of cross platform user interface technologies:  HTML, CSS, Angular, and JavaScript.

Many of our customers want to build applications using web-based technologies such as HTML, CSS, Angular, and JavaScript.  When it makes sense we are able to build some amazing applications using these technologies.  However, in this situation, we need to build a cross platform application that targets mobile and desktop, target a variety of devices formats such as tablet and phone, and needs access to native capabilities of the underlying platform.  Web-based technologies are not really suited for this broad set of capabilities.

Using HTML, CSS, Angular and JavaScript alone is not enough to build a cross platform user interface.  Often you need to leverage additional libraries and frameworks such as React, Dojo, Framework7, Ionic, Material, Aurelia, Durandal, Sencha Touch, and Kendo UI.  These frameworks layer on top of technologies such as HTML, CSS, Angular, and JavaScript to help you build responsive web-based user interfaces.  This allows you to build a single common user interface that targets multiple devices and platforms while reducing your development time.

One of the big advantages regarding web-based applications is the plethora of choices for libraries and frameworks available to you as a developer.  Having so many choices presents itself with additional challenges such as …

• “Which libraries and frameworks do you pick?
• “What is the adoption of each library or framework?”
• “Are these frameworks truly cross platform or do they just target a subset of devices?”
• “Can I find developers that know these libraries or frameworks?”
• “Are these libraries or frameworks supported by the developers that created them?”

These are just some of the questions you need the answers to when building web-based applications.  This is why the plethora of libraries and frameworks available to web developers is also a big disadvantage.  You must be disciplined when choosing the libraries and frameworks available to you so that you can limit yourself to those libraries and frameworks that give you the best adoption, longevity, and support for your application.

Another important requirement is the ability to access native capabilities on the device.  In our case we are accessing a third-party library (i.e. Zoom) that needs access to native capabilities such as video, camera, networking, Bluetooth, and more.  This is not possible with a web-based application unless you leverage more advanced products such as Adobe’s Cordova/PhoneGap or Appcelerator’s Titanium.  These products allow you to build web-based applications that is hosted in a native shell application (i.e. container).  This allows your web-based application to access native capabilities such as cameras, location, accelerometer, and contacts, through a plug-in architecture.  In our situation there is no plug-in that is available to leverage the Zoom SDK from either PhoneGap or Titanium.  We could try and create our own custom plug-in, but unfortunately that too is not possible.  The Zoom SDK’s application programming interface has native user interfaces components for navigation, video, and settings.  Using a web-based application makes integrating with these native user interface components extremely difficult, if not impossible.

Xamarin.Forms has none of these challenges.  A user interface built using Xamarin.Forms is really just a set of views and controls that are mapped to platform-specific native user interface elements.  For example, a Xamarin Forms Entry becomes a UITextView on iOS, an EditText on Android, and a TextBox on Windows.  This is why a user interface using Xamarin.Forms is in fact a native user interfaces and when needed, you can also instantiation and interact with native user interface elements directly.

Summary

In this article, we introduced our sample application called “Hello Zoom”.  This is a video conferencing application that allows us to join a meeting.  We set the premise for building our cross platform application using Visual Studio.  Our sample application will target four platforms: Windows, Mac, iOS, and Android.  We will leverage .Visual Studio, NET and Xamarin.Forms to access the native capabilities of each underlying platform and achieve a significant amount of code reuse.  In the next article, we will start development by creating our solution for building our application using Visual Studio.