Is RedwoodJS Worth Looking Into?
I first learned about RedwoodJS from my co-worker. He said that there is a modern full-stack framework that is built from React + Prisma + GraphQL. This framework combines the modern frontend with next-generation ORM (Object Relation Mapping) to simplify data requests and make it more flexible. I’m going to be honest with you: I think this makes a great experience when developing an app.
Before all that, what is RedwoodJS?
RedwoodJS is a framework that brings full-stack to a JAMstack concept. This framework uses React as the front-end and Prisma + GraphQL to provide its data. It’s easy to understand the workflows if you’ve used React before. The challenge here is to use Prisma and GraphQL to query the data.
As part of JAMstack, RedwoodJS focuses on making it easy to write code, deploying to servers, scaling-up growing apps, and maintaining existing apps. This makes RedwoodJS a very accessible and versatile framework!
However, is this framework worth investing your time and effort in this day and age? Here are some things that I think you can consider when making this choice: 😕
Boasts a Modern Full-stack Framework
But how is RedwoodJS different from others? In this framework, directories are organized very well between the frontend and backend, which are separated into different directories. The benefit is that developers can focus on what they are working on.
In short, RedwoodJS is not an MVC (Model-View-Controller) like other full-stack frameworks, but it’s a combination of modern frontend and backend in the same project directories.
Actually, you can decide what you need. If you want to use the frontend only, you can destroy the “/api” section and vice versa. It works like this:
- /api contains backend serverless (Prisma and GraphQL) functions
- /web contains frontend codes that serve as static files through a CDN
Also, RedwoodJS has a unique code organization that makes it easy for developers.
Single Directory — Services
This framework puts all business logic in a single directory, called services — perhaps, in other frameworks, this is called a Model.
Great Routing
Now, how does routing work in Redwood JS?
Simply put, It does not use the React router but uses its own router. This router allows you to reference routes by the name you define, and if you want to pass parameters, custom functions, or anything else, you can use the route params type.
Cells!
What about cells? The cells directory contains React components, which specifically handles GraphQL query, loading, empty, error, and success states. The best point about it is that every process is done asynchronously. So each method will be rendered automatically depending on the state of your cell.
Easy to use Forms
Honestly, in my opinion using forms in a React App isn’t quite as good as using regular HTML. Why is that? It’s because you have to catch every single change that happens on the input tag into a state, then call it on submit.
But in RedwoodJS, working with form is made a lot easier because you’ll be using a regular HTML, so you don’t need to use states anymore. Furthermore, the input value will be automatically loaded on submit. Additionally, these inputs provide server-side validation and error handling. It can also style them like any other React components — I like this feature the most because it’s as easy as simple_form in Ruby on Rails, which makes my job easier, you know? 😄
The Magic Generator
Maybe the future exists on other full-stack frameworks, but RedwoodJS provides generators to create some sort of scaffolding to the whole app that includes creating a React file. So, you don’t need to create a React component manually — again, it’s like magic! 😂
Also, if you have a hard time creating React files and dividing them into components, this magic generator can really help you.
Take a look at these example generators, the syntax is quite easy to understand — see this for full references.
# Create a cell for Users
$ yarn rw generate cell Users# Create a layout named Admin
$ yarn rw generate layout Admin# Create an About page and set the URL to /about
$ yarn rw generate page About /about# Read the DB schema and create the SDL file for the User table
$ yarn rw generate sdl User# Create api/src/services/email/email.js and include CRUD functions
$ yarn rw generate service Email --crud# Create the SDL, service, cells, pages and components to CRUD a User
$ yarn rw generate scaffold User
Ready to Deploy?
One of the focuses of RedwoodJS, this framework makes it easy for developers to deploy projects to serverless architectures. Currently, they are only officially supported by three serverless.
yarn rw generate deploy netlifyyarn rw generate deploy vercelyarn rw generate deploy aws_serverlessThe documentation is quite complete and easy to understand, although it doesn’t support all serverless architectures yet.
Besides using magic syntax like above, there is documentation to deploy to other serverless, like Heroku or DigitalOcean.
Good Documentation
I was surprised when I saw the documentation, they contain almost all the features they have, even though the framework wasn’t mature enough. It helps me understand RedwoodJS when I tried it, especially with the video tutorial. The RedwoodJS community is always up to date and they’re growing every day.
Final Words
The RedwoodJS is still a newborn, the last version of this framework is 0.21.0. By 25th of August 2020, the developers said that they want to hit version 1.0 by the end of 2020. Even though they have not updated their roadmap so far, I think it’s entirely possible that we can try other features in the next stable release. Moreover, all of its features are almost stable for handling mini-project applications.
Personally, I would recommend you to try this framework because you will experience a new way of coding, in terms of frontend or backend. Also, I think RedwoodJS will become a popular framework for its features because it is supported by a large javascript community and developed by a great team. So, why shouldn’t you invest early?
If you have any thoughts or suggestions feel free to comment below.
Thanks for reading!
