SAFEスタックによるF# Webデプロイメント

SAFEスタックは、Webアプリケーションを開発するためのF#ライブラリのセットだ。Tomasz Heimowski氏はこのスタックを、先日のF# eXchange 2018でのライブコーディングセッションで発表し、講演用の評価アプリケーションの作成とデプロイを行って、すべてのエクスペリエンスを実演してみせた。

SAFEスタックは次のもので構成されている。

• Suave — スタンドアロンのWebサーバライブラリ
• Azure
• Fable — F#からJavaScriptへのトランスパイラ
• Elmish — ElmにインスパイアされたUIライブラリ

開発には.NET SDK 2.0とNodejsが必要だが、アプリケーションの実行には.NET Coreがあればよい。まず最初に、テンプレートを使用して基本アプリケーションを作成する。アプリケーションにはサンプルコードとビルドファイルが含まれている。

dotnet new -i SAFE.Template
dotnet new SAFE
build run

Fable.Elmishが、HTML要素のための宣言的なF#バインディングを提供する。HTML要素はF#で構築されており、イベントハンドラと要素定義のワイヤリングが可能になっている。

let submit (model : Model) (dispatch : Msg -> unit) =
Button.aFa
[ Button.Color IsPrimary
Button.IsFullwidth
Button.OnClick (fun _ -> dispatch Submit)
Button.IsLoading model.Loading ]
[ str "Submit" ]

SAFEテンプレートには、ホットリローディング用のWebpackも含まれている。Webpackはクライアントサイドのモジュールバインダだ。SAFEスタックのユニークな機能としてHot Module Replacementがあり、アプリケーションの一部のみをステートを失うことなく交換することができる。

Fable.Remotingは、クライアントとサーバの両側でシリアライズとデシリアライズを処理することにより、クライアントとサーバがインターフェースを共有する手段を提供する。オブジェクト定義とサービスインターフェースは、それぞれクライアントとサーバの両方から参照されるライブラリに格納されている。

// Interface defining the service.
type IVotingProtocol =
  { getResults : unit -> Async<VotingResults>
  addVote : Vote -> Async<VotingResults> }

// Typed service definiton used by the client code.
let api : IVotingProtocol =
  Proxy.createWithBuilder<IVotingProtocol> Route.builder

サーバ側ではインターフェース実装が、SuaveのFable.Remotingヘルパを使用してサーバライブラリに接続される。

let init : WebPart =
let votingProcotol : IVotingProtocol =
  { getResults = getResults
  addVote = addVote }

// creates a WebPart for the given implementation
FableSuaveAdapter.webPartWithBuilderFor votingProcotol Route.builder

講演の最後では、作成したアプリケーションがAzureにデプロイされた。SAFEテンプレート自体はCloudプロバイダに直接統合されていないが、Dockerイメージを生成することが可能なので、開発後にプロバイダ、今回のデモではAzure Containersにデプロイすることができる。

SAFEスタックに関する資料は、コードサンプルとともにGitHubで公開されている。