![Page 1: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/1.jpg)
WebAssembly and .NET
Joanna Lamch
2019
![Page 2: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/2.jpg)
• Who am I ?• Joanna Lamch
• Microsoft fangirl• Developer C#
.NET Framework 1.115 years (+ overtime)XamarinSIENN
• CommunityŚląska Grupa MicrosoftWomen In TechnologyGruba.IT
![Page 3: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/3.jpg)
Back in the days…
![Page 4: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/4.jpg)
1991
![Page 5: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/5.jpg)
Hypertext, HTML, HTTP
ypertext" is also used to describe tables, images, and other content formats with integrated hyperlinks. Hypertext
Hypertext documents are interconnected by hyperlinks, which are activated by a mouseClick, keypress set or by touching the screen
![Page 6: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/6.jpg)
created in 10 days in May 1995, by Brendan Eich for Netscape
Adding interactivity to HTML pages
1995
JavaScript
![Page 7: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/7.jpg)
1995
JavaScript
![Page 8: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/8.jpg)
JavaScript
1995 https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/ Lin Clark
![Page 9: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/9.jpg)
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
Other plugins
1996+
![Page 10: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/10.jpg)
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
All of them are deprecated
or will be deprecated soon
Other plugins
1996+
![Page 11: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/11.jpg)
Browser performance wars (2008+)
![Page 12: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/12.jpg)
Browser performance wars (2008+)
![Page 13: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/13.jpg)
Browser performance wars (2008+)
https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/
ASM.js
OdinMonkey
![Page 14: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/14.jpg)
Browser performance wars (2008+)
![Page 15: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/15.jpg)
Different way the same language
There is a LOT of JavaScript
Todays JavaScript
JavaScript is the language of the Web
But it’s not very good Assembly Language(still human readable simple language)
![Page 16: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/16.jpg)
Todays JavaScript
![Page 17: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/17.jpg)
WebAssembly What? Why?
A new low-level binary format for the web (WASM)
It’s a bytecode for web / compilation target maximized performance
![Page 18: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/18.jpg)
WebAssembly What? Why?
Sandboxed runtime in JS virtual machineSecurity it runs locally in JS VM
WebAssembly is not designed to replace JS, but to coexist
A new low-level binary format for the web (WASM)
It’s a bytecode for web / compilation target maximized performance
![Page 19: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/19.jpg)
WebAssembly What? Why?
Sandboxed runtime in JS virtual machineSecurity it runs locally in JS VM
Supported in all big browsers –W3C open specification
WebAssembly is not designed to replace JS, but to coexist
A new low-level binary format for the web (WASM)
It’s a bytecode for web / compilation target maximized performance
![Page 20: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/20.jpg)
WebAssembly What? Why?
Compiled from other languages
Sandboxed runtime in JS virtual machineSecurity it runs locally in JS VM
Supported in all big browsers –W3C open specification
WebAssembly is not designed to replace JS, but to coexist
A new low-level binary format for the web (WASM)
It’s a bytecode for web / compilation target maximized performance
![Page 21: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/21.jpg)
WASM opens possibilities for other languages
![Page 22: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/22.jpg)
• Compilation target
Binary so compact
• 4 types, 67 instructions, stack machine
WebAssembly current state: MVP
• Linear memory
• Fast execution
![Page 23: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/23.jpg)
• Compilation target
Binary so compact
• 4 types, 67 instructions, stack machine
• Linear memory
• Fast execution
• No Web APIs, DOMaccess/manipulation
•or not so fastnot so fast load
• no Threads
WebAssembly current state: MVP
![Page 24: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/24.jpg)
WebAssembly How?
executes the Emscripten compiler name our output file
Emscripten outputs WebAssembly - switch input file
$emcc –s WASM=1 -o example.js example.cpp
![Page 25: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/25.jpg)
WebAssembly studio C/Rust/TypeScript
https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
![Page 26: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/26.jpg)
http://mbebenita.github.io/WasmExplorer/
https://wasdk.github.io/WasmFiddle/
https://webassembly.studio/
Demo
![Page 27: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/27.jpg)
WasmExplorer
https://bit.ly/2JkqFYt
![Page 28: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/28.jpg)
![Page 29: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/29.jpg)
![Page 30: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/30.jpg)
![Page 31: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/31.jpg)
![Page 32: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/32.jpg)
Figma
https://www.figma.com
https://www.youtube.com/watch?v=Kf1gILChfks
WASM in real world
![Page 33: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/33.jpg)
WASM in real world
http://through-the-interface.typepad.com/through_the_interface/2018/03/the-future-of-autocad.html
![Page 34: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/34.jpg)
http://www.continuation-labs.com/projects/d3wasm/?fbclid=IwAR2V9OqEDgu3bu-vMNlxcZCUOm0HQAlv6ys-jcZGSMQY56saD8FYrHdVx_s
![Page 35: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/35.jpg)
https://bellard.org/jslinux/vm.html?url=https://bellard.org/jslinux/win2k.cfg&mem=192&graphic=1&w=1024&h=768
![Page 36: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/36.jpg)
http://assets.metacade.com/emulators/win311vr.html?fbclid=IwAR11_ewC5oIgxnF8esrmlqDCTnn99jQZVLlkVdQyGQhFZePgRaIH-X4ef4g
![Page 37: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/37.jpg)
• WASM in real world
Figmahttps://www.figma.com/
https://www.youtube.com/watch?v=Kf1gILChfks
https://s3.amazonaws.com/mozilla-
games/ZenGarden/EpicZenGarden.html?fbclid=IwAR0_uAensGfTj1Mzp4wXgVoxZjquxRo_uu2YD8yDuleTpPohaXyilDd82X8
https://bellard.org/jslinux/vm.html?url=https://bellard.org/jslinux/win2k.cfg&mem=192&graphic=1&w=1024&h=768
https://aesalazar.github.io/AsteroidsWasm/
http://sqliteefcore-wasm.platform.uno/
https://raytracer-mono-aot.platform.uno/
http://www.continuation-labs.com/projects/d3wasm/?fbclid=IwAR2V9OqEDgu3bu-vMNlxcZCUOm0HQAlv6ys-
jcZGSMQY56saD8FYrHdVx_s
http://assets.metacade.com/emulators/win311vr.html?fbclid=IwAR11_ewC5oIgxnF8esrmlqDCTnn99jQZVLlk
VdQyGQhFZePgRaIH-X4ef4g
![Page 38: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/38.jpg)
![Page 39: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/39.jpg)
Stable, mature, productive: .NET Standard, MSBuild
Fast, scalable, reliable: .NET Core for backend services
Modern languages: Innovations in C#, F#, Razor
First-rate dev tools: Visual Studio, IntelliSense
Solid foundation to build on
Leverage existing skills and knowledge
Because We can
Why use .NET for browser apps?
.NET
![Page 40: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/40.jpg)
C# in wasm ? Mono !
https://github.com/migueldeicaza/mono-wasmhttps://www.mono-project.com/news/2018/09/11/csharp-jit/https://twitter.com/migueldeicaza/status/1039639597435641856
![Page 41: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/41.jpg)
Interpreter mode vs AOT compiled
![Page 42: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/42.jpg)
XAML standard is ready
XAML for desktop app
![Page 43: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/43.jpg)
XAML standard is ready and dead
XAML for desktop app
![Page 44: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/44.jpg)
XAML standard is ready and dead
• Xamarin.Forms
• UWP
• Silverlight
• WPF
XAML for desktop app
![Page 45: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/45.jpg)
Ooui
C# Platform Specific C# Platform Specific C# Platform Specific
iOS Renderers Android Renderers Windows Renderers
Shared C# App Logic
(ViewModels, Models etc.)
Mono .NET
DLLs(external packages & libraries)
Shared C# UI Code(Xamarin.Forms XAML)
Web Platform Specific
Web Renderers
![Page 46: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/46.jpg)
UNO
![Page 47: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/47.jpg)
FrogUI
https://www.lesarde.com/
![Page 48: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/48.jpg)
Blazor? Razor components ?
![Page 49: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/49.jpg)
Blazor? Razor components? It’s complicated
https://github.com/aspnet/AspNetCore/issues/8931
![Page 50: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/50.jpg)
Blazor new project
![Page 51: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/51.jpg)
UI thread
Blazor
Blazor client-side
.cs
.cshtml
BROWSER
WebAssembly(mono.wasm)
.NET(mscorlib.dll, System.Core.dll,…)
App.dllCompile to .NET
assemblies
![Page 52: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/52.jpg)
Blazor client-side
C:\Projects> dotnet new blazor
![Page 53: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/53.jpg)
Blazor client
![Page 54: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/54.jpg)
![Page 55: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/55.jpg)
@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" /><p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor: SampleBlazor:
![Page 56: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/56.jpg)
Blazor: Routing
@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" /><p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor:
![Page 57: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/57.jpg)
Blazor: Razor template
@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" />
<p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor:
![Page 58: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/58.jpg)
Blazor: C#@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" /><p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor:
![Page 59: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/59.jpg)
Blazor: One way data binding@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" />
<p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {
int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor:
![Page 60: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/60.jpg)
Blazor: Two way data binding@page "/counter"@inject HttpClient
<h1>Counter</h1>
<input type="number" bind="IncrementAmount" />
<p>Current count: @currentCount</p><button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;
int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor:
![Page 61: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/61.jpg)
@page "/counter"@inject HttpClient
<h1>Counter</h1><input type="number" bind="IncrementAmount" /><p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {int currentCount = 0;int IncrementAmount { get; set; } = 1;
void IncrementCount(){
currentCount += IncrementAmount;}
}
Blazor: Event bindingBlazor:
![Page 62: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/62.jpg)
Blazor sample in browser
![Page 63: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/63.jpg)
![Page 64: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/64.jpg)
Browser
UI Thread
Let’s switch elements places
Server
dotnet
SignalRJavaScriptRazor
ComponentsBlazor
![Page 65: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/65.jpg)
Blazor server-side
JavaScript
![Page 66: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/66.jpg)
Blazor server-side
C:\Projects> dotnet new razorcomponents -n JLBlazorComponents
![Page 67: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/67.jpg)
Blazorserver-side
![Page 68: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/68.jpg)
Blazorserver-side
![Page 69: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/69.jpg)
Blazor hosted
C:\Projects> dotnet new blazorhosted -n JLHostedBlazor
![Page 70: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/70.jpg)
Blazor: possibilities
https://www.youtube.com/watch?v=qrf3OrLHeFISteve Sanderson - Blazor, a New .NET Single Page Application Framework | Øredev 2018
![Page 71: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/71.jpg)
What’s the future?
![Page 72: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/72.jpg)
Loadtime improvements
• streaming compilation• tiered compilation• implicit HTTP caching• other improvements
Making useof modern Hardware• threading• SIMD• wasm 64bit
https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
What WebAssembly are next to?
![Page 73: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/73.jpg)
• fast callsJS <~> wasm
• esy and fastdata exchange
• ES module integration
• toolchain integrationlike npm or webpack
• backward compatibility
What WebAssembly are next to?
![Page 74: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/74.jpg)
Hight level language features
• GC integration
• Exception handling
• Debugging
• Tail cals
What WebAssembly are next to?
![Page 75: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/75.jpg)
CloudFlare
https://blog.cloudflare.com/cloud-computing-without-containers/https://www.youtube.com/watch?v=A9SydP1CcZU
![Page 76: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/76.jpg)
CloudFlare no more cold starts?
![Page 77: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/77.jpg)
Possibilities
FlexibilityDiversity
Cross-platform
Promise of bright tomorrow for todays projects
Questions??
So WebAssembly?
![Page 78: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/78.jpg)
Thank you ☺ Joanna [email protected]
JLamch.net
ProgramistkaIKot.pl
Działanie pociąga za sobą koszty i ryzyko, ale o wiele mniejsze niż te, które wiążą się z wygodną bezczynnością
![Page 79: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/79.jpg)
• Bibliografia
• https://webassembly.org/docs/high-level-goals/
• https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/
• https://www.youtube.com/watch?v=HktWin_LPf4&feature=youtu.be
• https://www.youtube.com/watch?v=pBYqen3B2gc
• https://www.youtube.com/watch?v=BnYq7JapeDAhttps://www.youtube.com/watch?v=kS29TT4wk44&feature=youtu.be
• https://github.com/mbasso/awesome-wasm
• https://github.com/migueldeicaza/mono-wasm
• https://superkotlin.com/kotlin-and-webassembly/
• https://medium.com/@mumarov/how-to-get-started-with-kotlin-native-and-web-assembly-baa2813f0d9
• https://github.com/DenisKolodin/yew
• https://www.mergeconflict.fm/89• https://dotnetrocks.com/?show=1539• https://dotnetrocks.com/?show=1540• https://dotnetrocks.com/?show=1537
• https://www.hanselman.com/blog/NETAndWebAssemblyIsThisTheFutureOfTheFrontend.aspxhttps://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
• https://github.com/migueldeicaza/mono-wasm?WT.mc_id=-blog-scottha
• https://blog.scottlogic.com/ceberhardt/
• https://blog.logrocket.com/working-with-the-blazor-javascript-interop-3c2a8d0eb56chttps://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.htmlhttps://blog.logrocket.com/working-with-the-blazor-javascript-interop-3c2a8d0eb56c
![Page 80: WebAssembly and - jlamch.netWebAssembly is not designed to replace JS, but to coexist A new low-level binary format for the web (WASM) It’s a bytecode for web / compilation target](https://reader034.vdocuments.mx/reader034/viewer/2022052408/5f0ef47e7e708231d441c366/html5/thumbnails/80.jpg)
• Ankieta
• Będzie mi miło móc ulepszyć moją prezentację dzięki Twoim komentarzom, dlatego proszę Cię o wypełnienie ankiety, bądź kontakt mailowy.
Działanie pociąga za sobą koszty i ryzyko, ale o wiele mniejsze niż te, które wiążą się z wygodną bezczynnością