Cross Platform Mobile Development Revisited

This post documents the different technologies investigated for cross-platform mobile development.

Background

This post documents the findings related to each technology investigated for cross-platform mobile development. As more features are investigated, this post will be updated in consequence.

Back in 2015, I did a comparison between a native solution in Xamarin and a hybrid solution in Cordova. Today, I will do the same exercise with PWA (Progressive Web App). For a quick intro to PWA, visit this blog from ionic.

Comparison Matrix

Features	Xamarin	Apache Cordova	PWA	Winner
IDE	Visual Studio Community Edition Xamarin Platform Some serious work was made to integrate Xamarin in Visual Studio. Very streamline.	Visual Studio Community Edition Tools for Apache Cordova I found the integration a bit buggy. For instance, I had to delete the generated file and rebuilt the app to avoid errors.	At its core, a PWA is a scalable web application built in HTML5/CSS3/JavaScript with native feature. You can use the IDE of your choice provided it has proper web development features. What will be called upon are tools to help you debug PWA. At this point, the best tools are the Chrome browser with its devtools Building your first PWA which includes a local server and PWA validator called Lighthouse.	Xamarin/PWA
Language	XAML and C# This comes down to preference. I’m a .NET developer so I’m more incline to XAML and C#	HTML5/CSS3/JavaScript Web developer would find themselves at home.	HTML5/CSS3/JavaScript Web developer would find themselves at home.	Tie
Pricing	1 year trial and 25$ per month 1000$ per year for Visual Studio Integration Xamarin now provides a free version for students, oss development and small non-enterprise teams.	Free	Free	Tie
Shared UI	Xamarin.Forms Paid solution available such as Telerik and ComponentOne. Components are translated to native UI element so they work for sure.	HTML Elements Third party libraries like Onsen and Ionic This is where HTML really shine. The web is filled with communities providing UI element for free. However, cares must be taken with choosing elements since they may not work with all WebView.	Almost any web framework from Ionic to Angular. Unlike Cordova that runs in a WebView, PWA basically runs in a browser. This is truly the web experience.	PWA
Shared Business Logic	C# Shared Project Portable Class LibrariesXamarin’s magic make sure the code run on any platforms.	JavaScript Just like any JavaScript file running on any browser.	Pretty much the same thing as Cordova	Tie
Libraries	Xamarin Components Store More might be found on NuGet but you need to make sure it works on the platform of your choice. Choice is limited.	Since it is classic JavaScript, packages found on Bower are working so far. Choice are immense. But often browser dependent.	Pretty much the same as Cordova	Cordova / PWA
Emulation	Visual Studio Emulators Emulators for Windows and Android worked right off the box.	Visual Studio Emulators Emulators for Windows worked right off the box. For Android, I haven’t been able to make it work.	Web Browsers PWA are meant to be scalable from Mobile to Desktop so using web browsers to test is simple and ideal.	PWA
Community	Dedicated Forums When a question is asked there, you know the answer is in the context of Xamarin.	StackOverflow Support is trickier. Often posts would refer to vanilla Android development and you would need to ‘translate’ it to Apache Cordova’s context	Google Forum PWA are currently spearheaded mainly by Google. Information specific to PWA are found mostly there. However, since PWA are glorified web application, you can often find the solution to your problem anywhere on the web.	PWA
Native Features	Access via Dependency Service Xamarin has done an amazing job wrapping native feature such that creating custom plugins is done in C#.	Access via Plugins Apache Cordova Plugins Creating your own plugins in Cordova is more challenging. It must be done in Java for Android, and JavaScript for Windows Phone 8.	Service Worker Access to native features are done via service workers, which is probably the hardest part to code in a PWA. Google started created a series of recipes for reuse Service Workers Recipes. Support for each native feature is still based on the browser. This site shows the different feature available. Note that Chrome support the most whereas Edge and Safari still lags behind.	Xamarin PWA will win as soon as support from other browsers emerge.
UI Styling	Styling in Xamarin.Forms is similiar to XAML Styling Xamarin.Forms renders elements using native element. If you want to change the look and feel, you will need Custom Renderer Since Xamarin translate to native UI, the styling is often correct. Otherwise, customer renderer can help but it is not perfect	Classic CSS Style Sheets Make sure your CSS is supported equally among all browsers, which could be quite challenging. Remember the days of making sure it works with IE, Netscape, Firefox, Chrome? It’s the same thing.	The same as Cordova	Xamarin
Updates	Notice via the system tray	Notice via Visual Studio’s notification	Depending on the tools	Tie

Decision Tree

.NET developer should be favouring Xamarin over Apache Cordova and PWA whereas JavaScript developer should be doing the opposite. Currently, PWA works only on Android devices. However, both Microsoft and Apple are aggresively pushing it on their platforms. With the advances of PWA, Apache Cordova is basically a dead framework. JavaScript developer should be favoring PWA to make their application future proof.