了解F＃SAFE堆栈-Suave.io，Azure，寓言，Elmish-CSDN博客

Last month I looked at a Functional Web with ASP.NET Core and F#'s Giraffe. Giraffe is F# middleware that takes ASP.NET Core's pipeline in a new direction with a functional perspective. However, Giraffe isn't the only F# web stack to choose from! There's Freya, WebSharper, and there's also a very interesting and quite complete story with The SAFE Stack.

上个月，我研究了带有ASP.NET Core和F＃的Giraffe的Functional Web 。长颈鹿是F＃中间件，它从功能的角度将ASP.NET Core的管道推向了新的方向。但是，长颈鹿并不是唯一可供选择的F＃Web堆栈！有Freya，WebSharper，还有The SAFE Stack的一个非常有趣且非常完整的故事。

The SAFE Stack is an open source stack, like LAMP, or WAMP, or other acronym stacks, except this one is all open source .NET with a functional perspective. From the announcement blog:

SAFE堆栈是一个开放源代码堆栈，例如LAMP或WAMP或其他首字母缩写堆栈，但该堆栈是具有功能角度的所有开放源.NET。从公告博客：

Suave model for server-side web programming
小号uave对服务器端Web编程模型
Azure for cloud-based systems
一种基于云的系统的方法
Fable for Javascript-enabled applications.
˚F能够为启用了JavaScript的应用程序。
Elmish for an easy-to-understand UI programming mode
Ëlmish一个简单易懂的用户界面编程模式

To be clear, while this is a prescriptive stack, it's not a stack that forces you to do anything. You can swap bits out as you please.

需要说明的是，尽管这是一个说明性堆栈，但并不是迫使您执行任何操作的堆栈。您可以根据需要交换位。

Fable is particularly interesting as it's an F# to JavaScript transpiler. Try Fable online here http://fable.io/repl and turn F# into JavaScript LIVE! Their Sudoku sample is particularly impressive.

寓言特别有趣，因为它是JavaScript转译器的F＃。在此处http://fable.io/repl在线尝试寓言，然后将F＃变成JavaScript LIVE！他们的Sudoku样本特别令人印象深刻。

Here's two small - but interesting - examples where F# code ends up as JavaScript which ends up creating ReactJS components:

这是两个小但有趣的示例，其中F＃代码最终以JavaScript形式出现，最终创建了ReactJS组件：

let words size message =
    R.span [ Style [ !!("fontSize", size |> sprintf "%dpx") ] ] [ R.str message ]

let buttonLink cssClass onClick elements = 
    R.a [ ClassName cssClass
          OnClick (fun _ -> onClick())
          OnTouchStart (fun _ -> onClick())
          Style [ !!("cursor", "pointer") ] ] elements

Then later in a Menu.fs that also turns into JavaScript eventually, you can see where they conditionally render the Button for logout, or links for for other Views for the Home Page or Wishlist. You can read lots more about Fable over at the Compositional IT blog.

然后，在后来最终也变成JavaScript的Menu.fs中，您可以看到它们有条件地呈现Button的位置以注销，或为Home或Wishlist的其他视图提供链接。您可以在Composition IT博客上阅读有关寓言的更多信息。

let view (model:Model) dispatch =
    div [ centerStyle "row" ] [ 
          yield viewLink Home "Home"
          if model.User <> None then 
              yield viewLink Page.WishList "Wishlist"
          if model.User = None then 
              yield viewLink Login "Login" 
          else 
              yield buttonLink "logout" (fun _ -> dispatch Logout) [ str "Logout" ]
        ]

Elmish for F# takes the Model View Update (MVU) architecture and brings it to F# and the browser. There's a good breakdown of the value Elmish provides also at the Compositional IT blog.

Elmish for F＃采用了模型视图更新(MVU)架构，并将其带到F＃和浏览器中。在Composition IT博客上，Elmish还提供了很好的价值细分。

Suave is its own cross platform Web Server. Here's Hello World in Suave.

Suave是其自己的跨平台Web服务器。这是Suave中的Hello World。

open Suave

startWebServer defaultConfig (Successful.OK "Hello World!")

Suave has been around for while and gets better all the time. I blogged about it in 2015 and got it running on Azure. My blog post is not a best practice any more - it was a spike attempt by me - and fortunately they've moved on and improved things.

Suave已经存在了一段时间，并且一直都在进步。我在2015年写了关于它的博客，并使其在Azure上运行。我的博客文章不再是一种最佳实践-这是我的一次尝试-幸运的是，他们已经继续前进并改进了事情。

Here's Suave getting set up within the sample app. Check out how they route HTTP Verbs and URL paths.

这是在示例应用程序中设置的Suave。查看它们如何路由HTTP动词和URL路径。

    let serverConfig =
        { defaultConfig with
            logger = Targets.create LogLevel.Debug [|"ServerCode"; "Server" |]
            homeFolder = Some clientPath
            bindings = [ HttpBinding.create HTTP (IPAddress.Parse "0.0.0.0") port] }

    let app =
        choose [
            GET >=> choose [
                path "/" >=> Files.browseFileHome "index.html"
                pathRegex @"/(public|js|css|Images)/(.*)\.(css|png|gif|jpg|js|map)" >=> Files.browseHome

                path "/api/wishlist/" >=> WishList.getWishList loadFromDb ]

            POST >=> choose [
                path "/api/users/login" >=> Auth.login

                path "/api/wishlist/" >=> WishList.postWishList saveToDb
            ]

            NOT_FOUND "Page not found."

        ] >=> logWithLevelStructured Logging.Info logger logFormatStructured

    startWebServer serverConfig app

Very interesting stuff! There are so many options in .NET open source. I'll be doing podcasts on this stack soon.

非常有趣的东西！ .NET开源中有很多选项。我将很快在此堆栈上进行播客。

试用SAFE堆栈 (Trying out the SAFE Stack)

If you're using Visual Studio Community 2017, make sure you've got F# support included. I double-checked under Individual components. You can run the VS2017 installer multiple time and add and remove stuff without breaking things, so don't worry. If you are using other versions of VS, check here http://fsharp.org/use/windows/ to get the right download for your machine. If you're using Visual Studio Code, you'll want the Ionide F# plugin for Code.

如果您使用的是Visual Studio Community 2017，请确保已包含F＃支持。我在“单个组件”下进行了仔细检查。您可以多次运行VS2017安装程序，并在不破坏内容的情况下添加和删除内容，因此请不要担心。如果您使用的是其他版本的VS，请在此处查看http://fsharp.org/use/windows/以获取适用于您计算机的正确下载。如果您使用的是Visual Studio Code，则需要Code的Ionide F＃插件。

Adding F# to Visual Studio Community 2017

Once I had node and yarn installed, it was easy to try out the sample app and get it running locally with "build run." It uses DotNetWatcher, so you can just keep it running in the background and work on your code and it'll recompile and restart as you go.

一旦安装了节点和yarn ，就可以轻松试用示例应用程序，并通过“构建运行”使其在本地运行。它使用DotNetWatcher，因此您可以使其在后台运行并处理您的代码，并且可以随时重新编译和重新启动。

The complete "SAFE" stack demo website is LIVE here http://fable-suave.azurewebsites.net (login test/test/) and all the source code for the app is here: https://github.com/SAFE-Stack/SAFE-BookStore.

完整的“ SAFE”堆栈演示网站可在此处http://fable-suave.azurewebsites.net (登录test / test /)在线运行，该应用程序的所有源代码都在此处： https : //github.com/SAFE- Stack / SAFE-BookStore 。

UPDATE: One important point from F# Community Member Steffan Forkmann: "One thing I'd like to add is that SAFE is also an initiative to get multiple companies to give commercial support for this stack. This is IMHO very important for commercial use of an open source stack."

更新： F＃社区成员Steffan Forkmann的一个重要观点： “我想补充的一点是，SAFE也是一项倡议，旨在使多家公司为此堆栈提供商业支持。恕我直言，这对于IMAGE的商业用途非常重要。开源堆栈。”

翻译自: https://www.hanselman.com/blog/learning-about-the-f-safe-stack-suaveio-azure-fable-elmish