7. PRACTICAL BLAZOR
for Minnesota Developers Conference 2022
Patrick Szalapski
Applications Architect, General Mills
@Szalapski | szalapski.com

8. AGENDA
1. Cross-cutting concerns, such as profiling,
using abstract components
2. Speeding up rendering with virtualization
3. Avoiding rerendering with abstract
components
4. Breaking a Blazor component into
subcomponents

9. DEMO
• Ask me (now or afterward) about:
• Mechanical keyboards
• New File extension
• Windows Terminal
• Nullable and non-nullable references
• Unhelpful VSPro removes “watch”
• VS Intellisense slightly broken for Blazor
• Refactor one step at a time, even if confident
• Agile, Scrum, Kanban, team concerns
This is
Minnesota Developers Conference,
not
Minnesota Managers Conference:
Let’s code, not read slides
Tangents we might hit…
 dotnet watch vs. VS run
 speed up your development loop
 Blazor favicon animated glyph
 `null!` convention for required parameters

10. MAKING A SUBCOMPONENT IN BLAZOR
1.Insert (non-working) markup calling the new
subcomponent above old markup
2.Copy the entire component as new component
3.Delete unnecessary markup and code in subcomponent
4.Add parameters
5.Add “…Changed” EventCallback parameters
6.Test and fix as doubled-up behavior
7.In the parent, delete the doubled-up markup, code,
directives

11. MAKING A SUBCOMPONENT IN BLAZOR
(ELABORATED)
1. Insert markup for the new subcomponent usage (above the markup
that will be removed).
2. Copy the entire component to a new file. Rename it to match the
above.
3. Edit the new subcomponent to delete all markup that should remain
in the parent only. Delete all code that is thus unused.
4. Add parameters for missing references; supply them in the parent.
5. Add “…Changed” EventCallback parameters for anything editable.
6. Now you have a subcomponent that works and a parent that also
works with its markup repeated (doubled up). Test and fix anything
that is broken.
7. In the parent, delete the appropriate markup, code, and directives.

12. BINDING REFERENCE
<select value="Bob" /> a literal string “Bob“, obviously
<select value="@myName" /> one-way binding: the rendered option always gets the updated value of myName
<select @value="myName" /> AVOID - error: '@value' is not a valid attribute name.
<select @value="@myName" /> AVOID - error: '@value' is not a valid attribute name.
<select value="@myName“
@onchange="handleChange" />
one-way binding with event on change, a good approach when custom logic is needed
(e.g saving to a web API then conditionally updating the value); note, handleChange is a
reference to a function that takes one parameger, a ChangeEventArgs instance.
<select @bind="@myName" /> Two-way binding using the special value attribute and onchange event; same as
<select value="@myName" onchange="e => myName = e.Value" />
<select @bind-Item="myName" />
(or any attribute, not just "value")
Two-way binding; same as
<select Item="@myName" ItemChanged="e => myName = e.Value" />
<select @bind-Item="myName"
@bind-Item:event="oninput" />
Two-way binding using custom event; same as
<select Item="@myName" @oninput="e => myName = e.Value" />
<MyComponent MyParameter1="@("firstName")" /> (Custom component) Literal string
<MyComponent MyParameter1="firstName" /> NOT a literal string; passes the value of firstName as a one-way binding
<MyComponent MyParameter1="@firstName" /> AVOID - redundant
<MyComponent @MyParameter1="…" /> AVOID - ERROR - bad syntax
<MyComponent @bind-MyParameter1="…" /> Two-way binding; same as
<MyComponent MyParameter1="myName" MyParameter1Changed="e => myName =
e.Value" />
(both the MyParameter1 parameter and the MyParameter1Changed event must

13. STRETCH GOAL: UNPREPARED BLAZOR CHAT
• Get-only properties are better than mutating state
• CallbackEvents can be bound to either synchronous or async methods
• OnParametersSetAsync and OnAfterRender are the two methods you have to react
to in a subcomponent