Intro to Remix

Focused on web fundamentals and modern UX, Remix promises to be the better web platform. Another major "faster web means less JS" contender, Remix attacks the problem from the Fullstack corner wearing beefy features and lots of opinion. In this talk we will try to position Remix on the web tooling landscape and check out some of its killer features like Data Loaders, Built-In Forms and Nested Routes.

Transcript

1. INTRO TO REMIX
   Get in fashion by going old school
   

   View Slide

2. Who is this guy?
   Stratos Pavlakis
   Head of engineering @Blueground
   https:/
   /github.com/th3hunt
   
   https:/
   /twitter.com/th3hunt
   

   View Slide

3. Agenda
   • 👋 Remix
   
   • 🧠 Remix philosophy
   
   • 🏭 Create a Remix project
   
   • Kick-ass features
   
   • Fast builds
   
   • Nested routes
   
   • Data loading via loaders
   
   • Data writing via actions
   
   • Styling
   
   • Error handling
   • Made easy with Remix
   
   • SEO
   
   • Accessibility
   
   • Pending UI
   
   • Optimistic UI
   
   • Prefetching
   
   • Answers to obvious questions
   
   • Why use Remix
   
   • When to use Remix
   
   • How to learn Remix
   

   View Slide

4. 👋 Remix
   

   View Slide

5. Is a full stack web framework
   👋 Remix
   Remix is the View and the Controller
   
   but it leaves the Model up to us
   

   View Slide

6. Remix stands
   About here
   

   View Slide

7. Brought to you by…
   +
   Michael Jackson Ryan Florence Kent C. Dodds
   

   View Slide

8. Back in Apr 2021…
   it came with a…
   
   subscription model
   

   View Slide

9. Nov 2021 - v1.0 became OSS & slick 😍
   

   View Slide

10. 🧠 Remix philosophy
    

    View Slide

11. 🧠 Remix philosophy
    • Work with web fundamentals - not
    around them
    
    • Less Javascript == faster web
    
    • Progressive enhancement == great UX
    
    • Convention over con
    fi
    guration
    improves developer experience and
    productivity
    
    • Code colocation for more maintainable
    codebases
    Old
    Skool
    

    View Slide

12. Create a Remix project
    

    View Slide

13. Create a Remix project
    

    View Slide

14. Create a Remix project
    

    View Slide

15. Create a Remix project
    

    View Slide

16. https:/
    /www.imdb.com/title/tt0096256/
    

    View Slide

17. Kick-ass features
    

    View Slide

18. Kick-ass features
    https:/
    /remix.run/docs/en/v1/tutorials/jokes
    

    View Slide

19. Kick-ass features: Fast builds!
    

    View Slide

20. Kick-ass features: Nested routes
    • Powered by React
    Router v6
    
    • Component tree is
    known at request time
    enabling tons of
    optimizations
    
    • A single URL matches
    multiple nested routes
    == all components along
    the tree path
    

    View Slide

21. Kick-ass features: Load data with Loaders
    In CSR,
    
    this becomes a remote fetch() call
    

    View Slide

22. Kick-ass features: Write data with Actions
    • Progressive enhancement: Use
    instead of to
    emulate browser behavior with
    fetch
    
    • useActionData() typically used for
    validation
    
    • useSubmit() to submit
    programmatically
    
    • useFetcher() to call a loader/
    action outside of navigation
    
    

    View Slide

23. Kick-ass features: Styling
    root.tsx
    /routes/jokes.tsx
    routes/jokes/new.tsx
    
    href=“mycdn.com/jokes/new-123bc8.css”>
    
    href=“mycdn.com/jokes-fa2311.css”>
    
    href=“mycdn.com/global-dd2313.css”>
    

    View Slide

24. Kick-ass features: Styling
    ✅ CSS with scoping built-in
    
    ✅ PostCSS
    
    ✅ Tailwind CSS
    
    🟡 CSS in JS
    
    🔴 CSS modules
    

    View Slide

25. Kick-ass features: Error handling
    root.tsx
    /routes/jokes.tsx
    routes/jokes/new.tsx
    

    View Slide

26. Made easy with Remix
    

    View Slide

27. Made easy with Remix
    • Progressive enhancement
    
    • Excellent performance baseline
    
    • SEO
    
    • Accessibility
    
    • Pending UI
    
    • Optimistic UI
    
    • Prefetching
    

    View Slide

28. Answers to obvious questions :)
    

    View Slide

29. Why use Remix?
    • Super fast builds
    
    • Normalised platforms
    
    • Simple and minimal API
    
    • Better SEO out of the box
    
    • Better accessibility baseline
    
    • Shorter TTI
    
    • Fewer, better tests
    
    • Coming soon: ServiceWorker
    support
    
    • HTTP streaming support very
    possible
    • URL
    fi
    rst approach
    
    • Work with, not against the web
    fundamentals
    
    • Convention over con
    fi
    guration
    
    • One recommended way to do
    things
    
    ⚙ Technical reasons 🧐 Viewpoint reasons
    

    View Slide

30. Why use Remix?
    • URL
    fi
    rst approach
    
    • Work with, not against the web
    fundamentals
    
    • Convention over con
    fi
    guration
    
    • One recommended way to do
    things
    
    🧐 Viewpoint reasons
    

    View Slide

31. When to use Remix?
    • Websites (marketing, blogs, e-
    shops)
    
    • Where SEO is critical
    
    • Small to medium web apps -
    consisting of linear business
    fl
    ows
    
    • Where progressive enhancement
    is very important (e.g. EdTech)
    • Larger web apps
    
    • Non linear / mixed component
    hierarchies
    
    • Non UI oriented services (e.g. a
    micro-service that happens to
    also have a thin UI)
    
    • If you can get away with SSG
    
    ✅ Adopt 🧐 Trial/Assess
    

    View Slide

32. How to learn Remix?
    • Remix Docs
    
    • Tutorial: Dev Blog
    
    • Tutorial: Jokes app
    
    • Remix singles
    
    • Remix tutorial with Kent
    
    • Remix examples 👈
    

    View Slide

33. Thank you!
    
    
    Any questions
    
    
    about ?
    

    View Slide