https://github.com/laurentpayot/fsharp-fable-elmish-example

F# Fable Elmish example, with Preact and Vite.
https://github.com/laurentpayot/fsharp-fable-elmish-example

elm elm-architecture elm-lang elmish elmish-applications fable fsharp functional-programming mvu preact vite

Last synced: about 1 month ago
JSON representation

F# Fable Elmish example, with Preact and Vite.

• Host: GitHub
• URL: https://github.com/laurentpayot/fsharp-fable-elmish-example
• Owner: laurentpayot
• License: mit
• Created: 2023-10-02T13:13:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-19T21:24:55.000Z (8 months ago)
• Last Synced: 2025-03-24T06:51:30.982Z (about 2 months ago)
• Topics: elm, elm-architecture, elm-lang, elmish, elmish-applications, fable, fsharp, functional-programming, mvu, preact, vite
• Language: F#
• Homepage:
• Size: 329 KB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# F# Fable Elmish example

The goal of this example is to show how to get typical [Elm](https://elm-lang.org/) features (see below) in [F#](https://fsharp.org/). We use [Fable](https://fable.io/) to transpile F# to JavaScript and [Elmish](https://elmish.github.io/elmish/) to get [The Elm Architecture](https://guide.elm-lang.org/architecture/) (TEA), also known as the Model View Update (MVU) pattern.

For views we use [Feliz](https://zaid-ajaj.github.io/Feliz/) that uses [React](https://react.dev/) under the hood. In this example React is seamlessly replaced by [Preact](https://preactjs.com/) to get performances [similar to Elm](https://krausest.github.io/js-framework-benchmark/2022/table_chrome_102.0.5005.61.html), both in term of speed and bundle size.

## Featuring

- [x] Startup flags

- [x] Getting a random number

- [x] Routing

- [x] Subscription via a JavaScript custom event

- [x] Foreign Function Interface (FFI) using synchronous and asynchronous functions imported from JavaScript

- [x] JSON decoding

- [x] Keyed list

- [x] Unit tests

- [x] Hot Module Replacement (HMR)

- [x] Debugger (via Redux DevTools)

## Prerequisites

To run this example app on your local machine, you will need:

- [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download)

- [pnpm](https://pnpm.io/installation)

- [Node.js](https://nodejs.org/) (can be installed via pnpm with `pnpm env use --global latest`)

- [Redux DevTools](https://github.com/reduxjs/redux-devtools) browser extension for the debugger, and maybe [Preact DevTools](https://preactjs.github.io/preact-devtools/) if you wish to inspect the rendering itself.

- [Ionide](https://ionide.io/) plugin for your IDE is highly recommended.

## Usage

- `pnpm i` to install Node.js dependencies as well as F# dependencies.

- `pnpm start` to start the Vite development server with automatic refresh on http://localhost:5000.

- `pnpm build` to build the bundle, then `pnpm serve` to serve it as a single page application on http://localhost:5000.

- `pnpm test` to run unit tests.

- `pnpm test:watch` to run unit tests in watch mode.

If you get an error like `ENOSPC: System limit for number of file watchers reached`, run `pnpm watchers-fix` to increase the number of watchers on your system. If you want this increase to be permanent, see [this answer on StackOverflow](https://stackoverflow.com/a/55543310/2675387).

## License

[MIT](https://github.com/laurentpayot/fsharp-fable-elmish-example/blob/main/LICENSE)