BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

静态站点生成器Gatsby创建者Kyle Mathews访谈

| 作者 David Iffland 关注 4 他的粉丝 ,译者 谢丽 关注 11 他的粉丝 发布于 2017年7月17日. 估计阅读时间: 5 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在一系列创业之后,Kyle Mathews辞掉了工作,开始全身心投入到他的其中一个业余项目上,这个项目就是Gatsby,该项目的目标是让开发人员可以“不需要使用React.js之外的任何东西”就可以创建一个网站。

从那时到现在,Gatsby已经达到了1.0版本。它已经发展成为一整套的工具集,包括一个插件架构、一个基于GraphQL的构建时数据层和渐进式Web应用(PWA)支持。它包含一个CLI及一个基于Babel和webpack的预置构建过程。

为了深入了解Gatsby的速度,Mathews编写了一个Instagram Clone,旨在展示Gatsby如何使用谷歌的PRPL模式尽快获取屏幕像素。这个速度包括创建“一个静态HTML渲染每个页面,尽可能加快初次加载的速度”。此外,据Mathews介绍,预取帮助完成了开销较大的工作。

Gatsby要快得多,因为它会在客户端和客户端转换中进行资源预取。有多个人已经表示,浏览Gatsby网站就感觉是在浏览本地站点。

在接受InfoQ采访时,Mathews介绍了项目的动机及其未来的发展方向。

InfoQ:Gatsby试图解决什么问题?

Kyle Mathews:Gatsby试图解决的问题是,2017年网站框架应该是个什么样子。大多人都采用Web 1.0/2.0时代的Web框架,因为它们是很棒、很成熟的框架,但是,它们不是针对如今这个庞大的Web而构建的。如今,数以十亿计的人是在低端的智能手机上通过不可靠的网络来访问Web。

要想让一个网站可以在智能手机上快速的浏览,它必须在相当大的程度上独立于服务器;可以预取代码、数据,然后在客户端上渲染。

就提供优秀的Web体验而言,智能手机和浏览器已经足够快了——我们只是受制于旧有的框架,它们的基础是快速的有线网络,它们要求我们口袋里的超级计算机必须等待并不可靠的蜂窝网络。

Gatsby内置了大量的信息,可以使网站快速加载,不管网络条件如何,浏览网站时都会觉得相当得快。

对于移动Web而言,响应式设计是一个重要的步骤,但是,我们需要转而采用一种站点在客户端渲染并能智能地完成内容预取的模型。

InfoQ:与其他静态站点生成器相比,基于React或非基于React的,它又如何呢?

Mathews:它继承了传统静态网站生成器的所有优点,例如,卓越的性能、较高的安全性、较低的扩展成本和较好的开发者体验(数据库迁移?随便什么)。Gatsby的v1版本为静态网站生成器开辟了新的天地,提供了与CMS的丰富集成,如Contentful、Wordpress、Drupal,及一整套的功能,默认开启,让你的网站快得让人吃惊——基于路由的代码分割、服务工作线程、离线支持等等。

在开发者体验方面,其他所有的静态网站生成器针对现代CSS和JS都提供了很少的帮助。它们将自己限定在把(通常是markdown)编译成HTML,然后由你自己配置一个现代构建/资源通道。Gatsby 100%开箱即用,让你可以使用最新的工具和技术构建复杂的网站。

InfoQ:长远来看,Gatsby会是什么样子?

Mathews:Gatsby的发展势头很好,只用了2年时间就已经成为排名第4的静态网站生成器。有许多已经上线或正在开发的高性能网站都是基于Gatsby。最近,我们批准了200名核心贡献者,Gatsby的下载量超过50万。对于Gatsby的长期性,其关键是建立一个可持续的业务模型,为Gatsby的核心开发提供资金支持,以及建立一个富有活力的开源社区,构建和维护插件及与数据源的集成。

InfoQ:下一步有什么计划?

Mathews:我个人的关注点是如何为Gatsby的核心开发提供资金支持。该项目的重心是构建与更多API、CMS和数据库的集成,简化现有站点向Gatsby的迁移,或者基于一个现代化的网站框架重建。Gatsby已经可以用于生产环境,构建复杂快速的网站。下一步,我考虑简化数据导入到Gatsby的过程,不管数据现在在哪里。

虽然已经快2岁了,但对于这个项目而言,它还是处于早期阶段,当然会有许多必要的部分添加进来。插件架构应该允许社区来查漏补缺,截至目前,有大约35个这样的插件,涉及SASS、TypeScript、Preact等技术。

要了解更多信息,请检出GitHub库或访问Gatsby首页

查看英文原文:Q & A With Kyle Mathews, Creator of React-Based Static Site Generator Gatsby

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT