Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blazor v1.1

400 views

Published on

Microsoft dotnet C# runing in Browser with web assembly using Blazor

Published in: Software
  • Be the first to comment

  • Be the first to like this

Blazor v1.1

  1. 1. Juan Luis Guerrero Minero @juanluelguerre http://elguerre.com
  2. 2. Agenda  JavaScript  Web Assemly  Blazor Next Steps
  3. 3. JavaScript one of the most popular languages
  4. 4. Easy to learn: • King of the web • Dynamic typing • We have to know one more language • Ambiguous syntax • NOT PREDICTIBLE PERFORMANCE ! but….
  5. 5. Tries to solve
  6. 6. What is Web Assembly (a.k.a WASM)?
  7. 7. https://webassembly.org/ • Announced in 17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018
  8. 8. WASM is a build target “for Browsers”
  9. 9. https://webassembly.org/
  10. 10. Debugging Testing Experimenting OptimizingLearning Teaching Write programs by hand Textual representation of the wasm binary format S-Expression
  11. 11. Compact bytecode Optimised for mínimum download sizes Optimised for maximun execution speed Regular assembly (x86/x64 or similar) Do what JavaScript can do No plugings So, Web Assembly (WASM):
  12. 12. Browser compatibility
  13. 13. Usage Scenarios in Web • Write faster versión of the specific application • Using existing C libraries in browser • Reuse algorithm from service side • Distribute whole application as wasm
  14. 14. 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
  15. 15. Demo https://webassembly.studio/
  16. 16. 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
  17. 17. Before anything… • Razor MVC • Razor Pages • Similar to ASP.NET ViewComponents. • Is more an MVVM framework • Enables two-way data binding • Useful for SPA apps.
  18. 18. Running .NET in the 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.”
  19. 19. Web Assembly compilation
  20. 20. @svqdotnet How it works
  21. 21. How it works Interpreter AOT Mono aims to run under WebAssembly in two modes:
  22. 22. So, Wich one is better? AOT Production Environments Interpreter Development Time Currently: Interpreter, is on (enabled) by default and AOT mode is not ready to be tried yet
  23. 23. Infrastructure • Layout • Component • App.cshtml • Routing • Dependency Injection • Main component (root) • Index.html
  24. 24. Blazor & JavaScript Interactions 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
  25. 25. Getting started 1 2 https://dotnet.myget.org/f/blazor-dev/api/v3/index.json 3
  26. 26. Blazor on Mac ! dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazorhosted
  27. 27. Will WebAssembly replace JavaScript? Yes No now !
  28. 28. References • Introducción a Blazor • 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/
  29. 29. Play Online: https://marcelooliveira.github.io/ https://www.codeproject.com/Articles/1241210/WebAssembly -with-Blazor
  30. 30. Uno
  31. 31. http://platform.uno https://github.com/nventive/Uno https://gitter.im/uno-platform
  32. 32. Gracias

×