Running C# in the browser using Blazor

Dan Patrascu-Baba Founder @ Codewrinkles .Net Developer @ Amdaris Mentor @ Scoala Informala de IT Interests: .Net Core, Microsoft Azure, Angular, Office 365

Blazor => experimental Microsoft project Full-stack web development with .NET via WebAssembly Requires no plugin or code transpilation Works in all modern browsers including mobile browsers Browser + Razor = Blazor!

Why .NET in the browser? Stable and consistent: .NET offers standard APIs, tools, and build infrastructure across all .NET platforms that are stable, feature rich, and easy to use. Modern innovative languages: .NET languages like C# and F# make programming a joy and keep getting better with innovative new language features. Industry leading tools: The Visual Studio product family provides a great .NET development experience on Windows, Linux, and macOS. Fast and scalable: .NET has a long history of performance, reliability, and security for web development on the server. Using .NET as a full-stack solution makes it easier to build fast, reliable and secure applications.

Blazor features 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

WebAssembly = the future of web development WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++, enabling deployment on the web for client and server applications. Code compiled to WebAssembly can run in any browser at native speeds

BROWSER Short overview App.dll Compile to .NET assemblies .NET .cs .cshtml BROWSER WebAssembly (mono.wasm) .NET (mscorlib.dll, System.Core.dll,…) App.dll Compile to .NET assemblies

Interpreted mode

AOT mode

There are however some challenges Mono not optimized to act as runtime in a browser AOT is for now only a roadmap point Limited debugging options Performance Download sizes are too big

Server-side Blazor (Razor Components) to the rescue! Benefits of Blazor architecture Blazor  separate the execution of a Blazor application from the rendering process Blazor can be run a in Web Worker thread with events coming in from the UI thread and Blazor pushing back UI updates. This would allow Blazor to be used for developing Progressing Web Applications. Another option would be to develop desktop apps using Blazor with Electron

Server-side Blazor (Razor Components) to the rescue! Server side model When you make the initial request your browser will download an index.html file and a small javascript file called blazor.server.js. Blazor then establishes a connection between your browser and the server using SignalR. The server will execute the component logic server side producing HTML. This is then compared, on the server, to a snap-shot of the DOM currently on the client. When you interact with the application that event is packaged up and sent back to the server via the same connection, where it will be processed and the resulting DOM changes will be sent back to the browser to be rendered.

Server-side Blazor (Razor Components) to the rescue! Benefits You can still write your entire app with .NET and C# using the Blazor component model. Your app still has a rich interactive feel and avoids unnecessary page refreshes. Your app download size is significantly smaller, and the initial app load time is much faster. Your Blazor component logic can take full advantage of server capabilities, including using any .NET Core compatible APIs. Because you're running on .NET Core on the server, existing .NET tooling, such as debugging, works as expected. Server-side hosting works with thin clients (for example, browsers that don't support WebAssembly and resource constrained devices).

Server-side Blazor (Razor Components) to the rescue! No such thing as a free lunch  Latency: every user interaction now involves a network hop. No offline support: if the client connection goes down, the app stops working. Scalability: the server must manage multiple client connections and handle client state.

Some conclusions The goal of the Blazor team is still to deliver the client-side model, that has not changed and will continue to be pursued. Chris Sainty, Microsoft

Razor components (server-side Blazor) will be shipped in .Net Core 3.0

Resources Blazor: https://blazor.net/index.html Docs: https://blazor.net/docs/index.html Asp.Net Blog: http://wrink.me/06a701a6 GitHub: https://github.com/aspnet/Blazor Codewrinkles: http://codewrinkles.com My Blog: http://danpatrascu.com/ Resources

Questions?

Thank you!