Remix: Yet another Framework

This is an introduction into Remix covering the main elements and how they work together.

Repository: https://github.com/rainerhahnekamp/enterjs-remix

Transcript

1. Remix: Yet another Framework? Rainer Hahnekamp 22.6.2022
2. About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
4. Agenda • Remix in short • Next generation frameworks • SSR & Hydration • Router • Loader • Actions
5. Remix • Backend framework (NodeJs) ◦ Stacks as templates ◦ Prisma for Database ◦ Cypress, Vitest ◦ Edge-ready ◦ User Authentication • B4F • Based on React • Very flexible: mix approaches • Re-uses react-router and SSR • Potentially independent from framework
6. Remix Team (Popular Members) Ryan Florence Michael Jackson Kent C. Dodds
7. Loader Router SSR
8. Loader Router SSR
9. Client Server Browser Application Step 1: Server-Side Rendering Submit Cancel Only static Browser Application Application Interactive Step 2: Hydration 1. Server Side Rendering Innovation Area
10. Possible Measures • JIT Hydration ◦ Qwik ◦ Hard but huge impact ◦ Closely linked Bundler + Framework • Hydrate only interactive components ◦ React Server Components • Move non-interactive parts of components to the backend ◦ Remix, Next.js ◦ Focuses on data fetching ◦ "Simple"
11. Loader Router SSR
12. Router • Automatic Code Splitting • "Modularity" ◦ JavaScript ◦ Data • Enables parallel fetching
13. App without Router
14. App with Router /talks /settings /about
15. Hydration without Router Client Server
16. Hydration with (unnested) Router: /talks Client Server /talks /settings /about
17. Hydration with nested Router: /talks Client Server /talks /settings /about
18. Navigation: /talks → /talks/1 Client Server /talks /settings /about
19. Navigation: /talks/1 → /talks/1/comments Client Server /talks /settings /about
20. Coding Time
21. Loader Router SSR
22. Lifecycle: data-fetching component Load Data from Server Become Interactive Send Data to Server
23. Lots of dependencies for Server-communication • GraphQL • OpenAPI • State Management ◦ Redux • Transformation & Validation ◦ date-fns ◦ lodash ◦ zod ◦ …
24. Component Load Data from Server Lifecycle: data-fetching component Dependencies User Interaction
25. Client Server Submit Cancel Database Component Load Data from Server Dependencies User Interaction
26. LoaderFunction • Runs on the backend • Parallel fetching per nested route • Incrementally in nested navigation • Sent to browser with component chunks
27. Example Code export type LoaderData = Talk[]; // server part export const loader: LoaderFunction = async () => { const talk = await findTalks(); return json<LoaderData>(talk); }; // client part export default function TalkIndex() { const talk = useLoaderData<Talk>(); return <Talk talk={talk} />; }
28. Navigation: / Client Server Nested Loaders /talks Loader
29. Navigation: / → /talks/1 Client Server Nested Loaders /talks Loader ./$talkId Loader ./index Loader parallel
30. Navigation: /talks/1 → /talks/1/comments Client Server Nested Loaders /talks Loader ./$talkId Loader ./comments Loader
31. Deep Link: /talks/1/comments Client Server Nested Loaders /talks Loader ./$talkId Loader ./comments Loader parallel
32. Coding Time
33. Client Server Submit Cancel Database Component Load/Send Data to Server Dependencies User Interaction
34. Summary • Next-Gen framework • "Back to the Backend" • Framework agnostic • Speed improvements due to ◦ Reduced bundlesize via code-splitting ◦ Reduced bundlesize by loaders & dependencies on server ◦ Efficient (state) data from backend • Cannot make database queries faster 😉