Scott Hanselman

Learning about the F# SAFE stack - Suave.io, Azure, Fable, Elmish

October 8, '17 Comments [15] Posted in DotNetCore | Open Source
Sponsored By

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.

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:

  • Suave model for server-side web programming
  • Azure for cloud-based systems
  • Fable for Javascript-enabled applications.
  • Elmish for an easy-to-understand UI programming mode

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.

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

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.

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.

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

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.

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

    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.

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.

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.

The SAFE stack running

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.

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."


Sponsor: Do you know how many errors, crashes and performance issues your users are experiencing? Raygun installs in minutes. Discover problems you didn't even know about and replicate bugs with greater speed and accuracy. Learn more!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Sunday, 08 October 2017 08:33:13 UTC
Thanks for this blog post Scott, always nice to see some F# promotion.
Monday, 09 October 2017 16:27:10 UTC
I was excited about F# for about a year. Then I figured out it would always be a second-class citizen to C#. But that year was time well spent learning functional programming. Now I've delving into other functional languages outside of .NET.

(I was also excited about Windows Phone too, but my current one will be my last...)

Chris Nelson
Tuesday, 10 October 2017 06:38:58 UTC
Thanks.Good to know about F# Hansy.
Ganapati Panapana
Tuesday, 10 October 2017 07:19:59 UTC
One thing I really love about F# is the way it's type system lets you model domains with incredible clarity and accuracy. This talk by Scott Wlaschin is a great introduction to that:

https://vimeo.com/97507575
Sean Kearon
Tuesday, 10 October 2017 10:49:54 UTC
Thank you for sharing such informative article. I forwarded this link to my co-developers. I hope they will found it helpful.
Wednesday, 11 October 2017 09:58:04 UTC
I never heard about Safe Stack. I will try itu soon. Thanks
Thursday, 12 October 2017 17:01:33 UTC
Developers should work harder in this aspect.
Overall, a nice article.
Sunday, 15 October 2017 07:44:09 UTC
I love them so much, thank you very much
  I will also introduce to my friends, hope you have a lot of new topics and good meaning
http://www.friv100game.org
Sunday, 15 October 2017 07:44:55 UTC
Thanks for the marvelous posting! I actually enjoyed reading
it, you may be a great author.I will remember to bookmark
your blog and will eventually come back someday. I want to encourage yourself to continue your great work, have
a nice weekend! http://www.friv1com.org
Sunday, 15 October 2017 21:31:10 UTC
Establish A Financial Edge With Chin Oddity
We print and distribute high quality undetected counterfeit back notes of the following currencies


-US Dollars(USD)
-Euros
-Canadian Dollars(CAD)
Emirati Dirhams(AED)


All these notes pass the uv lights and pen tests,thanks to the following
Intaglio printing
Water marks
Security threads
See_Through register
Special foil/Special Foil Elements
Independent Stripe /Shifting Colours
Different Serial Numbers


These among other factors such as the constant improvement in the security measures taken to by pass every detective system is the basis of what of what we are here for.Still we focus on establishing client and producer relationship green.
Get some paper and make the right differences


Contact info:

Telegram:@Chin_Oddity

Email: chinoddity@tutanota.com

Chin Oddity
Monday, 16 October 2017 20:52:22 UTC
its very helpful thanks for the articles, I will try it soon
Tuesday, 17 October 2017 13:40:31 UTC
It was hard but I hope I realized
Wednesday, 18 October 2017 02:55:06 UTC
hmmm difficult, i will try again. thanks for the articles
Wednesday, 18 October 2017 10:50:55 UTC
Nice post bro!! <a href="http://stafabandel.me" title=="Stafaband free download music" target="_blank"> Free Download Music Mp3 Stafaband</a>
Thursday, 19 October 2017 19:01:42 UTC
Thank you for your useful postings

http://www.manktemang.info
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Live Comment Preview

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.