Downloaded 23 times
Uploaded byJuan Luis Guerrero Minero
Blazor v1.1
This document provides an overview of Web Assembly (WASM) and Blazor. It discusses how WASM allows code to run in browsers without plugins and is optimized for speed and size. Examples of WASM usage include games, video editors, and CAD tools. Blazor is introduced as a framework that runs .NET code in browsers using WASM. It follows an MVVM pattern and enables two-way data binding. The document compares Blazor to other technologies and provides resources for learning more.
More Related Content
Blazor v1.1
- 1. Juan Luis GuerreroMinero @juanluelguerre http://elguerre.com
- 2. Agenda JavaScript WebAssemly Blazor Next Steps
- 3. JavaScript one ofthe most popular languages
- 5. Easy to learn: •King of the web • Dynamic typing • We have to know one more language • Ambiguous syntax • NOT PREDICTIBLE PERFORMANCE ! but….
- 7.
- 8. What is WebAssembly (a.k.a WASM)?
- 9. https://webassembly.org/ • Announced in17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018
- 10. WASM is abuild target “for Browsers”
- 11.
- 12. Debugging Testing Experimenting OptimizingLearning Teaching Write programs by hand Textual representation ofthe wasm binary format S-Expression
- 15. Compact bytecode Optimised for mínimum download sizes Optimised for maximun execution speed Regular assembly (x86/x64 or similar) Do what JavaScript cando No plugings So, Web Assembly (WASM):
- 16.
- 17. Usage Scenarios inWeb • Write faster versión of the specific application • Using existing C libraries in browser • Reuse algorithm from service side • Distribute whole application as wasm
- 19. Video editor: https://d2jta7o2zej4pf.cloudfront.net/ Game(Unity): http://webassembly.org/demo/Tanks/ Garden (Unreal Engine): https://s3.amazonaws.com/mozilla- games/ZenGarden/EpicZenGarden.html WebSight: https://websightjs.com AutoCAD: https://web.autocad.com Samples
- 20.
- 21. Web Assembly Resources Articles:https://hacks.mozilla.org/category/webassembly Site: http://webassembly.org Github: https://github.com/WebAssembly Twitter: @WasmWeekly – WebAssemblyWeekly Specification: https://webassembly.github.io/spec/core/_download/WebAssembly.p df
- 23. Before anything… • RazorMVC • Razor Pages • Similar to ASP.NET ViewComponents. • Is more an MVVM framework • Enables two-way data binding • Useful for SPA apps.
- 24. Running .NET inthe browser “The first step to building a .NET-based SPA framework is to have a way of running .NET code inside web browsers. We can at last do this based on open standards, supporting any web browser (without any plugins), thanks to WebAssembly.”
- 25.
- 26.
- 27. How it works InterpreterAOT Mono aims to run under WebAssembly in two modes:
- 28. So, Wich oneis better? AOT Production Environments Interpreter Development Time Currently: Interpreter, is on (enabled) by default and AOT mode is not ready to be tried yet
- 29. Infrastructure • Layout • Component •App.cshtml • Routing • Dependency Injection • Main component (root) • Index.html
- 30. Blazor & JavaScriptInteractions 1. Call JavaScript from Blazor (Interop JavaScript) 2. Call Blazor for JavaScript https://github.com/aspnet/Blazor.Docs/issues/59 https://learn-blazor.com/architecture/interop 1 2
- 31.
- 32. Blazor on Mac! dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazorhosted
- 34. Will WebAssembly replaceJavaScript? Yes No now !
- 35. References • Introducción aBlazor • Getting Started • Learn Blazor • https://blazor.net/ • Gitter (aspnet/Blazor) • Blazor Backlog ! • Elguerre.com (blazor) @svqdotnet • Microsoft Build 2018: https://www.youtube.com/watch?v=KAIJ3ezQb3c&feature=youtu.be&t=4436 • https://codedaze.io/what-is-blazor-and-why-is-it-so-exciting/
- 36.
- 37.
- 38.
- 39.
Editor's Notes
- #2 https://elguerre.com/2018/04/11/javascript-ha-muerto-net-web-assembly-con-blazor/ Gracias a @alSkachkov
- #5 https://octoverse.github.com/
- #8 Since 1995 there are severals alternatives to get a better performance…
- #9 https://webassembly.org/docs/faq/
- #10 https://webassembly.org/ Works for: Firefox Chorme Safari Edge Opera (Just in a Desktop. At 2018/06/26). No Works for: IE Brower Compatibility: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly
- #11 https://webassembly.org/docs/faq/
- #13 To enable WebAssembly to be read and edited by humans, there is a textual representation of the wasm binary format: https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format
- #16 It’s a compact bytecode format optimised for minimum download sizes and maximum execution speed. Despite what a lot of developers first assume, it does not introduce new security concerns, because it isn’t regular assembly code (e.g., x86/x64 or similar) - that can only do what JavaScript can do. it’s a new bytecode format
- #17 Brower Compatibility: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly
- #21 https://wasdk.github.io/wasmcodeexplorer/
- #24 https://blazor.net/ References: - http://blog.stevensanderson.com/2018/02/06/blazor-intro/
- #25 http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/ MVC: Razor Pages: It’s similar to ASP.NET ViewComponents. Is more an MVVM framework. It enables two-way data binding. Useful for SPA apps.
- #27 http://www.mono-project.com/ http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/
- #29 http://blog.stevensanderson.com/2018/02/06/blazor-intro/ Interpreter: The Mono runtime itself is compiled to WebAssembly, but your .NET assembly files are not. The browser can then load and execute the Mono runtime, which in turn can load and execute standard .NET assemblies (regular .NET .dll files) built by the normal .NET compilation toolchain. This is similar to how, for the desktop CLR, the core internals of the CLR are distributed precompiled to native code, which then loads and executes .NET assembly files. One key difference is that the desktop CLR uses just-in-time (JIT) compilation extensively to make execution faster, whereas Mono on WebAssembly is closer to a pure interpretation model. Ahead-of-time (AOT) compiled mode In AOT mode, your application’s .NET assemblies are transformed to pure WebAssembly binaries at build time. At runtime, there’s no interpretation: your code just executes directly as regular WebAssembly code. It’s still necessary to load part of the Mono runtime (e.g., parts for low-level .NET services like garbage collection), but not all of it (e.g., parts for parsing .NET assemblies). This is similar to how the ngen tool has historically allowed AOT compilation of .NET binaries to native machine code, or more recently, CoreRT provides a complete native AOT .NET runtime.
- #30 Interpreter: Faster AOT: Smaller and compression-friendly compared with AOT-compiled assemblies
- #31 Backlog A component model for building composable UI Routing Layouts Forms and validation Dependency injection JavaScript interop Live reloading in the browser during development Server-side rendering Full .NET debugging both in browsers and in the IDE Rich IntelliSense and tooling Ability to run on older (non-WebAssembly) browsers via asm.js Publishing and app size trimming
- #32 Blazr -> JS : https://learn-blazor.com/architecture/interop/ JS -> Blazor: https://github.com/aspnet/Blazor.Docs/issues/59
- #36 Demos: Estructura de Proyecto Ejecutando y depurando (F12) …
- #39 http://blog.stevensanderson.com/2018/02/06/blazor-intro/ https://www.jerriepelser.com/blog/getting-started-with-blazor/ https://learn-blazor.com/ https://elguerre.com/2018/04/11/javascript-ha-muerto-net-web-assembly-con-blazor/
- #40 https://www.codeproject.com/Articles/1241210/WebAssembly-with-Blazor
- #42 http://platform.uno/ https://github.com/nventive/Uno https://gitter.im/uno-platform/
- #44 Practically any portable C or C++ codebase can be compiled into JavaScript using Emscripten !!! List of portable language: https://github.com/kripken/emscripten/wiki/Porting-Examples-and-Demos http://kripken.github.io/emscripten-site/ https://github.com/WebAssembly/design/issues/1087
- #45 http://asmjs.org/ https://en.wikipedia.org/wiki/Asm.js