使用SAFE栈进行F# Web开发

最新推荐文章于 2025-04-03 18:25:16 发布

weixin_34148456

最新推荐文章于 2025-04-03 18:25:16 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ui javascript ViewUI

本文链接：https://blog.youkuaiyun.com/weixin_34148456/article/details/89171519

SAFE栈是一个用于构建Web应用的F#库集合，包括Suave Web服务器、Fable转译器等。借助这些工具，开发者可以轻松地创建、部署及维护Web应用程序，并利用模块热替换等功能提高开发效率。

\
看新闻很累？看技术新闻更累？试试下载InfoQ手机客户端，每天上下班路上听新闻，有趣还有料！
\

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 -\u0026gt; unit) =\Button.aFa\[ Button.Color IsPrimary\Button.IsFullwidth\Button.OnClick (fun _ -\u0026gt; dispatch Submit)\Button.IsLoading model.Loading ]\[ str \"Submit\" ]\

SAFE模板还包含webpack用于热加载。Webpack是一个客户端模块打包器。SAFE栈感兴趣的webpack特性是“模块热替换（Hot Module Replacement）”，让应用程序可以替换应用程序的某些部分而不丢失状态。

Fable.Remoting提供了一种在客户端和服务器之间共享接口的方式。它处理在客户端和服务器端的序列化和反序列化。对象定义和服务接口位于一个不同的库中，客户端和服务器端都引用了这个库。

// 定义服务的接口\type IVotingProtocol =\  { getResults : unit -\u0026gt; Async\u0026lt;VotingResults\u0026gt;\  addVote : Vote -\u0026gt; Async\u0026lt;VotingResults\u0026gt; }\\// 客户端代码使用的类型化服务定义\let api : IVotingProtocol =\  Proxy.createWithBuilder\u0026lt;IVotingProtocol\u0026gt; Route.builder\

在服务器端，接口实现是使用面向Suave的Fable.Remoting辅助程序在服务器库中接入的。

let init : WebPart =\let votingProcotol : IVotingProtocol =\  { getResults = getResults\  addVote = addVote }\\// 针对特定实现创建一个WebPart\FableSuaveAdapter.webPartWithBuilderFor votingProcotol Route.builder\

在演讲结束时，应用程序部署到了Azure上。SAFE模板并没有直接与云提供商集成。相反，可以创建一个Docker镜像，然后部署到云提供商，在这个例子中是Azure容器。

GitHub提供了有关SAFE栈的文档和代码样例。

查看英文原文：F# Web Development With the SAFE Stack