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
2. Who is this guy? Stratos Pavlakis Head of engineering @Blueground https:/ /github.com/th3hunt https:/ /twitter.com/th3hunt
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
4. 👋 Remix
5. Is a full stack web framework 👋 Remix Remix is the View and the Controller but it leaves the Model up to us
6. Remix stands About here
7. Brought to you by… + Michael Jackson Ryan Florence Kent C. Dodds
8. Back in Apr 2021… it came with a… subscription model
9. Nov 2021 - v1.0 became OSS & slick 😍
10. 🧠 Remix philosophy
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
12. Create a Remix project
13. Create a Remix project
14. Create a Remix project
15. Create a Remix project
16. https:/ /www.imdb.com/title/tt0096256/
17. Kick-ass features
18. Kick-ass features https:/ /remix.run/docs/en/v1/tutorials/jokes
19. Kick-ass features: Fast builds!
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
21. Kick-ass features: Load data with Loaders In CSR, this becomes a remote fetch() call
22. 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
23. 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”>
24. Kick-ass features: Styling ✅ CSS with scoping built-in ✅ PostCSS ✅ Tailwind CSS 🟡 CSS in JS 🔴 CSS modules
25. Kick-ass features: Error handling <App> root.tsx <Jokes> /routes/jokes.tsx <NewJoke> routes/jokes/new.tsx
26. Made easy with Remix
27. Made easy with Remix • Progressive enhancement • Excellent performance baseline • SEO • Accessibility • Pending UI • Optimistic UI • Prefetching
28. Answers to obvious questions :)
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
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
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
32. How to learn Remix? • Remix Docs • Tutorial: Dev Blog • Tutorial: Jokes app • Remix singles • Remix tutorial with Kent • Remix examples 👈
33. Thank you! Any questions about ?