Web App Fundamentals

Building modern web applications is riddled with complexity.

And that's only if you bother to deal with the problems.

Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?

Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?

At the end of this workshop you'll be able to do all of these things yourself:

Take advantage of nested routing Nested routing enables Remix to optimize the data you request. It also means each route you define can focus exclusively on itself and doesn't have to wrap itself in an overarching layout component which eliminates that boilerplate you need with other frameworks.

Write dead simple mutations Why re-invent mutations on the web when we've had something that works for ages? <form> works great with Remix. No wiring up useEffects, onSubmits, useReducers or whatever. Remix will do all that for you, including the backend portion. And when the mutation is done, Remix will make sure the rest of the data on the page is fresh too ✨

Improve your site performance... As in speed, but also for search rankings Remix is already ridiculously fast, and it gives you a simple API into HTTP cache headers so you can make it even faster for pages that can be cached. It also gives you a great API for preloading/prefetching resources and pages you think the user is likely to go next. On top of this, you get a super simple API for data-driven <meta> tags which are critical for SEO.

Completely eliminate pending states Look. It's important to show you users that something's going on, and some of these things take time. But what if we could cheat a little bit? Yup, I'm talking about optimistic UI. But you've never seen optimistic UI done this easily and reliably, I promise you.

Handle errors Unfortunately, we can't get our data immediately and getting our data isn't always error free. But when you use Remix, your React components feel synchronous and error free. We'll learn the APIs Remix exposes to give you powerful pending states and error management.

Required experience

You should have experience with these JavaScript features and attend my React Hooks Workshop or have the equivalent experience. This workshop will use TypeScript, but should be completable if you do not have experience with TypeScript.

What to expect from a Kent C. Dodds workshop

My primary goal is retention. If you can't remember what I've taught you, then the whole experience was a waste of our time.

With that in mind, we'll follow the teaching strategy I've developed over years of teaching (learn more about my teaching strategy here).

The short version is, you'll spend the majority of time working through exercises that are specifically crafted to help you experiment with topics you may have never experienced before. I intentionally put you into the deep end and let you struggle a bit to prepare your brain for the instruction.

Based on both my personal experience and scientific research around how people learn, this is an incredibly efficient way to ensure you understand and remember what you're learning. This is just one of the strategies I employ to improve your retention. I think you'll love it!

I'm excited to be your guide as we learn together!