ReactJS

Remix's evolution to a Vite plugin

Published Jul 10, 2024

Updated Jul 10, 2024

4 min read

The Remix / React Router news is a beautiful illustration of software evolution. You start with a clear idea of what you’re building, but it’s impossible to anticipate exactly what it will become. If you haven’t heard the news yet, Ryan Florence announced at React Conf 2024 that Remix will be a Vite plugin for React Router.

It’s a sort of surprising announcement but it makes a lot of sense if you’ve been following along as Remix the project has evolved. In this post we’ll recap the evolution of the project and then dig into what this change means for the future of Remix in the Server Components era of React.

🗓️ October 2021 > Remix is open sourced

In the beginning, Remix cost money. In October 2021 they received some seed funding and the project was open sourced.

Remix was an exciting new framework for server-rendering React websites that included API’s for loading data on the server and submitting data to the server with forms. It started a trend in the front-end framework space that a lot of other popular frameworks have modeled after or taken inspiration from.

🗓️ March 2022 - September 2022 > Remixing React Router

At some point they realized that the API’s that they had created for Remix were a more natural fit in React Router. In this post Ryan details the plans to move these Remix API’s into React Router.

Several months later, React Router 6.4 is released with the action, loader, and other Remix API’s baked in.

"We've always thought of Remix as "just a compiler and server for React Router"

After this release, Remix is now mostly as they described - a compiler and server for React Router.

🗓️ October 2023 - February 2024 > Remix gets Vite support

If you’re not familiar with Vite, it’s an extremely popular tool for front-end development that handles things like development servers and code bundling/compiling. A lot of the modern front-end frameworks are built on top of it.

Remix announced support for Vite as an alternative option to their existing compiler and server. Since Remix is now mostly “just a compiler and server for React Router” - what’s left of Remix now that Vite can handle those things?

🗓️ May 2024 > Remix is React Router

The Remix team releases a post detailing the announcement that Ryan made at React Conf. Looking back through the evolution of the project this doesn’t seem like an out of the blue, crazy announcement. Merging Remix API’s into React Router and then replacing the compiler and server with Vite didn’t leave much for Remix to do as a standalone project.

🐐 React Router - the past, present, and future of React

React Router is one of the oldest, and most used packages in the React ecosystem.

Since Remix has always been effectively "React Router: The Framework", we wanted to create a bridge for all these React Router projects to be able to upgrade to Remix.

With Remix being baked into React Router and now supporting SPA mode, legacy React Router applications have an easier path for migrating to the next generation of React.

https://x.com/ryanflorence/status/1791488550162370709

Remix vs React 19

If you’ve taken a look at React 19 at all, it turns out it now handles a lot of the problems that Remix set out to solve in the first place. Things like Server Components, Server Actions, and Form Actions provide the same sort of programming model that Remix popularized.

https://x.com/ryanflorence/status/1791484663883829258

Planned Changes for Remix and React Router

Just recently, a post was published giving the exact details of what the changes to Remix and React Router will look like.

tl;dr

For React Router

React Router v6 to v7 will be a non-breaking upgrade
The Vite plugin from Remix is coming to React Router in v7
The Vite plugin simply makes existing React Router features more convenient to use, but it isn't required to use React Router v7
v7 will support both React 18 and React 19

For Remix

What would have been Remix v3 is React Router v7
Remix v2 to React Router v7 will be a non-breaking upgrade
Remix is coming back better than ever in a future release with an incremental adoption strategy enabled by these changes

For Both

React Router v7 comes with new features not in Remix or React Router today: RSC, server actions, static pre-rendering, and enhanced Type Safety across the board

The show goes on

I love how this project has evolved and I tip my hat to the Remix/React Router team. React Router feels like a cozy blanket in an ecosystem that is going through some major changes which feels uncertain and a little scary at times.

The Remix / React Router story is still being written and I’m excited to see where it goes. I’m looking forward to seeing the work they are doing to support React Server Components. A lot of people are pretty excited about RSC’s and there is a lot of room for unique and interesting implementations.

Long live React Router 🙌.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Dane Grant
JavaScript developer building things on web, native, and server environments. Free time filled with reading, cooking, dog, sports, comedy, and music.
@danecando @danecando

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

Danny Thompson, Director of Technology at This Dot Labs, talks with Tanner Linsley, Creator of TanStack, about his latest project, TanStack Start. They discuss the challenges of existing frameworks like Next.js and Remix, the development of TanStack Router, and the future of React Server Components. Tanner also explains how caching strategies and fine-grained invalidation can transform the user experience. Chapters - - Introduction & Tanner’s Background (00:00) - Going Full-Time on TanStack (01:00) - The Birth of TanStack Router (02:21) - Why Build Another Framework? (04:00) - React Server Components: Potential & Limitations (07:05) - Fine-Grained Cache Invalidation & UX (09:02) - Parallel Data Fetching in Routing (13:39) - TanStack Start: Alpha & Future Plans (16:41) - Where to Learn More About TanStack (18:48) Find Tanner Linsley on Social Media Twitter: https://x.com/tannerlinsley Linkedin: https://www.linkedin.com/in/tannerlinsley/ Github: https://github.com/tannerlinsley TanStack: https://tanstack.com/ Sponsored by Wix Studio...

Oct 9, 2024

1 min

TanStack QueryJavaScriptReact

React Version Transitions, Library Updates, and Why Standards Bodies are so Complex with JLarky

On this episode of Modern Web, hosts Tracy Lee, Ben Lesh, Adam Rackis, and guest JLarky share their latest takes on the JavaScript ecosystem, including React version transitions and TypeScript compatibility. They also explore the challenges of library updates, as well as web standards and the complexities within standards bodies. One recurring theme in the podcast is the heavy reliance on third-party libraries and the potential JavaScript bloat in React applications. They express concerns about the long-term sustainability of this approach and emphasize the need for industry support and collaboration. They discuss the challenges faced when updating libraries and the importance of carefully considering the impact on the overall application. This highlights the need for developers to strike a balance between leveraging the benefits of third-party libraries and maintaining control over their codebase. The conversation also explores the evolution of web standards and the complexities within standards bodies. The hosts discuss the resistance to adopting new technologies, such as React server components, and the challenges faced in driving industry-wide adoption. This highlights the importance of understanding the broader context in which web development operates and the need for developers to stay informed about emerging standards and technologies. By keeping an eye on the evolving landscape, developers can make informed decisions about the tools and frameworks they choose to work with. Throughout the podcast, they emphasize the importance of considering production-level considerations in software development. They discuss the challenges of dealing with hydration errors and the need for robust error handling mechanisms. This highlights the significance of thorough testing, performance optimization, and maintaining a strong focus on user experience. By prioritizing production-level considerations, developers can ensure their applications are reliable, performant, and user-friendly. Download this episode here....

Jun 27, 2024

2 mins

ReactTypeScript

The CSS / Utility hybrid approach with Tailwind v4

Just recently, the progress on the next major version of Tailwind CSS was open-sourced, along with a preview post. This is very exciting news to me, and I love the direction they’ve taken with this release. Tailwind can be a pretty polarizing topic among developers, but I believe that we can find some common ground and live in harmony. In this post, we’ll look at how the CSS + Tailwind hybrid approach is getting an upgrade in v4 and some of the patterns that we can take advantage of to provide a stellar styling experience on our websites. The hybrid approach It doesn’t matter what your personal take on Tailwind is, the fact is utility classes are an incredibly useful pattern for styling websites with CSS. I’m not sold on the hard-line, all-or-nothing approach that Tailwind has always recommended. Having a class string that extends way off the screen on an ultra-wide monitor is not pretty. Combining traditional CSS classes with utility classes helps cut down on the styling noise in your markup and provides some advantages when applied correctly. This post will cover some useful patterns and best practices for using CSS and Tailwind in harmony Tailwind going “CSS-native” In the v4 introduction post, they state A major goal of Tailwind CSS v4.0 is making the framework feel CSS-native, and less like a JavaScript library. I love that they are heading in this direction, and I’m imagining Tailwind as the toolkit for styling websites with CSS. It is going to replace the plethora of tools from the past and provide support for all the modern niceties like: * Importing CSS files with @import * Vendor prefixing _(no more autoprefixr)_ * Improved browser support for modern features like CSS nesting and media query ranges. This means less worry for us as developers. We can write our code and build our sites using the modern features that the platform provides without sweating all the other details and edge cases. The talented folks at Tailwind and the open-source community have our backs. Tailwind v4 CSS configuration The biggest step in the “CSS-native” direction and the feature that I’m most excited about is the CSS configuration. This is great for embracing CSS and Tailwind as one instead of two factions at battle. If you’ve been using Tailwind exclusively for a long time like I have, you might be out of touch with all the great features and tools that CSS provides out of the box now. This is a great opportunity to get back to learning and using the platform. In Tailwind v4 we do our configuration and theming with CSS variables. To get an idea of what this looks like check out the default theme on GitHub. In our configuration we can override any values from the default theme or extend it with new values. ` All the values from the theme are exposed as CSS variables. We can reference them in our CSS files or directly in our utility classes. ` ` Best practices for combining CSS with utility classes I can understand why Tailwind recommends using strictly utility classes. It’s easy to shoot yourself in the foot and run into the issues that utility classes set out to solve in the first place. I believe if you follow some general guidelines you can safely have the best of both worlds. Create focused/specialized classes CSS tends to get messy when we use classes that are overly specific with styles that apply to just one or a small number of use cases. Take a calendar where the days are custom checkboxes. You might have some pretty specialized styles for this bit of UI. ` Notice that we just add some specific styles that apply to this use case. This gives us the flexibility to keep composing our styles with utility classes. Some things are better left to utilities The best way to avoid wandering too far off the path of enlightenment is to stick with utility classes for certain (most?) things. Spacing and layouting are examples of things that are probably best left to utility classes. These typically vary all across a page, and encoding them in a class will make it a lot less flexible. A code smell to look out for: If you have abstracted something to a class and you end up overriding certain aspects of its styles in different places. Those styles should probably be utility classes. Classes as components Tailwind has always recommended using a component system for your UI components so that your utility classes are all defined in a single place. You don’t want to have to edit 50 different files to make a change to the style of your buttons across your website. I’ve found that defining things that might be simple “components” like buttons, badges, links, etc as classes works just as well in most cases. You can use Tailwind CSS with the @apply directive or traditional class definitions for this: ` You can even bring the BEM naming convention back to compose variants on top of base component styles. (or name them however you’d like!) ` Now we can easily define badges in our markup: ` Modern CSS and other interesting utility hybrid patterns I think a lot of us are realizing that modern CSS is pretty great. There are a ton of awesome new features gaining support across major browsers, like CSS nesting, container queries, and more! More and more people are also coming around to the utility of utility classes. If you want to dive deeper and see other interesting approaches and patterns when combining modern CSS with utility classes, check out the post: Modern CSS patterns in Campfire. Summary I’m looking forward to the Tailwind CSS configuration and other awesome updates coming in v4. Using Tailwind doesn’t have to be a one-size-fits-all approach. If you want to write some CSS, I say go for it! Hopefully, some of the points in this post will lead to success if you decide to do so....

May 10, 2024

4 mins

Tailwind CSSCSS

Generative AI in the Global Payments Industry: Insights from Dondi Black, CPO of TSYS

Dondi Black, Chief Product Officer of Issuer Solutions at TSYS, to explore the transformative journey of innovation, cultural shifts, and emerging technologies in the payments industry. Dondi shares her insights from three decades in the field, discussing how her organization leverages synergies, empowers teams, and implements measurable strategies to drive innovation and transformation. The conversation dives into the practical applications of generative AI, privacy-enhancing technologies, and a North Star approach to cultural transformation. Tracy and Dondi also touch on the importance of self-advocacy, honest feedback, and creating inclusive environments to foster innovation at every level. Chapters 00:00:04 Welcome & Introductions 00:00:34 Reflections on Transformation & Innovation 00:01:28 Synergies & Organizational Transformation 00:02:19 Measuring Success in Cultural Transformation 00:05:07 Empowering Individuals & Leadership Growth 00:08:07 Emerging Innovations: Generative AI in Fraud & Risk 00:10:15 Security Investments & AI's Industry Impact 00:12:28 The Future of Privacy-Enhancing Technologies 00:15:30 Sustaining Momentum in Transformation 00:18:28 The Industry’s Pragmatic Shift 00:20:39 Inclusive Innovation & Cultural Change 00:23:12 Advocating for Yourself & Your Ideas 00:25:27 Leaders as Coaches: The Power of Feedback 00:28:56 Sponsor Spotlight: This Dot 00:29:53 Where to Connect with Dondi 00:30:39 Closing Remarks Follow Dondi Black on Social Media Linkedin: https://www.linkedin.com/in/dondi-black/ Sponsored by This Dot: thisdot.co...

Nov 25, 2024

1 min

Engineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Remix's evolution to a Vite plugin

🗓️ October 2021 > Remix is open sourced

🗓️ March 2022 - September 2022 > Remixing React Router

🗓️ October 2023 - February 2024 > Remix gets Vite support

🗓️ May 2024 > Remix is React Router

🐐 React Router - the past, present, and future of React

Remix vs React 19

Planned Changes for Remix and React Router

tl;dr

The show goes on

Dane Grant

You might also like

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

React Version Transitions, Library Updates, and Why Standards Bodies are so Complex with JLarky

The CSS / Utility hybrid approach with Tailwind v4

Generative AI in the Global Payments Industry: Insights from Dondi Black, CPO of TSYS

Let's innovate together!

You might also like

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

React Version Transitions, Library Updates, and Why Standards Bodies are so Complex with JLarky

The CSS / Utility hybrid approach with Tailwind v4

Generative AI in the Global Payments Industry: Insights from Dondi Black, CPO of TSYS