Cross Platform Mobile Development Options (in 2021)

A few years ago I wrote a post on my thoughts on cross-platform development mobile development options.

After a year of working on a large Flutter project, plus working on a much smaller React Native project recently, it seems like a good time to update my thoughts on cross-platform development options in 2021.

Flutter

I’ve just completed a year long project for a large client helping rewrite their mobile apps in Flutter.

Neither I or the other members of the team had done much/any Flutter development before, so it meant learning best practices together - sometimes through trial and error, finding out what worked for our particular app.

I really enjoyed using Flutter, and it’s definitely the nicest cross-platform development system I’ve used so far.

Good Points

• Uses a declarative UI (like SwiftUI) which is a productive, modern way of developing reliable and predictable user interfaces
• Hot reload - not needing to recomplie to see every change in the simulator - is very nice when doing UI work
• Visual Studio Code is a great and versatile development tool, with lots of handy extensions (I’d strongly recommend using it rather than Android Studio for doing Flutter development)

Less Good Points

• Support for packages can be a little patchy
  • Flutter has support for most common requirements out of the box, or with Google written packages.
  • However for more specialised needs, several 3rd party packages we used weren’t of great quality, and we had to fix some fairly basic bugs in them. They were mostly packages developed by a single developer, and the owner generally didn’t have the time or inclination to keep them up-to-date or fix every bug found.
  • As ever with depending on 3rd party packages, use at your own risk
• Using Dart was fine, but felt a bit limited compared to using Swift

React Native

I picked up a small React Native project for a new client, who wanted a few updates made to an existing app another agency had developed for them.

I was looking forward to using React Native, as I’d only briefly looked at it before - and to be fair haven’t spent enough using it to make a definitive judgement - but to be honest I was quite disappointed.

The app was using Expo, which offers a slightly clunky hot reload experience.

I also didn’t really enjoy going back to using JavaScript for mobile development, after using more suitable strongly typed and compiled languages.

I’ll hold judgement until I’ve done more RN coding (and it may be that the inherited codebase wasn’t well designed in the first place), but my first commercial experience of it wasn’t anywhere near as nice as developing in Flutter.

Summary

I’d definitely recommend using Flutter for the right projects. Those projects that are mostly cross-platform rich UIs without any complex on-device requirements are a good fit, as you are less likely to hit any issues with pany 3rd party ackages you need.

I can see how React Native might be a good fit for a team that already uses React in a web app, but unless that is you - or your team has strong front-end JavaScript skills already - I can’t see much advantage in using it.

3 years ago I mentioned using Xamarin and Cordova/Ionic, and I definitely wouldn’t recommend starting any new project using them any more.

However, I’ve started a a new project back using Swift/SwiftUI/native iOS development - and am VERY happy doing just that! SwiftUI in particular is a joy to use, and I am much more productive using it - even compared to doing Flutter development with it’s useful hot reload.

Strategy for automatically setting app version numbers

One of the minor pain points for an app developer is managing app version numbers.

How I try to minimise the work needed when updating my apps is to automate this as much as possible, so I thought it would be useful to document how I do this, for my reference as much as yours.

iOS

Reusing the same version number across multiple targets

On iOS, if you have multiple targets in your solution, you need to ensure all the extensions have the same version number.

This can be quite a long list of things to keep in sync - for example, my Yeltzland app has 6 targets that need to have an identical version number (the app itself, Today widget, Watch app and extension, Siri intent and Siri intent UI)

I make this easier by having a user defined build property called "SHARED_VERSION_NUMBER" set at the Project level in Xcode.

I then use this variable in the Info.plists for each target as shown below.

Obviously this means I just need to update the version number in one place to automatically update it in all the targets.

Setting the build number

As I said above, I set the build number to be the number of Git revisions in the repo so far.

This guarantees a unique and incrementing build number for releases, and a informative number that helps when communicating with users about what version of the app they are running/testing.

I do this by adding a custom Build Phase to each of my targets that:

1. Uses git rev-list --all --count to get the current number of git revisions in the repo
2. Sets the ‘CFBundleVersion’ property in the Info.plist file to this number, using the PlistBuddy utility

Here’s the script I use:

git=`sh /etc/profile; which git`
appBuild=`$git rev-list --all --count`
/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $appBuild" "${TARGET_BUILD_DIR}/${INFOPLIST_PATH}"
echo "Updated ${TARGET_BUILD_DIR}/${INFOPLIST_PATH}"

Android

My Android apps are usually more straightforward, with a single build.gradle file used to set the versionCode and versionName for the app.

I use this simple build function in the app’s build.gradle to get the git revision number:

static def generateVersionCode() {
    def result = "git rev-list --all --count".execute().text.trim()
    return result.toInteger()
}

def majorVersion = "4.1.2"

...

android {
    ...

    defaultConfig {
        ...
        versionCode generateVersionCode()
        versionName "${majorVersion}.${generateVersionCode()}"
        ...
    }
    ...
}

Code adapted from this Gist

Xamarin

I have a Xamarin iOS and Android native app - inherited from another company - so wanted to use a similar strategy for incrementing the build numbers.

This solution isn’t as nice - that can probably be said for Xamarin in general! - but it does work.

It involves manually adding build steps into the iOS and Android project files, that use the now familiar git command to get the build number we need, then using XmlPoke commands to set the values in either the iOS Info.plist or the Android AndroidManifest.xml files.

The pain is it changes the actual files in the repo - not just setting values at build time - so the Info.plist and AndroidManifest.xml files are continually being changed in the repo.

Below are what I added to my two project files for reference …

iOS Project file

<Target Name="BeforeBuild">
 <Exec Command=“git rev-list --all --count” ConsoleToMSBuild="true">
  <Output TaskParameter="ConsoleOutput" PropertyName="APPBUILD" />
 </Exec>
 <PropertyGroup>
  <VersionNumber>1.0.0</VersionNumber>
 </PropertyGroup>
 <XmlPoke XmlInputPath="Resources/Info.plist" Query="//dict/key[. = 'CFBundleVersion']/following-sibling::string[1]" Value="$(APPBUILD)" />
 <XmlPoke XmlInputPath="Resources/Info.plist" Query="//dict/key[. = 'CFBundleShortVersionString']/following-sibling::string[1]" Value="$(VersionNumber)" />
</Target>

Android Project file

<Target Name="BeforeBuild">
 <Exec Command=“git rev-list --all --count” ConsoleToMSBuild="true">
  <Output TaskParameter="ConsoleOutput" PropertyName="APPBUILD" />
 </Exec>
 <PropertyGroup>
  <VersionNumber>1.0.0</VersionNumber>
 </PropertyGroup>
 <XmlPoke XmlInputPath="Properties\AndroidManifest.xml" Namespaces="&lt;Namespace Prefix='android' Uri='http://schemas.android.com/apk/res/android' /&gt;" Query="manifest/@android:versionCode" Value=“$(APPBUILD)” />
 <XmlPoke XmlInputPath="Properties\AndroidManifest.xml" Namespaces="&lt;Namespace Prefix='android' Uri='http://schemas.android.com/apk/res/android' /&gt;" Query="manifest/@android:versionName" Value="$(VersionNumber).$$(APPBUILD)" />
</Target>

Summary

I’m very pleased I’ve got all this working (particularly in Xamarin), and I’d defintely recommend using an approach like this for your apps.

Rewriting my WatchOS apps with SwiftUI

I’ve been doing Paul Hudson’s excellent 100 Days of SwiftUI course, and decided to take the plunge and rewrite my WatchOS apps using SwiftUI.

Advantages of SwiftUI on WatchOS

I believe SwiftUI started life as a replacement for WatchKit and it really shows. It’s always been hard to build rich interfaces on WatchOS before, and Apple’s built-in apps couldn’t have been using WatchKit as they had many features simply unavailable to non-system developers.

With the power of SwiftUI, it’s now pretty easy to build rich animations, scrolling card views, and generally make first class apps that are much nicer to use.

The one (slight) downside is that you need to be running WatchOS 6.0 and above to run SwiftUI-based apps. However, I think Apple Watch users are pretty likely to be running the latest OS, and for my particular apps, the previous versions were pretty simplistic so didn’t see much usage anyway.

Changing to a SwiftUI mindset

SwiftUI is going to be a great way of developing apps for Apple’s multiple plaforms, although it’s still very new. The documentation leaves A LOT to be desired, and there are still bugs being fixed in each new version of Xcode/iOS.

The most interesting challenge was switching to a more reactive, event-driven way of propogating data changes into the app.

I won’t copy a whole bunch of code here, as both apps are open source and available here and here.

Updating the UI when the app became active

One particular challenge it took a while to figure out was how to trigger the animation of the progress control in Count The Days Left every time the app became visible.

There is an onAppear() function that can be added to a View. However, it turns out that is only run the first time a view appears, so when you reopen the app that is still in-memory, it won’t get called again.

This also meant that if the app stayed in memory overnight, it wouldn’t update the view the next day - which would obviously then be out of date 😟

The solution

• In the data model class the the view observes, add a PassthroughSubject object:

import SwiftUI
import Combine

class WatchDaysLeftData: ObservableObject {
    
    @Published var currentPercentageLeft: String = ""
    @Published var currentTitle: String = ""
    @Published var currentSubTitle: String = ""
    @Published var percentageDone: Double = 0.0
    
    let modelChanged = PassthroughSubject<(), Never>()
    ...

• The observable object also exposes a updateViewData() function, that (amongst other things):
  • Resets the self.percentageDone to be 0.0, and then calls self.modelChanged.send(())
  • Calculates the correct self.percentageDone, and then calls self.modelChanged.send(()) again
• The View class receives messages from the modelChanged object, and updates the view using an animation:

struct ProgressControl: View {
    @State private var animationProgress: Double = 0.0
    @ObservedObject var model: WatchDaysLeftData

    // Code cut for clarity

    var body: some View {
      ZStack {
        // Code cut for clarity

        Arc(progress: self.animationProgress)
        // Code cut for clarity
          .onReceive(model.modelChanged, perform: { _ in
            withAnimation(.easeInOut(duration: self.duration)) {
              self.animationProgress = self.model.percentageDone
            }
          })
        }
    }
}

• Obviously this “animates to 0.0” and then “animates back to the real value” because two separate messages are sent to the View.

• Finally, the actual data model passed through into the View is a property on the extension delegate, so we can call self.dataModel.updateViewData() in the extension’s applicationDidBecomeActive() event handler, which triggers a “re-animation” each time the app becomes active.

Did that make sense?

As you can see from the video below, this isn’t ideal, and to be honest feels a bit hacky. It would have been MUCH nicer if the View’s onAppear() worked as the name implies, and runs every time the view actually appears!

It could also be that I’m still learning SwiftUI - so definitely let me know if you have a better solution!

Videos showing what I’ve been trying to say

Here’s the new Count The Days Left, showing the nice animation (with room for improvement!):

… and here’s how my new, improved Yeltzland app looks. The card view is perfect for Watch apps, and was as easy adding .listStyle(CarouselListStyle()) to the List View showing the fixtures and results data.

Please excuse the scroll glitch, as my home-made video setup meant I struggled to turn the digital crown with my wrist at a funny angle 🙄

Summary

I’m really happy how much better my two WatchOS apps are now, and SwiftUI is truly game-changing (not just for the Watch!)

Once I decide to bump the main Count The Days Left app up to support only iOS13 and above, I should be able to reuse most of the SwiftUI code pretty much as is, which will be fantastic.

I’m also considering building Mac Catalyst versions of the apps at some point, so again could consider doing those in SwiftUI. However other issues (around some 3rd party dependencies) don’t make this easy, so that may be a while off yet.

Fixed an issue using WkWebView when session cookies were intermittently dropped

Fingers crossed, but I think I’ve finally fixed an irritating issue in my Yeltzland iOS app, where session cookies were being intermittently dropped in WkWebView.

This was especially painful when using the Yeltz Forum as you’d be logged out of your account every so often 😞.

The problem is (always) threading

I’ve spent ages over the years trying different solutions to see what’s happening, and as far as I can the root cause is that WkWebView actually runs on a different process than the app, which can prevent cookies being synched properly - and hence being dropped if you are unlucky.

The solution

I changed the code to use a single WKProcessPool for all web views in the app, and then instantiate each WkWebView is created using the following code:

lazy var webView: WKWebView = {
    let appDelegate = UIApplication.shared.delegate as! AppDelegate
    
    // Use a single process pool for all web views
    let webConfiguration = WKWebViewConfiguration()
    webConfiguration.processPool = appDelegate.processPool

    let webView = WKWebView(frame: .zero, 
                    configuration: webConfiguration)
    webView.navigationDelegate = self
    
    return webView
}()

This was based on a very helpful comment by LinhT_24 in the Apple Developer Forums, for which I’ll be eternally grateful.

I’ve been running this code for nearly two weeks now without being logged out from the forum, so I really hope this is fixed.

Hopefully this post might help someone else with the same problems too!

Adventures in Siri Shortcuts automation

I’ve been looking forward to the new automation options in Siri Shortcuts in iOS 13 for a while.

Previously I’ve used a hodge-podge of IFTTT, Launch Center Pro and Shortcuts to do some of what I’ll describe below, but new trigger options opens up a whole new world of possibilities.

Everything is still a bit buggy right now (as of iOS 13.1.3), but shows a lot of promise.

• Automatically enabling VPN away from home
• Playing Audio
• Showing my Shopping List

Automatically enabling VPN away from home

I’ve just started using Cloudflare’s free 1.1.1.1 VPN app, which so far seems reliable, fast and a lot safer when using coffee-shop WiFi networks.

I don’t want to enable the VPN when at home (there are occasional geo-location issues when trying to stream videos), but almost always want to when not on my home network.

The 1.1.1.1 app offers actions to enable or disable the VPN, so it was trivial to write a shortcut that:

1. Is triggered on connection to any WiFi network
2. Checks the current WiFi network name
3. If it is my home network, disables the 1.1.1.1 VPN
4. If it’s any other network, enables the 1.1.1.1 VPN

This is great, as I was continually forgetting to enable/disable the VPN before - now I get a notification every time I switch networks, and tapping on it quickly switches the VPN to the state I almost certainly want.

Playing Audio

Starting up Spotify

I’ve written previously about my shortcut where I started Spotify using NFC and Launch Center Pro, so it was easy to migrate this to using the NFC triggers in Shortcuts instead.

One issue was that the NFC tags I’d bought from LCP were encoded to a LCP launching URL, so I had to purchase some new tags.

The next enhancement was to setup a trigger to run the same shortcut when my phone connects to the Bluetooth speaker in my home office. This is so much easier to use than even the NFC tag - I simply turn on the speaker, and then tap the notification to fire up Spotify and get it running.

Podcasts in Overcast

The other audio I listen to regularly are podcasts in Overcast.

Overcast does have some automation hooks, although they seem a little flaky in iOS 13. I’ve written a shortcut that asks me if I want to play either Overcast or the Spotify shortcut mentioned above from a list.

I have 2 triggers to run this combined shortcut:

• When I connect my Bluetooth headphones
• An NFC tag in my car

Showing my Shopping List

I’ve previously built a completely over-engineered shopping system based around Todoist, IFTTT location triggers, IFTTT voice integration and an AWS Lambda function!

This worked pretty well, and basically location triggers in the IFTTT iOS app called a script which read my Todoist Shopping List when I’m near the supermarkets in Hexham, and sent an alert if there was anything I needed.

I’ve moved the location trigger in Shortcuts, but also I’m experimenting in going all-in with the built-in Reminders app, and not using Todoist any more.

This means all of the shopping list logic can be done on-device (which makes it a bit more reliable), and it’s also easy to share the list with my family.

The integration with my multitude of Amazon Echos and Google Assistants also needed a couple of custom IFTTT applets, but they were very simple to write.

It’s all a bit less Heath Robinson now, but works just as well.

Enhancements/Missing Features

I’m pretty happy with where my automation sare so far, but there’s definitely room for improvement.

First of all, the triggers - in particular the location ones - seem very flaky. Shortcuts itself seems a bit hit and miss at times, and my guess is that if any script has had problems, the app somehow hangs/is blocked, which stops the location triggers firing.

Next, it would be great if more types of triggers could run automatically rather than needing you to tap on a notification. I know Apple are very strong on privacy, but there should be a way to let me accept the “risks” and let more shortcuts be able to be triggered without needing my intervention.

Finally, there is no integration yet with the Apple Watch. I believe some Watch integration may be coming in iOS 13.2, but it would be great to be able to both start shortcuts from the watch as well run them automatically based on triggers. For example, I’d like to be prompted to start a workout as soon as I leave my house, rather than wait for the automatic “after 10 minutes walking” feature to sometimes kick in.

Summary

Just implementing these three automations has been great, and shows of the power of Shortcuts to extend the functionality of my expensive devices in truly useful ways.

If the automation system was a bit less buggy, and a bit less restrictive on needing so much user intervention, it would be truly fantastic.

Hopefully this will be coming soon! 🤞