WebAssembly, the final frontier. These are the voyages of the web developer. Its continuing mission: to explore strange new worlds, to seek out new technologies and new platforms, to boldly go where no one has gone before. Yes indeed! with Wasm, JavaScript is no longer the only practical runtime language of choice. Enter Blazor WebAssembly! It enables you to write complete web apps over open web standards in.. well.. C#! You might be wondering how you can do that, how it should look like, and whether it is a sane choice (and rightfully so). Join me in this session as we cover the emergence of WebAssembly into the app world while using Blazor and C#.

1. Building Web Apps with
WebAssembly and Blazor
Amir Zuker
Senior Software Architect
Founder, Head of Web and Mobile
Twitter: @AmirZuker

2. For many years now..

3. JavaScript is the primary runtime
language for web apps..

5. Demo
Spotify Client

6. About Me
6
Amir Zuker
 Mentor, leader, architect, developer, instructor, author and speaker
 Over 20 years of experience in the field
 Leads teams and R&D divisions
 Several publications and contributions
 Head of Web and Mobile at CodeValue

7. Agenda
 Overview
 Portability and how
 Potential impact
 Overview
 Behind the scenes
 Key features
7

8. WebAssembly
8

9. WebAssembly (Wasm)
9
"WebAssembly is a binary instruction format for
a stack-based virtual machine.
Wasm is designed as a portable target for
compilation of high-level languages like
C/C++/Rust, enabling deployment on the web
for client and server applications"
https://webassembly.org/

10. WebAssembly (Wasm)
10
CHOOSE
LANGUAGE
BINARY
FORMAT
NOT ONLY FOR
BROWSERS
PORTABLE PERFORMANCE SECURED
SANDBOXING

11. Compilation Target for Higher-level Languages
C
C++
Rust
Blazor
Go
…
wasm
Compile to wasm

12. Wasm can be executed in other technologies too
13
https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

13. WebAssembly JavaScript Integration
* By Lin Clark, Till Schneidereit, Luke Wagner - https://mzl.la/2TEUrej

14. Portable and Interoperable
15

15. Portable and Interoperable
16https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/?spm=a2c65.11461447.0.0.44244e03zyfYOa

16. WebAssembly System Interface (WASI) as POSIX
17https://github.com/bytecodealliance/wasmtime/blob/master/docs/WASI-overview.md

17. Demo
Rust+Wasm
18

18. WebAssembly System Interface (WASI)
19

19. Not perfect yet
BUT.. continuing investment
20

20. Already Used in The Wild..
21
Adobe Lightroom
Autodesk AutoCAD
Unreal Engine
Unity Engine
Quake
Gutenberg post
parser (Rust)
Barcode scanner

21. 22
WebAssembly (Wasm)
 Neither Web nor Assembly, but Revolutionary!
 Not here to replace JavaScript (yet?)
 Key benefits
 Can use a preferred language
 Portable and interoperable
 Compact and performant

22. Blazor WebAssembly
Browser + Razor = Blazor
23

23. 24
Blazor – In a Nutshell
 A component driven framework
 Build rich web apps using .NET, C# and Razor
 Works on modern browsers
 Interoperable
 Supports SPA, PWA and Server

24. Blazor Hosting Models
25
- UI interaction and logic runs on server-side
- Leverages web sockets
- Static assets! Runs only in the browser.
- Leverages WebAssembly

25. Demo
Unboxing:
Blazor WebAssembly
27

26. What's behind the scenes?
28

27. Browser Runtime
29
Razor Files
(.razor)
C# Code
(.cs)
Compiled assembly
(.dll)
.NET runtime assemblies
(mscorlib, netstandard, etc.)
3rd party imports
(any .NET standard compliant)
dotnet.wasm
browser version of the mono .NET runtime, compiled to wasm, allows to bootstrap and execute .net standard assemblies
JavaScript interop
blazor.webassembly.js, dotnet.<ver>.js, dom updates, event interceptions, etc.
Browser API's
(DOM updates, event forwarding, canvas, storage, etc.)

28. Blazor RenderTree
30
https://dzone.com/articles/comparing-native-blazor-components-to-wrapped-java

29. Blazor Reconciliation
31
https://dzone.com/articles/comparing-native-blazor-components-to-wrapped-java

30. Much is in the box!
32

31. Dependency Injection
 Manage services and dependencies
 Control lifetime and scope
33

32. Authentication / Authorization
34
- Open ID Connect
- OAuth
- Local identities
- Access scopes and claims
- Etc.

33. Forms and Validation
35
@code

34. Internationalization
 Manage resource dictionaries
 Supports formatting numbers, dates, etc.
 Sets .NET thread culture to browser setting by default
36

35. Routing
37

36. JavaScript Interop
 .NET  JS / JS  .NET
 Use existing libraries or browser API's (mileage may vary)
 Many existing 3rd party packages already fill the gap
 Can do it yourself when needed via JavaScript runtime interop
 Supports static and instance members
38

37. Progressive Web App (PWA)
 Web app  Native like
 Smooth, immersive
 Push notifications
 Offline support
 Installable
 Includes a built-in PWA template
39

38. And more!
40
Precompilation
Caching
Dynamic Components
Content Projection
Templates
WebSocket
Http
Data Binding
Events
Parameters (input/props)
Event:Modifiers
Debugging
Code-Sharing
Element References
Cascading Values
Lifecycle Hooks
gRPC-Web
Layouts
Lists+Keys
Configuration

39. Demo
Interop
41

40. Blazor – What's Coming
 Component API Enhancements
 Type constraints, required parameters, IAsyncDisposable, SVG, etc.
 CSS isolation
 Hot reloading
 AoT compilation
 Multithreaded runtime
 Lazy loading
42

41. No .NET products / skillset?
Supporting older browsers?
No additional compute perf? (perhaps)
App-first, bread and butter, limit risk?
Limited tolerance for gaps?
Specific tech? (DICOM, WebGL, GIS, etc.)
Probably not..
Cool Stuff! But Should I?
43
.NET products and skillset? Plus reuse?
Modern browsers?
Additional compute perf? (perhaps)
Tolerate risk?
Tolerate gaps?
No specific tech or ready for short POC's?
Why not?
Maybe?

43. Resources
 WebAssembly
 https://developer.mozilla.org/en-US/docs/WebAssembly
 https://webassembly.org/
 Blazor
 https://blazor.net
 https://docs.microsoft.com/en-us/aspnet/core/blazor/
 https://github.com/AdrienTorris/awesome-blazor
 Demos
 https://github.com/Spoonbender/wasm-demo
 https://github.com/azuker/blazor-interop
 https://aka.ms/blazor-carchecker
 https://channel9.msdn.com/Events/Build/2020/BOD104
46

44. Amir Zuker
Senior Software Architect
Founder, Head of Web and Mobile
Twitter: @AmirZuker

45. Q
A
48

46. Amir Zuker
Senior Software Architect
Founder, Head of Web and Mobile
Twitter: @AmirZuker