DEV Community

loading...
Cover image for The Race is on to be the "Rails of React", but is anyone there yet?

The Race is on to be the "Rails of React", but is anyone there yet?

zackdotcomputer profile image Zack Sheppard Originally published at blog.zack.computer ・8 min read

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 👇

Discussion (4)

pic
Editor guide
Collapse
ericchapman profile image
Eric Chapman

Have you look at Adonis.js? That the node.js Laravel equivalent...

Collapse
zackdotcomputer profile image
Zack Sheppard Author

I hadn’t heard of it yet, thanks. I’ll check it out today. I’m curious, what about it makes you say it’s specifically the Laravel equivalent?

Collapse
ericchapman profile image
Eric Chapman

I am a Rails and Laravel lover. When I hear about Adonis I was really curious to try it out. I do have post my experience and compare Adonis code whit Laravel code: dev.to/ericchapman/there-was-rails...

Thread Thread
zackdotcomputer profile image
Zack Sheppard Author

I’ll check your post out. Reading over the docs for Adonis, though, it seems more like a beefed up Express.js than a JAMstack framework like the others in this list. I suppose that does make it more like laravel or rails quite literally though!