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. About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting

    @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
  2. Agenda • Remix in short • Next generation frameworks •

    SSR & Hydration • Router • Loader • Actions
  3. 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
  4. 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
  5. 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"
  6. Lots of dependencies for Server-communication • GraphQL • OpenAPI •

    State Management ◦ Redux • Transformation & Validation ◦ date-fns ◦ lodash ◦ zod ◦ …
  7. LoaderFunction • Runs on the backend • Parallel fetching per

    nested route • Incrementally in nested navigation • Sent to browser with component chunks
  8. 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} />; }
  9. 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 😉