Domain Modeling & Full-Stack Web Development F#

Craft predictable web apps with F#
Kevin Avignon
Kavignon @ GitHub & Twitter

Clients want the best product delivered quickly

Plan of the evening
What is domain modeling?
Representing store products with F#
Emulate business requirements in the domain
Simulate store browsing with Fable & Elmish

Software developer Hypertherm Robotics Software
Career focused on .NET
Web, Desktop & Tools
An enthusiast of functional programming and .NET
Discovered F# in 2016
Incorporated F# at work and we now have 3 production tools
Blogging on tech @ www.kevinavignon.com

Why should you listen to what I have to say today?

Reasons to be here today
You’ve never heard of F# before and you’re intrigued
Javascript gives you nightmares and you want to stop using it
Full-stack development is hard and you’re looking for ways to make it easier
You’d like to catch bugs earlier in your development

Why use it?
Meaningful representation of concepts needed to be replicated by
software
Giving both experts and developers a shared mental model
Making requirements explicit in the system

Setting it up
Focus on the inputs and outputs in the real-world
Capture both requirements and potential min/max
Avoid thinking of low-level designs too early

Divide & Conquer - Bounded Context
Smaller domains representing portions of the problem space
Clear boundaries to avoid coupling from problem space
Contexts should be autonomous
Must have a way to communicate with each other if needed

Data Transfer Object vs Domain
objects
Domain objects: Objects defined inside the bounded context
Data transfer object (DTO): Only used for serialization and
communication between bounded contexts

Commands, Domain Events &
Workflows
Command (Input): Data object sent to the domain to request a change
Event (Output): Abstraction of the changes that occurred inside the
domain
Workflow
Process triggered by a command
Outputs a set of domain events

Now we know domain modeling.
What about functional programming?

FP vs OO approaches in hindsight
OO FP
Handling state Allowing mutation No mutation
Building blocks Classes and objects Functions
Reduced coupling
Interfaces, abstract classes
& dependency injection
Functions
Code reuse Inheritance Function composition
Program actions Statements Expressions

Functions
Pure Impure
Side-effect free Depends
Same input = same output Depends
Easy to compose Depends
Easy to test Hard to test

C# Programmers of today use some functional concepts

Some functional concepts in C#
Strings
Once set, their values don’t change
Getter-only auto-properties
LINQ
Tuples

Immutability by default
Nothing changes after the data has been set
You have 100% control on data updates
No more obscure unwanted mutation at runtime

If C# already supports functional programming,
why bother learning a new language for .NET?

1. Picking the right tools for the job

Law of the instrument
C# is really good for OO software projects
C# wasn’t created with functional programming in mind
Functions are second-citizen
Mutation is by default
Syntax is pretty verbose

I suppose it is tempting, if the only tool you have is a hammer, to treat
everything as if it were a nail
- Abraham Maslow

2. Testimonials from companies

Gamesys Testimonial
They’ve observed an increase in productivity
Allowed one developer to replace an entire Java team
Rules engine for social slot games served 700,000 unique players and
150,000,000 requests per day

Bayad Rock Testimonial
“F# succinctness allowed to rapidly iterate on new ideas”
“The type system acted as a safety net”
“F# has given us a great advantage over slower competitors”
“3 years in and our products are getting significantly better without
sacrificing stability”

List of companies using F# - https://github.com/Kavignon/fsharp-companies

Anticipated inner workings
Values must be initialized with valid states
Comparing values of different types is a compile-time error
Values are immutable by default
Records with the same data are equal by default

Case Study: Building an e-commerce web application

Optional values instead of nulls

Type inference
Automatic detection of your data type
Makes the code more concise

Business Requirements
Authenticated users can add products to their shopping cart.
Authenticated users can remove products from their shopping cart.
Authenticated users can consult their previous orders.
An authenticated user can update their payment method from his account.
A successful order will be confirmed will an automatic email with the order summary.

Designing with types
Represent your domain entities and actions with
Discriminated unions
Records
Function signatures

Reasons behind type driven
development
Business logic can be complicated
Logic abstracted through types is self-documenting

Example:
I want to add two copies of a book to the cart
Example:
Sending an acknowledgement to a customer’s email
Format email based on culture
Spanish (Spain)
English (Canada)
Only when the order has been validated

Emulating browsing of store products with F#

What is
F# application development stack for web development
Made of 4 components
1. A .NET Core web server [S]
2. A hosting platform (i.e. Azure) [A]
3. A mechanism to run F# client code inside the browser [F]
4. An F# model to develop client-side UIs [E]
?

Why is it interesting for a .NET dev?
Type safe programming from back-end to front-end with F#
Allows code sharing with back-end and front-end
No need to be an expert of CSS or Javascript

A few words on
Preferred to be referred as a library, not a framework
Creating reusable UI components (i.e. forms, dropdowns, etc)
Embraces FP
Declarative programming model
Immutability is preferred

Do I have to use React with SAFE?
Short answer, no
React is used because of its FP-nature
You can create your own bindings to JS library/framework

So what’s Saturn?
Web development library for F#
Used for both web server APIs and MVC apps
Sits on top of ASP.NET Core
Hosts your client assets (HTML/CSS & Js) generated by Fable

F is for Fable
F# to Javascript compiler
Produces readable Javascript for browsers
Integrates with JS
Can use JS libs from F# and vice-versa
Powered by Babel
Toolchain to convert ES5 in backwards compatible Javascript

E as Elmish
Set of abstractions for writing user interfaces in F#
Embraces the Model-View-Update pattern made popular by Elm (FP
lang)
Provides an solid UI-independent core

Overview of Elmish concepts
Model - Snapshot of the application’s state (immutable)
Message - Event representing a change in the app (i.e initial loading)
Command - Carrier of instructions
May results to more than 1 message
Update - Pure function new app state from the previous snapshot
View - Pure function that generates a new layout/content
Uses a rendering engine such as React’s

Beginner friendly F# resources
F# for C# programmers: https://www.youtube.com/watch?v=KPa8Yw_Navk
Functional Design Patterns: https://www.youtube.com/watch?v=srQt1NAHYC0
The Power of Composition: https://www.youtube.com/watch?v=vDe-4o8Uwl8
The functional programming toolkit: https://www.youtube.com/watch?v=Nrp_LZ-XGsY
Functional programming with F# series:
https://www.youtube.com/playlist?list=PLEoMzSkcN8oNiJ67Hd7oRGgD1d4YBxYGC
F# for fun and profit: https://fsharpforfunandprofit.com/
F# Workshop: http://www.fsharpworkshop.com/

SAFE Tutorials
SAFE Dojo: https://github.com/CompositionalIT/SAFE-Dojo/
Introduction to the Elm architecture with Elmish F# and Fable:
https://www.youtube.com/watch?v=3Qk4bWs7vrs
Let’s build a TODO list with React, Elmish, F# & Fable:
https://www.youtube.com/watch?v=zAfW_-m1u4k
Let’s talk HTTP with React, Elmish F# & Fable:
https://www.youtube.com/watch?v=_2U4pDj6tng
Hackers news clone with SAFE: https://www.youtube.com/watch?v=w0Am8fRQzGg
From F# to Javascript with Fable: https://www.youtube.com/watch?v=5191ytFmG_A

SAFE Resources
SAFE Stack docs: https://safe-stack.github.io/docs/
Saturn docs: https://saturnframework.org/docs/
Elmish docs: https://elmish.github.io/elmish/
SAFE Mock-Commerce: https://github.com/Kavignon/.NETDemoCode/tree/master/SAFE-
Mock-Commerce
SAFE BookStore: https://github.com/SAFE-Stack/SAFE-BookStore
SAFE Chat: https://github.com/SAFE-Stack/SAFE-Chat
SAFE Search: https://github.com/SAFE-Stack/SAFE-Search
Tabula Rasa - Minimalist blog engine: https://github.com/Zaid-Ajaj/tabula-rasa

SAFE Tools Resources
SAFE Template - Basic template to get started: https://github.com/SAFE-
Stack/SAFE-template
Fable.Remoting - type safe communication layer between client & server:
https://github.com/Zaid-Ajaj/Fable.Remoting
Femto - CLI tool to resolve npm/yarn packages: https://github.com/Zaid-Ajaj/Femto
Feliz - DSL for React development in F#: https://github.com/Zaid-Ajaj/Feliz
Feliz.Router - Elmish router with Feliz: https://github.com/Zaid-Ajaj/Feliz.Router
Feliz.MaterialUI - Fable bindings with Feliz DSL to MaterialUI:
https://github.com/cmeeren/Feliz.MaterialUI

Learning React Resources
Intro to React: https://reactjs.org/tutorial/tutorial.html
Introduction to React and Intermediate React: https://btholt.github.io/complete-
intro-to-react-v5/

Domain Modeling & Full-Stack Web Development F#

More Related Content

What's hot

Similar to Domain Modeling & Full-Stack Web Development F#

Recently uploaded

Domain Modeling & Full-Stack Web Development F#

Editor's Notes