React.js 纪录片 | Facebook 内部的一个小小开发团队是如何创建 React 的

你知道React真正的创始人是谁么?

你能想象React在最开始的时候在FB内部其实是一个不被看好的新项目,甚至差点被叫停么?

你知道React在开源初期其实不被社区所接受,迎接它的都是社交媒体上的负面评论么?

你想知道React是如何在不被内外部看好的背景下,一步一步翻身成为前端社区里面最受欢迎的框架的么?

如果你不仅对React框架的理念感兴趣,同时也想要知道更多关于React框架背后哪些不为人知的历史,那么推荐你看一下HoneyPot推出的这一期React纪录片。

本篇文章从记录片中截取了React诞生前后的十大瞬间,帮助大家了解React最开始的那些故事。

相信你看完,会对React有更多深入的了解。它不仅只是一个单纯的技术框架,而是一个由一群对前端技术有追求有热爱的人一起创造一起迭代的一个社区。

对原视频感兴趣的,可以直接滑到文末获取视频链接

瞬间一:2011年React诞生前FB程序员要解决的难题

如果让我们把时钟拨回到2011年,随着十几年的网络生态的发展,我们可以看到一个清晰的趋势是网页需要承载越来越复杂的交互功能。这也意味着页面的运转依赖更多的JavaScript,而增长的JS代码量,意味着客户端浏览器需要花更多的时间来加载和执行代码。对于用户来说就是更长时间的等待和受损的用户体验。

虽然当时的社区里已经有了一些成熟的JS框架帮助大家编写前端项目,但他们都不太适合去搭建非常复杂的前端用户界面,尤其是像Facebook这样的复杂产品。考虑到Facebook的定位是偏娱乐内容,帮助大家在网络上与其他人社交,所以用户体验成为重中之重。

Facebook的开发人员一边需要用网页承接更复杂的业务需求,一边要保证对前端性能体验的极致追求,所以他们尝试了很多技术,这其中就包括服务端渲染技术。当时 Facebook 的技术骨干 Tom Occhino 提到服务端渲染的效果看起来也是有瓶颈的,它并不能让客户端性能达到理想值。

瞬间二:Bolt.js 应运而生

为了应对Facebook逐步增长的业务复杂度,当时还是FB员工的 Shane O'Sullivan 负责开发了一个新的前端MVC框架 Bolt.js(Bolt为螺栓🔩)。

诞生于FB内部的Bolt.js,它的使命就是被用来去构造真实且有着复杂交互的产品。随着FB产品演变得越来越复杂,Bolt.js也需要不断迭代来适应FB的产品需求。复杂度的上升就带来了易用性的下降,以及和FB内部产品逻辑的耦合。Bolt.js这个框架好像也逐渐到达了它能处理的最大复杂度的瓶颈。

瞬间三:React 创始人从Bolt.js中获取灵感

这时,Jordan Walke 作为广告业务的产品工程师加入了Facebook 。

当时FB的广告业务作为整个公司最重要的收入来源之一,有着非常复杂的业务逻辑。在React诞生前,它的代码复杂度已经达到了没有React支持的情况下可以达到的极限。

Jordan加入后就一直在想着能不能围绕Bolt.js做点什么,让这个框架更实用易用,来更好地解决复杂的业务逻辑问题。因此Jordan Walke 跟Bolt.js的创始人Shane展开了很多关于Bolt.js的讨论。这些围绕着Bolt改善的想法也是React最开始的理论基础。Shane 提到其实 React 最初的名称之一是FBolt(Funtional Bolt 功能性螺栓)。如果你现在去看React的logo,其实他的中心就是一个 Bolt 螺栓。

瞬间四:React的理念逐渐在Facebook内部传播,形成了一个虚拟组织

在当时,社区里普遍流行的框架都是基于双向绑定的理念。Jordan 却觉得如果我们的网页应用在用户使用的过程中发生了任何变化(比如上API返回的结果更新,或者是用户输入了一些内容等等),那就让浏览器删除上个UI并重新渲染,这不是更简单么?因此React的理念并不是操作视图(view)和模型(model)之间的关系,而是遇到变化后就重新渲染(但是也会考虑到性能因素,尽可能地减少大规模重新渲染)。

这种全新的理念冲击了很多人脑海里关于前端开发的传统观念,当时Jordan花费了很长的时间来一个一个说服周围的人。在Jordan的努力下,在FB内部有了一小撮人成为了React的簇拥者,大家一起讨论React的理念,梳理相关的概念,并提出了组件生命周期的构想等等

不过Jordan的理念推行也不是一帆风顺的,公司一度认为Jordan思考的React是一种"不误正业"。毕竟当时公司内部大力推行的框架是Bolt.js,所以公司希望Jordan可以关注在Bolt.js和自己本身的业务上,而不是再去从头造一个新框架。

当时Lee Byran作为FB里的技术负责人被要求去跟Jordan谈谈。结果Jordan一进会议室看到Lee就欣喜若狂地要跟他介绍一下自己最近在研究的"React",Lee听完之后发现,发现他的想法确实很新颖,所以结束之后又研究了一下React的代码仓库,结果一发不可收拾。

就这样,因为这次会议,Lee被吸引参与了React的早期建设。Lee帮助初期的React代码从头处理了内部的代码逻辑,这让整个代码框架更规范易读。在Jordan,Lee和团队内的其他人的一起努力下React逐渐从一个非常粗糙的想法,变成了一个可用的前端框架模型的雏形。

瞬间五:Facebook收购Instagram | Instagram的网页版用React搭建

就在React在Facebook内部缓慢生长的时候,Facebook在外部做了一个重大决策,那就是决定收购 Instagram。公司在完成收购后要做的第一件事情就是帮助Instagram上线一个网页版。

当时没有任何前端开发基础的Pete Hunt被任命去做这件事情。一筹莫展的Pete找到了Facebook的产品技术架构团队的负责人Tom Occhino。Tom提供了三种可选择的前端框架:Bolt.js,JS.HTML 和 React。Pete 分别找到 Shane 和 Joran去了解这两个框架的细节。

在跟Jordan聊完之后,React的理念让Pete耳目一新,当即选择React作为Instgram网页版的前端框架。在当时React还只在FB内部的一个非常边缘的项目里试用过,所以这是第一次React被用在一个完整的端到端应用上。

坦白讲,当时的React还没有成熟到可以承接这么复杂的产品架构,但是 Pete 还是成功使用React框架完成了Ins网页版的搭建,Pete的这一次大胆尝试,算是帮助React在大型项目上试水,使用过程中Pete遇到的问题也帮助React的框架理念变得更加完善和成熟。

瞬间六:Bolt.js 与 React 之间的较量 | 广告业务使用React重构,React的能力趋于完善

在Pete完成Ins网页版的同时,广告业务刚刚花了6个多月的时间完成业务代码的Bolt.js重构。现在在FB内部有了两个可运行的前端框架,两个都可以解决实际问题,而且两个的代码写法也很相似。公司内部觉得不应该有两个相似的代码框架来解决同样的问题。

因此Bolt的创始人Shane和React的创始人Jordan之间开展了很多场对话,以此来确定两种框架的优缺点和能力边界。React相比于Bolt.js可以处理复杂得多的UI逻辑,所以长期来看选择React是明智的,但是它当时并没有在很多的复杂项目上应用过,还有很多能力不支持,比如表单的处理上做的还不够好,以及在性能问题上它的解决方案也不是很成熟。

除了框架本身不够完善之外,这里还有一个关于钱的问题。广告业务是FB最重要的核心业务,是公司的重要收入来源,刚刚用Bolt重构完。如果再用一个新出的框架重写一遍,这又会占用几个月的人力耽误广告业务的运营和扩张,而且大家都不确定这个叫React的新框架到底能不能支撑这么复杂的广告业务,所以Jordan和Shane都很难做出决策。

这场两个框架间的较量最终引得FaceBook的CTO Mike Schroepfer 介入。Mike 表示要基于长期利益做出正确的技术决策,即使这个决策的代价是需要暂停业务的开发4个月用来重构。最终大家得出了一致的结论:长期来看,还是要选择React。

于是在接下来的4个月里,FaceBook 的广告业务代码使用 React 完成了重构。虽然过程并不顺利,但是React的开发人员也通过在大型项目上的实践找到了React的性能瓶颈,完成了对表单的支持,也让React适应了绝大多数的浏览器。

瞬间七:React开源但是反响一般

React发展到这个时候,能力已经基本完善了。开发者们认为是时候开源React,让它在社区中发挥更大的贡献。

于是在2013年5月的美国JavaScript大会上,Tom Occhino 和 Jordan Walke 向大家介绍了React。Tom是一个出色的演讲者,Jordan是一个出色的工程师,React内部团队觉得这么出色的框架加上两位出色的工程师,这一次的宣传注定是成功的 。

没有想到的是,演讲结束之后大家在社交媒体上的反应都是:"我不喜欢React","JSX是个什么东西?"

团队当时没有意识到,React的很多理念和JS社区中的相比过于"新颖"。比如当时JS社区里的"关注点分离"的最佳规范是将CSS,HTML,和 JS 分开放在不同的文件夹。

但是React觉得真正的"关注点分离",应该是将关注点分离到不同的组件中。 所以React的出现让很多人难以接受,并且唱衰React的未来。

瞬间八:FB之外的一小波人开始愿意给它一个机会

不过,还好,不是所有人都讨厌React,还是有人愿意给它一次机会。Sophie Albert 当时正在帮助可汗学院构建一个交互式数学问题编辑器,这个编辑器有一个非常面向组件的架构。

看到了React的开源消息之后,Sophie觉得也许React可以帮助解决她现在工作中遇到的问题。在上手并试用后,Sophie整体感觉很不错,所以就在Quora里关于React的帖子下面根据自己的使用情况发表了自己的反馈。

Sophie是当时第一个在Facebook的外部开始使用React的人,所以她的视角对于React团队来说很有重要。因为Sophie本身对React框架就比较感兴趣,所以逐渐地她开始在React代码里提越来越多的 Pull request,后面也开始参与到React团队的每周例会,最后也加入了Facebook的团队。

Sophie的参与让React团队意识到React其实是有它存在的价值的,只是他们需要想办法让更多的人知道并且愿意去了解React。因此团队成员开始参与社区中关于React帖子的互动,上播客节目,在React的文档里定期整理社区中关于React反馈等等。

于是在同一年的 JS 欧洲大会上,React 团队里的 Pete Hunt 再次登台介绍 React。这一次他没有介绍说 React 有多好,或者为什么要用React,而是着重介绍了围绕 React 的决策设计,以及 React 的特别之处。

这一次的大会结束之后,社区里的反馈开始变好。有一小部分人表示 React 的理念听起来还是挺有意思的,想要回去仔细看看React的文档并且也愿意上手尝试。

瞬间九:React 逐渐被众人所接受

Pete 在欧洲进行完JS大会不久,就在纽约认识了 David Nolen,一位开源社区中的知名人物,也是ClojureScript 的首席开发者。

在听Pete介绍完React的概念之后,David立马就喜欢上了React。他对于Facebook开发出了这种通过函数式编程的方式来控制UI的方法感到十分惊喜。于是David立马在社区里发布了一篇文章来介绍React带来的性能优势。

David的这一篇文章出来之后彻底改变了React的发展轨迹。很多人看了之后纷纷表示"我会试一下React",就这样React逐渐成为JS框架的有力竞争者之一。后面 Netflix 等大型科技公司也开始选用React作为他们前端的技术栈。至此,React成为了前端社区中的主流框架。

瞬间十:第一届 React Conf 的举办超出预期

随着React在前端社区中变得越来越流行,很多React的爱好者开始自发地组织小范围React聚会,来进行线下讨论。与此同时,也有人在网络上发问:"React什么时候会组织一个官方的大会?"

React团队成员之前从来没有举办大会的经验,大家也不知道如果真的举办大会会不会有足够的人参加。即使大家心里都没有谱,但也决定办一次大会试试。

事实上社区里大家对React的热情远远超出了团队的想象。大会的门票在上线后30s内就被售罄了。React的开发人员 Christopher 回忆说,当时有个技术大佬想要参加React大会但是买不到票,只能找到FB的CTO,让CTO来问能不能给他开个后门。Christopher 表示受宠若惊,但是也只能面露难色地说:真的没票了啊。

2015年1月Facebook成功举办了第一届React大会,大会效果比大家预想的要好很多。

这次会议之后,React也从一个开源软件正式演变了一个技术社区。有越来越多的人围绕着 React 建立技术社群和线下聚会,网络上公开讨论如何使用React的声音越来越多。

随后在2015年React的欧洲大会上,当时还只是一个普通程序员的Dan,因为对React的技术感兴趣,提议了一个叫"Hot Reloading with Time Travel"的演讲主题,为了配合演讲,Dan开发出了Redux 这个React状态管理工具。Tom Occhino 后来戏称 Dan是 Presentation Oriented Programming (面向演讲的编程开发)。

Dan的这次演讲十分受欢迎。也是因为他在大会上出色的表现,React团队当即觉得在大会第二天给他进行一次面试。通过后Dan也顺利地成为了React团队的一员。在Dan加入的时候,正赶上团队的新老力量交替,Sophie开始接手管理React团队,React的早期开发人员开始退出,后面陆陆续续也有一些新生力量加入比如 Andrew Clark、Brian、Luna等等。

讲到这React的高光时刻其实才算正式开始,后面React又经历了多个大版本迭代,整体的理念也在不断演化,同时使用它的人也在越来越多,现在已经发展成为前端领域最受欢迎的框架之一,这也意味着成为了前端面试中绕不开的一个话题,哈哈哈。

后记:

最初找到这个纪录片,是为了想从源头了解React。看了之后确实有一些意料之外的发现。最让我感到震惊的点是原来React也不是从一开始就被看好的。

之前React在我的眼里是行业内金规玉律一般的存在。早在我踏入前端领域之前,甚至说是学习计算机之前,React就已经开始流行了。但让我没想到的是React的想法从诞生到被社区接受的过程中有这么多的坎坷。它在最开始被推出时,社区里的声音也是偏负面,大家甚至都不愿意去尝试。

同时我也很佩服React的开发团队,他们在内外部环境中不被看好的情况下,顶着这么大的压力继续坚持。虽然React是在Facebook这样的大公司里诞生的,但是如果没有这些人对于真理的极致追求,React可能在很早期就夭折了。

不知道看完这篇文章你有什么感受呢?欢迎在评论区留言。也欢迎大家有时间的时候看一下这个纪录片,相信你也一定会有一些新的收获.

链接

Youtube原版:www.youtube.com/watch?v=8pD...

B站搬运:www.bilibili.com/video/BV1qT...

相关推荐
西瓜本瓜@2 小时前
React + React Image支持图像的各种转换,如圆形、模糊等效果吗?
前端·react.js·前端框架
黄毛火烧雪下2 小时前
React 的 useEffect 钩子,执行一些异步操作来加载基本信息
前端·chrome·react.js
蓝莓味柯基2 小时前
React——点击事件函数调用问题
前端·javascript·react.js
资深前端之路2 小时前
react jsx
前端·react.js·前端框架
白鹭凡6 小时前
react 甘特图之旅
前端·react.js·甘特图
Passion不晚10 小时前
Vue vs React vs Angular 的对比和选择
vue.js·react.js·前端框架·angular.js
光影少年19 小时前
usemeno和usecallback区别及使用场景
react.js
吕彬-前端1 天前
使用vite+react+ts+Ant Design开发后台管理项目(二)
前端·react.js·前端框架
小白小白从不日白1 天前
react hooks--useCallback
前端·react.js·前端框架
恩婧1 天前
React项目中使用发布订阅模式
前端·react.js·前端框架·发布订阅模式