This document discusses the SAFE stack, an alternative approach to .NET web development using F# and functional programming principles. The SAFE stack includes the Suave web server, Azure cloud platform, Fable compiler to compile F# to JavaScript, and Elmish single-page app architecture. It provides advantages like less verbose code, better developer experience with tools like Paket and Fake, and the ability to share code between server and client. Various sample applications and deployment options for the SAFE stack are presented.

1. Киев 2017
Только реальные кейсы. Только актуальные тренды.
Functional Web
Serhiy Kalinets, Steer73
@skalinets
kalinets@gmail.com

2. Киев 2017
About me
16 years in the business
In .NET since 2005
Love to code
Software Architect
@ Steer73
@skalinets 2

3. Киев 2017
Current State of .NET Web
Development
@skalinets 3

4. Киев 2017
ASP.NET (Core)
Web API
Client : JS SPA
@skalinets 4

5. Киев 2017
Alternatives
NancyFX
Monorail
FubuMVC / Jasper
@skalinets 5

6. Киев 2017
Problems
Too verbose C# code
Fullstack is hard
OOP
@skalinets 6

7. Киев 2017
Introducing SAFE
Suave
Azure
Fable
Elmish
@skalinets 7

8. Киев 2017
Why F#?
Suitable not only for academic /
financial code
Less verbose than c#
Rich ecosystem
Nice for LOB applications
@skalinets 8

9. Киев 2017
F# has it from start
async
tuples
pattern matching
algebraic types
@skalinets 9

10. Киев 2017
Suave
Fast non blocking server
Purely functional
Rich feature set
@skalinets 10

11. Киев 2017
Hello World in Suave
open Suave
startWebServer
defaultConfig
(Successful.OK "Hello, world!")
@skalinets 11

12. Киев 2017
Hello World in Suave
@skalinets 12

13. Киев 2017
WebParts
open Suave
startWebServer
defaultConfig
(Successful.OK "Hello, world!")
@skalinets 13

14. Киев 2017
WebPart
type WebPart = Context ->
Async<Context option>
// C# equivalent
Func<Context, Task<Nullable<Context>>>
@skalinets 14

15. Киев 2017
Web Parts
Building blocks for suave
application
It’s like OWIN middleware but
more lightweight
Composable
@skalinets 15

16. Киев 2017
WebParts: Content Providers
OK "Hello, world!"
// returns 200 OK with content
@skalinets 16

17. Киев 2017
WebParts: Filters
Path "/foo"
// returns None if path does not
// match
GET
// returns None if verb does not
// match
@skalinets 17

18. Киев 2017
WebParts: Combinators
a >=> b
// returns None if a is None
// otherwise feeds result of a
// into b and returns its result
@skalinets 18

19. Киев 2017
WebParts: Combinators
choose [a; b]
// returns None if a is None
// otherwise feeds result of a
// into b and returns its result
@skalinets 19

20. Киев 2017
Config Example
choose
[ GET >=> path "/public" >=> OK "Default GET"
// Access to handlers after this one will require
authentication
Authentication.authenticateBasic
(fun (user,pwd) -> user = "foo" && pwd = "bar")
(choose [
GET>=> path "/whereami"
>=> OK "Hello authenticated person"
GET >=> path "/" >=> dirHome
GET >=> browseHome // Serves file if exists
])]
@skalinets 20

21. Киев 2017
Suave
Self hosted
WebSockets
Azure Functions
@skalinets 21

22. Киев 2017
Azure
Just another cloud platform
Is familiar for most .NET guys
@skalinets 22

23. Киев 2017
Fable
F# -> JS compiler
Supports modern JS frameworks
Same code in API and UI
Interop with JavaScript
@skalinets 23

24. Киев 2017
F# support
collections
dates
regular expressions
string formatting
observables
async
and even reflection
@skalinets 24

25. Киев 2017
Fable Repl
@skalinets 25

26. Киев 2017
Elmish
Based on ELM
Makes fable code
even less verbose
One way, immutable
@skalinets 26

27. Киев 2017
Elmish Concept
@skalinets 27

28. Киев 2017
Elmish: The Basics
type Model = int
type Msg =
| Increment
| Decrement
| Reset
@skalinets 28

29. Киев 2017
Elmish: The Basics
let init () : Model = 0
let update msg model =
match msg with
| Increment -> model + 1
| Decrement -> model - 1
| Reset -> 0
@skalinets 29

30. Киев 2017
Elmish: The Basics
let view model dispatch =
div
[ ClassName "columns is-vcentered" ]
[ div
[ ClassName "column "
Style [ Width "170px" ] ]
[ str (sprintf "Counter: %i" model) ]
simpleButton "+1" Increment dispatch
simpleButton "-1" Decrement dispatch
simpleButton "Reset" Reset dis patch ]
@skalinets 30

31. Киев 2017
@skalinets 31

32. Киев 2017
Developer Experience
While visual studio can be used for
development, there are other,
usually better alternatives
@skalinets 32

33. Киев 2017
IDE: Visual Studio Code
Nice lightweight IDE
Many various extensions
Ionide – extension for F#
@skalinets 33

34. Киев 2017
Acceptance Tests: canopy
F# wrapper around WebDriver
Very nice syntax
Can be understood
by
non-developers
@skalinets 34

35. Киев 2017
Testcase
Open url http://site.com
Enter “Minnie” as First Name
Select Female Gender
Click “Continue”
Verify that First Name is “Minnie”
@skalinets 35

36. Киев 2017
Executable Testcase
url "http://site.com"
"#firstName" << "Minnie"
click "#genderFemale"
click "Continue"
"First Name" == "Minnie"
@skalinets 36

37. Киев 2017
Package Manager: paket
Nuget on steroids
Less xml
No more nuget hell
@skalinets 37

38. Киев 2017
nuget.org is aware
@skalinets 38

39. Киев 2017
Build: Fake
Reach feature set
Nice syntax
Functional
@skalinets 39

40. Киев 2017
Continuous Development
Continuous unit testing (VS
Code + expecto)
Hot reload in browser,
like JS hipsters
@skalinets 40

41. Киев 2017
@skalinets 41

42. Киев 2017
SAFE Sample: Book Store
@skalinets 42

43. Киев 2017
SAFE is not all-or-nothing
You can use alternative
application architectures
utilizing elements of SAFE
stack in different ways
@skalinets 43

44. Киев 2017
Typical SAFE stack
https://compositional-it.com/blog/2017/09-22-safe-release/index.html
@skalinets 44

45. Киев 2017
Alternative SAFE stack
https://compositional-it.com/blog/2017/09-22-safe-release/index.html
@skalinets 45

46. Киев 2017
Partial SAFE stack
https://compositional-it.com/blog/2017/09-22-safe-release/index.html
@skalinets 46

47. Киев 2017
On-Premise partial SAFE stack
https://compositional-it.com/blog/2017/09-22-safe-release/index.html
@skalinets 47

48. Киев 2017
Lite SAFE stack
https://compositional-it.com/blog/2017/09-22-safe-release/index.html
@skalinets 48

49. Киев 2017
Try it yourself
@skalinets 49

50. Киев 2017
Thanks!
@skalinets
kalinets@gmail.com
skalinets.github.io
@skalinets 50