Rapid UI development with Blazor (and Tailwind CSS)
Note this is a 4 hour, live, online workshop which will take place via Zoom.
What does it really take to build modern web applications using Blazor?
Join me for this hands-on, extremely practical workshop where you'll actively develop the skills you need to rapidly build your web application's UI using Blazor.
You'll learn (and practice) how to:
Rapidly iterate your application's UI as new feature requests pour in
Use TailwindCSS to significantly speed up the UI design process
Refactor your Blazor components as your application grows in scale and complexity
Structure your app so you can always find the components you need when working on any given part of the UI
Leverage Swagger to generate a typed client for your Blazor app (in seconds)
Who's it for?
This workshop expects that you have some experience of building web applications (you know the fundamentals of HTML, and maybe a little CSS).
You don't need to have used Blazor before but ideally you'll have spent some time with the Razor View Engine (writing C#/HTML code in the same file, with Razor Pages, MVC or Blazor).
What should you bring to the workshop?
You’ll need to bring:
Yourself
Your favourite IDE
The practice examples (I’ll share relevant links to download them beforehand)
A web browser of your choosing (but please don’t bring IE 6! :))
Where does the workshop take place
This is an online event which will run for ~4 hours.
You'll need to connect via Zoom. The workshop features lots of live coding and chances to ask questions.
Proposed Schedule (subject to change)
Arrival, welcome
Rapidly create an effective, good looking UI using Tailwind CSS and Blazor
The challenges of a "traditional" approach to developing your web site using CSS
Where Tailwind fits in
Use Tailwind to quickly iterate your Blazor component's design
Use Flexbox to create virtually any layout you can think of (it's easier than you think!)
When and how to refactor large components into smaller ones - Part I
The pitfalls of large components
Refactoring challenge Part 1
How Atomic Design and Connascence can help us build better, more easily maintained, Blazor components
Break
When and how to refactor large components into smaller ones - Part II
Refactoring challenge Part 2
Practical considerations when refactoring
How to structure your Blazor app to improve maintainability and make ongoing development easier
What it means to organise by feature
How to decide where a component should go
The pitfalls of making your components too re-usable
Break
Making it real - consuming an API from your Blazor app
How Swagger (OpenAPI) makes it easier to consume an API
Use Refit to easily consume your API
Two alternatives for auto-generating your API clients
But what about shared models?
If you want to build better Blazor web applications, faster, this workshop is for you.