![Other plugins
Java Applets [1997]
ActiveX [1996]
Flash [1996]
Silverlight [2007]
All of them are deprecated
or will be deprecated soon
1996+](https://image.slidesharecdn.com/webassembly-public-181104113511/85/WebAssembly-and-NET-11-320.jpg)
WebAssembly and .NET
- 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
- 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
- 22. WASM in real world Figma https://www.figma.com/ https://www.youtube.com/ watch?v=Kf1gILChfks
- 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
- 27. 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
- 28. 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
- 31. Interop
- 32. UI thread Blazor Browser + Razor = Blazor! .cs .cshtml BROWSER WebAssembly (mono.wasm) .NET (mscorlib.dll, System.Core.dll,…) App.dll Compile to .NET assemblies
- 34. Blazor sample
- 35. Blazor client & server
- 36. Client-side Blazor in Web Worker (future) Browser UI Web Worker Blazor
- 37. 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!
- 38. 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
- 39. 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
- 40. 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,…)
- 41. 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,…)
- 43. UNO
- 44. 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
- 46. Possibilities Flexibility Diversity Cross-platform Promise of bright tomorrow for todays projects So WebAssembly?
- 47. WebAssembly and .NET •Web Assembly - everything •Blazor - Razor •Ooui – Xamarin.Forms •Uno – UWP, SilverLight… Questions?
- 49. 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ą
Editor's Notes
- #2: dziekuje ze tak licznie przybyliscie na moja prezentacje i mozliwosc podzielenia się z wami odrobina wiedzy jaka zebrałam …. Nie wiem co dodac Chciałabym wam przybliżyć choć trochę temat web assembly –
- #3: Q Kto jest web developerem Kto xam devem Kto desktop WPF UWP QR ze szczegolami skąd się wzięło, dlaczego się pojawilo co to w ogóle jest Jak można napisac Troche powiem o tym czego jeszcze brakuje i co gogle planuje dalej Co do tego wszystkiego ma xamarin I opowiem o kilku frameworkach które kręcą się wokół tego tematu
- #4: O mnie… Funboy MS Glownie tego co sie dzieje dookola ms – grupy spolecznosci ludzie Te tapety sa wyrazem ms wychodzacego do programistow Strasznie mi sie podobalo to co ms robil do tej pory dla devow, proba ocieplenia wizerunku
- #5: Ale zacznijmy od malego skosu w histori
- #6: August 6, 1991 Tim Berners-Lee CERN (on NeXT computer) Hypertext linki I zawartosc
- #7: Tylko zawartosc I linki statycznie
- #8: Pojawily sie obrazki ale nadal statycznie Wyszukiwarki wyszukiwaly zawartosc
- #9: 10 days prototype as Java like language JavaScript enables interactive web pages and thus is an essential part of web applications. Dowcipkowal ze zrobil to na kacu
- #10: JS jezyk zrozumialy dla ludzi – latwy do zrozumienia Dynamiczne typy Ale czytelna dla developera – trade off ByteCode is run in interpretor
- #11: Nie zaprojektowana aby była szybka Jest wolniej ale jest latwo uzywac wiec wszyscy się na to godza. Poprostu parsowanie I wykonanie. powolne
- #12: 2007 W miedzyczasie potrzeba innych jezykow, Potrzeba potezniejszych narzedzi, wiekszych mozliwosci Ale ogromne dziury w zabezpieczeniach I podatnosc na ataki
- #13: 2009 node.js and server side JS Coraz lepsze silniki. V8 Chrom, SpiderMonkey – Firefox Chakra – Edge Nitro, SquirrelFish, JavaScriptCore -Safari
- #14: Optymalizacja w trakcie uruchomienia OdynMonkey uzywal kompilacji AOT in runtime kbum
- #15: Ten wykres moze sie roznic z program na program. Ale jest ten etap reorganizacji kodu I compilacji na zasadzie przygotowania do uzycia
- #16: Obecnie JS jest wszedzie. Jest go strasznie duzo Niski prog wejscia, obietnica zycia w swiecie IT Ogromne zapotrzebowanie Ogromne mozliwosci Najbardziej uniwersalna platforma – WEB JS jest jezykiem internetu Ale nie jest jezykiem Assembly – jest human readable language
- #17: Compile target for web (bytecode) Uses linear memory WebAssembly (abbreviated Wasm) 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.
- #19: Rust C C++ GO Kotlin Python Haskell TypeScript Java Hax
- #20: Not designed to replaced JS compilator https://en.wikipedia.org/wiki/Emscripten 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.[3] It can also produce WebAssembly.[4] 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. asm.js about 5 years ago - plugins time virtual runtime in js virtual machine
- #23: Autodesk okolo roku od pierwszego spojrzenia na technologie w pelni dzialajaca aplikacja
- #25: Pogrubiony – Maszyna wirtualna linuxowa z osadzonym Windows2000
- #26: Multithreading chrome 70
- #28: LLVM bitcode
- #29: LLVM bitcode Mono jest napisane w C++
- #30: LLVM bitcode
- #31: WASM calls JS JS calls into WASM
- #32: https://codedaze.io/creating-blazor-component-libraries/ https://codedaze.io/blazor-bites-javascript-interop/
- #37: Desktop apps with Electron – apps for linux also
- #39: XAML
- #43: Nventive
- #44: UWP XAML
- #45: .net core 3 I wpf !
- #51: Dziekuje wam za wysluchanie I zachecam do eksperymentowania z webassemblies