Wouldn’t it be cool if you could run C# code in a web browser? Blazor is a tool that compiles C# code into functioning web assembly that can be deployed like a normal webpage. This means that you get to build a normal website like you would previously, but instead of adding Javascript or Typescript to make the page dynamic you can instead use C# code to manage data bindings and more. This gives you the power to leverage C# code from other projects or even native apps and place it in a browser with virtually no extra work.

Blazor itself is still in alpha and both the tooling and the tool itself are still in the early stages of development. It’s certainly not stable or something you would want as your main website. Still it’s a cool technology that proves the potential for web assembly and promises to bring really cool features to web development very soon!

We’re going to walk through how I learn a new UI tool by building a task list. This will allow us to create a place for you to enter text, a button to create a task and a list of tasks that have either been completed or uncompleted so far. This will give us a chance to explore loops, data binding (from html to variable, variable to html and two-way bindings) and also try to figure out some of the quirks of Blazor and how it works.

Blazor and instructions to install it are available on the Blazor GitHub page here: https://github.com/aspnet/Blazor

At the time of writing this you’ll need Visual Studio 2017’s preview version.

For help on Data Binding in Blazor I referenced learn-blazor.com which is a handy resource for getting started with Blazor. Fun fact learn-blazor.com is built with Hugo, we’ve worked with at before: https://youtu.be/A6xpOpKBZ2k

Discord: https://discord.gg/hU5Kq2u