RedwoodJS: A Rails-Inspired Experience for Full-Stack Javascript

When Jordan Walke first released React.js in 2013, it was a revolutionary moment for many frontend developers. Using a virtual DOM and one-way data flow, he greatly simplified reasoning about web applications compared to other approaches at the time.

React provided a feeling of freedom and found quick adoption across the industry. Today, according to BuiltWith, some 3.8 million websites use the framework. Plus, Facebook sponsors the project and uses some fifty thousand React components across its platform.

But the price of that freedom was complex and time-consuming configuration, and uncertainty about the best choices to build out a complete solution.

RedwoodJS is a new framework created to help solve some of these modern developer concerns. This article will describe Redwood’s origins and explain why it fits so well with CrafterCMS.

The Entry of the Starter Packs

React is a simple view template layer and is not opinionated about how data fetching, state management, styling, and other pieces of a full solution are implemented. This was a large contributor to the “decision fatigue” many Javascript developers reported in the last half of the decade.

The frontend community and Facebook recognized the stress and time lost due to reinventing the wheel at the outset of every frontend project and released Create React App (CRA) three years later.

While there were full enterprise-ready frameworks like AngularJS available, CRA sought a middle ground – reasonable configuration defaults and an easy developer workflow to get up and running. It was possible to eject from the initial configuration for custom setups or stick with the starter project for updates.

The CRA approach was widely copied and tailored to specific problem domains, like including data fetching libraries out of the box. As different static site generators (SSG) and server-side rendering (SSR) frameworks like Next and Gatsby became popular, starter packs that are derivative of CRA were published for them.

Introducing JAMstack

Netlify, a cloud service built on Amazon Web Service (AWS), was founded in 2015. At the time, Git-based workflows using SSG and SSR frameworks were gaining in popularity, creating a massive shift in the web development space. Netlify founders Mathias Biilmann and Christian Bach coined the term “JAMstack” to describe this new architecture.

“J” stands for Javascript, a language which contrasted to other popular approaches at the time for templating like Ruby Erb and PHP. “A” stands for using APIs to access data rather than monolithic backends that include view layers. And finally “M” for Markdown, as popular SSGs at the time used static files to generate web pages from this markup language. The recent trend is to consider markdown in generic terms and refer to many different approaches to specifying rich text formatting for content.

RedwoodJS Picks up the Loose Ends

While starter packs, SSGs and SSRs, and JAMstack-central cloud platforms, developer experience has significantly improved. Headless CMS platforms like CrafterCMS have provided robust and easy solutions to manage dynamic content in this architecture.

However, there haven’t been any easy answers for the development workflow of powerful serverless services (e.g., AWS Lambda functions) in support of a JAMstack deployment. Next and Gatsby offer elementary styling solutions and leave the question to developers if they want more advanced solutions. Testing workflow, UI design systems, and first-class deployment to JAMstack platforms like Netlify are left to developers to sort out.

RedwoodJS is an open source project that hopes to address all of these loose ends and offer developers a truly delightful development experience. Created by Tom Preston-Werner, who previously co-founded Github and authored the Jekyll static site generator, and Peter Pistorius; Redwood takes inspiration from Ruby on Rails. It is opinionated yet over-rideable through simple props that are already comfortable for frontend developers to use.

Redwood is designed to pull dynamic content from a GraphQL backend. It includes an Apollo Client in the frontend for state management and GraphQL support from the browser. The Redwood framework provides Redwood Cells, a higher-order component for data fetching in React. It also provides the Prisma GraphQL ORM out of the box to connect to a PostgreSQL database in the backend portion of the framework, but it’s possible to bypass the backend in favor of a different service.

It’s easy to use a headless CMS like CrafterCMS by passing in the Crafter API endpoint as a prop in React and saving credentials in an environmental variable file for secure management of sensitive information.

CrafterCMS and RedwoodJS Make a Perfect Pair

Redwood offers a Rails-like command line generator to scaffold all elements of a project automatically. A simple Redwood generated page outputs templates for the React component, a Storybook wrapper, and a Jest test in the proper directory. Simple but powerful routing offers dynamic (typed) parameters, constraints, and named route functions to generate correct URLs.

Page-based code-splitting, reasonable linting defaults, pre-configured Webpack and Babel build tooling, and hot module replacement for development is included. Redwood has a powerful forms management package with easy client and server-side validation and error handling built-in. And it includes a Microsoft Visual Studio Code extension called the Redwood IDE that provides easy access to all features of the framework.

Best of all, Redwood offers first-class JAMstack-style deployment to Netlify. When combined with CrafterCMS’s excellent user experience for content authors and editors, there is finally a workflow that focuses entirely on what adds value to a business, speeding up the process of delivering great content to users exponentially.