1.
WebAssembly and .NET
Xamarin in Web browser?
Joanna Lamch
2018

2.
WebAssembly and .NET
• Web / JavaScript History
• Web Assembly what?
• Web Assembly why?
• Web Assembly how?
• Xamarin? Mono!
• Blazor
• Ooui
• Uno
jlamch.net

3.
• Joanna Lamch
• JLamch@gmail.com
• JLamch.blogspot.com
• Impostor
Who am I ?
Joanna Lamch
JLamch@gmail.com
JLamch.net
ProgramistkaIKot.pl
Microsoft fanboy
Developer C#
.NET Framework 1.1
15 years (+ overtime)
Xamarin
SIENN
Śląska Grupa Microsoft
Women In Technology
Impostor

4.
Back in the days…

5.
1991

6.
Hypertext, HTML, HTTP
Text displayed on a electronic devices with
references (hyperlinks) to other text that the reader
can immediately access.
Hypertext documents are interconnected by
hyperlinks, which are activated by a mouseClick,
keypress set or by touching the screen. „Hypertext"
is also used to describe tables, images, and
other content formats with integrated hyperlinks.
Hypertext is one of the key underlying concepts of
the WorldWide Web, where Web pages are often
written in the Hypertext Markup Language (HTML).
As implemented on the Web, hypertext enables the
easy-to-use publication of information over
the Internet.
The HypertextTransfer Protocol (HTTP) is
an application protocol for distributed, collaborative,
and hypermedia information systems. HTTP is the
protocol to exchange or transfer hypertext.

7.
1996

8.
created in 10 days in May 1995, by Brendan Eich for Netscape
Adding interactivity to HTML pages
JavaScript
1995

9.
JavaScript
1995

10.
JavaScript
1995

11.
Other plugins
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
All of them are deprecated
or will be deprecated soon
1996+

12.
Browser performance wars (2008+)

13.
Browser performance wars (2008+)
https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/
OdinMonkey / ASM.js

14.
Browser performance wars (2008+)

15.
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)

16.
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)
WebAssembly What?
Sandboxed runtime in JS virtual machine
Supported in all big browsers

17.
A low-level binary format
WebAssembly Why?
Offer maximized performance
Security it runs locally so it's more secure
Compiled from other languages

18.
WASM opens possibilities for other languages

19.
Emscripten is a source-to-source compiler that runs as a back end to
the LLVM compiler and produces a subset of JavaScript known
as asm.js. It can also produce WebAssembly. This allows applications
and libraries originally designed to run as standard executables to be
integrated into client side web applications. asm.js can be compiled by
browsers ahead of time meaning that the compiled programs can run
much faster than those traditionally written in JavaScript.
WebAssembly How?

20.
$emcc –s WASM=1 -o example.js example.cpp
WebAssembly How?
Executes the Emscripten compiler
Name our output file
Emscripten outputs WebAssembly - switch
Input file

21.
WebAssembly studio C/Rust/TypeScript
https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/

22.
WASM in real world
Figma
https://www.figma.com/
https://www.youtube.com/
watch?v=Kf1gILChfks

23.
http://through-the-interface.typepad.com/through_the_interface/2018/03/the-future-of-autocad.html

24.
WASM in real world
Figma
https://www.figma.com/
https://www.youtube.com/watch?v=Kf1gILChfks
Other demos
https://s3.amazonaws.com/mozilla-
games/ZenGarden/EpicZenGarden.html?fbclid=IwAR0_uAensGfTj1Mzp4wXgVoxZjquxRo_uu2YD8
yDuleTpPohaXyilDd82X8
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/

25.
DOM manipulation and Web.API
Multithreading (with shared memory)
Garbage Collector
More fully supported languages
WebAssembly future
https://www.youtube.com/watch?v=BnYq7JapeDA

26.
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
BecauseWe can
Why use .NET for browser apps?
.NET

27.
WASM and C# - first of all MONO
https://github.com/migueldeicaza/mono-wasm
https://www.mono-project.com/news/2018/09/11/csharp-jit/
https://twitter.com/migueldeicaza/status/1039639597435641856

28.
BrowserB
WASM + C#

29.
JavaScript Interop

30.
Interop

31.
UI thread
Blazor
Browser + Razor = Blazor!
.cs
.cshtml
BROWSER
WebAssembly
(mono.wasm)
.NET
(mscorlib.dll, System.Core.dll,…)
App.dll
Compile to .NET
assemblies

32.
Blazor client only

33.
Blazor sample

34.
Blazor client & server

35.
Client-side Blazor in Web Worker (future)
Browser
UI Web Worker
Blazor

36.
Frank A. Kruger
Because I can
Because I love Xamarin
Because I can’t create web pages
https://github.com/praeclarum/Ooui
OOUI pronounced weee!

37.
Xamarin.Forms
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)
C# Platform Specific C# Platform Specific C# Platform Specific

38.
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

39.
OOUI + WASM
C# Runtime
Business Logic
Xamarin.Forms
Ooui
Shared C# App Logic
(ViewModels, Models etc)
DLLs
Shared C# UI Code
(Xamarin.Forms XAML)
Web Renderers
Mono.wasm.NET
(mscorlib.dll, System.Core.dll,…)

40.
OOUI + WASM
C# Runtime
Business Logic
Xamarin.Forms
Shared C# App Logic
(ViewModels, Models etc)
DLLs
Shared C# UI Code
(Xamarin.Forms XAML)
Web Renderers
Mono.wasm
WHAAAT??
.NET
(mscorlib.dll, System.Core.dll,…)

41.
UNO
https://platform.uno/

42.
UNO

43.
Uno
Xamarin Forms
Platforms iOS, Android, UWP, Wasm iOS, Android, UWP, WPF, macOS, Wasm
WebAssembly Yes Yes
Dev Loop Windows-first, XAML Edit & Continue,
C# Edit & Continue
Hot-reload
Cross Platform Controls Full, Control templating, Data templating,
Styling, Rich Animations
Platform Specific Styles, Renderers per platform,
Limited Animations
XAML Standard Full (UWP) Limited
UWP Code Support MVVM Light, MS XAML Behaviors,
MVVM Cross (soon),
Reactive UI, Any UWP Project
MVVM Light, MVVM Cross, Reactive UI
Responsive Design Visual State Manager,
State Triggers, Adaptive Triggers
Visual State Manager
Platform Specific Native Controls &
Properties via
conditional namespaces
Renderers/effects

44.
https://raytracer-mono-aot.platform.uno/
50x faster
Uno & Mono AOT

45.
Possibilities
Flexibility
Diversity
Cross-platform
Promise of bright tomorrow for todays projects
So WebAssembly?

46.
WebAssembly and .NET
•Web Assembly - everything
•Blazor - Razor
•Ooui – Xamarin.Forms
•Uno – UWP, SilverLight…
Questions?

47.
Bibliography
https://webassembly.org/docs/high-level-goals/
https://www.youtube.com/watch?v=HktWin_LPf4&feature=
youtu.be
https://www.youtube.com/watch?v=pBYqen3B2gc
https://www.youtube.com/watch?v=BnYq7JapeDA
https://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/NETAndWebAssemblyIsT
hisTheFutureOfTheFrontend.aspx
https://hacks.mozilla.org/2018/04/sneak-peek-at-
webassembly-studio/
https://github.com/migueldeicaza/mono-wasm?WT.mc_id=-blog-
scottha
https://blog.logrocket.com/working-with-the-blazor-javascript-interop-
3c2a8d0eb56c
https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
https://blog.logrocket.com/working-with-the-blazor-javascript-
interop-3c2a8d0eb56c

48.
Ankieta / Poll
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.
I will be pleased to be able to improve my
presentation thanks to your comments, so
please fill in the questionnaire or contact me
via email.
Działanie pociąga za sobą
koszty i ryzyko, ale o wiele
mniejsze niż te, które wiążą
się z wygodną bezczynnością

49.
Joanna Lamch
JLamch@gmail.com
JLamch.net