This codebase is a re-implementation of the Elm "backoffice" web application, found here, in Haskell. It was developed for a Medium article that explores how to apply Domain-Driven Design in an edge-computing environment. More details are covered in the article.
Note: This codebase originated as a fork of ghc-wasm-miso-examples.
Note: The Medium article is here
This project uses the GHC WebAssembly backend with MISO and jsaddle-wasm to produce browser-compatible WebAssembly. Tailwind CSS is used for styling.
The structure closely follows its Elm counterpart and results in a Single-Page Application (SPA). The source directory is organized as follows:
- Pages: Top-level pages.
- Components: Reusable components, both stateful and stateless.
- Data: Records, decoders, and functions for communication with external sources.
The code uses foreign import javascript and foreign export javascript statements for interoperation with the JavaScript environment. For instance:
- src/Routes.hs contains the application’s routing logic.
- js/routing.js serves as its JavaScript counterpart.
This application also demonstrates the use of HTML Web Components. See js/components.js for details.
A hosted version of the application is available at https://backoffice-hs.software-craftsmen.dev.
The resulting WebAssembly file is 2.3 MB (uncompressed) and 941 KB (compressed with zstd). It works in all recent major browsers.
To install dependencies, first install the NIX package manager on your system. Then, run the following commands:
nix develop
wasm32-wasi-cabal update
make build@debugTo start a local HTTP server and view the application, run:
make serve