我用 RedwoodJS 做了一个 Todo 应用程序，所以我将总结一下我的印象。

背景

我平时是做前端工程师的，但当时在聊天中，”红木JS我了解了一个名为“的框架的存在，并实际尝试了它。

扫了一眼，里面装满了现代库，是一个相当不错的框架，但是当我尝试用Qiita收集资料时，案例数只有3个。。

RedwoodJSでTodoアプリを作ってみたので、所感をまとめてみる。

所以这次把自己实际接触RedwoodJS的感受输出一下，如果能增加Qiita中存在的RedwoodJS的信息就更好了，哪怕只是一点点。我就是带着这个想法写这篇文章。

我可能错过了解释或错过了重要的一点，

“RedwoodJS 有这样的功能！”
这个解释是不是有点不同？

如果您有任何问题，请在评论中告诉我们。

我这次做的 Todo 应用

这是我这次做的 Todo 应用。
存储库：https://github.com/kirby0113/Redwood-todo
部署到：https://redwood-todo.vercel.app/

它还没有完成，但如果你喜欢，请随意触摸它。

现在，让我们介绍 RedwoodJS。

什么是 RedwoodJS？

官方文档：https://redwoodjs.com/
Github 仓库：https://github.com/redwoodjs/redwood
星数：14,559（截至 2022 年 8 月 13 日）
Redwood 是一个全栈 Web 框架，旨在帮助您从业余项目成长为初创公司。

红木JS牙齿，更容易构建 Web 应用程序并更快地迁移增长的 Web 应用程序它是一个全栈框架，旨在
编译了当今 Web 开发中经常使用的几个库，仅使用 RedwoodJS 就可以创建现代 Web 应用程序。

“红木”这个名字似乎来自“红木”这个名字，一种在北加州成簇生长的巨树。正式，
红木像树苗一样美丽，长得雄伟壮丽。如果您对自己的 Web 应用程序有这种感觉呢？

像红木一个发展壮大的 Web 应用程序。
红木松果很密集，而且非常小。我们可以让您用更少的代码完成更多工作吗？

就像生长在红杉中的茂密松果，用更少的代码做更多的事情。
红木树是耐火的。对灾难场景的鲁棒性令人惊讶，就像一个伟大的 Web 框架应该是一样的！

像耐火的红杉，强大、抗灾的 Web 应用程序。
红杉远看很复杂，但近看很简单。它们的分支结构提供了秩序，并允许在一个简单的框架内出现复杂性。Web 框架可以做同样的事情吗？

就像一株远看复杂，近看简单的红木，一个简单框架内的复杂而有序的结构。

似乎正在以愿景之类的方式进行开发。

我发现 RedwoodJS 的吸引力

它很快，但我将简要总结一下我在 RedwoodJS 中感受到的吸引力。这个框架吸引我的地方如下：

丰富的图书馆
我们的使命是帮助更多的创业公司
更快地探索更多领域。

正如官方所说，实现快速 Web 应用程序构建所需的一整套库这是一个印象。

没有时间选择技术，
官方：“使用这个图书馆！”

有些人被这样对待可能不是很愉快，但对我个人来说很舒服。

简单易懂的教程

RedwoodJS 官方教程

除了文档，还提供教程，总结了实际构建一个 Web 应用程序的流程。说 RedwoodJS 是第一个 Web 应用程序开发的人可以轻松应对。

使用 CLI 轻松实现

后面会讲到，能用RedwoodJS提供的CLI命令快速实现其他框架比较麻烦的部分，还是蛮有吸引力的。例如，

GraphQL 查询/突变/解析器定义

身份验证实现

至于这一点，所有基本实现都是使用提供的命令完成的。一团糟。

我喜欢核心技术

（对不起，这是超级个人）

RedwoodJS 说“反应", "GraphQL", "棱镜”以构建为核心技术。我稍后会谈到这些，但我非常喜欢这些库，而且我很容易进入 RedwoodJS。（我特别感谢 React 和 Prisma。）

这三个库比较有名，我想接触过的人也比较多。如果你是这样的人，你或许可以轻松使用 RedwoodJS。

反之亦然，
“比起 React，我更像是一个 Vue 团队！！！”

和，
“REST 比 GraphQL 好~~~”

对于那些说，我可能无法推荐太多。

RedwoodJS 在前端使用 React，在服务器端使用 Prisma，而 GraphQL 作为它们之间的桥梁。官方的想法也可能在这里渗出。
这部分可能无法更改，不推荐。

RedwoodJS 提供的库

很简单，但我会介绍RedwoodJS主要提供的库。

公共部分

打字稿

打字稿官网

一种向 JavaScript 添加类型的语言

通过使用 TypeScript，您可以在开发时防止运行时错误

我不能再写原始的 JavaScript ()

GraphQL

GraphQL 官方网站

为 API 设计的查询语言

相比REST API，优点是可以附加类型，可以灵活获取数据，只需要一个端点。

REST 性能可能更好。

笑话

开玩笑官方网站

JavaScript 测试框架

的印象是它经常被使用，因为它快速且易于模拟

测试库经常与

前端

反应

反应官网

用于 UI 构建的 JavaScript 库

可以通过提供称为反应钩子的功能并根据状态更改仅更改必要的部分来开发交互式 Web 应用程序。

与Angular和Vue相比的大致印象

阿波罗客户端

阿波罗客户端官方网站

JavaScript 的状态管理库

为 React 设计并使用 GraphQL 管理数据获取和缓存

从 GraphQL API 检索数据时使用的印象

反应钩子形式

React Hook 表单官方网站

React 表单验证库

无需重新呈现即可管理每个表单元素的输入。

使用提供的自定义挂钩轻松创建表单验证

对印象是它经常被委托验证使用

反应热吐司

react-hot-toast 官网

提供为 React 开发的通知组件的库

外观和行为比较丰富，很容易实现引起用户注意的通知。

故事书

故事书官方网站

用于组件驱动开发的组件管理库

类似目录的管理和组件状态显示支持可重用和健壮的组件开发

印象一般是前端做组件驱动开发的时候用这个

后端

棱镜

棱镜官网

适用于 Node.js 和 TypeScript 的 ORM（对象关系映射）

通过描述和迁移模式，PrismaClient 提供了数据操作的方法

建议您不需要关注数据库，因为它非常容易操作数据，并且可以以面向对象的方式处理。

这些库默认由 RedwoodJS 提供。

使用 RedwoodJS 时要记住的事情

从这里，从 RedwoodJS 的功能，
我：“我要忍住！”

我将介绍我认为的两点。
但是，由于 RedwoodJS 独有的功能并不多，更重要的是能够使用 RedwoodJS 中编译的库我认同。

红木 CLI

官方文档页面

使用 Redwood CLI 可以实现快速开发。特别是“设置身份验证”和“设置 GraphQL 环境”往往需要时间，但使用此框架，您可以使用 CLI 快速构建。

我将介绍我主要使用的命令。（选项等，见官方文档。）

红木应用环境建设
yarn create redwood-app <project directory> [option]
这是开发环境的命令。
RedwoodJS 似乎默认使用 yarn 构建环境。
通过更改选项，您可以更改要使用的纱线版本。

启动本地环境
yarn redwood dev
这是启动本地环境的命令。

部署准备命令
yarn redwood deploy <target>
这是准备部署环境的命令。
部署目标丰富，支持vercel、netlify、AWS等。

文件生成命令
yarn redwood generate <type>
文件生成命令。这太重要了。
可以不使用它进行开发，但我认为基本上使用它会更好，因为它会准备必要的文件。
除了使用它生成 GraphQL 解析器之外，还可以生成页面和组件。了解更多信息这里请参见

使用某些库的命令
yarn redwood <コマンドやライブラリ名>
例如，对于棱镜迁移，
yarn redwood prisma migrate dev
如果 Storybook 启动，
yarn redwood storybook
你必须输入一个命令，比如
这部分有点难以适应。 .

认证部分生成命令
yarn redwood setup auth <provider>
这是生成认证部分的命令。这个会在前端实现认证页面，在后端实现认证功能。
可能需要一些定制会的，不过我觉得基本上看官方文档是没有问题的。了解更多信息这里请参见

还有其他命令，但这些是我在此开发中主要使用的命令。

实现路由

在 RedwoodJS 中，您将路由写入web/src/Routes.tsx。
在这个 Todo 应用程序中，我是这样写的。
路线.tsx
import { Router, Route, Set, Private } from '@redwoodjs/router'

import StandardLayout from './layouts/StandardLayout'
import TodoLayout from './layouts/TodoLayout'
import CreateTag from './pages/CreateTag'
import CreateTask from './pages/CreateTask'
import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage'
import LoginPage from './pages/LoginPage/LoginPage'
import ResetPasswordPage from './pages/ResetPasswordPage/ResetPasswordPage'
import SignupPage from './pages/SignupPage/SignupPage'
import TaskDetail from './pages/TaskDetail'
import Tasks from './pages/Tasks'

const Routes = () => {
  return (
    <Router>
      <Set>
        <Route path="/login" page={LoginPage} name="login" />
        <Route path="/signup" page={SignupPage} name="signup" />
        <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
        <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
        <Route notfound page={NotFoundPage} />
      </Set>
      <Private unauthenticated="login">
        <Set wrap={[TodoLayout]}>
          <Route path="/" page={Tasks} name="tasks" />
        </Set>
        <Set wrap={[StandardLayout]}>
          <Route path="/task/create" page={CreateTask} name="createTask" />
          <Route path="/tag/create" page={CreateTag} name="createTag" />
          <Route path="/task/{id:Int}" page={TaskDetail} name="taskDetail" />
        </Set>
      </Private>
    </Router>
  )
}

export default Routes
从这里开始，我们将对其进行分解。

路线
路由组件
<Route path="/task/{id:Int}" page={TaskDetail} name="taskDetail" />
定义到每个页面的路由。

路径：请求访问的 URL

page：访问时显示的页面组件

name：从路由对象访问时的方法名称

稍后我们将讨论路由对象。

套
设置组件
<Set wrap={[StandardLayout]}>
  <Route path="/task/create" page={CreateTask} name="createTask" />
  <Route path="/tag/create" page={CreateTag} name="createTag" />
  <Route path="/task/{id:Int}" page={TaskDetail} name="taskDetail" />
</Set>
用于将 Layout 组件包装到每个页面上。
对于布局组件，这里请参见（直观上感觉和 Laravel 的模板引擎一样。）

私人的
私有组件
<Private unauthenticated="login">
  <Set wrap={[TodoLayout]}>
    <Route path="/" page={Tasks} name="tasks" />
  </Set>
  <Set wrap={[StandardLayout]}>
    <Route path="/task/create" page={CreateTask} name="createTask" />
    <Route path="/tag/create" page={CreateTag} name="createTag" />
    <Route path="/task/{id:Int}" page={TaskDetail} name="taskDetail" />
  </Set>
</Private>
您可以指定公共范围。私有包装路由仅对经过身份验证的用户可见，并被重定向到 unauthenticated 路由。

关于路线对象

除了基于 URL 的路由之外，RedwoodJS 还提供了一个路由对象，可用于有意地重定向页面。

例如在 Routes 组件中
<Route path="/task/{id:Int}" page={TaskDetail} name="taskDetail" />
定义为
routes.taskDetail()
可以使用，允许灵活的页面转换。
在使用路由时，基本上是和 RedwoodJS 提供的其他组件结合使用。
有关详细使用信息，这里请参见

就目前而言，如果牢记这两点，似乎发展不会受到阻碍，
未来对RedwoodJS的了解会增加，
我：“这真的很重要！”

如果有更多部分，我会每次添加它们。

好和下一个我觉得

在此基础上，我将总结我在开发过程中感受到的优点以及接下来的几点。

好点

图书馆选择很容易/不需要

我作为前端工程师的经验还很短，所以选择库和准备使用库的环境往往需要时间。
RedwoodJS 大大减少了这样的时间和精力，让我可以专注于我的开发工作。
但是，这部分似乎因人而异。

通过身份验证轻松设置公共范围

我没用过其他全栈框架，所以没法比较，但是RedwoodJS给我的印象很简单，因为只要用<Private>组件包裹起来就可以通过认证来设置公开范围。

易于实现身份验证

就个人而言，使用单个命令创建身份验证所需的页面和进程非常有帮助。可能需要一些定制，但即使考虑到这一点，与其他框架/库相比，它也相当容易实现。

使用 Prisma 的模式和一个命令，实现 GraphQL 所需的解析器等一键准备好

在实现 GraphQL 时，定义解析器和查询往往需要时间，但 RedwoodJS 通过一个命令提供了所有基础知识。

好总结

它使麻烦的部分易于实现。

我的印象是他们专注于快速应用程序开发的功能，同时利用其他库的功能。

提前选择技术的点可能是选择人。

下一个

RedwoodJS 的原始功能似乎几乎不存在

我可能错过了它，但似乎 RedwoodJS 几乎从不实现其他库没有的功能。
RedwoodJS 是好是坏它是“图书馆的集合”，是“为了顺利现有的发展”考虑一下似乎很好。
也就是说，RedwoodJS 的目的是可以更轻松地构建 Web 应用程序，并且可以快速迁移不断增长的 Web 应用程序，我认为我们已经取得了足够的成就。

某些库可能无法正常工作

对于通知实施，反应烘烤'，但它不适用于 RedwoodJS。
这次RedwoodJS提供了另外一个库，所以暂时还可以，但是可能会出现你要使用的库无法使用的情况。

对核心技术的好恶直接导致对 RedwoodJS 的好恶

前面我提到过，“React”、“GraphQL”和“Prisma”用于核心技术，但对于那些不喜欢这些库的人，我认为 RedwoodJS 将是一个不太受欢迎的框架。

一些自动生成的解析器可能具有不良性能

我想我已经介绍过，GraphQL 所需的文件是使用 RedwoodJS 提供的 CLI 自动生成的。有时存在。

例如，假设您定义了以下模式并生成了 GraphQL 解析器。
架构.棱镜
model Task {
  id          Int      @id @default(autoincrement())
  name        String
  detail      String
  priority    Int
  tags        Tag[]
  is_checked  Boolean
  is_archived Boolean
  created_at  DateTime @default(now())
  user        User     @relation(fields: [user_id], references: [id])
  user_id     Int
}
此时，RedwoodJS 会生成一个解析器，如下所示。
任务.ts
export const Task: TaskResolvers = {
  tags: (_obj, { root }) =>
    db.task.findUnique({ where: { id: root.id } }).tags(),
}
如果这个resolver存在，当你获取task数据的时候，它会同时获取relation连接的tag的数据。

乍一看很方便，但有了这个获取任务和获取连接到它的标签是两个单独的查询。

关于这一点，我认为最好手动删除这个resolver并实现它，以便在任务获取部分同时获取标签，如下所示。
  return db.task.findUnique({
    where: { id },
    include: { tags: true },
  })
下一篇总结

它似乎没有原始功能。

有没有不能使用的库？

可能需要手动定制。

图书馆方面的自由度低

如何使用 RedwoodJS

RedwoodJS 提供的功能非常有用，我相信它将有助于加快开发速度。
但是，如果您问我该函数创建的文件是否理想，那将是另一回事。

使用提供的功能快速安排项目所需的功能和基础设施，提高性能并根据需要重构代码似乎更好。

综上所述

RedwoodJS 是我个人最喜欢的框架。
我认为它非常适合那些使用 JavaScript 并希望使用全栈框架进行开发的人！

阅读这篇文章

“RedwoodJS 看起来很有趣！”

感受到的人！
构建一个项目很容易，所以请尝试一下！
并将您的发现输出给 Qiita 和 Zenn（希望）

就这些了~。

参考资料

RedwoodJS 官方文档

我尝试了一个全栈 Web 框架“RedwoodJS”教程

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623567.html