How to learn Blazor when you don't use it for your day job

I recently heard from a programmer who took a long break from web development around 2012, and has just come back to it.

It’s fair to say the ecosystem around building applications for the web has changed a bit (a lot) in 7 years.

In 2012, Angular JS (or just Angular as it was known then) was only a couple of years old, React hadn’t been born and JQuery still dominated.

Fast forward to 2019 and, not only has the javascript ecosystem transformed into a sea of build tools, bundlers and frameworks, but, for many of us .NET developers, javascript is still that “other thing” we have to endure.

And as “other things” go, it brings more than its fair share of complication to our lives.

With every framework, “build tool” and javascript version, we have something new to learn.

React hooks, object destructuring, CLIs; the list grows and grows.

It’s a lot to keep up with; and now an entirely new can can of worms has exploded, in the form of Blazor.

Blazor carries massive potential to provide welcome relief to those of us looking for a javascript alternative; you get to bring your existing knowledge and skills to the world of “modern web application” development.

But now you have a new problem…

How are you supposed to keep up with all this stuff?

Keeping up with modern .NET web development is tough, especially if you’re stuck using WebForms in your day job.

But it can be done; you just need a strategy you can actually stick to.

You see, the problem with setting out to “learn Blazor”, is it really doesn’t give you much to focus on.

Which bit of Blazor do you want to learn? Are you looking at Blazor Server, WebAssembly, or both? What are you trying to build?

Even the slightest hint of uncertainty at this point means that little voice in your head, the one screaming “wouldn’t it just be easier to go watch every episode of Stranger Things on Netflix?”, wins, and you find yourself…

… procrastinating.

And no wonder! The task ahead is too vague, too big, too endless, and the alternatives (Netflix) are much, much easier.

The answer? Have a plan, which works for you, which gives you plenty of small wins along the way (so you’ll keep going, even on your bad days).

The plan in a nutshell:

• Make time to learn
• Set yourself a small challenge
• Pick a tiny feature to try and build
• Build momentum with tiny successes

Make time

It’s tough; you work all day, arrive home mentally exhausted from all the fire-fighting you’ve endured, and now you’re supposed to learn Blazor too?!

This tired, frustrated version of you is ready to wave a white flag and surrender (to the couch). But remember, the less tired, more sensible, more intelligent version of you wanted to learn Blazor…

I find the best way to silence this inner voice is to schedule time and (as far as possible) make it non-negotiable.

For this to work, the schedule has to be realistic.

2 hours a day, 5 nights a week is a lot to ask, and leaves plenty of room for procrastination and avoidance.

30 minutes a day, or even 30 minute every other day? That might work.

Even on your worst days you can probably sit at your computer for 30 minutes in the evening, so long as you’re clear on what your next step is.

Tip: Use existing habits to build your new one

I read a book recently by James Clear, called “Atomic Habits”. Incidentally, I can’t recommend it highly enough if you’re interested in developing better habits (in all area of your life).

In the book James talks about habit stacking.

The idea is, we all have a lot of existing habits; making a coffee, brushing our teeth, washing up after dinner etc.

These are things you do without thinking.

Habit stacking is all about taking these existing habits, and stacking your new behaviour (learning Blazor for 30 minutes) on top.

So, rather than pair your new habit with a time, or location, you can pair it with your current habit.

• After I’ve washed the dishes, learn Blazor for 30 minutes
• After the kids are in bed, open up my Blazor side project on my laptop
• After my morning cup of coffee, write down one idea for my Blazor side project

By attaching this desired new habit (and it can be as small as opening your Blazor side project) to your existing one, you’ll create a connection which makes it much more likely you’ll stick to your schedule.

Set yourself a small challenge

Now you’ve got some time, pick something really, really (really) small to build and be clear how you’ll know it’s done.

If you pick something too big (like an online store), you’ll run into issues.

• It’s a big, daunting looking application
• It has potentially never-ending scope
• It’s not clear where to start
• You’ll never know when you’re “done”

All of these factors open the door to uncertainty, frustration, and Netflix…

Better then, to pick something really small and focused to build first.

A few of my favourites:

• Twitter clone (show a single “tweet”, and/or a list of “tweets”, add new tweets)
• Slack clone (similar to Twitter, show a slack message, or a list of messages, make them editable)
• Blog (with simple editor, view posts, edit them)

These are smaller than an online store, and carry a lot less complexity.

But, be warned, even these have potential for scope creep, so don’t skip the next step.

Pick one (small) feature

Now you have a small app in mind, brainstorm the list of features you could build.

If you’re using a real-life example (like Slack) this is pretty straightforward as you can just see what it already does.

Now pick one, tiny feature to build first.

For Slack, the slack “message” would be a good start.

I find it really useful to start with a sketch/mockup like this.

For a start, it gets you thinking really clearly about what you’re trying to build.

Secondly, it narrows the scope; the job ahead is to build what you can see in this mockup, nothing more, nothing less.

Now at this point, even to build this simple UI, you need to know a little bit about Blazor.

This is where you get to spin up a new project, explore the sample application, see how they’re displaying data on the screen, and mimic it for your slack message.

As you work through this process you’ll start coming up with questions; things you’re not sure how to do.

Write these down because specific questions are perfect search fodder.

After all, if you hit a search engine with “Learn Blazor” you’ll get pages of wooly, vague results.

Hit that same search engine with “how to use select lists with Blazor” and you’ll get much, much more useful answers.

A few more tips for this stage:

Simple read-only features are a great way to start

Read-Only features like this (where you’re mostly just showing text) are great for getting started (as they’re relatively straightforward to build).

They (generally) have less moving parts, and you can get a long way into Blazor fundamentals (like building separate components, composing components together) even with a simple feature like a Tweet, or a Slack message.

Use hardcoded data

Before you go “off on one” and design an entire database for your application, consider using hardcoded data to get started.

A simple C# list of objects will give you what you need to build up the UI.

The danger of going “database first” is you can get lost in that process, which has nothing to do with Blazor!

The database can always come later.

Note down the next task before you finish for the day

This is probably the single most useful “productivity hack” I use on a daily basis.

Have you noticed how “on it” you are once you’re in the middle of a development task?

There comes a point where you’re on top of everything, you know exactly what you’re doing, what you need to do next, and what you’re not yet sure about.

Fast forward to tomorrow evening, you sit back down at your computer and… it’s all gone.

You can’t even remember what you were working on, let alone what you were hoping to do next!

The procrastination gremlins come back, you find yourself looking at Twitter for “inspiration”; suddenly, your half hour to learn Blazor turns into an hour “discussing” politics with some random stranger on the internet.

My hack for this is simple; just before you finish your development session, write down a note to “future you” clearly stating the next task.

Now when you sit down the next day, you’ll see this note and it will magically transport you back into the zone, where you know what to work on, and where to get started.

Build momentum with tiny successes

Now you’ve devised a realistic schedule, come up with a project and identified the first few tiny features to build, you’re ready.

It’s tempting to think you need to wait for motivation to strike before you can start learning Blazor, but actually I think it’s the other way round.

When you see features springing to life before your eyes in your Blazor app, you’ll build momentum, and motivation flows from momentum.

For motivation, you could just as easily substitute “enthusiasm” or “being in motion”.

And the great news is, a little effort and commitment on your part will deliver a whole heap of Blazor knowledge and experience, leaving you primed to jump on the Blazor bandwagon as it continues to gain speed.

(Bonus tip: you can use this same approach to learn anything, even javascript frameworks if you want to!)

Next up