Frontity，一个用于创建 WordPress 网站的 React 框架

过去几个月，Frontity 的工作强度相当大。早在三月份，我们就决定停止开发面向 WordPress 发布者的移动主题（也称为 Frontity PRO），以便将所有精力集中在Frontity.org上：这是一个使用 React 创建 WordPress 主题的开源框架。

在等待 beta 版本发布之际，让我们回顾一下 Frontity 是什么，以及您可以在该框架中看到一些功能。

👉更新：Frontity 1.0 现已上线！点击此处阅读发布详情。

Frontity，一个用于创建 WordPress 主题的 React 框架

Frontity 是一个基于 React 的免费开源框架，用于开发 WordPress 主题。

换句话说，它允许你为无头（或解耦）WordPress 网站构建React 前端，该网站通过 WordPress REST API 提供数据。

这种方法有很多优点，但是要用 React 构建 WordPress 主题，开发人员需要学习和配置很多东西：打包、转译、路由、服务器渲染、从 WordPress 获取数据、管理状态或管理 CSS等等。

Next.js 和 Gatby.js 是两个优秀的 React 框架，它们都可以与 WordPress 配合使用，但它们都不是专门针对 WordPress CMS 而设计的。因此，开发者仍然需要进行一些复杂的配置并使用额外的工具。

Frontity 是一个专注于 WordPress 的、具有鲜明特色的 React 框架，旨在简化一切，即使对于那些不太熟悉 React 的开发人员来说也是如此：

• 专注于 WordPress：框架的每个部分都经过简化和优化，以便与 WordPress 一起使用。
• 框架具有明确的规范：开发者无需考虑使用哪些工具来处理 CSS 或状态管理等问题。

这意味着一切就绪，您可以立即开始使用 React 创建一个全新的、令人惊叹的 WordPress 主题。

WordPress 的替代渲染引擎

Frontity 也可以被描述为 WordPress 的另一种渲染引擎。

传统上，WordPress 使用基于 PHP 模板文件的主题来生成 HTML。

当REST API在WordPress 4.7中合并到核心功能后，开发者不再局限于PHP渲染引擎。他们可以检索WordPress内容并在任何需要的地方使用，这开启了无限可能的新世界。

其中一种方法是使用 React 创建 WordPress 主题。这时 Frontity 就派上用场了。

为什么选择 WordPress 和 React？

截至撰写本文时（2019年4月），WordPress 为超过33% 的网站提供支持。其市场份额在过去几年中一直在增长，并且没有放缓的迹象。

随着 Gutenberg 编辑器的普及以及无头 CMS的日益流行，WordPress 社区越来越多地开始考虑在其项目中使用 React。此外，像 React 这样的现代库也越来越受欢迎，并成为打造丰富用户体验的关键要素。

如果 WordPress 很棒，React 也很棒，为什么不将两者结合起来呢？特别是如果您想使用现代 Web 开发工具构建一个基于 CMS 的网站。

我们相信这种基于 JavaScript 的方法正在 WordPress 生态系统中逐渐流行起来，所以现在正是开始熟悉它的最佳时机。

Frontity是如何运作的？

在 Frontity 项目中，WordPress 被用作无头或解耦的 CMS，仅用于管理内容。Frontity 使用来自 WordPress REST API 的数据，并使用 React 生成最终在浏览器中显示的 HTML。

使用 Frontity，您仍然可以像以前一样使用 WordPress 控制面板来编辑和创建内容。当您进行更改时，Frontity 站点中的内容会自动更新，就像使用传统的 WordPress 主题一样。

Frontity 应用需要同时运行 Node.js 服务器和 WordPress 服务器（PHP）。Frontity 主要有两种模式（架构或配置）：解耦模式和嵌入式模式。

1.解耦模式

在此模式下，Frontity 从 WordPress 服务器 (PHP) 的 REST API 获取数据，并将最终的 HTML 作为同构 React 应用返回给访问者。

2.嵌入式模式

在此模式下，Frontity Embedded Mode 插件会替换 PHP 主题，并向 Frontity / Node.js 服务器发出请求，以检索 HTML 作为同构 React 应用程序，然后由 WordPress 将其返回给访问者。

根据所使用的模式，主域名（例如www.site.com）将连接到 WordPress 服务器（嵌入式模式）或 Frontity 服务器（解耦模式）。

更多信息请参阅文档的“架构”页面。

为什么需要不同的Node.js服务器？

React 是一个 JavaScript 库。为了生成供网站访问者或 Google 使用的 HTML 代码，服务器也需要能够运行 JavaScript。

Frontity既可以部署在传统的Node.js服务器上，也可以部署在无服务器服务中。这使得它成本极低，并且具有无限的可扩展性。

Frontity 特色

以下是您在 Frontity 中可以期待看到的一些功能。

零设置开发

一切都已就绪，您可以专注于构建您的网站：React、webpack、Babel、SSR、路由、CSS-in-JS、WP REST API、TypeScript、代码检查、测试等等。

闪电般快速的加载

Frontity 发送的 HTML 代码可以直接用于网站导航，因此初始加载几乎是瞬间完成的。无需额外的资源或往返请求。

这段 HTML 代码无需 JavaScript 即可完全正常运行和导航。React 加载完成后，它会接管应用程序的控制权，用户不会察觉到任何变化，整个过程完全透明。

应用内即时导航

React加载完毕后，路由会自动预取其他路由和数据。用户在应用内导航时无需等待。

可扩展（通过 Frontity 和 npm 包）

Frontity 的设计初衷就是为了便于扩展。与 WordPress 的插件机制类似，该框架提供了一个非常灵活易用的包管理接口，让您可以轻松地根据自身需求扩展框架。

开发者可以通过安装现有的 Frontity 和 npm 包来创建自定义包（扩展程序）或为网站添加新功能，而无需从头开始构建。此外，Frontity主题和包无需更改代码即可激活和停用，并且可以在多个项目中重复使用。

由于其可扩展性模式，Frontity 中的功能与路由系统无关，这使得开发人员可以决定要渲染哪种类型的页面，并让他们完全控制布局等等。

服务器端渲染

Frontity 会返回一个使用 React 生成的完整 HTML 文件。这可以缩短首次内容绘制所需的时间，并确保 SEO 不受影响。

内容是通过 WordPress REST API 获取的。React 在浏览器中加载后，便会接管页面控制权并执行其功能。

代码分割

Frontity 使用 webpack 来拆分代码，并发送应用程序运行所需的最小代码量。它还允许开发者借助 loadable-components 动态加载组件。

支持 WordPress.com 和 WordPress.org

Frontity 可以与不同的“源”扩展程序配合使用。第一个测试版包含一个wp-source可以与任何 WordPress.com 或 WordPress.org 站点的 REST API 配合使用的扩展程序。

支持通过单个安装包管理多个站点

这与 WordPress 多站点功能类似：Frontity 允许您仅通过一次安装即可托管任意数量的站点。这对于管理不同客户或想要创建网络的用户来说非常有用。

无服务器和水平扩展

Frontity 服务器体积非常小，完美契合无服务器架构的要求。这意味着前端可以无限扩展。

所有服务器端代码都打包在一个文件中，可直接与 Vercel 等无服务器服务（目前使用其 CLI）配合使用。Frontity 也已做好在任何 Node.js 服务器上进行水平扩展的准备。

久经考验的框架

我们已将过去两年用于支持大型 WordPress 新闻网站的内部框架 Frontity 开源。Frontity 已被数百万读者使用，并被证明能够构建引人入胜的前端体验。

您可以在这里了解更多关于该项目的故事。

与其他 React 框架的主要区别

Frontity 在某些方面与 Gatsby.js 和 Next.js 类似，可以进行比较。但是，它们之间也存在一些关键差异。

它100%专注于WordPress。

这意味着作为开发者，您需要学习的概念数量极少。无需复杂的配置即可上手，而且用于提供内容的 API 查询已针对开发者最常用的功能进行了预配置。

简而言之，您可以将大部分时间用于项目的开发需求（例如主题），而无需花费太多时间设置项目或担心工具和配置。

这是一个带有主观色彩的框架。

Frontity 拥有自己的状态管理器和 CSS-in-JS 解决方案。因此，开发人员无需费心配置这些工具，也无需学习 Redux 或 GraphQL 等其他技术。

它像 WordPress 一样具有可扩展性。

Frontity 拥有非常灵活的扩展模式，更类似于 WordPress 本身，而非其他 JavaScript 框架。要添加新功能或扩展 Frontity 的功能，您可以直接使用现有的 Frontity 和 npm 包，而无需从头开始构建。

此外，Frontity 主题和扩展程序无需更改代码即可激活和停用，并且可以在项目之间重复使用，从而有助于减少开发和维护时间。

它是动态渲染的。

在 Frontity 中，HTML 由 Node.js 服务器或无服务器服务动态渲染。这意味着每次编辑内容或发布新内容时，无需重新构建 HTML。

Frontity 网站的速度可以与静态网站一样快，因为大部分请求都由中间缓存层处理。静态 HTML 会被 CDN 缓存，Frontity 生成的动态 HTML 也会被 CDN 缓存和提供。

由于其动态方法，Frontity 在频繁和实时内容更新方面提供了强大的功能和可靠性，因此非常适合那些内容可能会快速变化或预计会随着时间推移而增长的项目。

此外：

• 您无需学习 GraphQL 或 REST API。您可以使用 Frontity 内置的状态管理器访问数据。
• Frontity 可以使用完全相同的 React 代码库输出适用于 Google AMP 的 HTML。

总结

我们希望这篇文章能帮助您更好地了解 Frontity 是什么以及它的工作原理。要了解更多信息以及如何入门，请访问文档或Frontity 学习页面。如果您是 Frontity 新手，请查看这篇分步教程。

如果您还有任何疑问或想参与 Frontity 的开发，欢迎加入社区论坛。我们的目标之一是创建一个开放的知识共享平台，让开发者们可以互相帮助、互相交流。

要了解 Frontity 的所有动态和最新产品更新，请在此处订阅 Frontity 新闻通讯。

原文发表于frontity.org/blog。