Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Christian Weyer

April 26, 2018
Tweet

More Decks by Christian Weyer

Other Decks in Programming

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 § [email protected] § ! @christianweyer § Consultant & Architect at Thintecture AG § Focus on § Flexible and scalable backend architectures § Developer productivity § Software Quality measures § All things .NET § [email protected] § ! @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. 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
  5. 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
  6. 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
  7. 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
  8. 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)
  9. 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
  10. 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
  11. 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/
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. .NET im Browser ? Cross-Plattform Single Page Applications mit WebAssembly

    & ASP.NET Blazor – echt jetzt? Christian Weyer @christianweyer [email protected] Sebastian Gingter @phoenixhawk [email protected]