大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是redwoodjs，即一个全新的全栈 JavaScript/TypeScript 框架。话不多说，直接进入正题。

什么是 Redwood

Redwood 是由 Tom Preston-Werner 发起的最新开源项目，Tom Preston-Werner 是 GitHub 的联合创始人，Jekyll（最早也是最受欢迎的静态站点生成器之一）、Gravatar（最受欢迎的静态站点生成器之一）的创建者 ，语义版本控制规范（为 Node 打包生态系统提供支持）的作者，以及 TOML（许多项目使用的一种显而易见的最小配置语言）的发明者。

在最高级别抽象上，Redwood 应用程序是一个与自定义 GraphQL API 对话的 React 前端，其 API 使用 Prisma 对数据库进行操作，开箱即用。

• 开发者可以使用 Jest 进行集成测试
• 使用 Pino 进行日志记录
• 使用 Storybook 进行 UI 组件目录。
• 单一的命令行调用就可以设置身份验证（如 Auth0）或 CSS 框架（如 Tailwind CSS）

最重要的是，Redwood 架构允许开发者部署到无服务器提供商（例如 Netlify、Vercel）或传统服务器和容器提供商（例如 AWS、Render），而且无需更改任何代码。

通过为开发者提供默认配置、消除样本文件，Redwood 让开发者可以重点关注自己的应用程序本身逻辑，而不是浪费时间选择技术栈或者迷失在各种配置中。 此外，使用 Redwood 开发者可以随着时间的推移以最小的努力从持续的性能和功能升级中获益。

目前 Redwood 在 Github 上已经开源，有超过 16k 的 star、0.9k 的 fork、3.5k 的项目依赖量，代码贡献者 0.4k，是一个值得关注的开源项目。

为什么需要 Redwood

Redwood 旨在帮助开发人员管理初创公司应用程序在初始化和不断迭代过程中的复杂性。 为此，它被设计为一个全栈的 JavaScript/TypeScript 框架，其由不同的底层框架组成：

• React（非 Vue.js 或 Svelte ）：Redwood 选择了世界上最流行的渲染引擎来支持 Redwood 的 Web 前端。
• GraphQL：随着项目的增长，需要与后端通信的客户端应用程序的数量也会增加。以 GraphQL API 作为基础，开发者可以轻松地生活在客户端的世界中。
• Prism ORM：Prisma 极受欢迎的 ORM 让开发者可以更多地关注业务逻辑，而不是 SQL 的复杂性。
• 测试框架 Jest：Redwood 通过“场景”增强了 Jest，使开发者可以轻松地为给定场景设置数据库，加上 GraphQL 模拟以轻松测试数据流。
• UI 开发工具 Storybook：如果使用 Storybook 单独设计组件，不仅永远不必为了在特定状态下查看它而与框架作斗争，而且还可以免费构建一个全面的设计参考
• 可选的 TypeScript： 支持提供最好的 JavaScript 和最好的类型系统。即使用 JS 构建应用程序，仍然会获得自动完成功能，因为 Redwood 本身是用 TypeScript 编写。

同时借助于 Redwood 的诸多优秀特性，开发者可以默认获得最好的开发体验，比如：

• 提供格式化、文件组织、Webpack、Babel 等默认设置
• 具有动态参数、自定义类型和命名路由功能（以生成正确的 URL）的简单但强大的路由（单文件覆盖所有路由）
• 自动基于页面的代码分割
• 无样板的 GraphQL API 构建
• Cells 从后端 API 获取数据的声明方式
• 页面、布局、单元格、SDL、服务等的生成器。
• 特定于数据库表的 CRUD 操作的脚手架生成器
• 具有简单的客户端、服务器端验证和错误处理的表单
• 快速刷新（热重新加载）以加快开发速度，支持构建时页面预渲染
• 数据库和数据迁移
• 增强 GraphQL 从上下文到执行的生命周期的 Envelop 插件
• 简单但功能强大的 GraphQL 指令，用于验证访问或转换已解析的数据
• 使用 Pino 进行日志记录，包括传输
• 使用 Webhooks 用于处理传入和传出的签名验证和有效负载签名
• 跨代码库集成的 Jest 测试实用程序：模拟、测试数据库、生成的样板测试、场景、Web（组件）和 API（服务、无服务器功能和 webhooks）
• 内置 Storybook ，API Server 使用 Fastify for Serverful 部署
• 无服务器和传统基础设施的一流 Jamstack 风格部署，支持： Netlify、Vercel、无服务器、Render、Docker 容器（适用于 AWS、谷歌云、Azure 等）

Redwood 如何工作

Redwood 应用程序分为两部分，即前端和后端，为单个 monorepo 中的两个 JS/TS 项目。 Redwood 使用 Yarn 来简化跨两个项目的操作，同时将其保存在一个 Git 存储库中。

前端项目称为 web，后端项目称为 api，各自独立。因为 web 端的代码最终将在用户的浏览器中运行，而 api 端的代码将在某处的服务器上运行，每个项目有不同的依赖关系和构建过程。

• API 端是 GraphQL API 实现： 业务逻辑被组织成代表其内部 API 的服务，并且可以从外部 GraphQL 请求和其他内部服务调用。 Redwood 自动将内部服务与 Apollo 连接，减少编写的样板文件的数量。 同时，服务可以通过 Prisma 的 ORM 与数据库进行交互，而 Prisma 的迁移工具提供了一流的迁移，可以减轻数据库模式发展的诸多痛点。
• Web 端用 React 构建： Redwood 的 Router 使 URL 映射到 React 页面组件变得简单，并支持自动代码拆分。 页面可能包含布局组件来包装内容，同时还有 Cells 和常规 React 组件。Cells 允许开发者以声明方式管理获取和显示数据的组件生命周期， 其他 Redwood 实用程序组件可用于实现智能表单等等。同时 Redwood 集成了 Storybook 和 Jest，使得开发更加容易。

Redwood 支持移动、桌面、cli 等不同方面，其都使用相同的 GraphQL API 并在同一个 monorepo 中。

本文总结

本文主要和大家介绍一个全栈的 JavaScript/TypeScript 框架，即 redwoodjs 。相信通过本文的阅读，大家对 redwoodjs 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/redwoodjs/redwood

https://www.codingzeal.com/post/why-redwoodjs-is-the-most-exciting-framework-you-can-learn-right-now

https://soshace.com/building-a-full-stack-application-using-redwoodjs/

https://betterprogramming.pub/a-look-at-redwoodjs-cf0e1d117f5

https://redwoodjs.com/

https://thenewstack.io/redwood-a-javascript-framework-designed-for-startups/

封面图来自GANESHMANI的《Building a Full Stack Application using RedwoodJS》