SAFE Stack workshop (Part 2)

Full stack web development in F#

by Zaid Ajaj

About Me

  • Zaid Ajaj

  • Originally from Iraq

  • Living in the Netherlands

  • Lead Developer at eSightMonitoring

  • Working with C#, Javascript, F# and SQL

  • Active OSS contibutor to everything F#-related

  • Author of The Elmish Book

  • Follow me on Twitter & Github for F# news and latest developments

Table Of Contents

  • ✔️ What is F#?

  • ✔️ Why learn and use F#?

  • ✔️ Getting started

  • ✔️ Functional thinking

  • ✔️ Unit testing

  • ☐ Data access

  • ☐ Beginning SAFE-Stack

Table Of Contents Today

  • Beginning SAFE-Stack

  • Understanding The Template

  • Working with the backend

  • Working with the frontend

  • Data Access

  • Revisiting Unit Testing

Understading The Template

  • Server (backend)

  • Client (frontend)

  • Test projects

  • Build project

  • The workflow

Beginning SAFE-Stack

  • Full Stack F# web development

  • Backend built on AspNet Core via Giraffe and Saturn

  • Frontend built on React via Feliz and Elmish

  • Compiling to Javascript using Fable

  • Modern intergration with the JS ecosystem

  • Fable already has a large set of bindings

  • Using SAFE.Simplified template

  • Abstracting HTTP/JSON away with Fable.Remoting

  • Alternative to the official SAFE-Template

The Backend

  • Relies heavily on AspNet Core

  • AspNet Core -> Giraffe -> Saturn

    • Logging

    • Configuration

    • Dependency Injection

  • Fable.Remoting (RPC)

  • Mix and match with REST endpoints

The Frontend

  • F# to JS via Fable

  • Relies heavily on React

  • React -> Feliz

  • State management by Elmish (optional)

  • Integrated with the JS ecosystem

  • Bindings for existing libraries (like Feliz)

Data access with F# (Postgres edition)

Unit Testing with F#:

  • Using Expecto

  • Building test utilities with functions

Thanks for having me!

  • See you next time.

  • Questions?