Multiple items
type ViewController =
  inherit obj
  new : handle:'a -> ViewController
  override ViewDidLoad : unit -> 'a
  member myButton : 'a
  member myButton : 'a with set

Full name: index.ViewController

--------------------
new : handle:'a -> ViewController
val handle : 'a
member ViewController.myButton : 'a with set

Full name: index.ViewController.myButton
module Unchecked

from Microsoft.FSharp.Core.Operators
val defaultof<'T> : 'T

Full name: Microsoft.FSharp.Core.Operators.Unchecked.defaultof
val set : elements:seq<'T> -> Set<'T> (requires comparison)

Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.set
override ViewController.ViewDidLoad : unit -> 'a

Full name: index.ViewController.ViewDidLoad
type VCContainer = obj

Full name: index.VCContainer
Multiple items
type myViewController =
  inherit obj
  new : ptr:'a -> myViewController

Full name: index.myViewController

--------------------
new : ptr:'a -> myViewController
val ptr : 'a
val profilePage : obj

Full name: index.profilePage
val settingsPage : obj

Full name: index.settingsPage
val mainPage : obj

Full name: index.mainPage
Multiple items
type App =
  inherit obj
  new : unit -> App

Full name: index.App

--------------------
new : unit -> App
Multiple items
type MainPage =
  inherit obj
  new : unit -> MainPage

Full name: index.MainPage

--------------------
new : unit -> MainPage
val self : MainPage
val typeof<'T> : System.Type

Full name: Microsoft.FSharp.Core.Operators.typeof
val ignore : value:'T -> unit

Full name: Microsoft.FSharp.Core.Operators.ignore
namespace Microsoft.FSharp.Core
val data : obj

Full name: index.data
module Observable

from Microsoft.FSharp.Control
val result : obj

Full name: index.result
val button : obj

Full name: index.button
val log : value:'T -> 'T (requires member Log)

Full name: Microsoft.FSharp.Core.Operators.log
val image : obj list

Full name: index.image

The expanding horizons of F# mobile development


Dave Thomas

@7sharp9_exhumed

7sharpnine.com

Twitch

#fsharpX | #fsharp

What are my options?

Xamarin

Xamarin native

  • Xamarin iOS
  • Xamarin Android


Xamarin Forms

  • Cross platform
  • shared UI
  • Aimed at simple user interfaces

Xamarin iOS

  • 100% API coverage
  • Interface builder


Platforms

  • iPhone
  • Watch OS
  • TvOs
  • Mac

iOS Example

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
[<Register ("myViewController")>]
type ViewController (handle:IntPtr) =
    inherit UIViewController (handle)

    [<Outlet>]
    member val myButton = Unchecked.defaultof<UIButton> with get, set

    override x.ViewDidLoad() =
        x.myButton.TouchUpInside.Add
            (fun _ -> x.View.BackgroundColor <- UIColor.Red)

iOS Example

storyboard-sim example

Is there a better way to do this?

Yes!

Introducing The iOS designer provider

  • Generative type provider approach
  • code behind that is actually behind the scenes
  • Outlets are exposed for use and not stringly typed
  • Code completion and tooltips available
  • Code is injected into the final assembly
  • No clutter
  • Less code

Example

ios designer provider

Example

1: 
2: 
3: 
4: 
5: 
type VCContainer = Xamarin.UIProvider

[<Register(VCContainer.ourViewControllerBase.CustomClass)>]
type myViewController(ptr) =
    inherit VCContainer.ourViewControllerBase(ptr)

Generated Code

Generated code

Xamarin Android

  • 100% API coverage
  • Interface builder


Platforms

  • Android Phone
  • Android Wear

Xamarin Forms

Build native UI's for iOS, Android and Windows phone from a single, shared codebase

  • Cross platform
  • shared UI
  • Aimed at simple user interfaces
  • Create user interface in Xaml or programatically

Xamarin Forms Example

ux

Xamarin Forms Programmatic Example

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
let profilePage = 
    ContentPage(
        Title="Profile",
        Icon="Profile.png",
        Content=StackLayout.Create(
            [ Entry (Placeholder="Username") 
              Entry (Placeholder="Password", IsPassword=true)
              Button (Text="Login",
                      TextColor=Color.White, 
                      BackgroundColor=Color.FromHex "77D065") ], 
              spacing=20.0,
              padding=thickness 50.0,
              verticalOptions=LayoutOptions.Center))
                    
let settingsPage = ContentPage(Title="Settings", Icon="Settings.png")
let mainPage = TabbedPage.create [profilePage;settingsPage]
type App() =
    inherit Application(MainPage = mainPage)

Xamarin Forms Xaml Example

xf xaml example

Xamarin Forms Code Behind Example

1: 
2: 
3: 
4: 
5: 
6: 
7: 
type MainPage() as self =
    inherit ContentPage()
    do base.LoadFromXaml(typeof<MainPage>) |> ignore
    let usernameEntry = base.FindByName<Entry>("usernameEntry")

type App() = 
    inherit Application(MainPage = MainPage())

So how do I choose?

Use Xamarin Forms when...


  • UI is relatively simple
  • Requires little platform specific functionality
  • Code sharing is more important than UI
  • Comfortable with XAML or programmatic construction

Use Xamarin Native when...


  • A complex UI is required
  • Interactions require native behavior
  • You want to use many platform-specific API's or features
  • The UI is more important than code sharing

Fable

What is Fable?


  • Fable compiles F# to JavaScript
  • Combines the power of F# with the pervasiveness of JavaScript
  • Allows an opportunity to use the expressiveness and power of F# on new platforms
  • Integrates with Existing JavaScript libraries
  • Support most of Fsharp.Core and a some of the BCL
  • Allows dynamic programming for fast turn around
  • Can provide strongly typed foreign interfaces

Fable Fuse

What is Fable |> Fuse?


Fuse is a set of tools that makes designing and developing native mobile apps fast, easy and fun


  • Fable generates JavaScript from F#
  • User interface designed in an Xml dialect called UX
  • Business logic defined in reactive JavaScript
  • Code is compiled natively via C++

Fable |> Fuse Example

Fuse colours app

UX markup

ux

JavaScript

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
var Observable = require("FuseJS/Observable");

var data = Observable();

fetch('http://bit.ly/2mFV8CU')
  .then(function(response) { return response.json(); })
  .then(function(responseObject) { data.value = responseObject; });

module.exports = {
  data: data
};

Json based data

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
{
  "colorsArray":[{
      "colorName":"Red",
      "hexValue":"#F44336"
    },
    {
      "colorName":"Pink",
      "hexValue":"#E91E63"
    },
    {
      "colorName":"Purple",
      "hexValue":"#9C27B0"
    }, ...
  ]
}

F#

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
open Fable.Core
open Fuse
open Fable.PowerPack
open Fable.PowerPack.Fetch

let data = Observable.create()
let result =
    promise {
        let! req = fetch "http://bit.ly/2mFV8CU" []
        let! json = req.json ()
        do data.value <- json} |> Promise.iter ignore

F# more elaborate

Fuse custom

Fable |> Fuse

Pros
  • Hot reloading
  • Declarative UI
  • x-plat

Fable |> Fuse

Cons
  • Bleeding edge
  • Limited by the Fuse framework and UX markup
  • Coverage not 100% for those parts native code required (Obj-C/Swift/Java.)
  • Packaging with webpack can be perilous (here be dragons)

Fable + React Native


React Native lets you build mobile apps using JavaScript. It uses the same API as React, lets you compose a mobile UI from declarative components

Example

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
open Fable.Core
open Fable.Import
module R = Fable.Helpers.React
module RN = Fable.Import.ReactNative
open RN.Props

let button =
    text [] "click me!"
    |> touchableHighlight [
        OnPress (fun () -> console.log("clicked!"))]
		
let image =
    image 
    [ Source [ Uri "http://facebook.github.io/react/img/logo_og.png"
               IsStatic true ]]      
    []

view [] 
    [ image
      button ]

Fable + React Native

Pros
  • Hot reloading
  • Declarative UI
  • x-plat

Fable + React Native

Cons
  • Bleeding edge
  • JavaScript oriented logic, efficiency, threading
  • Limited by the react framework
  • Run time only type checking
  • Tricky debugging Chrome / (gdb, lldb)
  • API coverage not 100%
  • Packaging with webpack can be perilous (here be dragons)

How are Fuse and React Native different?

  • Fuse aimed at designers and developers
  • Fuse has an OpenGL based UI, intuitive and slick user experience
  • Fuse has real-time editing of UX markup, real-time updating of UX code from Inspector
  • React Native hosts more code in JavaScript like UI manipulation, virtual dom and serialization
  • React Native has a lot more components available for initial use

Bringing it all together

Xamarin

  • 100% Native API coverage
  • Well supported platform
  • x-platform option available with Xamarin Forms
  • Compiles to native code
  • Same day availability for new API's
  • Easier debugging

Bringing it all together

Fable

  • Hot coding on Fuse and React Native
  • API coverage is not yet 100%
  • Bleeding edge, be prepared to go deep
  • Dependent on JavaScript compilation from F#
  • Support may vary

Colophon Xamarin

Xamarin iOS

Xamarin Android

Xamarin Forms

  • Look out for blog post on iOS designer provider

Colophon Fable

Fable

React Native

Fuse

Fable |> fuse

Fable React Native

webpack

G͕̬AME͇͖̘̟̞̱ O͖̹̪V̥E̝R̦̘̝̝̻̜








@7sharp9_exhumed

7sharpnine.com

Twitch

#fsharpX | #fsharp