Blazor WASM by Example

Fed up of fighting javascript frameworks?

Build 'modern' web applications, using C#

Blazor by Example Logo

Already convinced?

For over a decade Javascript has been considered a prerequisite if you need to build fast, responsive "modern" web applications.

Like a dog chasing its own tail, the javascript machine goes round, and round, generating endless frameworks and a near incomprehensible ecosystem.

Build tools, package managers and compilers; all intended to help you package your code but in truth, you just cross your fingers, hit publish and hope the stars align to generate something you can actually push to your server.

And where does this leave you, the diligent developer trying to build your "simple" web application?

Tired, frustrated and less enthusiastic by the day.

With every new framework, build tool, state management library, you feel less and less productive.

You battle, you slog, you finally deploy your application only to have some maverick update an NPM package you didn't realise you relied on and, poof, just like that your site's gone up in flames again.

But wouldn't it be nice to side-step the JS churn and get back to the fun part; building interesting web applications?

Build fast, responsive, modern web applications using C#

Javascript is still an important part of the modern web development puzzle (albeit often a frustrating, perplexing, energy-sapping part) but now we have another option...

Microsoft has released Blazor WASM (Web Assembly), and with that arrives a JS alternative.

Now you can bring your C# skills to the fore, enjoy the benefits of strong-typing, a familiar ecosystem (and tools), and build web applications that rival all those fancy "JS heavy" applications you encounter every day.

Blazor WASM applications are written using C#, and run entirely in the browser (just like javascript). You can build complex, rich, interactive web applications without writing a lick of javascript.

But now you face a new challenge...

How do you give Blazor a spin, learn the fundamentals and decide if it's the right option for your next project?

Blazor is still new, and it's tough to find meaningful examples; I mean, if you've seen the Blazor demo app once you've seen it a hundred times...

hello world

But it's simple right?

Open Visual Studio, create a new Blazor application and you're off; go forth and build your applications!

Except... now you have questions:

  • How do I break a requirement down and build it using components?
  • How do I organise my components?
  • How do I pass data between components?
  • Should I be passing simple primitives or entire objects?
  • Where does my data access code go?
  • Do I need to build my own components for everything?

It's a lot to learn, especially if you're just trying to figure out whether Blazor is for you.

What if you could fast-forward to the good bit, the bit where you get to build interesting projects?

"It is very good and very interesting. In general I would recommend Blazor and your courses. I like the way you explain things and it's easy to understand."

Olivier Ilunga

Learn Blazor today

I'm Jon, author of Blazor by Example.

When I first started learning Blazor I realised I had a slightly unfair advantage.

You see, Blazor borrows a lot of concepts from the leading javascript frameworks out there (React, Angular and Vue)

Essentially Microsoft has taken the best parts of those frameworks and used them to create its own simple (but powerful) component model.

And so, having spent the last decade or so learning and using most of the leading javascript frameworks, Blazor's component model philosophy instantly clicked for me.

Avatar of Jon Hilton

But here's the rub, Blazor is unlike any previous incarnation of ASP.NET.

Where MVC deals in views, and Razor pages returns, well, pages... Blazor is all about components.

And "thinking in components" is fundamentally different to building your app using pages or views.

So I decided to use this advantage for good! and help other .net developers get on board with the fundamentals of building applications using Blazor components.

Blazor by Example

A focused collection of bite-sized examples, Blazor by Example hammers home how to move from design (or mockup) to working features.

Learn how to break a requirement down into components and then build them, quickly, using Blazor's powerful component model:

Within a few hours you'll understand:

  • How Blazor's component model works
  • How to create small, re-usable components
  • How to compose several components together to make bigger features
  • Where to put your data access code

Here's one of the modules (building a simple blog)...

It's stressful when you're trying to learn something new and can't find concrete examples to work from.

It's maddening when you know what you're trying to build, but don't have the right words to put into Google to find answers to your questions.

But once you have a few examples under your belt and a repeatable strategy for breaking the requirement down into smaller parts, you'll realise you can build almost anything.

What's included?

Hello World (component basics)

Discover how to...

  • Spin up a Blazor project
  • Create simple components
  • Render multiple instances of a component
  • Pass data in via parameters
  • Use routing

Pomodoro Timer

Discover how to...

  • Use StateHasChanged to signal Blazor to render your UI
  • Use JS Interop to change the browser window's title
  • Inject dependencies into your components
  • Implement IDisposable to clean up after yourself!

Pomodoro Timer (with base class)

Discover how to...

  • Refactor to use component base classes
  • Inject dependencies into a base class
  • Implement IDisposable in a base class

Slack-style message list

Discover how to...

  • Build components from a sketch/mockup
  • Use one-way binding to show information
  • Write your UI logic using code in your component
  • Bind to a list (to show multiple instances of a component)
  • Apply CSS styles
  • Handle events (to add new messages)
  • Display a menu "on hover"
  • Toggle the UI between read only and edit mode

Shopping Cart

Discover how to...

  • Use Event Callbacks to trigger changes in other components
  • Use two-way binding to show and update data
  • Use HTML Selects (dropdowns) in Blazor

Product Search

Discover how to...

  • Filter a list using two-way binding
  • Choose when to update a binding's value (onchange or oninput)

Application Dashboard

Discover how to...

  • Extend your app by creating new components (instead of modifying existing ones)
  • Build re-usable components
  • Use ChildContent Render Fragments to inject content into your components

A Simple Blog

Discover how to...

  • Use two-way binding to view/modify data
  • Retrieve and persist data to a database
  • Render raw HTML
  • Use auth in your web applications
  • Use validation in your forms
  • Implement one validator which runs in the browser and on the server
  • Restrict access based on user role

Learn important Blazor concepts by building different examples

With each new example, you'll discover vital Blazor concepts and see them in action:

  • One-way and two-way binding
  • Validating forms
  • Using StateHasChanged to trigger the UI to render
  • Composing several components together
  • How to break down a big feature into lots of manageable components
  • Communicating between components
  • Where to put your domain logic
  • How to connect Blazor components to data (and business logic)

Learn how to trigger an instant filter of a list in the Product search example.

Build a user interface from several components, which all communicate with each other (as in the Slack Clone example).

Use Event Callbacks to react to changes in child components (like refreshing the shopping cart when items are deleted).

Packed with step-by-step instructions and explanations of all the key Blazor concepts.

Most of the examples also include bonus "next step" practice exercises for you to try, to really drive the concepts home.

Bonus - Banish your CSS woes

If you're anything like me you don't exactly rush to take on 'front-end' work, especially when it involves fiddling around with CSS for hours!

Thankfully, there is a much quicker (and easier) way to make your Blazor application look good, using Tailwind CSS.

Watch over my shoulder as I take some of the Blazor examples from the course, eradicate Bootstrap and use Tailwind CSS to make them come to life.

Goodbye Bootstrap. Hello Tailwind CSS (VIDEO)

Discover how to...

  • Remove Bootstrap from the standard Blazor template
  • Add Tailwind CSS to your Blazor site
  • Use Tailwind to 're-skin' a simple Hello World example

A better looking Pomodoro Timer (VIDEO)

Discover how to...

  • Spruce up the Pomodoro timer example using Tailwind CSS

Slack - but with a little more style (VIDEO)

Discover how to...

  • Make the Slack 'clone' come to life using Tailwind
  • Handle different screen sizes (make it responsive)

Leave javascript and its ecosystem behind

Start building your web apps using C# today

Just the course

$29

Get started building applications using Blazor's component model.

  • Instant online access
  • PDF version for offline reading
  • 'Starter' projects source code

The Complete Package

$79

Get started building applications using Blazor's component model, plus build better looking components with Tailwind CSS and compare your practice exercise code to mine.

  • Instant online access
  • PDF version for offline reading
  • 'Starter' projects source code
  • Tailwind CSS upgrade videos
  • Tailwind CSS upgrade source
  • Practice exercise solutions
  • Practice exercise source code

What's Included?

Up and running
What day were you born?
A Pomodoro Timer
A Slack style message list
Shopping Cart
Product Search
Application Dashboard
A simple blog
Bonuses & Source Code
Glossary
JWTs
MediatR
NavLink
Razor
SignalR