WebAssembly (Wasm) promises to change the nature of web applications. However, we should take a look at the needs of the apps decoupled from the browser. Enter open source NGINX Unit. Unit is an application runtime for web apps and APIs. It handles the HTTP(S) front end, request routing and serving of assets, including the hand-off of dynamic requests. In short, Unit decouples the HTTP server from the application process. And it’s an excellent fit for Wasm’s sandboxed execution and linear memory byte streams.

1. WebAssembly and Web
Awareness With NGINX Unit
Dave McAllister

2. 2
WebAssembly (abbreviated Wasm) is a binary
instruction format for a stack-based virtual
machine.
Wasm is designed as a portable compilation
target for programming languages, enabling
deployment on the web for client and server
applications.
• orders of magnitude smaller than container images
• entirely portable across OS and CPU architectures
• with incredibly low startup latency
• capable of running tens of thousands of requests per second
• capable of running anywhere
• from tiny devices such as Raspberry Pis, in Docker
Desktop, Kubernetes, your desktop or cloud
00 Section Header
What is WebAssembly https://webassembly.org/
🤔

3. 3
What is a Stack-Based-Virtual Machine
Set of Instruction-Types
Instructions: The What and
How
The Program

4. 4
WAT
Rust
C
C++
Go
Python
TypeScript
…
00 Section Header
What can be compiled to
WebAssembly?

5. Who is using it now

6. WebApps
Decoupling FTW! Encourages
choice
Fosters
innovation
Separates
concerns
Frontend
Flash
AJAX
JQuery
Front-end frameworks
WebAssembly
Backend
CGI + POSIX
LAMP stack
Web-native languages
Backend frameworks
Cloud-native languages

7. What developers need
Client Server
POST /api/calculator/v1/add HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 24
Content-Type: application/json
Host: api.example.com
{
"operands": [
0.1,
0.2
]
}
HTTP/1.1 200 OK
Content-Length: 32
Content-Type: application/json
Date: Sat, 02 Sep 2023 15:48:31 GMT
{
"result": 0.30000000000000004
}

8. What developers need
Client Server
POST /api/calculator/v1/add HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 24
Content-Type: application/json
Host: api.example.com
{
"operands": [
0.1,
0.2
]
}
HTTP/1.1 200 OK
Content-Length: 32
Content-Type: application/json
Date: Sat, 02 Sep 2023 15:48:31 GMT
{
"result": 0.30000000000000004
}
require "json"
app = Proc.new do |env|
result = nil
body = JSON.parse(env["rack.input"].read)
body["operands"].each { |operand|
result.nil? ? result = operand : result += operand
}
["200", {
"Content-Type" => "application/json; charset=utf-8",
}, [JSON.pretty_generate({'result' => result})]]
end;
run app

9. WebAssembly is a slam dunk for executing web
applicationsClient Server
POST /api/calculator/v1/add HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 24
Content-Type: application/json
Host: api.example.com
{
"operands": [
0.1,
0.2
]
}
HTTP/1.1 200 OK
Content-Length: 32
Content-Type: application/json
Date: Sat, 02 Sep 2023 15:48:31 GMT
{
"result": 0.30000000000000004
}
BYTE
STREAM
B
S

10. How to build a WebAssembly web app server?
Server
Client
Network
layer
TLS layer
HTTP
layer
Request
routing
Code execution
🤔

11. Separating concerns FTW
Server
Client
Network
layer
TLS layer
HTTP
layer
Request
routing
Code execution
MAGIC
🙌

12. Introducing NGINX Unit
Server
Client
Network
layer
TLS layer
HTTP
layer
Request
routing
unitd: router unitd: app
NGINX Unit
HTTP context passed
over
shared memory

13. 13
00 Section Header
WebAssembly on NGINX Unit
unitd: app
NGINX Unit
unitd: router
shared memory
HTTP context HTTP context
Wasmtime
.wasm module
Initialize & communicate over
linear memory

14. 14
Linear Memory in a Nutshell for non trivial data types
00 Section Header
Host Wasm-Module
Init
Act
Response
Requesting allocation of Memory for X bytes!
Returning a pointer to the begin of the Memory Page
Put rawBytes in Linear Memory
Call the exported Module Function (e.g. http_request_handler)
Returning a Pointer to the Memory Page with the Response
data and its length
Free
Finished Processing. Free Linear memory
🎮
Control over
its’ linear memory

15. 15
NGINX Unit System Architecture

16. What developers need
Client Server
POST /api/calculator/v1/add HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 24
Content-Type: application/json
Host: api.example.com
{
"operands": [
0.1,
0.2
]
}
HTTP/1.1 200 OK
Content-Length: 32
Content-Type: application/json
Date: Sat, 02 Sep 2023 15:48:31 GMT
{
"result": 0.30000000000000004
}
require "json"
app = Proc.new do |env|
result = nil
body = JSON.parse(env["rack.input"].read)
body["operands"].each { |operand|
result.nil? ? result = operand : result += operand
}
["200", {
"Content-Type" => "application/json; charset=utf-8",
}, [JSON.pretty_generate({'result' => result})]]
end;
run app

17. What developers need (unit-wasm edition)
Client Server
GET /hello HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/json
Host: www.example.com
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 14
Server: Unit/1.31.0
Date: Tue, 05 Sep 2023 21:57:03 GMT
Hello, world!
use unit_wasm::rusty::*;
#[no_mangle]
pub extern "C" fn uwr_request_handler(addr: *mut u8) -> i32
{
let ctx = &mut UWR_CTX_INITIALIZER();
let mut request_buf: *mut u8 = std::ptr::null_mut();
uwr_init_ctx(ctx, addr, 4096);
uwr_set_req_buf(ctx, &mut request_buf, LUW_SRB_ALLOC);
uwr_write_str!(ctx, "Hello, world!n");
uwr_http_init_headers(ctx, 2, 0);
uwr_http_add_header_content_type(ctx, "text/plain");
uwr_http_add_header_content_len(ctx);
uwr_http_send_headers(ctx);
uwr_http_send_response(ctx);
uwr_http_response_end();
uwr_free(request_buf);
return 0;
}

18. Developer experience is king, but…
This only works if we have universal portability
WASI-HTTP must ensure separation of concerns
The innovation will follow
This is just the beginning
🤓

19. fin
• unit.nginx.org
• github.com/nginx/unit
• github.com/nginx/unit-wasm
NGINX Unit
• Linkedin : in/davemc
• 𝕏 @dwmcallister
Dave McAllister
NGINX Unit
On GitHub