frameworks using WebAssembly Boyan Mihaylov @boyanio boyan.io - - PowerPoint PPT Presentation

▶
frameworks using webassembly
SMART_READER_LITE
LIVE PREVIEW

frameworks using WebAssembly Boyan Mihaylov @boyanio boyan.io - - PowerPoint PPT Presentation

Feb 01, 2024 280 likes •590 views

The rise of non-JavaScript frameworks using WebAssembly Boyan Mihaylov @boyanio boyan.io WebAssembly ( WASM ) is compiler target for programs on the Web @boyanio @boyanio https://vimeo.com/272924131 The Web of JavaScript frameworks

slide-1
SLIDE 1

The rise of non-JavaScript frameworks using WebAssembly

Boyan Mihaylov @boyanio boyan.io

slide-2
SLIDE 2

WebAssembly (WASM) is compiler target for programs on the Web

@boyanio

slide-3
SLIDE 3

@boyanio https://vimeo.com/272924131

slide-4
SLIDE 4

The Web of JavaScript frameworks

@boyanio

slide-5
SLIDE 5

JavaScript frameworks architecture

@boyanio

.html HTML page compile JavaScript Framework .js Your code .js / .ts .js Compiled app fetch fetch

slide-6
SLIDE 6

How would WebAssembly influence the way we do Web development today?

@boyanio

slide-7
SLIDE 7

Rewriting existing JavaScript frameworks into a language that can be compiled to WebAssembly

@boyanio

1

slide-8
SLIDE 8

WebAssembly-compiled frameworks

@boyanio

.html HTML page compile .js JavaScript glue code Framework’s code .cpp Your code .cpp .wasm Compiled app initialize fetch

slide-9
SLIDE 9

C++/Python → JavaScript → C++/Python

@boyanio https://www.tynwiz.com

slide-10
SLIDE 10

No direct DOM access

@boyanio

index.c main.js

extern void createElement(void); int main(void) { createElement(); createElement(); … return 0; } const imports = { createElement: () => { document.createElement(‘div’); } }; WebAssembly.instantiate(…, imports);

slide-11
SLIDE 11

JavaScript → WebAssembly overhead

@boyanio https://blog.benj.me/2018/07/04/mozilla-2018-faster-calls-and-anyref/

Firefox Firefox 60+

slide-12
SLIDE 12

Easier to create fast native mobile apps

@boyanio

slide-13
SLIDE 13

Rewriting parts of existing JavaScript frameworks into a language that can be compiled to WebAssembly

@boyanio

2

slide-14
SLIDE 14

@boyanio

slide-15
SLIDE 15

@boyanio

https://github.com/vuejs/vue/issues/8193 https://github.com/glimmerjs/glimmer-vm/pull/752

slide-16
SLIDE 16

Writing custom components in a language that can be compiled to WebAssembly

@boyanio

3

slide-17
SLIDE 17

@boyanio

Angular & WebAssembly

https://boyan.io/angular-wasm/

slide-18
SLIDE 18

Emergence of non-JavaScript frameworks using WebAssembly

@boyanio

4

slide-19
SLIDE 19

@boyanio

Blazor

https://blazor.net

slide-20
SLIDE 20

Traditional .NET architecture

@boyanio

.NET Framework CLR Native compile load IL metadata JIT compilation to native code MyApp.dll Source code

slide-21
SLIDE 21

Blazor architecture

@boyanio

mono.wasm Native compile load IL metadata execute compiled by browser’s VM Browser Source code MyApp.dll Blazor.dll netstandard

slide-22
SLIDE 22

@boyanio

React vs. Blazor

https://boyan.io/react-blazor/

slide-23
SLIDE 23

Application structure

@boyanio

Blazor React

slide-24
SLIDE 24

Application structure

@boyanio

Blazor (Root.razor) React (Root.jsx) … render() { return ( <div> <h1>React chat</h1> <NewChatMessage /> <Chat … /> </div> ); } } @page “/” <div> <h1>Blazor chat</h1> <NewChatMessage /> <Chat … /> </div>

slide-25
SLIDE 25

@boyanio https://devblogs.microsoft.com/aspnet/blazor-now-in-official-preview/

slide-26
SLIDE 26

@boyanio

Blazor-inspired framework in Go

https://github.com/bketelsen/wasmplay

slide-27
SLIDE 27

@boyanio

React-inspired framework in Rust

https://github.com/DenisKolodin/yew

slide-28
SLIDE 28

@boyanio

WebAssembly enables different languages to work together on the Web

https://boyan.io/wasm-wheel/

slide-29
SLIDE 29

The future of Web belongs to those, who compile

Boyan Mihaylov / @boyanio / boyan.io