Blazor: Getting Started

First, what is Blazor?

Blazor is a new client-side UI framework from the ASP.NET team.

Ok, but what does this mean?

C# instead of JavaScript. Blazor allows you to build modern web applications using C#, HTML, and CSS.

WebAssembly vs Server

Blazor comes in two flavors: WebAssembly and Server. With Blazor, you can either run your code directly in the browser using WebAssembly or on the server, communicating UI using SignalR.

Getting Started

When creating a new Blazor app with Visual Studio, it will ask you to set some initial configuration.

For this case, I selected WebAssembly and checked the “ASP.NET Core hosted” checkbox, this will configure the app to use an ASP.NET Core backend.

Note: Blazor also allows you to create a Progressive Web Application out of the box, but I’ll leave this for another time.

This setup will create the following solution structure:

The solution contains a client application, a server API, and a shared library; all you need to start coding… You’ll see that there are several example files, and if you go straight and run the project, you’ll find a simple weather application that will help you get familiar with the inner workings of Blazor.

Among the example files, you’ll find a shared model in the shared library, some controllers that return some mock data on the server project, and a few pages and components in the client application… Sounds familiar, right? Blazor components are building blocks for your application; a component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Karaoke App

I wanted to get some hands-on experience with Blazor, so I created a simple web application using the WebAssembly approach. It is a very straightforward application that lists and filters a song directory for a karaoke night.

The code is quite simple; client application makes a GET request to API, which reads a JSON file, deserializes it, and returns a list of songs. It is basically an alternate version of the sample application included with the template.

You can take a deeper look at the code in GitHub.

Wrap-up

Blazor is an exciting platform for web developers and a compelling alternative to the current web application frameworks. There are issues and aspects where Blazor feels not mature enough, but there is an active community of developers working to make it better and strengthen its weak points. I believe we’re going to see a lot of Blazor in the next years; we just need to wait for more developers to start creating with Blazor.

Open Source and COVID-19

Mass collaboration is becoming the key to solving our big shared problems; this collaborative problem-solving resides in the core of Open Source.

Open Source has given us innovative solutions to many different problems; it is enhancing our collaboration capabilities in ways we could have never imagined.

I wanted to share this GitHub blog post that lists some of the most impactful open source projects aimed to track, understand, and respond to COVID-19.

Open collaboration on COVID-19

Posted in Dev

Dev Tunes Vol. 1: Caribou

Daniel Snaith, aka Caribou, has that mix of electronic beats that get me in the mood. A veteran producer, he has a particular interest in long DJ performances. I think this may be the reason why I find it so good to focus and start a coding session.

Fun fact: Dan has a Ph.D. in mathematics. 🤓

Dev Tunes

There are two types of people in this world: The ones who listen to music while working and the ones who don’t.

There is an actual debate on whether music is good or bad for different types of work and activities and also several studies on this subject. Still, apparently, there is no definite answer, so, why don’t we skip the arguments and just do it if it feels good.

I’m part of the musical kind of developer, I need my music to code, and there are some tunes that just get me in the right mood.

I’m sure there are different strokes for different folks, but I want to share my Dev Tunes discoveries, so let’s make this a series.

Dev Tunes Vol. 1: Caribou