From b677d3bb3d6c8fbb0b61621cc8ac53a7d68fa949 Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Wed, 12 Feb 2020 09:04:53 -0300 Subject: wip --- ...2020-02-11-on-webassembly-killing-javascript.md | 206 +++++++++++++++++++++ tmp/add.c | 13 ++ tmp/add.h | 3 + tmp/api-posix.c | 15 ++ tmp/api-wasm.js | 7 + tmp/api.h | 2 + tmp/index.html | 14 ++ tmp/main.c | 12 ++ tmp/main.js | 1 + tmp/server.py | 15 ++ 10 files changed, 288 insertions(+) create mode 100644 _posts/2020-02-11-on-webassembly-killing-javascript.md create mode 100644 tmp/add.c create mode 100644 tmp/add.h create mode 100644 tmp/api-posix.c create mode 100644 tmp/api-wasm.js create mode 100644 tmp/api.h create mode 100644 tmp/index.html create mode 100644 tmp/main.c create mode 100644 tmp/main.js create mode 100755 tmp/server.py diff --git a/_posts/2020-02-11-on-webassembly-killing-javascript.md b/_posts/2020-02-11-on-webassembly-killing-javascript.md new file mode 100644 index 0000000..bab3b6e --- /dev/null +++ b/_posts/2020-02-11-on-webassembly-killing-javascript.md @@ -0,0 +1,206 @@ +--- +title: On WebAssembly killing JavaScript +date: 2020-02-11 +layout: post +lang: en +ref: on-webassembly-killing-javascript +--- +When discussing WebAssembly (WASM), I often see people portraiting it too much +as a JavaScript replacement, but I think this framing misses the point of some +of the aspects on how WASM can be a great tool: being a portability oportunity, +which means increasing the reach to code. + +If you think of WASM strictly as a optimization of JavaScript, that's where +you'll end up: WASM is the same as JavaScript, but faster. + +But there's a more interesting aspect (to me) of it: portability. That means you +can now write multiplatformr code that runs everywhere. I mean, everywhere, even +in the browser. Let's imagine how you could write SQLite and mke it run on the Web. + +# SQLite + + If I were to create, say, SQLite today, I would consider adding +web support for it. SQLite already is available everywhere[^1]. This is due to +it having very few dependencies and + +Imagine having writing SQLite today + +There are also other legimate uses of WASM, such as WASI and etc. + +Here's how I would start writing an application that could run on any POSIX +system and, on top of that, could run on the browser: + +``` +// api.h + +extern void platformDependentPersistInt(int); +extern int platformDependentRetrieveInt(); + + +// api-posix.c + +/* POSIX implementation of "api.h" interface to be used in non-web contexts */ + +#include + +void platformDependentPersistInt(int n) { + FILE* fp = fopen("/tmp/persisted.txt", "w+"); + fprintf(fp, "%d", n); + fclose(fp); +} + +int platformDependentRetrieveInt() { + FILE* fp = fopen("/tmp/persisted.txt", "r"); + int persisted = fgetc(fp); + return persisted; +} + + +// api-wasm.js + +/* WASM implementation of "api.h" interface to be used in web contexts */ + +export const platformDependentPersistInt = (n) => + localStorage.setItem("persisted", n.toString()); + +export const platformDependentRetrieveInt = () => + parseInt(localStorage.getItem("persisted")); + + +// add.h + +int add(int a, int b); +void persistInt(int n); +int retrieveInt(); + + +// add.c + +#include "api.h" + +int add(int a, int b) { + return a * a + b; +} + +void persistInt(int n) { + platformDependentPersistInt(n); +} + +int retrieveInt() { + return platformDependentRetrieveInt(); +} +``` + +``` +// main.c + +#include +#include "add.h" + +int main() { + int added = add(4, 5); + printf("Adding 4 and 5: %d\n", added); + + persistInt(6); + int persisted = retrieveInt(); + printf("Persisted number: %c\n", persisted); + return 0; +} + + +// index.html + + +``` + +In order to +``` +// server.py + +#!/usr/bin/env python +import SimpleHTTPServer +import SocketServer + +PORT = 8001 + +class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler): + pass + +Handler.extensions_map['.wasm'] = 'application/wasm' + +httpd = SocketServer.TCPServer(("", PORT), Handler) + +print "serving at port", PORT +httpd.serve_forever() +``` + +Dependency graph: +FIXME +api-posix.c api-wasm.js +api.h +add.h +add.c +main.c index.html + +Compiling and running the POSIX code: +```shell +$ clang -o add main.c add.c api-posix.c +$ ./add +Adding 4 and 5: 21 +Persisted number: 6 +``` + +Compiling and running the WASM +```shell +$ clang \ + --target=wasm32 \ + -nostdlib \ + -Wl,--no-entry \ + -Wl,--export-all \ + -Wl,--allow-undefined \ + -o add.wasm \ + add.c +$ ./server.py +``` + +After opening the browser, the console shows: +``` +Adding 4 and 5: 21 +Persisted number: 6 +``` + +Rust, C, Zig + +No Emscripten, no GC, no runtime + +Emscripten 11KB + +# Limitations + +"System call" cost in WebAssembly. + +WASM is very new, no flush guarantees. + +Confusing dependency tree + +AFAICT you can't package WASM with JavaScript. + + +[^1]: [Platforms supported by SQLite are](https://sqlite.org/features.html): + "Android, *BSD, iOS, Linux, Mac, Solaris, VxWorks, and Windows (Win32, + WinCE, WinRT) are supported out of the box. Easy to port to other systems". + +https://sqlite.org/selfcontained.html diff --git a/tmp/add.c b/tmp/add.c new file mode 100644 index 0000000..99267ed --- /dev/null +++ b/tmp/add.c @@ -0,0 +1,13 @@ +#include "api.h" + +int add(int a, int b) { + return a * a + b; +} + +void persistInt(int n) { + platformDependentPersistInt(n); +} + +int retrieveInt() { + return platformDependentRetrieveInt(); +} diff --git a/tmp/add.h b/tmp/add.h new file mode 100644 index 0000000..54c0712 --- /dev/null +++ b/tmp/add.h @@ -0,0 +1,3 @@ +int add(int a, int b); +void persistInt(int n); +int retrieveInt(); diff --git a/tmp/api-posix.c b/tmp/api-posix.c new file mode 100644 index 0000000..9f51967 --- /dev/null +++ b/tmp/api-posix.c @@ -0,0 +1,15 @@ +/* POSIX implementation of "api.h" interface to be used in non-web contexts */ + +#include + +void platformDependentPersistInt(int n) { + FILE* fp = fopen("/tmp/persisted.txt", "w+"); + fprintf(fp, "%d", n); + fclose(fp); +} + +int platformDependentRetrieveInt() { + FILE* fp = fopen("/tmp/persisted.txt", "r"); + int persisted = fgetc(fp); + return persisted; +} diff --git a/tmp/api-wasm.js b/tmp/api-wasm.js new file mode 100644 index 0000000..50e1392 --- /dev/null +++ b/tmp/api-wasm.js @@ -0,0 +1,7 @@ +/* WASM implementation of "api.h" interface to be used in web contexts */ + +export const platformDependentPersistInt = (n) => + localStorage.setItem("persisted", n.toString()); + +export const platformDependentRetrieveInt = () => + parseInt(localStorage.getItem("persisted")); diff --git a/tmp/api.h b/tmp/api.h new file mode 100644 index 0000000..9b8d27d --- /dev/null +++ b/tmp/api.h @@ -0,0 +1,2 @@ +extern void platformDependentPersistInt(int); +extern int platformDependentRetrieveInt(); diff --git a/tmp/index.html b/tmp/index.html new file mode 100644 index 0000000..b222149 --- /dev/null +++ b/tmp/index.html @@ -0,0 +1,14 @@ + diff --git a/tmp/main.c b/tmp/main.c new file mode 100644 index 0000000..0ae18f7 --- /dev/null +++ b/tmp/main.c @@ -0,0 +1,12 @@ +#include +#include "add.h" + +int main() { + int added = add(4, 5); + printf("Adding 4 and 5: %d\n", added); + + persistInt(6); + int persisted = retrieveInt(); + printf("Persisted number: %c\n", persisted); + return 0; +} diff --git a/tmp/main.js b/tmp/main.js new file mode 100644 index 0000000..3c105b2 --- /dev/null +++ b/tmp/main.js @@ -0,0 +1 @@ +import * as wasm from './' diff --git a/tmp/server.py b/tmp/server.py new file mode 100755 index 0000000..a76c833 --- /dev/null +++ b/tmp/server.py @@ -0,0 +1,15 @@ +#!/usr/bin/env python +import SimpleHTTPServer +import SocketServer + +PORT = 8001 + +class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler): + pass + +Handler.extensions_map['.wasm'] = 'application/wasm' + +httpd = SocketServer.TCPServer(("", PORT), Handler) + +print "serving at port", PORT +httpd.serve_forever() -- cgit v1.2.3