Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Remix: Yet another Framework

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

Rainer Hahnekamp

June 22, 2022
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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
  3. None
  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 😉