.NET in the browser: Cross-platform Single Page Applications with WebAssembly & ASP.NET Blazor - erm, really?

Very early data about and views on WebAssembly and ASP.NET Blazor for running native code and .NET-based SPAs in the browser.
*Very experimental technologies*

Transcript

1. .NET im Browser ? Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor – echt jetzt? Christian Weyer @christianweyer CTO Sebastian Gingter @phoenixhawk Architect ACHTUNG : Experim entelle Technologien & Tooling!
2. § Co-founder, co-owner and CTO at Thinktecture AG § Focus on § Mobile & web-based application architectures § Pragmatic end-to-end solutions § Cloud-native architectures § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § christian.weyer@thinktecture.com § ! @christianweyer § Consultant & Architect at Thintecture AG § Focus on § Flexible and scalable backend architectures § Developer productivity § Software Quality measures § All things .NET § sebastian.gingter@thinktecture.com § ! @phoenixhawk Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor .NET im Browser Christian Weyer Sebastian Gingter
3. 3 § Modern Business Applications § The Web & Single Page Applications § WebAssembly as a native bytecode for the Web § ASP.NET Blazor: an experimental project for .NET-based SPAs § Q&A Topics .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
4. 4 Modern Business Applications .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
5. 5 § Native operating systems & platforms get less important for users § Windows, Linux, macOS, Android, iOS: a mixture of everything, anywhere § Desktop is still important, not everything is mobile § Software developers need to care about & target ubiquitous systems § Depending on the actual audience, on the actual use cases § The web has proven to be a universal platform Modern Business Applications .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
6. 6 § Single Page Applications (SPAs) are the new smart clients § JavaScript is the language for the web § Various SPA frameworks have conquered the world in the past years § AngularJS § React § Angular § Vue.js § Etc. § Strongly-typed languages like TypeScript make lives of .NET developers a lot easier Modern Business Applications & the Web .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
7. 7 § Migrating existing code to the web is desirable for some application endeavours § Sharing code/logic for more complex scenarios is not easy for .NET- based backends § Using existing special purpose libraries written in any language is not possible § Seeking superior performance for some use cases § Some developers really want to get rid of JavaScript ! “Houston, we have some problems” .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
8. 8 § Strict subset of JavaScript that can be used as a low-level, efficient target language for compilers § Effectively describes a sandboxed virtual machine for memory-unsafe languages like C or C++ § Combination of static and dynamic validation allows JavaScript engines to employ an ahead-of-time (AOT) optimizing compilation strategy for valid asm.js code § But it is not enough, yet § https://brendaneich.com/2015/06/from-asm-js-to-webassembly/ Still JavaScript: asm.js .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
9. 9 WebAssembly .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
10. 10 § Low-level bytecode for the web – but why? § Because JavaScript ! (but not a replacement for JavaScript!) § Bring any language into the browser § Superior performance § Goals § Fast, efficient, portable § Readable and debuggable § Use existing sandboxing tools § Don’t break the web § Binary (.wasm) & text (.wat) format § Officially open source § http://webassembly.github.io/spec/core/index.html Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor .NET im Browser WebAssembly (WASM)
11. 11 § Entire code base in WebAssembly § Main app frame in WebAssembly, UI in JavaScript / HTML / CSS § Re-use existing code by targeting WebAssembly, embedded in larger JavaScript / HTML application § Anything from simple helper libraries, to compute-oriented task offload Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor .NET im Browser WASM-based Applications
12. 12 Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor .NET im Browser WASM Simple Sample
13. 13 § C/C++ tools & compilers § Binaryen: compiler and toolchain infrastructure library for WebAssembly, written in C++ § LLVM. The modern C/C++ compiler toolchain § Emscripten: LLVM-to-JavaScript-or-WASM compiler § Tools cross-compiling from major languages § mono-wasm from C# § Cheerp from C++ § TeaVM from Java § Rust § WebAssembly Studio: playing around with WASM in the browser WASM Tooling .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts
14. 14 § Mono is Microsoft’s strategy for cross-platforms mobile applications § Xamarin is based on Mono § Support .NET Standard § Mono team is working on tooling to compile Mono/.NET code to WASM § mono-wasm § JIT § AOT Mono & WASM .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/
15. 15 § After v1 (the MVP), the consortium keeps working on new features § Threads § Garbage Collection § Direct DOM access § Many more things… § See https://github.com/WebAssembly/design/blob/master/FutureFeatures.md WASM: Here & to Stay .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
16. 16 ASP.NET Blazor .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
17. 17 § Blazor is an experimental Single Page Application (SPA) framework for .NET § … and it changes every day § Blazor projects run 100% in the browser § On top of a WASM build of the Mono .NET runtime § Compiled .NET assemblies are loaded into the browser and JIT compiled § Uses Razor / .cshtml templates for rendering HTML / CSS § Uses C# for writing application logic What is ASP.NET Blazor? .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
18. 18 § It is NOT production-ready § It is NOT (yet?) suitable for real-world applications § It is NOT a way to port Razor / MVC / server-side web applications to a SPA § It is NOT a way to bring XAML/WPF/Xamarin into the browser What is ASP.NET Blazor NOT? .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
19. 19 § .NET Core 2.1 Preview SDK 2.1.300-preview2-008533 § Visual Studio 15.7.0 Preview § Blazor Language Service from Visual Studio Marketplace ASP.NET Blazor prerequisites (as of today*) .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor * Today: April 23, 2018
20. 20 § The web is still the web § You need to know HTML, CSS and JavaScript. Period. § WebAssembly § Brings any programming language and sandbox-aware framework to the browser § May pave the way to write business applications entirely without JavaScript – some day… § ASP.NET Blazor § Experimental SPA Framework § Very early stages § Shows possibilities of WebAssembly with .NET § *Do not use in production* Summary .NET im Browser Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor
21. .NET im Browser ? Cross-Plattform Single Page Applications mit WebAssembly & ASP.NET Blazor – echt jetzt? Christian Weyer @christianweyer christian.weyer@thinktecture.com Sebastian Gingter @phoenixhawk sebastian.gingter@thinktecture.com