Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
WebAssembly and .NET
Xamarin in Web browser?
Joanna Lamch
2018
WebAssembly and .NET
• Web / JavaScript History
• Web Assembly what?
• Web Assembly why?
• Web Assembly how?
• Xamarin? Mo...
• Joanna Lamch
• JLamch@gmail.com
• JLamch.blogspot.com
• Impostor
Who am I ?
Joanna Lamch
JLamch@gmail.com
JLamch.net
Pro...
Back in the days…
1991
Hypertext, HTML, HTTP
Text displayed on a electronic devices with
references (hyperlinks) to other text that the reader
ca...
1996
created in 10 days in May 1995, by Brendan Eich for Netscape
Adding interactivity to HTML pages
JavaScript
1995
JavaScript
1995
JavaScript
1995
Other plugins
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
All of them are deprecated
or will be dep...
Browser performance wars (2008+)
Browser performance wars (2008+)
https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/
...
Browser performance wars (2008+)
Different way the same language
there is a LOT of JavaScript
Todays JavaScript
JavaScript is the language of the Web
But i...
WebAssembly is not designed to replace JS, but to coexist
A new low-level binary format for the web (WASM)
It’s a bytecode...
A low-level binary format
WebAssembly Why?
Offer maximized performance
Security it runs locally so it's more secure
Compil...
WASM opens possibilities for other languages
Emscripten is a source-to-source compiler that runs as a back end to
the LLVM compiler and produces a subset of JavaScript...
$emcc –s WASM=1 -o example.js example.cpp
WebAssembly How?
Executes the Emscripten compiler
Name our output file
Emscripte...
WebAssembly studio C/Rust/TypeScript
https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
WASM in real world
Figma
https://www.figma.com/
https://www.youtube.com/
watch?v=Kf1gILChfks
http://through-the-interface.typepad.com/through_the_interface/2018/03/the-future-of-autocad.html
WASM in real world
Figma
https://www.figma.com/
https://www.youtube.com/watch?v=Kf1gILChfks
Other demos
https://s3.amazona...
DOM manipulation and Web.API
Multithreading (with shared memory)
Garbage Collector
More fully supported languages
WebAssem...
Stable, mature, productive: .NET Standard, MSBuild
Fast, scalable, reliable: .NET Core for backend services
Modern languag...
WASM and C# - first of all MONO
https://github.com/migueldeicaza/mono-wasm
https://www.mono-project.com/news/2018/09/11/cs...
BrowserB
WASM + C#
JavaScript Interop
Interop
UI thread
Blazor
Browser + Razor = Blazor!
.cs
.cshtml
BROWSER
WebAssembly
(mono.wasm)
.NET
(mscorlib.dll, System.Core.dll...
Blazor client only
Blazor sample
Blazor client & server
Client-side Blazor in Web Worker (future)
Browser
UI Web Worker
Blazor
Frank A. Kruger
Because I can
Because I love Xamarin
Because I can’t create web pages
https://github.com/praeclarum/Ooui
O...
Xamarin.Forms
iOS Renderers Android Renderers Windows Renderers
Shared C# App Logic
(ViewModels, Models etc)
Mono .NET
DLL...
Ooui
C# Platform Specific C# Platform Specific C# Platform Specific
iOS Renderers Android Renderers Windows Renderers
Shar...
OOUI + WASM
C# Runtime
Business Logic
Xamarin.Forms
Ooui
Shared C# App Logic
(ViewModels, Models etc)
DLLs
Shared C# UI Co...
OOUI + WASM
C# Runtime
Business Logic
Xamarin.Forms
Shared C# App Logic
(ViewModels, Models etc)
DLLs
Shared C# UI Code
(X...
UNO
https://platform.uno/
UNO
Uno
Xamarin Forms
Platforms iOS, Android, UWP, Wasm iOS, Android, UWP, WPF, macOS, Wasm
WebAssembly Yes Yes
Dev Loop Windo...
https://raytracer-mono-aot.platform.uno/
50x faster
Uno & Mono AOT
Possibilities
Flexibility
Diversity
Cross-platform
Promise of bright tomorrow for todays projects
So WebAssembly?
WebAssembly and .NET
•Web Assembly - everything
•Blazor - Razor
•Ooui – Xamarin.Forms
•Uno – UWP, SilverLight…
Questions?
Bibliography
https://webassembly.org/docs/high-level-goals/
https://www.youtube.com/watch?v=HktWin_LPf4&feature=
youtu.be
...
Ankieta / Poll
Będzie mi miło móc ulepszyć moją prezentację
dzięki Twoim komentarzom, dlatego proszę Cię
o wypełnienie ank...
Joanna Lamch
JLamch@gmail.com
JLamch.net
WebAssembly and .NET
Próxima SlideShare
Cargando en…5
×

WebAssembly and .NET

47 visualizaciones

Publicado el

WebAssembly will be the next big thing in IT and in Web Developement world. But web developlemnt is a JavaScript doman. What it has to do with .NET and C#? Well Microsoft is experimenting with Blazor and other companies and community members with different aproaches like Ooui and Uno. All of that sits on top of Mono! Long storie short - WebAssembly in a nutshell

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

WebAssembly and .NET

  1. 1. WebAssembly and .NET Xamarin in Web browser? Joanna Lamch 2018
  2. 2. WebAssembly and .NET • Web / JavaScript History • Web Assembly what? • Web Assembly why? • Web Assembly how? • Xamarin? Mono! • Blazor • Ooui • Uno jlamch.net
  3. 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. 4. Back in the days…
  5. 5. 1991
  6. 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. 7. 1996
  8. 8. created in 10 days in May 1995, by Brendan Eich for Netscape Adding interactivity to HTML pages JavaScript 1995
  9. 9. JavaScript 1995
  10. 10. JavaScript 1995
  11. 11. Other plugins Java Applets [1997] ActiveX [1996] Flash [1996] Silverlight [2007] All of them are deprecated or will be deprecated soon 1996+
  12. 12. Browser performance wars (2008+)
  13. 13. Browser performance wars (2008+) https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/ OdinMonkey / ASM.js
  14. 14. Browser performance wars (2008+)
  15. 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. 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. 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. 18. WASM opens possibilities for other languages
  19. 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. 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. 21. WebAssembly studio C/Rust/TypeScript https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
  22. 22. WASM in real world Figma https://www.figma.com/ https://www.youtube.com/ watch?v=Kf1gILChfks
  23. 23. http://through-the-interface.typepad.com/through_the_interface/2018/03/the-future-of-autocad.html
  24. 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. 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. 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. 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. 28. BrowserB WASM + C#
  29. 29. JavaScript Interop
  30. 30. Interop
  31. 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. 32. Blazor client only
  33. 33. Blazor sample
  34. 34. Blazor client & server
  35. 35. Client-side Blazor in Web Worker (future) Browser UI Web Worker Blazor
  36. 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. 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. 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. 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. 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. 41. UNO https://platform.uno/
  42. 42. UNO
  43. 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. 44. https://raytracer-mono-aot.platform.uno/ 50x faster Uno & Mono AOT
  45. 45. Possibilities Flexibility Diversity Cross-platform Promise of bright tomorrow for todays projects So WebAssembly?
  46. 46. WebAssembly and .NET •Web Assembly - everything •Blazor - Razor •Ooui – Xamarin.Forms •Uno – UWP, SilverLight… Questions?
  47. 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. 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. 49. Joanna Lamch JLamch@gmail.com JLamch.net

×