Already own Practical Blazor Components? Log in to access

Practical Blazor Components

Faster, faster, always faster

Coming Soon

Practical Blazor Components will be back very soon - I'm busy adding new content and updating the course for .NET 8.

Pop your email in the box below and you'll be first to know when course opens up again.

I respect your email privacy. Unsubscribe with one click.

"Every new feature piles up the technical debt..."

Let's face it, your employers generally want you to go quicker.

Whether it's adding a new feature, fixing a bug, or spinning up a whole new app, they want it now, and they want it to work as advertised.

And this makes sense.

They have a business to run, your code is going to help them make money (or save money) and they want those results as soon as possible.

But here's the rub.

You know how software really works.

You know you could just throw all the code in one giant file, hack together some CSS and HTML, and ship the feature 'ASAP'.

But you also know you've got to live with it for the next 3 years (at least).

One minute it's a 'simple product list page', next it's a thousand line behemoth, riddled with endless conditional logic and a mess of tangled components all fighting over the same shared data.

Fast today, grinding to a halt tomorrow.

Start fast, stay fast

But it doesn't have to be this way, a seemingly impossible choice between rushing now or building something you can live with.

Web Development has changed a lot over the last decade and a productive, sustainable approach has emerged;

Using components you can build small, well encapsulated pieces of UI and glue them together to form larger features.

Done 'right' components enable you to get features up and running quickly, and continue to go fast as they change and evolve over time.

Get in, get done, go home by lunch time (well, we can dream!)

Blazor brings a powerful component model to .NET development.

It frees you up to break complex requirements down into smaller tasks, to build entire applications, one component at a time.

And with .NET 8, Blazor has become a 'drop in' replacement for MVC and Razor Pages too.

But there's a catch…

If you just carry on building pages and call them components you're missing out on nearly all of Blazor's potential.

While .NET 8 makes it possible to use components 'everywhere', in practice you soon run into challenges:

  • How far can you go with .NET 8's static server-side rendering before turning to one of Blazor's interactive modes (Server or WASM)?
  • How do you set about building line of business applications now you have multiple render modes to think about?
  • When should you spin up a new component vs keeping it all in one place?
  • Which components should you extract?
  • How do you make your components talk to each other?

It's a lot to wrap your head around

Adjust your mindset to 'think in components' and you can build much more reliable, much easier to maintain Blazor web applications, faster.

With a handful of core strategies, you can ease past the uncertainty, lift yourself out of analysis paralysis, and keep those new features rolling.

But it requires a practical approach that meets reality where it is.

Introducing Practical Blazor Components - The fastest way to get up to speed with Blazor and .NET 8

It's all well and good people like me telling you to 'keep it simple' or 'start with the basics' but what does that actually mean?

Who's going to tell you how to take the 'simplest' approach when you're working on your own projects?

And what is the simplest approach anyway? One big component, or lots of smaller components? Should components fetch their own data or accept it via parameters?

Practical Blazor Components is a new self-paced course that will give you answers to these questions.

Learn, practice, and internalise how Blazor's component model really works:

How to build web applications using .NET 8's static SSR mode, where to put your state, how to communicate between components and how to break your UI down into smaller pieces.

In short, how to deliver reliable, scalable web applications, faster.

Hi there, I'm Jon Hilton! πŸ‘‹

If you're reading this, I'll bet at some point in your career you've experienced that frustration of working in a web app, suspecting there's a better way, but not quite sure what it is.

I know because I've been there.

I've spent days knee-deep in 'legacy' web apps (you know, built last month πŸ˜‰) wading through bloated pages, scouring HTML, JavaScript and backend code, desperately trying to figure out where to make my changes.

For me, that frustration led to Angular, then React, and in recent years, other JS frameworks like Svelte.

But, although I learned to be productive with those frameworks (and love building in components) I never felt entirely comfortable in the JS world.

There's only so many hours debugging broken NPM package references a person can take!

So I was delighted when Blazor emerged; now I was able take all that knowledge and experience, and use C# and .NET to build web apps again.

My productivity went through the roof!

Since then I've gone on to teach hundreds of developers how to use Blazor to build better web applications, faster, and I can't wait to help you do the same.

Jon Hilton

The Curriculum

Blazor is really, really productive for building web applications, especially in .NET 8.

Here's what you'll learn to help you build better, more maintainable web apps, faster using Blazor:

screenshot from the course showing a lesson called [Walkthrough] Hardcoded List

Module 1

Get up and running

A quick orientation, how to access the community, and a brief introduction to Blazor in .NET 8.

'Hands On' Project #1

Build a Line of Business .NET 8 Blazor web app

Straight to the heart of the matter. Discover Blazor's new static server-side rendering mode when you build a small a LoB app for yourself.

  1. Use the new static server-side-rendering mode to build an online store
  2. Employ enhanced navigation and stream rendering to make your app feel like a SPA (even though it isn't)
  3. Connect to data (using EF Core)
  4. Capture user input (using forms)

Watch 'over my shoulder' as I walk you through my approach, and explain the underlying .NET 8 concepts that are in play.

Module 2

What about those components? - Going interactive

How components work (and how they differ from other ways to build web apps)

  1. How everything in Blazor is a component
  2. How to make your components run interactively (when static rendering isn't enough)
  3. How Blazor sends data between your components (across different render modes)
  4. How Blazor really works 'under the hood' - using render trees and a virtual DOM

Module 4

How to 'think in components'

Get answers to that age old question - What is a component anyway?

  1. What is a component?
  2. Why does it matter?
  3. When and how to break your UI down into smaller components

Module 3

How to handle communication between your Blazor components

More components more problems? How to make your components talk to each other.

  1. How Blazor builds a component tree for your UI (and how that affects communication between components)
  2. Handle communication between your components: Parent -> Child, Child -> Parent and between siblings
  3. Start 'thinking in components'

Module 5

Advanced Techniques for making your components more re-usable

Unlock Blazor's real potential to speed up your development by re-using your components.

  1. How to use Render Fragments to 'pass markup' to your components
  2. Cut down on repetitive code by designing components with multiple Render Fragments
  3. See how Render Fragments actually work ('under the hood')

Module 6

Supercharge your web app and design better components

You've mastered the basics, your components are re-usable, and you know how to build an app, one component at a time. Your Jedi training is nearly complete!

In this module we'll explore the tactics experienced Blazor developers use to make working on their web apps a doddle.

  1. Tips and tactics for building more maintainable Blazor web apps
  2. How to use components like you would Lego building blocks
  3. Make your app easier to maintain by building two 'types' of component: generic and application-specific

'Hands On' Project #2

Build a guess the word game

Build a small game using Blazor, and the skills you've picked up from the course so far.

  1. Build a game where players have a number of attempts to guess the film title
  2. Pass state between components
  3. Use Event Callbacks to signal 'up the component tree'

Module 7

The secret lifecycles of components

Component not rendering when you expect? It's probably for a good reason, let's figure it out…

  1. The steps your components go through to be rendered in the browser
  2. When and why the various lifecycle methods are called (like OnInitialized, and OnParametersSet)
  3. How to make use of the lifecycle methods when building your own components

Practical Blazor Components - Learn by Doing

  1. Learn the why, as well as how, to use Blazor's powerful component model to build better web applications, faster
  2. Each module is standalone and achievable within hours (so you can make progress quickly)
  3. There are numerous exercises help you get started, and keep going
  4. Included is a self-contained project that gives you the chance to hone and practice your skills, by building a small game from scratch
  5. The project and exercises are full of hints, ensuring you can always make progress
  6. The course includes written explanations and source code plus videos so you can watch 'over my shoulder' as I tackle some of the exercises (see how an experienced Blazor developer 'thinks in components')

Compared to live training:

  1. Work through the exercises and projects in your own time
  2. Ask questions and get feedback as you go (via the Practical ASP.NET Pro Community)
  3. Read, and re-read the lessons - plug gaps in your knowledge and cement your understanding
  4. Access the course materials forever
  5. Take the course in the comfort of your own home
  6. No need to travel, or take time off work
  7. Pay a fraction of the cost of live training

Get started, and keep going…

The course is designed to help you get going quickly, then ensure you don't get stuck along the way. Here's how:

Progressive Hints

Each exercise includes hints to help you complete each task.

Subtle prompts to start with, then increasingly specific and more detailed if you need a little more guidance.

In most cases the last hint will give you the exact code you need. Just remember to have a go first, before jumping to the answers! πŸ˜€

Checklist Acceptance Criteria

Exercises have acceptance criteria (so you know when you're done). Build momentum by ticking off tasks as you go.

Help and support from the community

Web development can be tricky at times, and sometimes you just need someone to bounce your ideas (or problems!) off.

Enrol in the course and you'll also get lifetime membership to the Practical ASP.NET private community .

  1. Exclusive lifetime membership to the Practical ASP.NET private ASP.NET/Blazor community
  2. Help if you get stuck
  3. Challenge your assumptions
  4. Connect with your fellow ASP.NET developers

Don't just take my word for it…

Accelerate Your Blazor Journey

Get up and running quickly with the Master Tier of Practical Blazor Components.

Bonus Video Workshop #1

From Zero to Hero with Blazor and .NET 8

In October 2023 I ran two 90 minute live workshops covering .NET 8 and Blazor.

In just under 90 minutes we built a web app from scratch, using .NET 8's new render modes for Blazor.

Then, in the follow-up session, I showed how I would approach extending and refactoring the UI, and ran through my top tips for building maintainable web applications with Blazor.

Clocking in at just under 3 hours the video replays of both sessions will get you up and running with Blazor in .NET 8, fast.

Bonus Video Workshop #2

Rapid UI Development with Blazor and Tailwind CSS

If you just build your Blazor components like you would pages, you're missing out on most of the benefits.

Blazor comes to life when you start to break your UI down into smaller pieces, and compose them together to form your application's UI.

But if you're used to building pages, when and how should you break your UI down into components?

This 4 hour workshop has the answers. Learn how the pros rapidly evolve their UI using components and Tailwind CSS framework.

Build Blazor Web Apps, Fast

Rewire your brain to to think in components and build better web applications faster, starting today

Master

$249
+ applicable taxes

Deep dive into .NET 8. Quickly learn all the practical skills you need to build blazing fast web applications using Blazor's rich component model in any render mode.

  • βœ“ Instant Access to all modules, project, and workshop replays
  • βœ“ Exclusive ASP.NET community
  • βœ“ 30 day money back guarantee
  • βœ“ Certificate of Completion
  • βœ“ BONUS: 7 hours of Blazor Workshop training

INCLUDES

  • 1 Get up and running
  • P Build a Line of Business App (using Static SSR)
  • 2 What about those components? (make it interactive)
  • 3 How to "think in components"
  • 4 How to handle communication between your components
  • 5 Save time with re-usable components
  • 6 Supercharge your web app and design better components
  • P Build a 'Guess The Word' game
  • 7 The Secret Life Of Components - Lifecycles
  • W BONUS: Zero to Hero - .NET 8 Video Workshop
  • W BONUS: Rapid Dev w/ Blazor + Tailwind Video Workshop

Up And Running

$149
+ applicable taxes

Get up and running with Blazor in .NET 8 - build more maintainable web applications faster.

  • βœ“ Instant Access to all modules, and projects
  • βœ“ Exclusive ASP.NET community
  • βœ“ 30 day money back guarantee
  • βœ“ Certificate of Completion

INCLUDES

  • 1 Get up and running
  • P Build a Line of Business App (using Static SSR)
  • 2 What about those components? (make it interactive)
  • 3 How to "think in components"
  • 4 How to handle communication between your components
  • 5 Save time with re-usable components
  • 6 Supercharge your web app and design better components
  • P Build a 'Guess The Word' game
  • 7 The Secret Life Of Components - Lifecycles

30 Day Money Back Guarantee

Stripe PayPal

Frequently Asked Questions

  • There are loads of other Blazor courses and tutorials, why should I try this one?

    There are some great courses, books, and tutorials out there, but have you ever found after you complete a tutorial, or watch a few videos, that you still don't actually know how to apply what you've learned to your own projects?

    There's a big difference between passively watching videos, following someone else's step by step instructions, and actually building something yourself.

    My focus with this course is to get you as much hands-on practice and experience as possible, so that you can confidently build your own Blazor apps.

  • What format is the course in?

    The course includes text explanations, source code examples, videos and interactive, self-paced exercises.

  • Can I download the course?

    Given the mixed content and interactive nature of the course it isn't possible to offer it as a download.

  • Does the course cover setting up Authentication/Authorization

    The course does not cover the mechanics of setting up Authentication and Authorization.

    Rather, it teaches you how to rapidly build and evolve Web UI using Blazor's powerful component model (and the various render modes now available in .NET 8).

  • How long will I have access to the course?

    Forever! Once you've enrolled and paid, you'll have access to the course material for as long as you need. So devour it all in one weekend or take things slow. It's your choice!

  • What if I'm unhappy with my purchase?

    Try it and find it's not for you? Just email me within 30 days to get a full refund (minus any non-refundable platform fees).

  • What if I have a question?

    When you enrol you'll be invited to join the Practical ASP.NET community. You can ask questions there. There's also a built-in feedback mechanism in the course itself.

An unhandled error has occurred. Reload πŸ—™