1. Running C# in the browser
using Blazor

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

4. 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!

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

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

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

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

9. Interpreted mode

10. AOT mode

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

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

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

15. 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).

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

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

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

20. Resources Blazor: https://blazor.net/index.html
Docs:
Asp.Net Blog:
GitHub:
Codewrinkles:
My Blog:
Resources

21. Questions?

23. Thank you!