The Rails/Laravel experience in JS/TS

Alternative title: "The Ruby on Rails experience in JavaScript".

Some brief notes for the people coming from Ruby on Rails (RoR) or PHP Laravel worlds into the world of JavaScript and TypeScript.

You might miss the opinionated setup of Rails or Laravel, since the cobble-together-various-scripts approach of JavaScript and NPM can be overwhelming (certainly just to get an overview over, and then finding out what-works-with-what can lead to serious «JS Fatigue»).

So here are some JS frameworks that provide opinionated setups closest to what you are used to:

Remix.run and RedwoodJS are two fullstack React frameworks that comes from old RoR folks who aim to recreate the Rails/Laravel experience for JS/TS. Remix is SSR and progressive enhancement / web standards focused, and RedwoodJS is CSR and GraphQL focused and brings a larger and more opinionated suite of tools (testing etc.). Coming from Rails myself, RedwoodJS gave me the most Rails-like feel, but YMMV.

NextJS is the market leader for a fullstack React framework, ofc (see Solito and Tamagui for a cross-platform React experience that works well together, and can give you a React Native app from the same codebase as your webapp!). Note that NextJS relies on Webpack for config and bundling client assets, not the newer and popular and lighter Vite.

(If you want more freedom and less opinions than NextJS - maybe you found RoR or Laravel too magic or too constraining at scale - and you want a Vite based setup with ‘blazingly fast’ DX, then try vite-plugin-ssr. It follows the less-magic and libraries-over-frameworks approach, and could especially be what you want if you found Rails too architecturally constraining at scale.)

Remix and Redwood has their own integrated solutions for data loading between client/server. NextJS too, but it is currently discouraged as being too confusing.

So for NextJS data loading in particular - that also works cross-platform (with both NextJS and React Native) - I recommend:

• tRPC, as a favored choice amongst many, to call backend functions directly from the frontend (it uses React Query under the hood to handle caching, retries etc.), and gives the much loved full stack TypeScript type inference.

But if you are focused on web only, then you might like:

• BlitzJS as «the missing fullstack toolkit for NextJS», also made by a RoR guy trying to make NextJS come closer to the Rails DX we knew and loved. It’s a web-focused alternative to tRPC, and also has a plug-and-play solution for Authentication, and some CLI scaffolding helpers (to get started quickly, like you may have loved in Rails).

If you still decide you need GraphQL - like if you need to expose your API to third parties, or have strict frontend/backend team separation - then I recommend:

• Choose Redwood, since it has its own integrated GraphQL solution that takes care of it end-to-end.

But, if you want a potentially even sweeter GraphQL setup, or need SSR which Redwood doesn’t have yet, then choose:

• GQty on the client, for inferred queries/mutations. Rapid dev speed. Move to URQL or Relay at scale.

• pothos-graphql on the server, for auto building the schema from your TS code (aka. code-first). Better than Nexus.

That will give you fullstack type inference with GraphQL like with tRPC/BlitzJS, and either will give your faster dev speed than other solutions, closest possible to Rails/Laravel.

(Oh, and use TypeScript rather than JavaScript in any case, since you can use as little or much as you want of it, and it gives velocity improving guardrails/steering-wheels like VS Code autocomplete and refactor rename, which won’t make you miss CTRL+F searching the codebase for variable names when renaming.)

So in summary, to get the Rails/Laravel experience in JS/TS:

1. Choose either Remix/Redwood/Next.

2. If you chose Next, then for smooth data loading between client/server use tRPC/Blitz. Alternatively, if you chose Next/Remix and really need GraphQL, then use GQTy + Pothos.

3. Use TypeScript over JavaScript in any case, you’ll be positively amazed compared to your experience from dynamic languages such as Ruby/PHP.

That’s the gist of it. Hope it helps!