The backends being merged into GHC is great news for developers and businesses using Haskell for web development. It should enable big advancements in the Haskell ecosystem. Hopefully, it will make Haskell a solid option not only for the backend, but also for the frontend.
I have tried multiple times to use Haskell for front-end development and got frustrated every single time. Despite having some great frameworks such as miso and reflex, the tooling is always a pain if you don’t use the standard
linux/amd64 platform. In my case, I switch between macOS, windows and linux. There is a non-trivial amount of time that needs to be invested into creating all the boilerplate to use the language on different operating systems. Using Elm was the easy choice in some of the occasions.
As it is still not trivial to setup Haskell for doing frontend, I listed what I did so far to make it work for me using a M1 Mac.
ghcup and other distribution channels provide binaries for the same platform of the host system. Luckily, it is not that hard to compile GHC.
The output of the
emconfigure command on macOS should be similar to the one below. Note the version of the GHC is going to be whatever is on
master branch, in the time of writing it is
There are two examples to start with. The first is the simplest Hello World application which outputs a text to Console. Create the file below, and, free free to name it
HelloJS.hs. Check the official documentation for more details.
The example below creates a program with a basic DOM manipulation to insert a text to the HTML document that can be loaded from a browser.
The output also generates a
index.html file which can be accessed via a browser.
Using the GHC WebAssembly backend Link to heading
I didn’t manage to compile a native binary of the WebAssembly backend yet, however, I created a docker image that can be used for experimenting the backend.
You can give it a go by doing:
# Create a simple example echo 'main = putStrLn "hello world"' > hello.hs # Compile to WebAssembly using docker docker run -it --platform linux/amd64 \ -v `pwd`:/app adrianomelo/ghc-wasm:latest \ /usr/local/bin/wasm32-wasi-ghc/bin/wasm32-wasi-ghc \ /app/hello.hs # Execute the output file using `wasmtime` wasmtime hello.wasm # Output: "Hello World"
Conclusion Link to heading
It is still early days for Haskell in the frontend. There are many things to be improved until it can comparable to more streamline languages. The two new features is a big step for the entire ecosystem. I will be following its steps closely and hope to share some of the findings and knowledge here.
It has a been a while since I posted something online, feel free to reach out to me regarding any of the topics from the blog posts. You can find my social media links on the home page.