Overview of the new experimental UI framework called Blazor. There is also comparision to the existing AngularJS framework.

1. Browser + Razor = Blazor
SPA with C# only
Robert Szachnowski

2. Agenda
2
1. History of client-side web development.
2. What is blazor? Framework’s features.
3. How blazor works – architecture.
4. C# vs AngularJS.
• AngularJS elements.
• Blazor’scomponent power.
• Components.
• Layouts.
5. Look in the code.
6. Materials.

3. History of client-side
web development
3
1 2 3

4. What is that Blazor?
4
Blazoris a single-page web app framework built on .NET that runs in the browser
with WebAssembly.Running .NET in the browser is made possibleby a relatively new
standardized web technology called WebAssembly.WebAssemblyis a "portable,
size- and load-time-efficient format suitable for compilation to the web." Code
compiled to WebAssemblycan run in any browser at native speeds.To run .NET
binaries in a web browser, we use a .NET runtime (specificallyMono) that has been
compiled to WebAssembly.

5. 5
Blazor
Razor has its roots on the serverwhere it is
typically used to dynamically generate HTML. In
Blazor,Razor is used on the client. To be more
specific, the Razor engine runs during compilation
to generate C# Code from Razor templates.

6. 6How is it compiled?
.cshtml example

7. Blazor features
7
• A component model
for building
composableUI
• Routing
• Layouts
• Forms and validation
• Dependency injection
• JavaScript interop
• Publishing and app
size trimming
• Livereloadingin the
browser during
development
• Server-siderendering
• Full .NET debuggingboth
in browsers and in the IDE
• Rich IntelliSenseand
tooling
• Abilityto run on older
(non-WebAssembly)
browsers via asm.js
Existing and planned

8. 8

9. What dependencies are in the
browser?
9
BROWSER
Lorem
ipsum
Blazor &
Javascript
dependencies
Mono.js &
mono.wasm
runtime
Application
DLL’s in
IL code

10. Blazor workflow
10

11. 11Example

12. C# vs AngularJS
Comparing Blazor features to Javascript
framework’s

13. 13AngularJS elements
Comparing to list of many different
elements in the AngularJS framework,
creators of Blazor want to simplifythe
whole workflow, adjust to the .net world
and don’t make it the same as this
framework.
They want to make it better.
Source: https://www.slideshare.net/ThoughtWorks/angular-js-introduction-by-tania-gonzales

14. 14Component power

15. Components
Components in Blazorare equivalent of controllers in the
AngularJS. Main difference is that to the component is
attached template which is „UI” for code.
„Components are flexibleand lightweight, and they can be
nested, reused,and shared between projects.”
We can cast our component in other templates as well. It
similar to directive in angularJS. The main difference in this
case is that components can be called only with specified
HTML tag and not like in the JS framework – as attributes of
HTML tag.
Component C# code can be nested in the template but can
be taken to the code-behind class as well. If we do this then
our class can be inherited in more than one template (if we
15

16. Layouts
Technically, a layout is just another Blazorcomponent.
A layout is defined in a Razor template or in C# code
and can contain data binding, dependencyinjection, and
other ordinary features of components. Two additional
aspects turn a component into a layout:
16
The layout component
must inherit from
BlazorLayoutComponen
t.
BlazorLayoutComponen
t defines a Body
property that contains
the content to be
@Body syntax located in
the template can allow
layout to be base layout for
components or layouts
(nesting).

17. Look in the code...
17
Source: https://github.com/rafek1241/blazor-first-approach

18. Thank you for reading
18
Materials that were used in this presentation:
- Blazor.net
- Learn-blazor.com
- Github.com/aspnet/Blazor
Resources:
- https://blazor.net/community.html