Blazor reaches alpha— YAAS!!!
A tale of DLLs, routers, functions and components
TL;DR Knowing enough about Web Assembly to be blown away when I see something amazing is a wonderful feeling. You could read about Blazor yourself, but here’s me being blown away.
It’s a lazy Sunday evening, and I’m scrolling through what I’ve missed on DevCenter’s slack during the weekend.
The dotnet channel isn’t so active, so it’s surprising when I see it’s lit up.
There’s an unread message.
Ugh, it’d probably be something about which ORM is best and blah blah blah again.
It turns out to be
The title, description and image are obviously clickbait, and I am hooked!
Waah! Excitement!!!
I get excited and head off to check it out. It looks easy to setup, so I start doing it.
After updating my DotNet SDK version to 2.1, and installing the Microsoft Blazor project template in the CLI, I create my first Blazor App.
As soon as I run it with dotnet run, I see a loading… text which appears for about two seconds, then the app is displayed. I assume this is the time spent getting WASM to play nice.
I check the browser console and head over to the network tab.
What I see blows me away!!!
DLL in the browser … I repeat! DLL in the browser!
*.DLL files, right in the browser!!! 😱😱😱
DLL in the browser ... I repeat! DLL in the browser! #Blazor #dotnetcore Damn! Web Assembly is lit 🔥 The Web doesn't know what's about to hit it!!! cc @themojoblanco @ehimahobuse @Karagulamos @celestocalculus @iamchilas
I’m like waaaaahhhh???
How is this even possible?
Sorry, I can’t tell you just yet. I’m still reading up about this, and trying to figure out how it works.
WebPack came to the party
Also, can you see the DLL files are references via a TypeScript file called MonoPlatform.ts?
Yep!
That’s a typescript file served via Webpack, in a project that has no node_modules folder.
It feels like React
With a component system and a router, it feels a bit like I’m writing React (without the pure functions, of course).
A component is defined by a *.cshtml file, and can “own” a route via the @page directive.
No live reload yet
When you make a change to a component, you may be used to seeing it reflect in the browser immediately, but this is still being worked on (as it’s an alpha release).
For now, there’s no dotnet watch command, so you’d have to grit your teeth and continue, or use the dotnet watch run CLI command which you can get by adding:
<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
<Watch Include="**\*.cshtml"/>
to your *.csproj file and executing dotnet restore.
The dotnet watch run recompiles the entire app when a file it’s watching changes. It’s slow, but it gets the job done.
The Blazor App Template
The App Template is a simple SPA built on top of Blazor.
There’s a section for incremental count.
Another for showing dummy Weather Forecast data after being fetched from a JSON file.
What this needs?
I think this a bold move by Microsoft, and the dotnet community, being the foremost in the Web Assembly space.
At this rate, dev teams could be building apps for the web by the end of this year.
An equally bold move?
I am definitely looking forward to playing more with this tool. I’m looking at you, todomvc.com