The document discusses WebAssembly (Wasm), a low-level code format designed for efficient execution in web browsers, and its integration with C# through the Blazor framework. Blazor allows developers to use C# in the browser, providing features like components, routing, and JavaScript interop. Despite being in its early stages, WebAssembly and Blazor are positioned as promising technologies for enhancing web development functionality.

1. Oleksandr Skachkov, Itera
Running C# in your Web Browser with
WebAssembly

2. ABOUT ME
• Itera’s FrontEnd Tech Lead
• WebKit contributor
• WebAssembly enthusiast
• Twitter: @alSkachkov

3. • JavaScript in the Web
• WebAssembly’s key features
• WebAssembly and C#
• Blazor

4. JavaScript has monopoly in the Web

5. C# developer asked to do some JavaScript

10. New solution!

12. Blazor on WebAssembly

14. • Announced in 17 June 2015
• Supported by major Browsers
• Developed by WebAssembly Working
Group (W3C)
• Draft specific published 15 Feb 2018
WebAssembly – New Hope

15. What is WebAssembly (aka WASM)?

16. safe, portable, low-level code format designed for efficient execution
and compact representation
https://webassembly.github.io/spec/intro

17. C - Source code

18. RUST - Source code

19. S - Expression

20. fast to load
Byte code

22. WebAssembly’s key features

23. quick validation (parsing)

24. S-expression

25. S-expression

26. $0 10
Stack
S-expression

27. $0
10
10 * $0
Stack
S-expression

28. 10 * $0
Stack
S-expression

29. Streaming API

30. 1

31. 3 2 1

32. 5 4 3 2 1

33. No garbage collector

34. Only 4 primitive types

35. No access to DOM and WEB API

36. INTERACTION WITH JAVASCRIPT
We can use JS function in WASM and WASM function in JS

37. WEBASSEMBLY WILL BRING TO WEB
• High performance
• New languages
• Variety of existed libraries

38. WebAssembly and C#

39. .NET RUNTIME
• Mono
• https://github.com/mono/mono
• https://github.com/lrz/mono-wasm
• CoreRT
• https://github.com/dotnet/corert
• https://github.com/dotnet/llilc

40. WEBASSMBLY .NET FRAMEWORKS
• Blazor - https://github.com/aspnet/Blazor
• Xamarin.FORMS - https://github.com/praeclarum/Ooui
• NoesisGUI - http://www.noesisengine.com

41. BLAZOR. KEY FEATURES
• Built specially for SPA
• Use C# in Browser!
• Own shadow DOM
• Same codebase for both ENDS

42. BLAZOR
• Blazor concept announced at NDC Jul 10 2017
• Bring C# to the WEB
• Blazor = Browser + Razor
• At start relied on DotNetAnywere
• Currently relies on Mono WebAssembly
• Current version 0.1.0
• Not a new Silverlight!

43. CLR IN BROWSER

44. HOW BLAZOR WORKS

45. BLAZOR. FEATURES
Components
Routing
Binding
Dependency injection
HTTP Calls
JavaScript interop
Support asm.js for old browsers

46. COMPONENTS
• C# class from .cshtml
• Master page
• Reusable components
• Shadow DOM and diff base update
• Can be created fully in C#
• Life cycle methods/event, ie onInit …

47. COMPONENT

48. ROUTING

49. BINDING

50. BINDING

51. BINDING

52. BINDING

53. DEPENDENCY INJECTION

54. HTTP CALLS

55. JAVASCRIPT INTEROP: JS FROM C#

56. JAVASCRIPT INTEROP: C# FROM JS

57. JAVASCRIPT INTEROP: C# FROM JS

58. SOME MORE
REDUX: https://github.com/torhovland/blazor-redux
Entity Framework: https://www.c-sharpcorner.com/article/asp-net-core-crud-
using-blazor-and-entity-framework-core/

59. BLAZOR. HOW TO START
https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-
net-web-apps-in-the-browser-with-blazor/
https://learn-blazor.com/

60. SUMMARY
• WebAssembly is an emerging technology
• Blazor on earliest stages
• Blazor very promising Framework
• Large build package for the Web

61. RESOURCES
• Blazor: https://learn-blazor.com
• Blazor github: https://github.com/aspnet/Blazor
• Blazor gitter: aspnet/Blazor
• Steven Sanderson: http://blog.stevensanderson.com
• WebAssembly Site: http://webassembly.org/
• Github: https://github.com/WebAssembly/

62. THANKS!

63. QUESTIONS?