Remix: Yet another Framework

Slide 1

Slide 1 text

Remix: Yet another Framework? Rainer Hahnekamp 22.6.2022

Slide 2

Slide 2 text

About Me... ● Rainer Hahnekamp ANGULARarchitects.io ● Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Agenda ● Remix in short ● Next generation frameworks ● SSR & Hydration ● Router ● Loader ● Actions

Slide 5

Slide 5 text

Remix ● Backend framework (NodeJs) ○ Stacks as templates ○ Prisma for Database ○ Cypress, Vitest ○ Edge-ready ○ User Authentication ● B4F ● Based on React ● Very ﬂexible: mix approaches ● Re-uses react-router and SSR ● Potentially independent from framework

Slide 6

Slide 6 text

Remix Team (Popular Members) Ryan Florence Michael Jackson Kent C. Dodds

Slide 7

Slide 7 text

Loader Router SSR

Slide 8

Slide 8 text

Loader Router SSR

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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"

Slide 11

Slide 11 text

Loader Router SSR

Slide 12

Slide 12 text

Router ● Automatic Code Splitting ● "Modularity" ○ JavaScript ○ Data ● Enables parallel fetching

Slide 13

Slide 13 text

App without Router

Slide 14

Slide 14 text

App with Router /talks /settings /about

Slide 15

Slide 15 text

Hydration without Router Client Server

Slide 16

Slide 16 text

Hydration with (unnested) Router: /talks Client Server /talks /settings /about

Slide 17

Slide 17 text

Hydration with nested Router: /talks Client Server /talks /settings /about

Slide 18

Slide 18 text

Navigation: /talks → /talks/1 Client Server /talks /settings /about

Slide 19

Slide 19 text

Navigation: /talks/1 → /talks/1/comments Client Server /talks /settings /about

Slide 20

Slide 20 text

Coding Time

Slide 21

Slide 21 text

Loader Router SSR

Slide 22

Slide 22 text

Lifecycle: data-fetching component Load Data from Server Become Interactive Send Data to Server

Slide 23

Slide 23 text

Lots of dependencies for Server-communication ● GraphQL ● OpenAPI ● State Management ○ Redux ● Transformation & Validation ○ date-fns ○ lodash ○ zod ○ …

Slide 24

Slide 24 text

Component Load Data from Server Lifecycle: data-fetching component Dependencies User Interaction

Slide 25

Slide 25 text

Client Server Submit Cancel Database Component Load Data from Server Dependencies User Interaction

Slide 26

Slide 26 text

LoaderFunction ● Runs on the backend ● Parallel fetching per nested route ● Incrementally in nested navigation ● Sent to browser with component chunks

Slide 27

Slide 27 text

Example Code export type LoaderData = Talk[]; // server part export const loader: LoaderFunction = async () => { const talk = await findTalks(); return json(talk); }; // client part export default function TalkIndex() { const talk = useLoaderData(); return ; }

Slide 28

Slide 28 text

Navigation: / Client Server Nested Loaders /talks Loader

Slide 29

Slide 29 text

Navigation: / → /talks/1 Client Server Nested Loaders /talks Loader ./$talkId Loader ./index Loader parallel

Slide 30

Slide 30 text

Navigation: /talks/1 → /talks/1/comments Client Server Nested Loaders /talks Loader ./$talkId Loader ./comments Loader

Slide 31

Slide 31 text

Deep Link: /talks/1/comments Client Server Nested Loaders /talks Loader ./$talkId Loader ./comments Loader parallel

Slide 32

Slide 32 text

Coding Time

Slide 33

Slide 33 text

Client Server Submit Cancel Database Component Load/Send Data to Server Dependencies User Interaction

Slide 34

Slide 34 text

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 😉