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.

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

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

How Svelte and RSCs are Changing Web Development with Rich Harris

Tracy Lee, Adam Rackis, and Ben Lesh sit down with Rich Harris, the creator of Svelte, to talk about the state of Svelte and the exciting world of React Server Components (RSCs), web development's next evolution in co-locating resources for improved data management, and reusability. Uncover the benefits of component-based data fetching, like improved composition, and ease of development. Streamline server-side work, reduce the workload on the browser, and improve component rendering efficiency. The discussion explores the challenges faced by different front-end frameworks, with a great discussion on Svelte's advancements in reactivity and performance. Rich Harris highlights the unique features of Svelte that set it apart from other frameworks. He emphasizes the importance of optimizing performance and reducing the amount of code that needs to be shipped to the browser. Looking towards the future, Rich Harris predicts potential challenges with computed signals and showcases Svelte's innovative approach to reactive programming. Svelte's continuous commitment to improving developer experience make it an exciting framework to watch out for. They also share personal opinions on JavaScript classes, Svelte 5 development, and even their favorite cheese pairings. Download this episode here....

Jun 19, 2024

1 min

ReactSvelte

D1 SQLite: Schema, migrations and seeds

I’ve written posts about some of the popular ORM’s in TypeScript and covered their pros and cons. Prisma is probably the most well known and Drizzle is a really popular up and comer. I like and use ORM’s in most of my projects but there’s also a camp of folks who believe they shouldn’t be used. I started a small Cloudflare Workers project recently and decided to try using their D1 SQLite database without adding any ORM. This is the first post in a 2 part series where we’ll explore what this experience is like using only the driver and utilities made available in the Wrangler CLI. Introduction If you’re unfamiliar with Cloudflare D1 - it’s a distributed SQLite database for the Cloudflare Workers platform. Workers are lightweight serverless functions/compute distributed across a global network. The platform includes services and API’s like D1 that provide extended capabilities to your Workers. At the time of this writing, there are only two ways to interact with a D1 database that I’m aware of. * From a Worker using the D1 Client API * D1 HTTP API In this 2 part series, we will create a simple Workers project and use the D1 Client API to build out our queries. Getting Started For this tutorial, we’ll create a simple Cloudflare Worker project and treat it like a simple node script/http server to do our experiments. The first step is initializing a new Cloudflare Worker and D1 database: ` ` We need to take our binding and add it to our project wrangler.toml configuration. Once our binding is added we can re-generate the types for our Worker project. ` We now have our DB binding added to our project Env types. Let’s add a simple query to our worker script to make sure our database is setup and working: ` Start the development server with npm run dev and access the server at http://localhost:8787 . When the page loads we should see a successful result {"1 + 1":2} . We now have a working SQLite database available. Creating a schema Since we’re not using an ORM with some kind of DSL to define a schema for our database, we’re going to do things the old fashioned way. “Schema” will just refer to the data model that we create for our database. We’ll define it using SQL and the D1 migrations utility. Let’s create a migration to define our initial schema: ` For our demo purposes we will build out a simple blog application database. It includes posts, authors, and tags to include some relational data. We need to write the SQL in our migration to create all the tables and columns that we need: ` The SQL above defines our tables, columns, and their relations with foreign keys. It also includes a join table for posts and tags to represent a many-to-many relationship. If you don’t have a lot of experience writing SQL queries it might look a little bit intimidating at first. Once you take some time to learn it it’s actually pretty nice. DataLemur is a pretty great resource for learning SQL. If you need help with a specific query, Copilot and GPT are quite good at generating SQL queries. Just make sure you take some time to try to understand them and check for any potential issues. After completing a migration script it needs to be applied: ` I added the --local flag so that we’re working against a local database for now. Typing our Schema One of the downsides of our ORMless approach is we don’t get TypeScript types out of the box. In a smaller project, I think the easiest approach is just to manage your own types. It’s not hard, you can even have GPT help if you want. If managing type definitions for your schema is not acceptable for your project or use case you can look for a code generation tool or switch to an ORM / toolset that provides types. For this example I created some basic types to map to our schema so that we can get help from the lsp when working with our queries. ` Seeding development data Outside of our migrations, we can write SQL scripts and execute them against our D1 SQLite database using wrangler. To start we can create a simple seeds/dev.sql script to load some initial development seed data into our local database. Another example might be a reset.sql that drops all of our tables so we can easily reset our database during development as we rework the schema or run other experiments. Since our database is using auto incrementing integer ID’s, we can know up front what the ID’s for the rows we are creating are since our database is initially empty. This can be a bit tricky if you’re using randomly generated ID’s. In that case you would probably want to write a script that can collect ID’s of newly created records and use them for creating related records. Here we are just passing the integer ID directly in our SQL script. As an example, we know up front that the author Alice Smith will have the id 1, Bob Johnson 2, and so on. Post_tags looks a little bit crazy since it’s just a join table. Each row is just a post_id and a tag_id. (1, 1), (1 2), etc. Here’s the code for a dev seed script: ` Here’s the code for a reset script - it’s important to remember to drop the migrations table in your reset so you can apply your migrations. ` Using the wrangler CLI we can execute our script files against our local development and remote d1 database instances. Since we have already applied our migrations to our local database, we can use our dev.sql seed script to load some data into our db. ` The Wrangler output is pretty helpful - it lets us know to add the --remote flag to run against our remote instance. We can also use execute to run commands against our database. Lets run a select to look at the data added to our posts table. ` This command should output a table showing the columns of our db and the 7 rows we added from the dev seed script. Summary Using wrangler and the Cloudflare D1 platform we’ve already gotten pretty far without an ORM or any other additional tooling. We have a simple but effective migrations system in place and some initial scripts for easily seeding and resetting our databases. There are also some other really great things built-in to the D1 platform like time travel and backups. I definitely recommend at least skimming through the documentation at some point. In the next post we will start interacting with our database and sample data using the D1 Client API....

Aug 30, 2024

5 mins

Cloudflare

How to Invest in New Software Engineering Talent with Shashi Lo

In this episode of the Modern Web Podcast, we sit down with Shashi Lo, Senior UX Engineer at Microsoft and the founder of the Gridiron Survivor project. Shashi shares his approach to mentoring junior developers by helping them bridge the gap between boot camp and their first job in tech. We cover the challenges of onboarding, the importance of code reviews, and how companies can better support new talent by investing in mentorship and training. Shashi also talks about his experience with building a community of learners, the process of de-risking junior candidates, and why companies should be more proactive in nurturing the next generation of developers. 00:00 - Meet Shashi Loh 02:25 - The Gridiron Survivor Project 05:02 - The Importance of Code Reviews 07:25 - Teaching the Basics of Project Communication 09:47 - Code Reviews as a Learning Tool 12:06 - Why Shashi Mentors: Giving Back to the Community 14:26 - The Importance of De-Risking Junior Candidates 16:41 - Building in Public: Transparency and Learning 19:00 - Assessing Candidates for the Gridiron Survivor Project 21:25 - The Power of Simple Coding Tests 23:45 - Scaling Up Skills: From Small Tasks to Big Projects 26:07 - Should Companies Be Doing This? 28:25 - Finding Hidden Gems in the Job Market 30:47 - The Challenges of Filtering Candidates 33:02 - Where to Find Shashi Online 34:38 - Closing Remarks Follow Shashi Lo on Social Media Twitter: https://x.com/shashiwhocodes Linkedin: https://www.linkedin.com/in/shashilo/ Github: https://github.com/shashilo Sponsored by This Dot....

Sep 5, 2024

2 mins

Engineering LeadershipMentorship

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

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

How Svelte and RSCs are Changing Web Development with Rich Harris

D1 SQLite: Schema, migrations and seeds

How to Invest in New Software Engineering Talent with Shashi Lo

Let's innovate together!

You might also like

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

How Svelte and RSCs are Changing Web Development with Rich Harris

D1 SQLite: Schema, migrations and seeds

How to Invest in New Software Engineering Talent with Shashi Lo