@roberthaken · 6/20/2019 · supported platforms blazorclient-side blazorserver-side google...
TRANSCRIPT
![Page 1: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/1.jpg)
Blazor
@RobertHakenSoftware & Cloud Architect| Microsoft MVP: Development | HAVIT, s.r.o.
![Page 2: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/2.jpg)
https://askme.blazor.cz
![Page 3: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/3.jpg)
Blazor
Client-side hosting model Server-side hosting model
![Page 4: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/4.jpg)
Supported platforms
Blazor client-side Blazor server-side
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 5: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/5.jpg)
BlazorNow
A component model for building composable UI
Routing
Layouts
Forms and validation
Dependency injection
JavaScript interop
IntelliSenseand tooling
Publishing and app size trimming (basic)
Debugging (in browser PoC)
![Page 6: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/6.jpg)
BlazorPlans
Authentication, Authorization
Live reloading in the browser during development
Server-side rendering
Full .NET debugging both in browsers and in the IDE
Rich IntelliSense and tooling
Publishing and app size trimming
![Page 7: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/7.jpg)
AskMe – Blazor Edition
![Page 8: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/8.jpg)
Page = Component + Route
Namespace/Namespace/ClassName.razor
@functions => @code
@page "/route"
![Page 9: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/9.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 10: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/10.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 11: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/11.jpg)
Components
.razor
@functions => @code
parameters -private property + [Parameter]
private RenderFragmentChildContent{ get; set; }
@inherits
@using + _Imports.razor
@inject
@implements
![Page 12: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/12.jpg)
Components Lifecycle methods
OnInit[Async]()
SetParameters(ParameterCollectionparameters)
OnParametersSet[Async]()
bool ShouldRender()
void BuildRenderTree(RenderTreeBuilderbuilder)
OnAfterRender[Async]()
IDisposable.Dispose()
StateHasChanged()
![Page 13: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/13.jpg)
Coded Components
derived from ComponentBase
override BuildRenderTree(RenderTreeBuilderbuilder)
builder
.OpenElement(sequence, elementName); + .CloseElement();
.AddContent(sequence, ...);
.AddMarkupContent(sequence, ...);
.AddAttribute(...)
....
[Inject], [Parameter], [Route], [Layout], ...
![Page 14: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/14.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 15: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/15.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 16: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/16.jpg)
Data Binding
both Components & DOM elements
<input bind="@MyValue“ /><input value="@MyValue"
onchange="@((UIChangeEventArgs__e) => MyValue= __e.Value)" />
<input type="text" bind-value-oninput="@CurrentValue" />
<input bind="@StartDate" format-value="yyyy-MM-dd" />
<MyComponentbind-MyParameter="@SomeValue" /><MyComponentMyParameter="@SomeValue"
MyParameterChanged="@(v => SomeValue= v)" />
![Page 17: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/17.jpg)
Templated Components
RenderFragment/ RenderFragment<T> parameters
@typeparamTItem
context implicit parameter: @context<ItemTemplateContext="item"> [email protected]... </ItemTemplate>
![Page 18: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/18.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 19: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/19.jpg)
JavaScript Interop
IJSRuntime.InvokeAsync<T>(string identifier, params object[] args)
JSON Serializable input + output
window scope
OnAfterRenderAsync
ElementRef
![Page 20: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/20.jpg)
Invoke .NET from JavaScript
DotNet.invokeMethod[Async]('ClassName', 'MethodName')
[JSInvokable]
DotNetObjectRef
![Page 21: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/21.jpg)
Tips & Tricks
@((MarkupString)myRawHtml)
always set Idfor <InputXy/> components
.csproj: <AppendRuntimeIdentifierToOutputPath>false</AppendRuntimeIdentifierToOutputPath>
StateHasChanged()
Debugging
Razor Pages / MVC : Html.RenderComponentAsync<T>(...)
![Page 22: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/22.jpg)
NovinkyASP.NET Core 3.0
ASP.NET Core 3.0 will only run on .NET CoreMicrosoft.AspNetCore.Appshared fww/o Newtonsoft.Json, EF Core, CodeAnalysis
BlazorServer-Side (Razor Components)
SignalRclient-to-server streaming
Pipes on HttpContext
Generic host in templates
Endpoint routing
![Page 23: @RobertHaken · 6/20/2019 · Supported platforms Blazorclient-side Blazorserver-side Google Chrome (incl. Android) YES YES Microsoft Edge YES YES Mozilla Firefox YES YES Safari](https://reader034.vdocuments.us/reader034/viewer/2022050521/5fa45304ebef90541e221963/html5/thumbnails/23.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