webassembly and · compiled from other languages sandboxed runtime in js virtual machine security...
TRANSCRIPT
![Page 1: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/1.jpg)
WebAssembly and .NET
Joanna Lamch
2019
![Page 2: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/2.jpg)
Who am I ?Joanna Lamch
Microsoft fangirlDeveloper C#
.NET Framework 1.115 years (+ overtime)XamarinSIENN
CommunityŚląska Grupa MicrosoftWomen In TechnologyGruba.IT
![Page 3: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/3.jpg)
![Page 4: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/4.jpg)
Back in the days…
![Page 5: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/5.jpg)
1991
![Page 6: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/6.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 7: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/7.jpg)
created in 10 days in May 1995, by Brendan Eich for Netscape
Adding interactivity to HTML pages
1995
JavaScript
![Page 8: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/8.jpg)
1995
JavaScript
![Page 9: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/9.jpg)
JavaScript
1995
![Page 10: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/10.jpg)
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
Other plugins
1996+
![Page 11: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/11.jpg)
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
All of them are deprecated
or will be deprecated soon
Other plugins
1996+
![Page 12: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/12.jpg)
Browser performance wars (2008+)
![Page 13: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/13.jpg)
Browser performance wars (2008+)
![Page 14: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/14.jpg)
Browser performance wars (2008+)
https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/
ASM.js
OdinMonkey
![Page 15: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/15.jpg)
Browser performance wars (2008+)
![Page 16: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/16.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 17: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/17.jpg)
Todays JavaScript
![Page 18: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/18.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 19: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/19.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 20: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/20.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 21: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/21.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 22: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/22.jpg)
WASM opens possibilities for other languages
![Page 23: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/23.jpg)
WASM opens possibilities for other languages
![Page 24: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/24.jpg)
WASM opens possibilities for other languages
![Page 25: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/25.jpg)
• Compilation target
Binary so compact
• 4 types, 67 instructions, stack machine
WebAssembly current state: MVP
• Linear memory
• Fast execution
![Page 26: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/26.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 27: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/27.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 28: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/28.jpg)
WebAssembly studio C/Rust/TypeScript
https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
![Page 29: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/29.jpg)
http://mbebenita.github.io/WasmExplorer/
https://wasdk.github.io/WasmFiddle/
https://webassembly.studio/
Demo
![Page 30: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/30.jpg)
WasmExplorer
https://bit.ly/2JkqFYt
![Page 31: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/31.jpg)
WasmExplorer
https://bit.ly/2JkqFYt
![Page 32: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/32.jpg)
![Page 33: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/33.jpg)
![Page 34: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/34.jpg)
![Page 35: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/35.jpg)
![Page 36: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/36.jpg)
![Page 37: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/37.jpg)
Figma
https://www.figma.com
https://www.youtube.com/watch?v=Kf1gILChfks
WASM in real world
![Page 38: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/38.jpg)
WASM in real world
http://through-the-interface.typepad.com/through_the_interface/2018/03/the-future-of-autocad.html
![Page 39: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/39.jpg)
![Page 40: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/40.jpg)
http://www.continuation-labs.com/projects/d3wasm/?fbclid=IwAR2V9OqEDgu3bu-vMNlxcZCUOm0HQAlv6ys-jcZGSMQY56saD8FYrHdVx_s
![Page 41: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/41.jpg)
https://bellard.org/jslinux/vm.html?url=https://bellard.org/jslinux/win2k.cfg&mem=192&graphic=1&w=1024&h=768
![Page 42: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/42.jpg)
http://assets.metacade.com/emulators/win311vr.html?fbclid=IwAR11_ewC5oIgxnF8esrmlqDCTnn99jQZVLlkVdQyGQhFZePgRaIH-X4ef4g
![Page 43: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/43.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 44: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/44.jpg)
![Page 45: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/45.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 46: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/46.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 47: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/47.jpg)
Interpreter mode vs AOT compiled
![Page 48: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/48.jpg)
XAML standard is ready
XAML for desktop app
![Page 49: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/49.jpg)
XAML standard is ready and dead
XAML for desktop app
![Page 50: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/50.jpg)
XAML standard is ready and dead
• Xamarin.Forms
• UWP
• Silverlight
• WPF
XAML for desktop app
![Page 51: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/51.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 52: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/52.jpg)
UNO
![Page 53: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/53.jpg)
FrogUI
https://www.lesarde.com/
![Page 54: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/54.jpg)
Blazor? Razor components ?
![Page 55: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/55.jpg)
Blazor
https://github.com/aspnet/AspNetCore/issues/8931
![Page 56: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/56.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 57: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/57.jpg)
Razor Component razorcomponent [C#] Web/ASP.NET
Razor Page page [C#] Web/ASP.NET
MVC ViewImports viewimports [C#] Web/ASP.NET
MVC ViewStart viewstart [C#] Web/ASP.NET
Blazor (server-side) blazorserverside [C#] Web/Blazor
Blazor (ASP.NET Core hosted) blazorhosted [C#] Web/Blazor/Hosted
Blazor Library blazorlib [C#] Web/Blazor/Library
Blazor (client-side) blazor [C#] Web/Blazor/Standalone
ASP.NET Core Empty web [C#], F# Web/Empty
ASP.NET Core Web API webapi [C#], F# Web/WebAPI
Razor Class Library razorclasslib [C#] Web/Razor/Library/Razor Class Library
Blazor new project
![Page 58: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/58.jpg)
Blazor client-side
C:\Projects> dotnet new blazor -n JLBlazorExample
![Page 59: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/59.jpg)
Blazor client
C:\Projects> dotnet new blazor
![Page 60: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/60.jpg)
![Page 61: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/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: SampleBlazor:
![Page 62: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/62.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 63: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/63.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 64: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/64.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 65: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/65.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 66: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/66.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 67: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/67.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 68: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/68.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: UsingBlazor:
![Page 69: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/69.jpg)
JavaScript interop
![Page 70: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/70.jpg)
BrowserB
WASM + C#
![Page 71: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/71.jpg)
Blazor sample in browser
![Page 72: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/72.jpg)
![Page 73: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/73.jpg)
![Page 74: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/74.jpg)
![Page 75: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/75.jpg)
![Page 76: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/76.jpg)
![Page 77: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/77.jpg)
Browser
UI Thread
Let’s switch elements places
Server
dotnet
SignalRJavaScriptBlazor
ComponentsBlazor
![Page 78: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/78.jpg)
Blazor server-side
JavaScript
![Page 79: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/79.jpg)
Blazor server-side
C:\Projects> dotnet new blazorserverside -n JLBlazorServerSide
![Page 80: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/80.jpg)
Blazorserver-side
![Page 81: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/81.jpg)
Blazorserver-side
![Page 82: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/82.jpg)
public class Program { //Blazor client side
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder().UseBlazorStartup<Startup>();
}
public class Program { //Blazor server side
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(webBuilder =>
{webBuilder.UseStartup<Startup>();});
}
public class Startup {
public void ConfigureServices(IServiceCollection services) {
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}
![Page 83: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/83.jpg)
UI component ecosystem
![Page 84: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/84.jpg)
Blazor: possibilities
https://www.youtube.com/watch?v=qrf3OrLHeFISteve Sanderson - Blazor, a New .NET Single Page Application Framework | Øredev 2018
![Page 85: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/85.jpg)
What’s the future?
![Page 86: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/86.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 87: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/87.jpg)
• fast callsJS <~> wasm
• esy and fastdata exchange
• ES module integration
• toolchain integrationlike npm or webpack
• backward compatibility
What WebAssembly are next to?
![Page 88: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/88.jpg)
Hight level language features
• GC integration
• Exception handling
• Debugging
• Tail cals
What WebAssembly are next to?
![Page 89: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/89.jpg)
Security Portability
WASI – WebAssembly System Interface
![Page 90: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/90.jpg)
CloudFlare
https://blog.cloudflare.com/cloud-computing-without-containers/https://www.youtube.com/watch?v=A9SydP1CcZU
![Page 91: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/91.jpg)
CloudFlare no more cold starts?
![Page 92: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/92.jpg)
Possibilities
FlexibilityDiversity
Cross-platform
Promise of bright tomorrow for todays projects
So WebAssembly?
![Page 94: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/94.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ą
![Page 95: WebAssembly and · Compiled from other languages Sandboxed runtime in JS virtual machine Security it runs locally in JS VM Supported in all big browsers –W3C open specification](https://reader034.vdocuments.net/reader034/viewer/2022050508/5f990e511b77df079e0c0a35/html5/thumbnails/95.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