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

Intro to Remix

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.

Stratos Pavlakis

March 01, 2022
Tweet

More Decks by Stratos Pavlakis

Other Decks in Programming

Transcript

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

    View full-size slide

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

    https:/
    /twitter.com/th3hunt

    View full-size 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 full-size slide

  4. Is a full stack web framework
    👋 Remix
    Remix is the View and the Controller

    but it leaves the Model up to us

    View full-size slide

  5. Remix stands
    About here

    View full-size slide

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

    View full-size slide

  7. Back in Apr 2021…
    it came with a…

    subscription model

    View full-size slide

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

    View full-size slide

  9. 🧠 Remix philosophy

    View full-size slide

  10. 🧠 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 full-size slide

  11. Create a Remix project

    View full-size slide

  12. Create a Remix project

    View full-size slide

  13. Create a Remix project

    View full-size slide

  14. Create a Remix project

    View full-size slide

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

    View full-size slide

  16. Kick-ass features

    View full-size slide

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

    View full-size slide

  18. Kick-ass features: Fast builds!

    View full-size slide

  19. 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 full-size slide

  20. Kick-ass features: Load data with Loaders
    In CSR,

    this becomes a remote fetch() call

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. Kick-ass features: Styling
    ✅ CSS with scoping built-in

    ✅ PostCSS

    ✅ Tailwind CSS

    🟡 CSS in JS

    🔴 CSS modules

    View full-size slide

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

    View full-size slide

  25. Made easy with Remix

    View full-size slide

  26. Made easy with Remix
    • Progressive enhancement

    • Excellent performance baseline

    • SEO

    • Accessibility

    • Pending UI

    • Optimistic UI

    • Prefetching

    View full-size slide

  27. Answers to obvious questions :)

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. How to learn Remix?
    • Remix Docs

    • Tutorial: Dev Blog

    • Tutorial: Jokes app

    • Remix singles

    • Remix tutorial with Kent

    • Remix examples 👈

    View full-size slide

  32. Thank you!


    Any questions


    about ?

    View full-size slide