Professional Trainer
Advanced Remix
3 hours, 18 minutes
CC
Course Description
Remix is a terrific tool for building simple websites and even better for building complex web applications. Remix solves many problems in modern web development. You don’t even 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!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 27, 2022
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 18 minutes
Kent C. Dodds introduces the course and discusses the benefits of the advanced Remix topics. This course builds on the concepts learned in the Remix Fundamentals course.
Kent walks through the course repository and explains how to run the different applications. A README file with instructions and places for note-taking accompanies each exercise. A question about testing is also addressed in this segment.
UI Functionality
Section Duration: 1 hour, 41 minutes
Students are instructed to use the useFetcher().Form component to avoid a full-page refresh and history stack addition when the form is submitted.
Kent demonstrates the solution to the Non-Nav Mutation exercise.
Students are instructed to apply Optimistic UI techniques to the application by listing new deposits immediately after the user submits them.
Kent demonstrates the solution to the Optimistic UI exercise.
Kent uses a TodoMVC application to answer questions about handling multiple UI updates to the same component. Questions about managing fetchers are also answered in this segment.
Students are instructed to add logic to focus the element with a validation error. If there are no errors, the first input element should be focused.
Kent codes the solution to the Focus Management exercise.
Students are instructed to use the unstable_shouldReload API to indicate which routes should be reloaded when a specific mutation or client-side transition occurs.
Kent demonstrates the solution to the Revalidation Optimization exercise.
Students are instructed to connect the combo box component to the database, so as the user begins typing, the combo box shows matching results.
Kent walks through the solution to the Non-Nav Fetching exercise.
Students are instructed to finish the Remix implementation of the logout modal. A post request should be sent to the /logout route with the useSubmit() hook.
Kent demonstrates the solution to the Imperative Mutations exercise.
Improving Loading UX
Section Duration: 1 hour, 4 minutes
Students are instructed to render the spinner component with the useTransition hook when the application is in a loading state. The spin-delay package can also be used to delay the showing and hiding of the spinner.
Kent walks through the solution to the Pending UI Loading Spinner exercise.
Students are instructed to show a skeleton UI to improve the user experience while the content is loading. The useTransition().location.state object can help determine which customer record is being transitioned.
Kent codes the solution to the Skeletons exercise.
Students are instructed to implement the defer, Suspense, and Await APIs on the $customerId route to create the best loading experience.
Kent walks through the solution to the Defer exercise.
Kent uses the network profiler in the browser developer tools to explain how the Remix Defer component works in tandem with React Streaming. A question about nesting suspense objects is also discussed in this segment.
Kent briefly debugs a boundary error thrown by the Suspense component.
Wrapping Up
Section Duration: 14 minutes
Kent concludes the course by answering questions about PWAs, CSS in components, Storybook integration, what's exciting about the future of Remix, and community resources.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops