Microsoft Blazor which allows developers to leverage the existing skills and makes .NET syntaxes render within the browser with the blend of Razor and the taste of Angular. It supports latest Single Page Application demanding technologies such as Routing, Layouting and Dependency Injection.

1. z
Blazor
Sandun Perera
2019-01-02

2. z
Flow
 Intro
 Pre-requisites
 Blah blah blah
 Demo
 Discussion

3. z
Intro
 Blazor is a single-page web app framework built on .NET that
runs in the browser with WebAssembly.
 Razor on browser => Blazor
 WebAssembly.js
 Mono.js
 Azure support

4. z
Why use .NET in the browser?
 Stability and consistency
 Modern innovative languages
 Industry-leading tools
 Speed and scalability
 Full-stack development that leverages existing skills
 Wide browser support

5. z
How Blazor runs .NET in the browser
 Running .NET code inside web browsers is made possible by a relatively new
technology, WebAssembly (wasm). WebAssembly is an open web standard and
is supported in web browsers without plugins.
 WebAssembly code can access the full functionality of the browser via
JavaScript interop. Also WebAssembly code runs in the same trusted sandbox
as JavaScript for security.
 C# code files and Razor files are compiled into .NET assemblies.
 The assemblies and the .NET runtime are downloaded to the browser.
 Blazor uses JavaScript to bootstrap the .NET runtime and configures the runtime to
load required assembly references. Document object model (DOM) manipulation and
browser API calls are handled by the Blazor runtime via JavaScript interoperability.
 To support older browsers that don't support WebAssembly, Blazor falls back to using
an asm.js-based .NET runtime.

6. z
Blazor components
 Blazor apps are built with components. A component is a piece
of UI, such as a page, dialog, or data entry form. Components
can be nested, reused, and shared between projects.
 In Blazor, a component is a .NET class. The class can either be
written directly, as a C# class (*.cs), or more commonly in the
form of a Razor markup page (*.cshtml).

7. z
Infrastructure
 Blazor offers the core facilities that most apps require, including:
 Layouts
 Routing
 Dependency injection
 All of these features are optional. When one of these features
isn't used in an app, the implementation is stripped out of the
app when published by the Intermediate Language (IL) Linker.

8. z
Code sharing and .NET Standard
 Blazor supports .NET Standard 2.0 or higher. APIs that aren't
applicable inside a web browser (for example, accessing the file
system, opening a socket, threading, and other features)
throw PlatformNotSupportedException. .NET Standard class
libraries can be shared across server code and in browser-
based apps.

9. z
JavaScript interop
 For apps that require third-party JavaScript libraries and browser
APIs, WebAssembly is designed to interoperate with JavaScript.
Blazor is capable of using any library or API that JavaScript is
able to use. C# code can call into JavaScript code, and
JavaScript code can call into C# code.

10. z
Optimization
 For client-side apps, payload size is critical. Blazor optimizes
payload size to reduce download times. For example, unused
parts of .NET assemblies are removed during the build process,
HTTP responses are compressed, and the .NET runtime and
assemblies are cached in the browser.

11. z
Deployment
 Use Blazor to build a pure standalone client-side app or a full-stack
ASP.NET Core app that contains both server and client apps:
 In a standalone client-side app, the Blazor app is compiled into
a dist folder that only contains static files. The files can be hosted on
Azure App Service, GitHub Pages, IIS (configured as a static file
server), Node.js servers, and many other servers and services. .NET
isn't required on the server in production.
 In a full-stack ASP.NET Core app, code can be shared between
server and client apps. The resulting ASP.NET Core server app, which
serves the Blazor client-side UI and other server-side API endpoints,
can be built and deployed to any cloud or on premise host supported
by ASP.NET Core.

12. z
Pre-requisites
 .NET Core 2.1 SDK (2.1.402 or later).
 Visual Studio 2017 (15.8 or later) with the ASP.NET and web
development workload selected.
 The latest Blazor Language Services extension from the Visual
Studio Marketplace.
 Knowledge on web development and Razor syntaxes
 General purpose web browser 

13. z
The Stack
Dev time C# / Razor source files
YourApp.dll
netstandard .NET
assembly files
mono.wasm
WebAssembly binary
executed natively
Browser APIs
visible DOM, HTTP
requests, etc
Runtime
(in browser)

14. z
Demo
In the browser

15. z
Lifecycle methods
 OnInitAsync() / OnInit()
 OnParametersSetAsync() / OnParametersSet()
 OnAfterRenderAsync() / OnAfterRender()

16. z
Routing
 @page "/BlazorRoute"
 @page "/DifferentBlazorRoute“
 @page "/RouteParameter/{text}“
 @page "/Users/{Id:int}"

17. z
Separation of Concern
@page "/BlazorRocks"
@*
The inherit directive provides the properties and methods
of the BlazorRocksBase class to this component.
*@
@inherits BlazorRocksBase
<h1>@BlazorRocksText</h1>
using Microsoft.AspNetCore.Blazor.Components;
public class BlazorRocksBase : BlazorComponent
{
public string BlazorRocksText { get; set; } = "Blazor rocks the browser!";
}

18. z
Layouts
@layout MasterLayout
@page "/master-data"
<h2>Master Data Management</h2>
@layout MasterDataLayout
@page "/master-data/customers"
<h1>Customer Maintenance</h1>

19. z
Dependency Injection
public void ConfigureServices(IServiceCollection services)
{
services.AddScoped<IDataAccess, DataAccess>();
}
@page "/customer-list"
@using Services
@inject IDataAccess DataRepository

20. z
JavaScript
<body>
<app>Loading...</app>
<script src="exampleJsInterop.js"></script>
</body>
public static Task<string> Display(string welcomeMessage)
{
// displayWelcome is implemented in wwwroot/exampleJsInterop.js
return JSRuntime.Current.InvokeAsync<string>(
"exampleJsFunctions.displayWelcome", welcomeMessage);
}

21. z
Publish and Deploy
 dotnet publish -c Release
 With the use of commands, it is configurable for Azure WebApp
deployment and hosting.

23. z
References
 https://blazor.net/
 https://blazor.net/docs/get-started.html