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

More Decks by Stratos Pavlakis

Other Decks in Programming


  1. Who is this guy? Stratos Pavlakis Head of engineering @Blueground

    https:/ /github.com/th3hunt https:/ /twitter.com/th3hunt
  2. 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
  3. Is a full stack web framework 👋 Remix Remix is

    the View and the Controller but it leaves the Model up to us
  4. 🧠 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
  5. 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
  6. Kick-ass features: Write data with Actions • Progressive enhancement: Use

    <Form> instead of <form> to emulate browser behavior with fetch • useActionData() typically used for validation • useSubmit() to submit programmatically • useFetcher() to call a loader/ action outside of navigation
  7. Kick-ass features: Styling <App> root.tsx <Jokes> /routes/jokes.tsx <NewJoke> routes/jokes/new.tsx <link

    rel=“stylesheet” href=“mycdn.com/jokes/new-123bc8.css”> <link rel=“stylesheet” href=“mycdn.com/jokes-fa2311.css”> <link rel=“stylesheet” href=“mycdn.com/global-dd2313.css”>
  8. Kick-ass features: Styling ✅ CSS with scoping built-in ✅ PostCSS

    ✅ Tailwind CSS 🟡 CSS in JS 🔴 CSS modules
  9. Made easy with Remix • Progressive enhancement • Excellent performance

    baseline • SEO • Accessibility • Pending UI • Optimistic UI • Prefetching
  10. 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
  11. 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
  12. 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
  13. How to learn Remix? • Remix Docs • Tutorial: Dev

    Blog • Tutorial: Jokes app • Remix singles • Remix tutorial with Kent • Remix examples 👈