The Race is on to be the "Rails of React"

Four frameworks enter, but is anyone ready to be crowned winner?

Featured on Hashnode

There's this phenomenon in psychology called the Frequency Illusion - it posits that once you notice and understand a single instance of something, you're going to start seeing it everywhere and believe that it's super common.

I've been having some serious Frequency Illusion this month around one-stop-shop API + frontend frameworks for React. It seems like every week there's a new toolset coming to market that aims to be the Laravel or Rails or Django for JS-based web apps.

Let's do a quick dive into the ones I've run into recently and the immediate pros and cons each one brings to the table. Are any production ready? Do any actually make your developer experience better?

What They All Do

All of these tools provide you with a few key things you'll need to set up almost any JAMStack web app:

  1. Database ORM. All four of these frameworks use Prisma as a way to manage your backend database and generate a type-checked client for it.

  2. Authentication. While not all of the frameworks disclose how their authentication works, all of them do provide at least basic user management.

  3. Build. To varying degrees, all of these projects provide some sort of build pipeline based on Babel, Wepback, or both. This is important since it allows you to write modern Javascript or Typescript and to mingle server-side libraries with client-side ones, but in the end build everything out into compatible dialects.

The Contenders

Blitz.js

Homepage

Blitz.js Homepage

Blitz is a lightweight collection of generators that turn out a Next.js-style monolithic JAM app. Blitz touts its community (which it advertises as strongly welcoming to LGBTQ+ people, women, and minorities) as one of its key features, but I will only be talking about the tooling and framework itself here.

Built on

Blitz is built on Next.js and, presumably, other open-source tooling. However, it obscures all of its underlying technology other than Prisma to the point that it may as well be a new framework unto itself.

Pros

  • Blitz is loosely opinionated and flexible for your frontend setup, meaning you can follow your personal bliss for how to layout the code and what tooling to use.
  • Blitz comes with some nice extra features out of the box like 90% of a email integration (just drop in a mailing service).
  • Blitz CLI has a suite of devtools and a powerful code generator. In just one command line you can integrate a styling library like Tailwind, add a new data model (including database schema, API endpoints, and edit pages), or stand up a full admin UI to view the underlying database.

Cons

Blitz kindly did my work here and listed their trade-offs themselves.

  • Because their code so heavily wraps the underlying dependencies, you are locking yourself in to their upgrade priorities and timeline.
  • Blitz's API layer is not as clearly documented as the competitors, though they say this will get better in later versions.
  • On that note, Blitz is painfully beta software at this point. It depends on an experimental React version, it throws up "this software is beta" disclaimers on most commands, and its documentation for processes like production deploy are essentially non-existent. While promising, the impression I have is that this is not quite production-ready for a large project.

Bedrock

Homepage

Bedrock Homepage

Bedrock is a private, for-profit getting-started kit by Max Stoiber.

Built on

Bedrock is based on Next.js, Prisma, and written in Typescript. It uses GraphQL for its API and Passport.js for authentication. It also comes with Postmark and Stripe integration out of the box for sending email and taking payments.

Pros

  • Comes with email and payment support - a rarity - so that you can build a wide variety of SaaS businesses on top of it quickly.
  • Comes with dedicated support and a private community.
  • Comes out of the box with not just authentication but team management for your users.
  • Advertises itself as truly production-ready as opposed to other frameworks on this list which strongly disclaim that they are still in pre-release beta.

Cons

  • It costs almost $400 USD. I can't actually review the process of getting set up with this toolkit because it is so expensive.
  • Bedrock is more boilerplate than a true framework. Since it is based on several well-loved open source projects, it might not add much to your experience over doing it yourself.

RedwoodJS

Homepage

RedwoodJS Homepage

RedwoodJS comes with quite a pedigree, being the latest project from Tom Preston-Warner, a co-founder of Github and creator of Gravatar and Jekyll.

Built on

Redwood uses Storybook to organize its React components on the frontend. In the API, it uses Apollo to serve GraphQL.

Pros

  • Redwood's key feature is the suite of helper commands that automatically generate code for you during development. For example, does your web app need a new page for a user's notifications? Getting the boilerplate (route, page, storybook, and tests) for it is as easy as yarn redwood generate page notifications /my/notifications. Did you make a new model and need a CRUD API to access it? yarn redwood generate scaffold myModel
  • Redwood adds new tools for web development, like Sets with Layouts in the router, that are original and exciting.
  • Redwood comes with plugins to integrate with trendy authentication or automatically deploy to a full variety hosting platforms, as well as to roll-it-yourself.

Cons

  • Redwood has either wrapped its dependencies so strongly that they are hard to see, or the team has completely reimplemented core features themselves. This means you are tightly locked in to their framework once you start building with them and might be very unhappy if they slow down or stop development.
  • Redwood is deeply opinionated about how you should organize and work on your app. If you don't agree with their opinions, the framework is simply not for you.
  • Redwood is still pre-1.0. Some features that might be absolute requirements for you, like Typescript support in the generators, are not yet present.

Amplication

Homepage and Docs

Amplication Homepage

Amplication is a bit of an odd-one-out on this list. Whereas the other frameworks in this comparison are meant to be the foundation for your web app, Amplication is a webapp which generates web apps. The resulting apps can be downloaded freely and are almost entirely independent of Amplication.

Built on

Generated apps are basically a who's-who of hot JAMStack tools - they use NestJS, Prisma, Apollo, Express, Passport, and everything is written in Typescript and containerized with Docker. Generated apps also include both a GraphQL and REST API (documented in Swagger) to access your data and a separate Admin frontend built on Amplication's own toolkit.

Pros

  • The only tool that aims for containerization with Docker rather than bare code to be built out in JAMStack style. This could be a con, but it does open up new possibilities for your server that aren't available for APIs running in Lambda.
  • They aren't playing keep-away with the code. You can freely take the generated applications out of Amplication thanks to easy Github syncing and direct code downloads.
  • Uses well-known and well-tested open source libraries to provide functionality.

Cons

  • It says right on their sign-in screen "amplication is currently in alpha and it should not be used in production" and it shows - you will get errors while using their console and the generated applications have very little optimization.
  • It is pretty slow - getting your sandbox environment set up for development takes so long that I've finished this blog post before it finished setting up my environment (note: it finished eventually).
  • Builds a truly monolithic app as the end-result. Your frontend, REST, and GraphQL APIs are all in one package, and the generated code is complex and confusingly named.

Conclusions

Having spent the weekend walking through these four libraries' "Getting Started" guides, what are my takeaways?

First off, sadly a lot of these frameworks are clearly not production-ready, even for a side project. The ideas that Amplication, Blitz, and Redwood are introducing - powerful code generation to rapidly build out an API and its boilerplate - are sorely needed in the React/JAMStack landscape. But Blitz and Amplication especially felt too unstable for me to use in anything other than an internal project. Redwood is closer, but the clear winner is Bedrock, which is the only one touting itself as honestly production ready.

Next let's talk about vendor lock-in. Vendor Lock-in is why I never use Create React App anymore (and you shouldn't either). As a framework ages, keeping up to date with all its dependencies becomes harder and harder and if you depend on that framework you wind up using old, buggy, or insecure code. This, I fear, is the danger with Blitz and Redwood. Their vendor lock-in is so tight that you are really binding your app's upgrade lifecycle to those teams' schedules. The clear winners here are Amplication and Bedrock, since these two give you direct access to the dependencies, freeing you up to manage your own upgrade cycle.

Finally, what is the value-add of these frameworks for you? The elephant in the room here is Bedrock's $400 price tag. Is it worth that? It is built on free tools put together in a fairly obvious way - you could replicate it given enough time. But, the glue-code that Max wrote to stick them together, code that has already been validated both during development and in production, is valuable. So, is the time the kit saves you worth $400? Similarly, is the time-saving code generation of Redwood and Blitz worth the cost of vendor lock-in?

So the winner is...

For me personally, the clear winner of this experiment remains doing it yourself. For my process, none of these tools brings enough to the table for me to switch over to them. But that is a personal choice based in part on the fact that I need to keep learning things to write in this blog...

However, if I needed a framework to quickly prototype a JAMStack application, I would have to give the crown to RedwoodJS. It's free, open source, and it seems to strike the right balance of being almost production-ready, easy to use, and actually helpful.

Congrats, you win.

The exciting thing about this contest, though, is that it is still being run and could change any day. Any of these libraries could pull off the same miracle Prisma did with their jump from version 1 to 2 and leap from being a niche player to the trendiest force in the field. Plus I'm sure there are more of these tools out there that I haven't even heard about - maybe that were even released as I wrote this post. If you know of one please drop it in the comments so I can check it out πŸ‘‡

Anthony Campolo's photo

Thanks for the awesome rundown, Zack! Just wanted to mention that we're hard at work Dockerizing Redwood to make it more portable, and we'll likely have officially supported Dockerfiles for both the web and api side by the time we reach v1.

Yuval Hazaz's photo

Thank you very much for including Amplication, Zack. We are working to bring Amplication to a more stable phase. As an open-source project, we truly believe our target is to empower developers and give them the option to use Amplication to any degree they like and be able to eject and continue on their own when they want to. Regarding the time it took you to build - currently, it takes about 3-4 minutes to build the container and another 3 minutes to deploy on the sandbox environment. We are working to speed it up, by moving to another cloud provider/ services once we catch up with stability. Please note, the main value we deliver is the actual code - which is sent to your GitHub repo in seconds. The sandbox deployment is happening in the background and does not delay that.

Zack Sheppard's photo

Thanks for this comment Yuval Hazaz! I hope I didn't come across as a hater in the blog post - I think what you're doing with Amplication's develop loop is probably the most innovative solution of the bunch and I look forward most to checking back in with what you do there.

Indeed, all of these projects (except maybe Bedrock, which is the odd one out here because of how it's productized) give me the same feeling as when I came across Apollo v2 or Prisma v1. You're all sitting on tremendous potential and I hope you make it πŸš€!

Yuval Hazaz's photo

Zack Sheppard I totally liked this comparison, all the feedbacks are accurate. Didn't get any negative vibes :-)

Catalin Pit's photo

Great article and comparison! I agree with you; I'd rather do it myself than use these tools. πŸ‘

I love building stuff.