Fed up of fighting javascript frameworks?

Build amazing web applications, using C#

Blazor by Example Logo

Launching August 19th 2020

We need to talk about "modern" web development.

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.

Oh to side-step the JS churn and get back to the fun part; building interesting web applications.

Build amazing ​web applications with Blazor WASM

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.

Finally, 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?

Learn Blazor today

Hey, I'm Jon, author of Blazor by Example.

When I first started learning Blazor I realised I had an unfair advantage.

You see, it turns out 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.

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 really 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

Discover how to...

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

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.

Bonus Content - 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)

Frequently asked questions

I'm not sure I've got much time to learn something new at the moment, how long will this take?

We're all going through some weird stuff at the moment and I am acutely aware that people's ability to commit time and energy to learning something new will vary right now.

I've designed Blazor by Example to be as accessible as possible. Each example is self-contained and designed to work at your pace, on your schedule.

If you wanted, I bet you could blitz through the entire thing in a few hours! But equally you might find it much more useful to take your time, and work through the examples at a more leisurely pace.

My hope is you'll get plenty of those, "Aha, so that's how that works!" moments even if you can only spare 10 minutes here and there over the coming weeks.

What if I buy but subsequently decide it's not for me?

No worries, just drop me an email and I'll happily refund you in full.

Do I need any prior knowledge of C# to follow along?

No, although it will certainly be easier for you to pick up if you do. I've been careful to provide explanations of key C# concepts as they apply to Blazor.

All the examples are built with full step-by-step directions so you can re-create them for yourself.

I've also made sure to include explanations for Visual Studio, VS Code, and just using a terminal where possible, so there should be no stopping you!

Do I need to have "tried" Blazor already?

This is largely the same answer... no, the course assumes no prior knowledge.

If you've already had a go at using Blazor, you may find some of the earlier walkthroughs pretty straightforward, but even then you'll be able to plug any gaps in your knowledge and try out my approach to building simple web apps using components.

Do I have to show up at certain times or anything like that?

No, everything is instantly available to you as soon as you sign up.

As you've seen from the screenshots above, it's mostly text-based with images to give you a better understanding of how all the pieces fit together, and designed for you to absorb at your own pace.