太长没看

我使用GatsbyJS，Contentful和Firebase构建了新闻应用的MVP（最小可行产品）。我能够快速地进行构建。我得到了能够快速进行原型设计和改进流程的感觉。

MVP的要求

我认为 MVP 的要求是探索对经济新闻内容的反应。我决定将一个非常常见的新闻应用程序作为 MVP 进行尝试。我认为最适合这个要求的配置是 GatsbyJS、Contentful 和 Firebase。

盖茨比JS

GatsbyJS 是一個靜態PWA（Progressive Web App）生成器。讓我們來看看 Gatsby 在內部是如何運作的。與在應用程序運行時進行 API 請求的 SPA 不同，Gatsby 在構建時就完成了所有數據的獲取，包括從本地文件中獲取數據。GatsbyJS 將這些數據用於生成所有的 HTML、JavaScript 和 CSS 文件。這種服務器端渲染（SSR）可以大大加快頁面的載入速度。它不依賴於服務器來動態生成頁面，而是通過在構建時將它們預先渲染並使用 CDN，讓世界各地的用戶能夠快速流暢地體驗。由於 Gatsby 應用程序在首次加載後會預取其他頁面的資源，因此可以大大加快加載速度。

组件

组件是React的重要功能，目前已成为常见的Web设计模式。在当前复杂级别的用户界面中，通过编写可维护的代码或使用模板引擎来保持一致性几乎是不可能的。相反，我们可以构建可重用组件，然后使用它们来构建视图。通过使用独立的模块来处理不同的事物，管理和维护变得更加容易。由于Gatsby使用React，因此遵循该设计模式。

Webpack能够将多个模块打包成一个或多个 bundle，并且还可以处理不同类型的资源文件，让前端开发更加高效和方便。

Webpack通过优化HTML、JavaScript和CSS来创建捆绑包。如果预先配置了Babel和其他插件，则可以使用最新的ES6 + JavaScript和GraphQL。它内置了热重载和代码分割，提供更好的开发体验和更好的网站性能。这旨在使开发人员创建最小化的工具配置，并集中精力进行实际的网站开发。近年来，前端的“基础设施”变得庞大，当你想快速创建MVP时，这无疑会成为障碍。只要您需要静态页面，GatsbyJS将减轻此障碍。

盖茨比插件 bǐ

Gatsby在可拓展性和灵活性方面表现出色。插件是一种利用其功能的方法之一。通过插件，可以实现多种功能，如实现网站的离线浏览、添加Google Analytics、支持内联SVG等等。插件的功能列表几乎是无限的。通常，Gatsby插件还提供了快速入门的起点，以便开始使用。

开动者

这些基本上是Gatsby网站的经典款，根据不同类型的网站，您可以迅速开始开发。它们帮助您直接进入配置和基本功能的开发。换句话说，减少了调试时间，增加了开发时间。我选择了“gatsby-starter-gcn”（作者是ryanwiemer）。这个入门级模板采用了Contentful作为头部CMS的数据来源。

GraphQL (仅提供一种选项，请用中文进行释义):

图灵完备的查询语言

GraphQL是用于API的查询语言。 GraphQL不是与特定的数据库或存储引擎绑定在一起的，而是由现有的代码和数据支持的。模式严格指定了类型。在模式中，id变量必须是整数。如果客户端发送了非整数值，GraphQL引擎将拒绝整个查询。

GraphQL是REST的替代方案，其作用是解决REST在需要多个资源的复杂页面中必须发起多次API请求的问题。这样做有以下优点：REST中一个URL只能表示一个资源，而GraphQL可以一次性获取多个资源，避免了性能下降和代码复杂度增加的问题。

GraphQL作为下文所述的微服务网关（中间层）也有其作用。作为GraphQL服务器的网关，它从多个数据源中提取与模式定义对应的数据。在这过程中，可以直接访问数据库，也可以访问现有的RESTful API。

由于GraphQL在查询和响应的结构中具有对应关系，因此客户端的编码变得更加简单，编码和查询的学习成本也较低，这是GraphQL的优点之一。另一方面，相比客户端实现，实现GraphQL处理系统可能更加困难，处理大容量二进制文件如图像和视频也较为复杂，这被认为是GraphQL的缺点。

内容丰富的

Contentful是提供内容数据的平台。Headless CMS是一种后端专用的内容管理系统，它是从零开始构建的内容存储库，通过REST API使内容可以在各种设备上访问和展示。

在使用GraphQL上述的Contentful的API。
如果选择使用Headless CMS，前端可以使用独立的JS框架进行构建。
Contentful还提供了Webhook功能，可以实时将应用程序的更新信息提供给其他应用程序。

建设

所有与Contentful的API密钥的输入等均已通过Gatsby CLI通过命令行输入完成。您还可以使用gatsby build进行网站构建。还可以使用gatsby develop在开发过程中实现热重载。

Firebase托管

构建完成后，我们在Firebase Hosting进行了托管。GatsbyJS推荐使用Netlify，但考虑到CDN和未来开发需求，我们得出结论认为Firebase更为合适。

MVP的成功与否

我能够迅速地尝试。

未来所需的功能

我们正在考虑在登录的用户上推荐系统中展示与用户偏好相符的内容群。

为了未来开发移动客户端，我们显然会选择适合此目的的Microservices架构。因此，我们将从当前的Web应用开发阶段开始构建面向前端的后端，即Backends For Frontends（BFF）。通过建立BFF服务器，我们可以将各种处理任务委托给BFF，无需再在后端中管理会话等内容。

在后端，我们将建立管理文章、图片、视频等内容以及推荐系统等。就像给予Contentful内容管理和交付的责任一样，我们不排斥使用第三方API来构建后端。

通过引入BFF，可以在前端和后端之间设定边界，以分割架构层次并明确角色，从而更容易地进行独立开发。推荐系统的开发在技术和业务两个方面都是重要功能，需要一个独立的团队来完成。与单体开发相比，可能会有速度上的劣势，但从长远来看，预计这种方法会带来更大的利益。

最终

非常感谢您阅读到这里。请关注我的Twitter。源代码存放在这里：
https://github.com/taxiyoshida/gatsby-firebase-app

这是一个中国的传统节日，人们在这一天通常会给亲朋好友送礼物并团聚。

藤吾郎（ふじ・ごろう）：『GraphQL』全面入门─学习与REST的比较、API与前端双重实现

Sam Newman的”模式：为前端设计的后端”