Jim Buck
November 20, 2019
Blazor
Demo
Electron
Demo
Desktop Blazor
Demo
Component-based UI framework
Reactive programming model
100% C# and Razor
Optional JS-interop API
Blazor WebAssembly
Blazor Server
Hybrid
Native
Client downloads runtime and DLLs.
Powered by Mono (wasm
and mono
)
Supports PWA's
Releasing with ASP.NET Core 3.1
All domain logic is on server
Prerender page on request
Input sent to server via SignalR
DOM diff sent back to client
Server when connected
WebAssembly when disconnected
Not officially announced, but "planned"
Non-HTML rendering (native controls)
Totally unofficial, pipe dream
Traditional .NET development team
Migrating from WebForms or MVC
Full-stack, single vendor
.NET Core SDK 3.0
Visual Studio 2019 or VS Code
dotnet new blazorserver
@page "/"
@using BlazorDemo.Data
@inject UserData userData
<div class="row">
<h1>Intro</h1>
</div>
<div class="row">
<NavLink href="/upload" Match="NavLinkMatch.Prefix">Begin</NavLink>
</div>
@code {
protected override void OnInitialized()
{
userData.Reset();
}
}
@using BlazorDemo.Models
<div class="photo-stack">
@foreach (var photo in Photos) {
<img src="@photo.Path" class="rand@(rand.Next(0, 5))" />
}
</div>
@code {
private Random rand = new Random();
[Parameter]
public List<Photo> Photos { get; set; }
}
Regular classes
Dependency Injection
Scoped
for Connection LifetimeRe-usable across projects
Breakpoints in .cshtml
/.razor
Kinda slow
dotnet watch run
Improvements are planned
Platform for desktop apps using web tech
Node.js + Chrome = Electron
Un-sandboxed environment
Cross-platform, accessible, extensible
Entry point
Primary process
Node.js file
Per window
Uses IPC to communicate with Main
Full access to Node.js runtime
Fast iteration time for web developers
Reuse code across websites and desktop
True cross-platform UI and logic
VS Code, Slack, Microsoft Teams,
Postman, and MANY more!
const {app, BrowserWindow} = require('electron');
let win;
app.on('ready', () => {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('index.html');
});
Regular HTML file
JS is Node.js (require
/import
)
Security can be reduced/disabled
Executable or installer
Mac required to build for OSX, Windows and Linux aren't limited.
Auto-update
Install ElectronNET.API
/ElectronNET.CLI
Initialize the project using ElectronNET.CLI
Update 2 files (Program.cs and Startup.cs)
dotnet add package ElectronNET.API
dotnet new tool-manifest
dotnet tool install ElectronNET.CLI
dotnet electronize init
Add ElectronNET specifics to Startup.cs
dotnet electronize start
Open DevTools
dotnet electronize build /target win
# OR
dotnet electronize build /target osx
# OR
dotnet electronize build /target linux
Unpacked binaries
Installer
(Slides/Repo will be available later this week)
@jimbuckio