Remix Fundamentals

Join Kent C. Dodds for "Remix Fundamentals"

August 2nd, 2022

The problem statement

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.

Here's why you should register for the workshop.

01.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.
02.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 ✨
03.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.
04.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.
05.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.

The topics we will be covering.

This is what we will talk about.

01.
Nested routing

02.
Data loading and mutations

03.
Styling

04.
Error Handling

05.
Optimistic UI

06.
Accessibility

07.
SEO optimization

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.

Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above mentioned topics.

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!

Don't just take my word for it.

What participants have to say.

“After signing up to EpicReact, I gained a lot of knowledge regarding advanced things in React, and that helped me to double my salary in less than 2 years. Now I feel confident to use fancy things like compound components, context module functions or prop collectors. EpicReact was the little push that I needed.”

Alan Medina

Frontend Engineer

“EpicReact.dev has completely changed the way I approach writing React. It gave me a deeper understanding which has resulted in better performance, less bugs and components that are easier to understand and maintain.”