Frontity 基于React的WordPress前端框架
Frontity 是一个面向 WordPress 的基于 React 的前端框架,不同于现有其它的 React 框架(如Gatsby),Frontity 专注于 WordPress,是一个为 WordPress 定制的前端框架。Frontity 通过 Rest API 获取 WordPress 的数据,然后负责生成 HTML 页面。
传统上 WordPress 通过主题、插件(Theme、Plugin)负责生成前端的用户界面,也提供后台工具管理用户内容,Frontity 则把前端工作独立出来,可以让 WordPress 专注于后台部分的工作。这样做的优点如下:
1、Frontity 集合了 WordPress 和 React 各自的优点,WordPress 负责生成和管理内容,同时借助 React 强大的前端优势,生成复杂、灵活、美观的界面,提供更好的用户使用体验。
2、Frontity 扩展灵活,可以创建、发布和使用现有的包(Package)来扩展 Frontity 已有的功能(npm),不同的项目之间也可以共享包。
3、Frontity 同时也具有较好的性能优势,提供了延迟加载(lazy loading)、数据预取(pre-fetching)等功能,加上React 界面渲染的优点,使得前端访问数据的速度非常快。
4、Frontity 构建应用非常快,通过一个命令就可以把应用框架搭建好,所需要的目录结构,基础的功能模块、包都创建好了,可以直接进入到应用开发上。
5、Frontity 支持 serverless,这样可以非常方便地发布应用到云端。比如 Vercel。
6、Frontity 可以降低学习新知识的时间成本,比如无需深入了解 GraphQL、REST API,Frontity 已经把 WordPress REST API 集成到内部的功能中,可以方便、快捷地获取 WordPress 的数据内容。
Frontity 提供了耦合和非耦合两种使用架构,一般情况下建议使用非耦合的方式,由WordPress 负责后端,Frontity 负责前端,这样的使用方式,网站的主域名要分配给 Frontity 所在的服务器。如果现有的 WordPress 网站已经在运行,使用非耦合的方式需要对原 WordPress 数据库中所有的域名改成新的域名或网址(可以批量修改)。
Frontity 中的用户界面 HTML 是通过服务器端的 Node.js 生成,这样前端用户访问页面时,无需每次都进行重建,加快了访问速度,提升了用户体验。比如,当第二次访问某个页面时,访问速度堪比静态页面。
在后续的文章中,我们将详细介绍 Frontity 的概念、功能及其应用。