了不起的gatsby

什么是gatsby

• 官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

不再为web技术落后而头痛

• 享受最新Web前端技术的强大功能--React.js，Webpack，现代JavaScript和CSS等等，所有这一切都将启动并等待您的开始。

使用你自定义的数据

• Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源：使用GraphQL将数据从无头CMS，SaaS服务，API，数据库，文件系统等更直接地导入您的页面。

轻松发布到互联网

• Gatsby.js是互联网化的。 你可以不用理会数据库和服务器的复杂部署，以及昂贵，耗时的设置成本，维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件，可以轻松部署在数十种服务上。

使您的网站面向未来

• 不要用过去十年的技术建立一个网站。 网络的未来是移动的，JavaScript和API - JAMstack。 每个网站是一个Web应用程序，每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

静态渐进式Web应用程序

• Gatsby.js是一个静态PWA（Progressive Web App）生成器。 您可以将代码和数据分开。 Gatsby只加载关键的HTML，CSS，数据和JavaScript，以便您的网站加载尽可能快。 一旦加载，Gatsby预取其他网页的资源，所以点击网站感觉非常快。

超越竞争

Gatsby.js建立最快的网站。 不需要等待请求时生成页面，而是预先生成页面，并将其提升到全球服务器云端 - 随时随地传送给用户，无论他们身在何处。

GATSBY的使用

windows环境中

• 首先安装全局的gatsby
  npm install -g gatsby
• 然后安装windows环境安装工具：
  npm install windows-build-tools -g
  因为后面可能会安装对应的python等；
• .创建一个新的网站项目，命令行定位到相应的目录：
  gatsby new hello-gatsby
• 切换到当前目录
  cd hello-gatsby
• 启动服务
  gatsby develop
• Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上，可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。
  gatsby build

工作原理

GraphQL

GraphQL是在API能提供的数据范围内，提供查询能力的语言。GraphQL在您的API中提供了对数据的完整和可理解的描述，使客户能够准确地询问他们需要什么，并且更容易随时间发展API，并支持强大的开发人员工具。

image.png

GraphQL的特点

1.入口统一，合并请求：不管请求什么资源，url都是一样的。这精简了不同场景下形态各异的API数量;
2. 自定义返回值：在REST中，资源的返回结构与返回数量是由服务端决定；在GraphQL，服务端只负责定义哪些资源是可用的，由客户端自己决定需要得到什么资源，避免让API消费者取到对它来说并没有用的冗余数据。
3.数据的关联性：在query里，通过id，可以把多个数据源或Api直接关联起来
4.方便的接口调试工具：GraphiQL工具，文档与调试统一

PWA

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。