INTRO TO REMIX Get in fashion by going old school 

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

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 

👋 Remix 

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

Remix stands About here 

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

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

Nov 2021 - v1.0 became OSS & slick 😍 

🧠 Remix philosophy 

🧠 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 

Create a Remix project 

Create a Remix project 

Create a Remix project 

Create a Remix project 

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

Kick-ass features 

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

Kick-ass features: Fast builds! 

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 

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

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 

Kick-ass features: Styling root.tsx /routes/jokes.tsx routes/jokes/new.tsx 

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

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

Made easy with Remix 

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

Answers to obvious questions :) 

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 

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 

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 

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

Thank you! Any questions about ?