software & cloud architect| microsoft mvp: development ......nov 03, 2019 · live-demo:...
TRANSCRIPT
![Page 1: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/1.jpg)
Blazor
@RobertHakenSoftware & Cloud Architect| Microsoft MVP: Development | HAVIT, s.r.o.
![Page 2: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/2.jpg)
LIVE-DEMO: https://askme.blazor.cz
Blazor: C# in the browser via WebAssembly
Blazor: Build client web apps with C#
Blazoris a .NET web framework using C#/Razor and HTMLthat runs in the browser with WebAssembly.
![Page 3: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/3.jpg)
BlazorBlazorWebAssemblyhosting model BlazorServer hosting model
Blazor PWA
Blazor Hybrid
Blazor Native
![Page 4: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/4.jpg)
BlazorNative?
![Page 5: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/5.jpg)
Supported platforms
Blazor WebAssembly Blazor Server
Google Chrome (incl. Android) YES YES
Microsoft Edge YES YES
Mozilla Firefox YES YES
Safari (incl. iOS) YES YES
Microsoft Internet Explorer NO v11
https://caniuse.com/#search=webassembly
![Page 6: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/6.jpg)
Page = Component + Route
Namespace/Namespace/ClassName.razor
@code
@page "/route"
![Page 7: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/7.jpg)
Layouts
layout
– just another component
– inherits from LayoutComponentBase
– Body property (@Body in markup)
using the layout
– @layout directive (compiles to [LayoutAttribute])
– _Imports.razor
nested layouts
![Page 8: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/8.jpg)
Routing
@pagedirective
@page "/products"
@page "/products/{ProductId} " => [Parameter]ProductId
@page "/products/{ProductId:int}"
App.razor: <RouterAppAssembly="typeof(Program).Assembly"
FallbackComponent="typeof(Pages.NotFound)" />
<NavLinkhref="...“ class="..." Match="NavLinkMatch.All| Prefix" />
IUriHelper.NavigateTo(), .OnLocationChanged, ...
![Page 9: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/9.jpg)
Components
.razor
@code
parameters -public property + [Parameter]
private RenderFragmentChildContent{ get; set; }
@inherits
@using + _Imports.razor
@inject
@implements
![Page 10: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/10.jpg)
Components Lifecycle methods
OnInitialized[Async]()
OnParametersSet[Async]()
event handling
void BuildRenderTree(RenderTreeBuilderbuilder)
OnAfterRender[Async](bool firstRender)
IDisposable.Dispose()
StateHasChanged()
![Page 11: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/11.jpg)
FULL
Blazor Infrastructure
ComponentUser Code
base.SetParametersAsync()
overrideSetParametersAsync()
START
BuildRenderTree()OnInitialized() OnParametersSet()
StateHasChanged()
markup codeOnInitializedAsync() OnParametersSetAsync()
NotifyRenderCompleted()
OnAfterRender
Dispose()
OnAfterRenderAsync
ShouldRender()
SetParameterProperties()
AddToRenderQueue()
ProcessRenderQueue()
StateHasChanged()
ShouldRender()
AddToRenderQueue()
override SetParametersAsync()
ENDIDisposable.Dispose()
HandleEventAsync()
event callback
StateHasChanged()
ShouldRender()
AddToRenderQueue()
OnInitialized OnParametersSet Event Callback Render OnAfterRender Disposen
ew c
ompo
nen
t ad
ded
Blazor Infrastructure
ComponentUser Code
base.SetParametersAsync()
overrideSetParametersAsync()
START
BuildRenderTree()OnInitialized() OnParametersSet()
StateHasChanged()
markup codeOnInitializedAsync() OnParametersSetAsync()
NotifyRenderCompleted()
OnAfterRender(true)
Dispose()
OnAfterRenderAsync(true)
ShouldRender()
SetParameterProperties()
AddToRenderQueue()
ProcessRenderQueue()
StateHasChanged()
ShouldRender()
AddToRenderQueue()
override SetParametersAsync()
ENDIDisposable.Dispose()
HandleEventAsync()
event callback
StateHasChanged()
ShouldRender()
AddToRenderQueue()
par
amet
er(
s) v
alu
e ch
ange
d
Blazor Infrastructure
ComponentUser Code
base.SetParametersAsync()
overrideSetParametersAsync()
START
BuildRenderTree()OnInitialized() OnParametersSet()
StateHasChanged()
markup codeOnInitializedAsync() OnParametersSetAsync()
NotifyRenderCompleted()
OnAfterRender(false)
Dispose()
OnAfterRenderAsync(false)
ShouldRender()
SetParameterProperties()
AddToRenderQueue()
ProcessRenderQueue()
StateHasChanged()
ShouldRender()
AddToRenderQueue()
override SetParametersAsync()
ENDIDisposable.Dispose()
HandleEventAsync()
event callback
StateHasChanged()
ShouldRender()
AddToRenderQueue()
even
t h
and
led
Blazor Infrastructure
ComponentUser Code
base.SetParametersAsync()
overrideSetParametersAsync()
START
BuildRenderTree()OnInitialized() OnParametersSet()
StateHasChanged()
markup codeOnInitializedAsync() OnParametersSetAsync()
NotifyRenderCompleted()
OnAfterRender(false)
Dispose()
OnAfterRenderAsync(false)
ShouldRender()
SetParameterProperties()
AddToRenderQueue()
ProcessRenderQueue()
StateHasChanged()
ShouldRender()
AddToRenderQueue()
override SetParametersAsync()
ENDIDisposable.Dispose()
HandleEventAsync()
event callback
StateHasChanged()
ShouldRender()
AddToRenderQueue()
com
po
ne
nt
rem
ov
ed
Blazor Infrastructure
ComponentUser Code
base.SetParametersAsync()
overrideSetParametersAsync()
START
BuildRenderTree()OnInitialized() OnParametersSet()
StateHasChanged()
markup codeOnInitializedAsync() OnParametersSetAsync()
NotifyRenderCompleted()
OnAfterRender(false)
Dispose()
OnAfterRenderAsync(false)
ShouldRender()
SetParameterProperties()
AddToRenderQueue()
ProcessRenderQueue()
StateHasChanged()
ShouldRender()
AddToRenderQueue()
override SetParametersAsync()
ENDIDisposable.Dispose()
HandleEventAsync()
event callback
StateHasChanged()
ShouldRender()
AddToRenderQueue()
usu
al u
sage
load and fill static data (select options, ...)
load and set values(edited object, ...)
act on events(save values, ...)
activate third-party JS libraries that operate on the rendered DOM elements (on firstRender=true).
intercept incoming parameters before they are set, e.g. override, validate or set defaults
deregister third-party JS libraries that operated on the removed DOM elements
Blazor Component Lifecycle Diagram
des
crip
tion
OnInitializedAsync and OnInitialized execute code to initialize the component.The method is called just once before the firstRender of the component.
OnParametersSet[Async] is called after component initialization or when a component has received parameters from its parent and the values are assigned to properties.
OnAfterRenderAsync and OnAfterRender are called after a component has finished rendering. Element and component references are populated at this point.
If a component implements IDisposable, the Dispose method is called when the component is removed from the UI.
Components provide event handling features. For an HTML element attribute named on{event} (for example, onclick and onsubmit) with a delegate-typed value, components treats the attribute's value as an event handler.
SetParametersAsync
Override SetParametersAsync if you want to execute some code before the parameters are set. Always call base.SetParametersAsync() to execute the original logic!
Override BuildRenderTree() if you want to build markup-less component (no .razor file).If you create a .razor file, the override of BuildRenderTree() method is generated for you from the markup.
Robert Haken, HAVIT, https://blazor.eu
![Page 12: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/12.jpg)
Coded Components
derived from ComponentBase
override BuildRenderTree(RenderTreeBuilderbuilder)
builder
.OpenElement(sequence, elementName); + .CloseElement();
.AddContent(sequence, ...);
.AddMarkupContent(sequence, ...);
.AddAttribute(...)
....
[Inject], [Parameter], [Route], [Layout], ...
![Page 13: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/13.jpg)
Components –Event Handling
on<event>
synchronous + asynchronous
event-args– UIEventArgs
– UIChangeEventArgs
– UIKeyboardEventArgs
– UIMouseEventArgs
– custom
onclick="@(args=> DoSomething(args, itemNumber))“
[Parameter] private EventCallback<TArgs> OnSomething{ get; set; }
![Page 14: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/14.jpg)
Built-in Components
<NavLink/> + <Router /><EditFormModel="@MyModel" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator/><ValidationSummary/><InputTextid="name" bind-Value="@MyModel.Name" /><ValidationMessageFor="@(() => MyModel.Name)" /><InputTextArea/><InputSelect/><InputNumber/><InputCheckBox/><InputDate/>
</EditForm>+ 3rd party ☺
![Page 15: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/15.jpg)
Data Binding
both Components & DOM elements
<input bind="@MyValue“ /><input value="@MyValue"
onchange="@((UIChangeEventArgs__e) => MyValue= __e.Value)" />
<input type="text" bind-value="@CurrentValue" bind-value:event="oninit" />
<input bind="@StartDate" format-value="yyyy-MM-dd" />
<MyComponentbind-MyParameter="@SomeValue" /><MyComponentMyParameter="@SomeValue"
MyParameterChanged="@(v => SomeValue= v)" />
![Page 16: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/16.jpg)
Templated Components
RenderFragment/ RenderFragment<T> parameters
@typeparamTItem
context implicit parameter: @context<ItemTemplateContext="item"> [email protected]... </ItemTemplate>
![Page 17: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/17.jpg)
Razor Templates
@<tag>...</tag>
@{RenderFragmenttemplate = @<p>The time is @DateTime.Now.</p>;RenderFragment<Pet> petTemplate= (pet) => @<p>Name: @pet.Name.</p>
}
@template@petTemplate(new Pet { Name = "Bzuk" })
![Page 18: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/18.jpg)
JavaScript Interop
IJSRuntime.InvokeAsync<T>(string identifier, params object[] args)
JSON Serializable input + output
window scope
OnAfterRenderAsync
ElementRef
![Page 19: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/19.jpg)
Invoke .NET from JavaScript
DotNet.invokeMethod[Async]('ClassName', 'MethodName')
[JSInvokable]
DotNetObjectRef
![Page 20: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/20.jpg)
BlazorNow
Component model
Routing
Layouts
Forms and validation
Dependency injection
JavaScript interop
IntelliSenseand tooling
Publishing and app size trimming
Debugging (in browser, basic)
Authentication + Authorization
![Page 21: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/21.jpg)
BlazorPlans
Live reloading in the browser during development
Server-side rendering
Full .NET debugging both in browsers and in the IDE
Even better IntelliSense and tooling
Publishing and app size trimming
![Page 22: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/22.jpg)
Blazorin .NET Core 3.1 (December 2019)
Partial classes for components (code-beside)
Developer exception page
Control over event propagation and default actions
BlazorServer prerendering with parameters
<component type="...." /> tag-helper instead of Html.RenderComponentAsync
![Page 23: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/23.jpg)
Tips & Tricks
@((MarkupString)myRawHtml)
set Idfor <InputXy/> components
.csproj: <AppendRuntimeIdentifierToOutputPath>false</AppendRuntimeIdentifierToOutputPath>
StateHasChanged()
Razor Pages / MVC : Html.RenderComponentAsync<T>(...)
![Page 24: Software & Cloud Architect| Microsoft MVP: Development ......Nov 03, 2019 · LIVE-DEMO: Blazor: C# in the browser via WebAssembly Blazor: Build client web apps with C# Blazoris a](https://reader030.vdocuments.mx/reader030/viewer/2022040415/5f2d34652e086277dc61ac7f/html5/thumbnails/24.jpg)
REFERENCES
Demos https://github.com/hakenr/AskMehttps://github.com/ridercz/AskMe
Blog http://knowledge-base.havit.cz/ + .euwww.blazor.cz
Twitter @RobertHaken
YouTube https://www.youtube.com/user/HAVITcz