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

WebAssembly & Progressive Web Apps: Rethinking modern application development

WebAssembly & Progressive Web Apps: Rethinking modern application development

Choose your programming language of choice for building fast, ubiquitously cross-platform, future-proof modern applications: dang - your dream will finally come true! Really...? Let's see. Undoubtedly, everybody needs to build business applications, somehow. The web and the browser platforms have changed the way we can build LOB applications and these platforms have evolved considerably in the past 5 years. More and more native features are available to SPAs (single page applications) running in the browser - a great base for modern applications as so called Progressive Web Apps (PWA). Now, with the rise of WebAssembly (WASM) as a standard and the improving maturity of PWAs we have powerful tools in our hand to build the next generation of web-based applications. In this session Christian Weyer will talk about the features & possibilities of Progressive Web Apps as app-like appearance, installability or offline operations, paired with the power of WebAssembly as a bytecode for all major modern browsers. See how to use PWAs to build native-like applications on the browser platforms and experience the strength of WASM to run C, C++ or C#/.NET code in the browser, without any plugin. This can be a disruptive approach for both greenfield and brownfield projects. Lean back and watch how the web is evolving into a new stage of capabilities and feel the potential of your next (business) application. Let’s do it!

7e0087a19318ded4ba2203187694740f?s=128

Christian Weyer
PRO

May 23, 2018
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. WebAssembly & Progressive Web Apps Rethinking modern application development Christian

    Weyer @christianweyer CTO
  2. 2 § Founder & CTO at Thinktecture AG § Personal

    focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Independent Microsoft Regional Director § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § christian.weyer@thinktecture.com § ! @christianweyer Christian Weyer Rethinking modern application development WebAssembly & Progressive Web Apps (PWA)
  3. 3 § Modern Business Applications & the Web § Progressive

    Web Apps (PWA) pave the way to native § WebAssembly as a native bytecode for the Web § ASP.NET Core Blazor: an experimental project for .NET-based SPAs WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development The Journey
  4. 4 State of the art Modern Business Applications Rethinking modern

    application development WebAssembly & Progressive Web Apps (PWA)
  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 browsers are power horses – more or less like an operating system WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Modern Business Applications
  6. 6 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development
  7. 7 § Single Page Applications (SPAs) are the new smart

    clients WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Modern Business Applications & the Web
  8. 8 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development Browser & JavaScript Architecture Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime
  9. WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development

    “Houston, we have some problems” 9 The Web is too… Web-ish ! The web is centered around a single language "
  10. 10 More native feeling Progressive Web Apps Rethinking modern application

    development WebAssembly & Progressive Web Apps (PWA)
  11. 11 § Web applications should… § Feel & behave like

    a native app § Be installable, without (classic) app stores § Be able to work completely offline, without any server connections § Receive push notifications, without running § Offer in-app payment options § PWAs are targeted at both, mobile and desktop § Progressive Web Apps are not a technology § Collection of characteristics an application must/should support ➔ “Uber Pattern” § Various technologies are available to progressively enhance an application § Some outstanding standards like Web App Manifest, Service Workers WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Progressive Web Apps (PWA) – the Web gets more native
  12. 12 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development
  13. WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development

    Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS 13 Browser sandbox Web App HTML/JS Cache storage fetch Service Worker
  14. 14 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development https://caniuse.com/#search=Service%20Workers
  15. 15 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development https://caniuse.com/#search=Web%20App%20Manifest
  16. 16 Your native code in the browser WebAssembly Rethinking modern

    application development WebAssembly & Progressive Web Apps (PWA)
  17. 17 § Low-level bytecode for the Web – beyond asm.js

    § Bring any language into the browser § Currently targeted at C/C++ and Rust § Achieve superior performance in certain cases § Because JavaScript ! (but not a replacement for JavaScript!) § Stack machine-based § Not AST, or register- or SSA-based bytecode § See https://github.com/WebAssembly/design/blob/master/Rationale.md § Goals § Fast, efficient, portable ▪ Use existing sandboxing tools § Readable and debuggable ▪ Don’t break the web WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
  18. 18 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development WASM & JS Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime WebAssembly (.wasm)
  19. 19 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development https://caniuse.com/#search=WebAssembly
  20. 20 § Re-use existing code by targeting WebAssembly, embedded in

    larger JavaScript / HTML application § Anything from simple helper libraries, to compute-oriented task offload § Main application frame & logic in WebAssembly, UI in JavaScript / HTML / CSS § Entire code base in WebAssembly WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WASM-based Applications
  21. 21 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development WASM Simple Sample § Binary (.wasm) & text (.wat) format
  22. 22 § 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 § Cheerp from C++ § TeaVM from Java § Rust § mono-wasm from C# § Baremetal: WebAssembly Studio § Playing around with WASM in the browser WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten +
  23. 23 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development emudore, a Commodore 64 emulator – in WASM https://github.com/marioballano/emudore/blob/master/README.md
  24. 24 § Mono is Microsoft’s strategy for cross-platform client applications

    § Xamarin is based on Mono, Unity as well § Support for .NET Standard § Mono team is working on tooling to compile Mono/.NET code to WASM § Aka ‘mono-wasm’ § JIT – for fast development cycles, including live reload § AOT – for optimized runtime deployment & execution WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development .NET & WASM C# WebAssembly LLVM bitcode mcs IL Mono AOT compiler LLVM WASM backend
  25. 25 § 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 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WASM: Here & to Stay
  26. 26 An experiment based on WASM ASP.NET Core Blazor Rethinking

    modern application development WebAssembly & Progressive Web Apps (PWA)
  27. 27 § Blazor is an experimental Single Page Application (SPA)

    framework based on .NET § 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 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Blazor – WASM in action * as of May 22, 2018
  28. 28 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application

    development Blazor Architecture* Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor.js Blazor page (.html) JS Runtime mono.wasm mono.js mscorlib.dll etc. myapp.dll * as of May 22, 2018
  29. 29 § It is NOT about running any .NET Code

    just in the browser § We still have a sandbox § Various .NET Standard APIs will just not work in the browser § It is NOT a way to port Razor / MVC / server-side web applications to an SPA § It is NOT a way to bring XAML / WPF / Xamarin into the browser § You may want to look at the Ooui.WASM open source project for this § It is NOT production-ready § Therefore, it is NOT suitable for real-world applications (yet?) WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development What is Blazor NOT?
  30. 30 § The Web is still the Web § You

    need to know HTML, CSS and JavaScript. Period. § Progressive Web Apps § Emerging technologies enable more app-like feeling and behaviors of Web apps – including offline § WebAssembly § Brings any programming language and sandbox-aware framework to the browser § May pave the way to write business applications without large JavaScript parts – some day… maybe § Blazor § Experimental SPA Framework by the ASP.NET Core team, very early stages – do not use in production § Shows possibilities of WebAssembly with .NET WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Summary The future m ight be bright! ?
  31. WebAssembly & Progressive Web Apps Rethinking modern application development Christian

    Weyer @christianweyer christian.weyer@thinktecture.com Thank you! https://github.com/thinktecture/techorama-2018-wasm-pwa
  32. 32 § Progressive Web Apps § https://developers.google.com/web/progressive-web-apps/ § Is ServiceWorker

    ready? § https://jakearchibald.github.io/isserviceworkerready/ § PWAs with Angular § https://angular.io/guide/service-worker-intro § WebAssembly Specification § http://webassembly.github.io/spec/core/index.html § LVVM § https://llvm.org/ § Emscripten § http://kripken.github.io/emscripten-site/ § Mono & WebAssembly § http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/ § ASP.NET Blazor § https://blazor.net/index.html § Ooui.WASM § http://praeclarum.org/post/171899388348/oouiwasm-net-in-the-browser WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Resources
  33. None