summaryrefslogtreecommitdiffhomepage
path: root/resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introductio...
diff options
context:
space:
mode:
authorCamil Staps2021-06-23 19:20:29 +0200
committerCamil Staps2021-06-23 19:20:29 +0200
commitbbc049b5c7749b8f9c4e1ade9cf1da4f91f37c0d (patch)
tree9fe20b0549b51a7165b847ac1a6a5f56a128ff92 /resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md
parentAdd author on articles (diff)
Add article series on the clean sandbox
Diffstat (limited to 'resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md')
-rw-r--r--resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md83
1 files changed, 83 insertions, 0 deletions
diff --git a/resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md b/resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md
new file mode 100644
index 0000000..b118b28
--- /dev/null
+++ b/resources/md/2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.md
@@ -0,0 +1,83 @@
+*My [interpreter][abc-interpreter] for the pure, functional language [Clean][]
+allows interpretation in both C and WebAssembly. The Clean compiler is written
+in Clean, with a C backend. In my [Clean Sandbox][], I compile the C backend
+with [Emscripten][] to [WebAssembly][], and interpret the Clean frontend in the
+WebAssembly interpreter. Combined with a simple `make`-like tool and an editor,
+this allows you to compile and run Clean code in the browser.*
+
+[[toc]]
+
+# Introduction
+
+Browsers can run programs in only few languages; mainly JavaScript. But
+JavaScript is a high-level scripting language that makes it hard to optimize
+performance. [WebAssembly][] operates on a lower level than JavaScript, is more
+complicated to write code in, but is a relatively easy compilation target for
+common imperative languages like C. This means that C applications and
+libraries can be ported to the browser relatively easily.
+
+However, WebAssembly lacks some features that make it a difficult compilation
+target for functional programming languages (in particular, non-local control
+flow and tail calls). Some of these omissions are being implemented as post-MVP
+features, but until then we need a workaround.
+
+Back in 2019 I implemented such a workaround for the pure, functional
+programming language [Clean][] (a close cousin of Haskell). The Clean compiler
+compiles to the intermediate language ABC, which is designed for an abstract
+imperative machine for graph rewriting. This ABC code is then converted to
+actual machine code. My solution, published in IFL'2019,[^ifl-2019] involves an
+interpreter for this intermediate ABC language. The interpreter logic is
+written in a DSL which targets both C and WebAssembly, so that you can run it
+both natively and in the browser.
+
+Initially, we used this system in the [iTasks][] framework for workflow
+management web applications. There, it allows you to send arbitrary Clean
+values (including thunks) to the browser for evaluation there. This has two
+benefits: (1) reducing server load by evaluating more on the client; (2) the
+ability to write custom frontend components in Clean, which allows you to make
+use of the same utility functions, the benefits of strong typing, etc.
+
+However, the ABC interpreter is more widely applicable than the iTasks system.
+To demonstrate this, I set out to run the Clean compiler itself in the browser.
+You can see the result in the [Clean Sandbox][].
+
+# High-level overview
+
+In the end, the architecture turned out to be relatively simple. I needed the
+following components:
+
+- A file system to keep the files (taken from the Emscripten library).
+- A simple `make`-like tool that checks which files have been modified and
+ calls the compiler for those files only.
+- The compiler frontend (written in Clean), running in the ABC interpreter.
+- The compiler backend (written in C), compiled with Emscripten to
+ WebAssembly.
+- A linker for the generated ABC files (written in C, compiled to WebAssembly).
+- The ABC interpreter to run the resulting 'executable'.
+- A nice editor to let the user modify his Clean code. I use something based on
+ the [Monaco Editor][], but will not discuss it here as I want to focus on the
+ build pipeline.
+
+Apart from the `make`-like tool, all these components were already available, I
+only had to connect them together.
+
+*Continue to read about the [implementation details][pipeline].*
+
+[^ifl-2019]:
+ Camil Staps, John van Groningen and Rinus Plasmeijer, 2019.
+ [Lazy Interworking of Compiled and Interpreted Code for Sandboxing and Distributed Systems](https://camilstaps.nl/assets/pdf/ifl2019.pdf),
+ in Jurriën Stutterheim and Wei Ngan Chin (eds.),
+ *Implementation and Application of Functional Languages (IFL '19), September 25–27, 2019, Singapore, Singapore*.
+ doi: [10.1145/3412932.3412941](https://doi.org/10.1145/3412932.3412941)
+
+[abc-interpreter]: https://gitlab.com/clean-and-itasks/abc-interpreter/
+[Clean]: http://clean.cs.ru.nl/
+[Clean Sandbox]: https://camilstaps.gitlab.io/clean-sandbox/
+[Emscripten]: https://emscripten.org/
+[iTasks]: https://gitlab.com/clean-and-itasks/itasks-sdk/
+[Monaco Editor]: https://microsoft.github.io/monaco-editor/
+[WebAssembly]: https://webassembly.org/
+
+[introduction]: 2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-1-introduction.html
+[pipeline]: 2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-2-the-pipeline.html
+[integration]: 2021-06-23-compiling-clean-in-the-browser-with-webassembly-part-3-putting-it-all-together.html