Supercharge your mobile app development with Xamarin and Syncfusion

Malcolm Jack
4 min readAug 8, 2017

I recently had a brief conversation with Joel from Cliniko around the choice of technology stack when developing mobile apps. Most startups are heavily invested in web technologies, so it seems like a no-brainer to re-invest those resources in the app world using wrappers like Ionic or Cordova. Others go all-in on fully native solutions for each platform — having a team of developers each for Windows, Android and iOS. I guess the logic here is that with native apps there are no limits on the user experience and performance of the native platform — resulting in a better customer experience. While I don’t believe there’s a silver bullet as to which technologies are best for mobile apps — there’s just too many variables at play — I do believe that Xamarin deserves a fair look in a lot of cases. Check out the reading resources at the bottom of this post for some comparisons between the different mobile dev strategies.

With Xamarin, you can get a fully native solution with 80–95% code re-use — personally I think that’s pretty awesome. All the UX and performance of the native platform, without having to rewrite all the code for each.

Xamarin Code Stack

So after I had this conversation with Joel, I thought it would be an interesting exercise to set aside 30 hours* (a week’s work for his business), and see if I could churn out something meaningful. I also wanted a go-to project so that I could play around with the cross platform control libraries from syncfusion (I’ve already blogged about some of their controls, like Kanban and Pdf generation). For some more complete xamarin examples, look here and here

*Caveats:

  • Already had boiler-plate code from here
  • iOS and Windows apps incomplete
  • Things like performance and memory analysis, testing not done
  • It’s not done — there’s only so much I can do in 30 hours ;)

The App

Cliniko already has a really good solution facilitating the health care practitioner (HCP), where they among other things allow customers to book appointments with their business. I thought it would be a good experiment to build out this booking experience in a mobile app, where you have access to native capabilities like Geolocation, customer calendar integration, sharing to social media / email etc. and map integration (directions to HCP, or launching the Uber app for a lift to the appointment). The brief would be to develop an app that is dedicated to the HCP customer, rounding out the total product system user experience. Here’s a look at the ‘final’ product:

Xamarin Health Care Demo

Here’s how much code is shared between platforms (lines of code):

Shared Infrastructure Code: 662
Shared Application Code: 583
Android Code: 78
iOS Code: 32
Windows Code: 89

All the code is available on my github account

Plugins used (code I didn’t need to write — because OSS FTW!)

A whole bunch of open-source plugins for xamarin can be found here

Here’s a few that I included in the app:

Geolocation Plugin: I needed a way to initialize the default locations of HCPs around the user’s device. This plugin gave me a way to get the current location, and then it was just a matter of generating random locations around a single point.

Share Plugin: So the customer can share the appointment experience on social media or email etc.

Permissions Plugin: Handle permissions required by the platforms generically

Autofac: For all your dependency injection super-power needs

FluentValidation: Validate models using fluent syntax

HockeyApp: Error reporting, customer feedback and test app distribution

Sqlite-net-pcl: Offline relational repository implemented by SQLite

Toasts.Forms: Cross platform toast notifications

Wibci.Forms.Converters: Shared value converters for Xamarin Forms UI bindings. Full disclosure — this one is mine.

Connectivity Plugin: Check connection status of devices

External Maps: Launch a maps request using a geolocation.

Messaging Plugin: Make phone calls / send email or sms

FFImageLoading: Circle images and cached loading images — plus a bunch of other super-cool stuff like image transformations and svg support.

Xamarin Forms: Cross platform UI using XAML

Xamarin.Forms.Maps: Cross platform maps control

Syncfusion Controls

Pdf & Pdf Viewer: for pdf document generation and viewing in-app

Busy Indicator: Busy animation

Calendar: For showing bookings in the context of a calendar

ListView: a whole bunch of really cool features, but specifically liked the out of the box slide commands

Schedule: For appointment scheduling

Syncfusion have a bunch of other controls here, and the list keeps improving with every release, which is about once a month. Also be sure to check out their community licence (licencing done right imho)

I was recently pleasantly surprised that Highrise also decided to use Xamarin to ship cross platform mobile apps with few dedicated resources. Checkout CEO Nathan Kontny and CTO Michael Dwan discussing the technology choice below:

Interested in developing mobile apps, or giving your business a slick mobile app across all the platforms — get started for free with xamarin here. They’re also adding support for other platforms like MacOS, WatchOS, Android Wear, Linux and even Tizen.
One code to rule them all, and in the XAML bind them :)

More Reading

The Ups and Downs of Developing Apps with Xamarin

8 Benefits of Xamarin for Mobile App Development

Xamarin vs Ionic: A Mobile, Cross Platform, Shootout

Cordova vs React Native vs Xamarin vs DIY

Why is Xamarin Vs. Cordova the Wrong Question to Ask?

--

--

Malcolm Jack

Husband and father of 3. Turning a side-project into a business while prioritizing family #eattheelephant