Many platforms, one world - Part 1

TL;DR

This is part 1 of a series of posts in which I chronical how the Uno Platform was used to write an app which runs natively on all major platforms and naturally on modern dual-screen devices (such as the forthcoming Surface Neo and Surface Duo). I will endeavour to detail how the Uno Platform makes it possible to achieve "99% shared code" across operating system and form-factor, all without having to leave the comfort of basic C# nor needing to learn a new dialect of XAML. And finally, through the app, I hope to provide the means to better understand - and help mitigate - the impact our energy usage is having on the environment.

Part 1

In this post I cover the app's conceptualization, why I chose to implement it using the Uno Platform, how you can get the app for your device and where you can examine it's source code. Later posts detail the various conundra of designing, implementing and deploying an app targeting multiple platforms using the Uno Platform.

Below is a (preliminary) list of posts I intend to write. It will be updated as each post is completed and published:

• Part 1 - Background
• Part 2 - Infrastructure
• Part 3 - Client Architecture
• Part 4 - Using the TwoPaneView
• Part 5 - Implementing the interactive UK Map
• Part 6 - Charts on the Uno Platform
• Part 7 - Windows, Win10X and releasing to the Microsoft Store
• Part 8 - Android and releasing to the Google Play Store
• Part 9 - iOS and releasing to the Apple App Store

Background

Back in January I wrote a blog post showing how the Uno Platform could be used to write native, cross-platform apps that can leverage the unique UX opportunities afforded by dual and multi-screen devices such as the forthcoming Surface Duo and Surface Neo. This article was received well and the Uno Platform team dropped me a line after reading it suggesting that, if I could develop the PoC into a "real app", they'd feature it on their showcases page. This seemed like a great idea but, as I was in the middle of a project at the time and couldn't immediately think of an app I wanted to write, I thanked them and left it there...

Until, that is, I read that Microsoft had committed to going carbon negative by 2030. As regular readers of my blog will know, I have a penchant for using technology to help promote sustainable living and thought an app combining this with Microsoft's current focus on dual-screen devices could be the showcase app the Uno Platform team were looking for.

And so it was that CO_duo came to be:

An early version of CO_duo running on Surface Pro (Windows 10), Surface Duo (Android 10) and Surface Neo (Windows 10X)

So what is CO_duo?

CO_duo is an app which presents data about electricity generation and carbon emissions across the UK in a user-friendly way.

With CO_duo I wanted to not only increase people's awareness of the impact their energy usage was having on the environment - particularly the CO₂ emissions - but also empower them to change their energy usage in ways which might help mitigate this impact. In short, my design goals could be summarised with the following two user stories:

"As a domestic user of electricity, I need to understand the impact my energy usage has on the environment so that I am incentivized to change this usage"

"As a domestic user of electricity, I need to understand how I can change my energy usage so that it's impact on the environment is minimized".

I started this project by searching for appropriate sources of data and was pleased to find that, for the UK at least, there were numerous free - and extremely detailed - public APIs available. I then spent some time prototyping a data visualisation that could show the carbon intensity of current and forecast energy generation and illustrate when might be best to use energy-intensive appliances (i.e. washing machines, dish washers, tumble dryers, etc).

Using Syncfusion's Essential Studio I got the below working in a UWP app in single evening:

"Great", I thought, "Now to make it run across every platform, on every screen and in every configuration. How difficult can it be?".

Well, lets find out.

Why the Uno Platform?

This is my third blog post about the Uno Platform. The first two - The Seven GUIs of Christmas about Uno's cross-platform capabilities & Uno, Duo, Hey! about Uno's dual-screen capabilities - showed a platform that had incredible potential and which was rapidly maturing to the point where it could deliver on this potential for "real world" apps.

Given I wanted to write an app that would work natively on both the Surface Duo - which runs Android - and Surface Neo - which runs Windows 10X - the Uno Platform was an obvious choice as it would reduce my technology stack from this:

To this:

As we will see in the following series, this choice really has paid dividends. In fact, it has been so successful that I feel I must issue a correction:

My first blog post about the Uno Platform - The Seven GUIs of Christmas - contained the following:

The Uno platform is, somewhat amazingly, able to display (almost) the exact same XAML page across multiple platforms (or 'heads' to use Uno parlance) with a very high degree of fidelity. This is quite an achievement and the team at nventive are rightly proud of this capability.

However, from the perspective of someone looking to write large applications on this platform, I don't believe this facility is particularly important nor - to a certain extent - even desirable. You see, in my experience, it is often the case that each platform and/or form-factor requires such different UI and/or UX that trying to shoe-horn everything into a single XAML page results in a page that is difficult, if not impossible, to maintain.

In contrast to this statement, CO_duo has been written with a single code-base - from infrastructure through to view-models and views - shared across all devices. This has led to neither code bloat nor maintainability issues due, in most part, to the Uno Platform's faithful reproduction of a few key UWP tenets.

To explain: Whereas previously I had been used to writing cross-platform apps using multiple different display technologies, the Uno Platform is just UWP and UWP was designed to be... well... universal. Out of the gate, UWP ran on everything from desktop PCs and tablets through to mobile phones and IoT devices. It successfully abstracted away many technical difficulties of designing for multiple platforms ensuring the developer was able to write a single "adaptive" UI which would then be able to capitalize on the display surface(s) available.

Uno have very successfully reproduced this capability across multiple disparate platforms and while not quite pixel-perfect - as we will see in future posts - it is close enough that any differences can be smoothed over with a little creative design.

Which platforms does CO_duo run on?

CO_duo currently runs on the following platforms:

• Via UWP
  • Windows 10 PC
  • Windows 10 Tablet
  • Windows 10 Mobile/Phone
  • Windows 10 IoT
  • XBox One
  • Hololens
  • Surface Hub
  • Windows 10X PC/Tablet (i.e. Surface Neo)
• Via Android (Oreo - version 8 - or above)
  • Android Phone
  • Android Tablet
  • Android TV
  • Dual-Screen Android Devices (i.e. Surface Duo)

Furthermore, CO_duo will be updated to run on the following platforms when time and resources allow:

• Via iOS
  • iPhone
  • iPad
• Via WebAssembly
  • Any WebAssembly compatible browser

Where can I get CO_duo?

Beta versions of CO_duo are currently available in the following apps stores:

• Microsoft Store - for PC, Tablet, XBox, Hololens and Surface Hub
• Google Play - for Android Phone, Table, and TV.
• Apple App Store - Coming soon

As promised, the Uno Platform Team have also featured CO_duo on their showcases page and as part of their introduction to using the Uno Platform for Surface Duo and Surface Neo.

Will you be open-sourcing CO_duo?

Yes, mostly. In addition to detailing lots of the design and implementation considerations that went into writing CO_duo in various posts for this series, the code for CO_duo has been published under a "shared source" license; specifically GPLv3 with the "Commons Clause".

The Commons Clause is a license condition drafted by Heather Meeker that applies a narrow, minimal-form commercial restriction on top of an existing open source license to transition the project to a source-availability licensing scheme. The combined text replaces the existing license, allowing all permissions of the original license to remain except the ability to "Sell" the software as defined in the text.

It is my hope that transitioning the CO_duo project to a "source-available" license scheme will allow others to understand how to use the Uno Platform to develop a cross-platform app without me having to worry about numerous clones of the app appearing in various app stores laden with ads.

The source code for CO_duo can be found in my COduo repository on Github. If you like or use the source-code, please take the time to "star" the repository; it's a small gesture which really fuels developers's enthusiasm for projects such as these.

When will new posts about CO_duo be made available?

I intend to write/release a new post in the series every few days.

My plan is for parts 2 and 3 to provide a high level overview of the service-side infrastructure and client app architecture respectively. These posts won't specifically discuss the Uno Platform but will instead provide insight into how the project was designed and how this design simplifies the development of a cross-platform app such as CO_duo.

After parts 2 and 3 I will be diving into the various considerations of using the Uno Platform to deliver a cross-platform app. Part 4 will detail how to use the TwoPaneView to develop an app that runs natively on dual-screen devices and part 5 onwards will discuss how other UI components were implemented.

I will round out the series by highlighting platform differences you need to be aware of while using the Uno Platform and my experience of deploying CO_duo to each of the various apps stores.

Finally

I hope you enjoy this series and that it goes some way to demonstrating the massive potential presented by the Uno Platform for delivering cross-platform experiences without having to invest in additional staff training nor bifurcating your development efforts.

If you or your company are interested in building apps that can leverage the dual screen capabilities of new devices such as the Surface Duo and Surface Neo, or are keen to understand how a single code-base can deliver apps to every platform from mobile phones to web sites, then please feel free to drop me a line using any of the links below or from my about page. I am actively seeking new clients in this space and would be happy to discuss any ideas you have or projects you're planning.