Simplify Full-Stack Development with RedwoodJS
Imagine building a JAMstack application without the hassle of setting up SSG or headless CMS. RedwoodJS, a full-stack JAMstack framework built on React, GraphQL, and Prisma, makes it possible. In this guide, we’ll explore the key features of RedwoodJS and demonstrate how to use them to streamline your development workflow.
What is RedwoodJS?
RedwoodJS is an opinionated, full-stack, serverless web application framework that simplifies the development process. It makes decisions under the hood, allowing you to focus on building your application. With Redwood, you can develop and deploy JAMstack applications with ease.
Key Features
Before we dive in, let’s break down the key features of RedwoodJS:
Frontend Features
- Unique file structure and formatting
- Simple but powerful routing with dynamic parameters, constraints, and named route functions
- Cells: a declarative way to fetch data from the backend API
- Generators that use CLIs to generate pages, layouts, and cells
- Predefined helpers and conventions for form validation and error handling
Backend Features
- Boilerplateless GraphQL API construction
- Generators that produce SDL and services on the fly
- Easy CRUD, which makes a scaffolding generator for CRUD operations around a specific DB table
- Database migrations via Prisma 2
Deployment Features
- First-class JAMstack-style deployment to Netlify
Getting Started with RedwoodJS
To get started with RedwoodJS, you’ll need basic knowledge of React, GraphQL, and Prisma. You’ll also need Node version 12 or higher or yarn version 1.22 or higher installed on your machine.
Installation and Setup
Redwood uses yarn to scaffold your app. After successful installation, you’ll have a new directory, redwoodapp, containing several directories and files. Change to that directory by running cd redwoodapp. To start the development server, run yarn redwood dev.
File Structure
Redwood’s file structure consists of two parts: the api folder and the web folder. These are commonly referred to as workspaces.
Web Workspace
The web workspace contains all component- and static-related files. The public folder contains all static assets, such as favicon, README, etc. The src folder holds other subdirectories, including components, layouts, pages, and Routes.js.
API Workspace
The api directory contains two folders: prisma and src. The prisma folder determines how data is delivered to the frontend and is responsible for the database schema. The src folder contains all other backend code and four more directories: functions, graphql, lib, and services.
Routing with Redwood Router
Redwood Router is unique compared to React Router. It’s a combination of React Router, Reach Router, and its own router. Redwood Router allows you to list all routes in a single file, eliminating the need for nesting routes.
Code Splitting
By default, Redwood Router will code-split on every page, creating a separate, lazy-loaded webpack bundle for each. When navigating from page to page, Redwood Router waits until the new page module is loaded before rerendering, thus preventing the “white flash” effect.
Fetching Data with Cells
Data fetching in Redwood is different from the traditional asynchronous convention. The frontend and backend process data independently from each other. Redwood uses a pattern that adopts a declarative approach for fetching data from the server side (GraphQL).
Forms and Validations
Redwood forms have a lot of helper methods that make form handling and validations much easier to implement in web applications. It uses React Hook Form to make the form experience unique.
Command Line Generators
Redwood generates files using its own unique CLI inspired by Rails command line tools. This way, you can create any file inside the exact directory specified by you.
Pros and Cons of Using RedwoodJS
Below are some reasons you might want to try Redwood in your next application:
- Redwood accommodates any full-stack application because it’s integrated with services, databases, and testing.
- Redwood adopts the JAMstack approach to building web applications.
- The tools and conventions in Redwood make building web applications a breeze compared to other frameworks.
However, there are a few bottlenecks to consider when using Redwood:
- Redwood is in its alpha stage, so it wouldn’t be advisable to develop a production-based app just yet.
- There are limitations related to Lambda function length and issues with connecting serverless to relational databases.
Conclusion
When RedwoodJS becomes stable, it’s not hard to see it evolving into a standard for building full-stack web applications. Developers will benefit from the continued performance and feature upgrades over time and with minimum effort. Redwood makes your work easier by making logical decisions under the hood for you, enabling you to develop robust apps with less setup.
Learn More About Redwood
To learn more about Redwood, check out the following resources:
- Redwood documentation
- RedwoodJS video tutorial by Rob Cameron
Happy coding!