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
   

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

7. Loader
   Router
   SSR
   

   View Slide

8. Loader
   Router
   SSR
   

   View Slide

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
   

   View Slide

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"
    

    View Slide

11. Loader
    Router
    SSR
    

    View Slide

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

    View Slide

13. App without Router
    

    View Slide

14. App with Router
    /talks /settings /about
    

    View Slide

15. Hydration without Router
    Client
    Server
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Coding Time
    

    View Slide

21. Loader
    Router
    SSR
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. 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 ;
    }
    

    View Slide

28. Navigation: /
    Client
    Server
    Nested Loaders
    /talks Loader
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Coding Time
    

    View Slide

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

    View Slide

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 😉
    

    View Slide