fex-template

Fex: F# and Express for Web Development

A Unified Server-Client Architecture

Fex is an architectural pattern for building web applications with Express in JavaScript, utilizing the F# Fable compiler and Feliz for React components. It's not a framework but an approach that emphasizes separation of concerns, simplicity and flexibility. By leveraging both the `express` npm module for server-side and the `browser-express` module for client-side operations, it allows developers to craft route handlers, middleware, and React components that seamlessly work across both environments. The goal is to simplify web development while giving developers the freedom to adapt their architecture as their application evolves to meet user needs.

Universal Route Handlers

Fex enables efficient server-side rendering of static HTML through simple route handlers, data queries, and React components. This initial server-side rendering delivers fast load times.

Meanwhile, the same route handlers and components power client-side interactions without full page reloads allowing for all of the benefits of interactive single-page applications.

Here's an example of a Felix component and a Fex route handler:

[<ReactComponent>]
let ShowGreeting(props: {| greeting : Greeting |}) =
    React.fragment [
        Html.h2 props.greeting.heading
        Html.h4 props.greeting.subheading
        Html.p props.greeting.content
    ]

app.get("/", fun req res next ->
    promise {
        let! response = 
            req 
            |> gql "query { greeting { heading subheading content } }" {||}
            
        match response with
        | Ok response -> 
            let greeting : Greeting = response?greeting
            ShowGreeting ({| greeting = greeting |})
            |> res.renderComponent
        | Error message -> next()    
)

What underlies this functionality is that `res.renderComponent` and `req.gql` are attached to the request and response objects by parallel middleware. These middleware have separate implementations for the server and the browser but offer the same typed interface.

Universal React Components

React components can be crafted in F# using Feliz, allowing for both server-rendered HTML and client-side interactivity. Here's an example of both a server rendered and an interactive counter component, which should look very familiar to a React developer:

[<ReactComponent>]
let Counter() =
    let (count, setCount) = React.useState(0)
    Html.div [
        Html.button [
            prop.style [ style.marginRight 5 ]
            prop.onClick (fun _ -> setCount(count + 1))
            prop.text "Increment"
        ]

        Html.button [
            prop.style [ style.marginLeft 5 ]
            prop.onClick (fun _ -> setCount(count - 1))
            prop.text "Decrement"
        ]

        Html.h1 count
    ]