Xamarin Forms and F# – Part One

Most of the projects I worked on used C# and I spent 7 years as a mobile app developer using Xamarin.

Anyone in the community will testify that it is a dream come true to be able to use F# everywhere. I have finally found the time to take a look at a project which has been on my list for a long time.

Since the early days of the project, the team has always been very supportive of F#. I am the proud owner of both C# and F# t-shirts from the original demo.

If you wanted to make F# applications using Xamarin, you needed to use an object oriented approach.

We have the option to use Fabulous, which provides a functional-first abstraction. We can use the power of F# to build native mobile apps.

I’ll give a bit of background on Xamarin and explain how Fabulous fits in to the overall picture in part one.

Cross-platform and Native?

It may seem like a contradiction, but Xamarin allows you to write.NET code which will result in native applications for both the iPad and the phone.

binding to the native runtimes is what it does. Every class in the native framework has a.NET version. A matching object is created for every instance of the object you create. The native object has the same method called on it every time you execute a method on it.

This is all invisible to the developer in most cases, and it just feels like writing a native app, but using C# or F# rather than Swift or Objective C. If you have experience writing apps in one of those languages, you will be able to use the same tools and processes that you are familiar with, including the XCode Storyboards.

You also have access to the entire.NET community of libraries and tooling, which is very valuable, and they provide you with a comprehensive set of Xamarin essentials which bridges the gap between the platform APIs to allow you to do things such as get the device location, launch a browser, and

In a world that moves as quickly as mobile, this approach greatly reduces development time and maintenance costs.

Shared UI

You are still required to code the user interface separately for each platform, even though the degree of Usability provided by Xamarin Native is pretty extensive.

The form of XAML you use to define your layout is very similar to what you see in UWP applications.

The Muliti-platform AppUI is the name of the effort to unify these variousUI frameworks.

This is converted to a native layout when the application is built. If you add a button to the page, the button will be created in your app for both the iPad and theANDROID.

You can create your own Forms component by defining aUI object interface and then implementing it on each platform.

Functional UI

Model-view flutter tutorial for beginners-Controller or Model-view-Model are patterns that object-oriented architectures often use to manage their user interface.

The current state of theUI is usually held by a mutable object. The object is bound to the interface. Changes in the state object can be caused by changes in theUI.

This approach is not very compatible with F# or functional programming in general. We like pure functions that produce a consistent output without side effects.

The MVU is a pattern which allows us to achieve these goals. There are three major components of the name.

  • The current state of the application is represented by the model.
  • There is a function that gives a model.
  • A new model can be created with the help of a function and a command.

Take your model and make aUI. A new model can be generated by a command. The key is in the composability of the pattern, just like most things in functional programming Basic building blocks can be used to build applications.

A predictable output is what we get. It is important in the world of mobiles apps with their strict power and memory management requirements that we have an easy way to snapshot and replay application states.

The SAFE stack works on the web with Fable and Elmish in the browser.

Fabulous

Fabulous brings the MVU pattern to Xamarin Forms.

F# is a much more suitable language for defining our layout than XAML. It’s odd that we try to define dynamicUIs using a static language.

If you want to show a thing, use an if statement. The not function is the best way to invert a property. There is no need for an IBoolInverterConverter. A basic F#.

You may be familiar with this idea if you have used Razor pages in the past.

You write a function that takes in a model and emits a list of components. It’s possible to lay out your code on the page, but it has all the power of F#.

If you’re familiar with the components, Fabulous provides view elements for them, and will render theUI in an efficient way once you have generated it.

You can write a simple binding class for those who don’t receive anything or who have created their own. I’m sure the team would appreciate any contributions over at their GitHub, including third party component binding and any nice examples of apps you have made.

I made a fun little app after a work hack day which will probably be the basis for a more technical deep dive in part two.

Videos

Don Syme gave a talk about MVU and Fabulous last year.

Don and Tim recently did a couple of episodes on the Xamarin Show.

Questions?

If you would like to know more about mobile app development with Xamarin and F#, whether for a bit of technical help or to inquire about training and consultancy services, please ping me a message at [email protected]

Leave a Reply

Your email address will not be published.

You May Also Like