- Jun 10, 2010
- 2,401
- 1,676
I've been using a new JavaScript framework called RedwoodJs for developing a new application I've been working on. I'm usually a NextJS fan because with NextJS I can generate static or dynamic web pages, build out server side generate applications, or create a hybrid of both, and with it's built-in API support you really have no need to use anything else. Redwood caught my attention because it claims to make scaffolding applications much easier and quicker than anyone else. As a core JavaScript developer the one thing I hate about the JS world is all of the frameworks, libraries, and next-best-things there are. If you suffer from shiny new object syndrome, then the options as a JS developer will have you window shopping for a long time! With that said, I was hesitant to try out Redwood because I've been happy with NextJs, but for this next project I gave it a try.
Redwood is a very opinionated framework in how you should develop with it. Normally, opinionated things are big turn off because there are 1,000 different ways and I find myself spending half of my time learning about a framework's opinion more so than actually building with it. Redwood breaks your project structure up into web (frontend presentation layer) and api (backend stuff) that makes code organization nice a tidy so you don't have to worry about mixing your fronted and backend code. You definitely don't want to mistakenly add backend code that exposes an API key to your frontend! Redwood uses Prisma under the hood along with GraphQL so if you are already familiar with this then you'll do well. Redwood gives you a handy CLI that you use to scaffold your web application. Do you want to create a new page for your app? just run "yarn redwood generate product" and you have a new "/product" page created with routes automatically setup. If you have a Product model created in Prisma and you want to create basic CRUD pages then you can run "yarn redwood scaffold product" and boom, you now have a way to create, get, update, delete products without having to write a single line of code. Normally, I'm not a fan of CLI generators but Redwood really does save you a lot of repetitive typing for simple application features.
The only new concept Redwood seems to add that I wasn't somewhat already familiar with is their concept of Cells. Cells are basically Redwoods way of handling data fetching in component form. When fetching data in React you typically have your "fetch" method, a loading state, error state, a success/response. I tend to put this logic inside my "page" component/view then pass down values via props to the child that needs it. With Cells, you get all of the data fetching inside your components.
Here's an example:
Of course you don't have to use this approach and for one off queries you can still make your own data fetch requests!
I think RedwoodJS is a greater way to easily crank out simple apps fast! This would be perfect if you have a client that needs simple CRUD abilities for their dashboard app.
I'm curious to hear if anyone else have experience using this and what they liked/didn't like about it.
Redwood is a very opinionated framework in how you should develop with it. Normally, opinionated things are big turn off because there are 1,000 different ways and I find myself spending half of my time learning about a framework's opinion more so than actually building with it. Redwood breaks your project structure up into web (frontend presentation layer) and api (backend stuff) that makes code organization nice a tidy so you don't have to worry about mixing your fronted and backend code. You definitely don't want to mistakenly add backend code that exposes an API key to your frontend! Redwood uses Prisma under the hood along with GraphQL so if you are already familiar with this then you'll do well. Redwood gives you a handy CLI that you use to scaffold your web application. Do you want to create a new page for your app? just run "yarn redwood generate product" and you have a new "/product" page created with routes automatically setup. If you have a Product model created in Prisma and you want to create basic CRUD pages then you can run "yarn redwood scaffold product" and boom, you now have a way to create, get, update, delete products without having to write a single line of code. Normally, I'm not a fan of CLI generators but Redwood really does save you a lot of repetitive typing for simple application features.
The only new concept Redwood seems to add that I wasn't somewhat already familiar with is their concept of Cells. Cells are basically Redwoods way of handling data fetching in component form. When fetching data in React you typically have your "fetch" method, a loading state, error state, a success/response. I tend to put this logic inside my "page" component/view then pass down values via props to the child that needs it. With Cells, you get all of the data fetching inside your components.
Here's an example:
JavaScript:
import type { FindArticleById } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
import Article from 'src/components/Article/Article'
export const QUERY = gql`
query FindArticleById($id: Int!) {
article: article(id: $id) {
id
title
keywords
topics
content
createdAt
updatedAt
published
userId
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Article not found</div>
export const Failure = ({ error }: CellFailureProps) => (
<div className="rw-cell-error">{error.message}</div>
)
export const Success = ({ article }: CellSuccessProps<FindArticleById>) => {
return <Article article={article} />
}Of course you don't have to use this approach and for one off queries you can still make your own data fetch requests!
I think RedwoodJS is a greater way to easily crank out simple apps fast! This would be perfect if you have a client that needs simple CRUD abilities for their dashboard app.
I'm curious to hear if anyone else have experience using this and what they liked/didn't like about it.