|
|
|
|
|
0s
|
foreign
|
外国
|
|
11s
|
[Music]
|
[音乐]
|
|
28s
|
fox jumps over the lazy dog
|
狐狸跳过懒狗
|
|
33s
|
this is react podcast I'm chantastic today we're going back way back back to
|
这是 React 播客 我 今天非常棒 我们要回到
|
|
40s
|
the beginning of react 10 years in the rear view mirror it may
|
React 的开始 10 年从后视镜看 它可能
|
|
45s
|
feel like react was always going to succeed did a framework by Facebook was
|
感觉 React 总是会 成功 确实 Facebook 的框架
|
|
50s
|
too big to fail but this isn't that kind of story in fact there were many times
|
太大而不能失败，但这不是 那种故事，事实上
|
|
55s
|
in reacts history where it seemed like it wasn't going to succeed at all
|
在 Reacts 历史上有很多次看起来 它根本不会成功，
|
|
1:00
|
so what happened how did react go in 10 years from looking Dead on Arrival to
|
所以发生了什么反应在 10 年内如何发展 从看起来 Dead on Arrival 到
|
|
1:07
|
becoming the dominant front-end JavaScript framework that it is today
|
成为今天占主导地位的前端 JavaScript 框架
|
|
1:12
|
it starts at Facebook in 2011 jQuery and backbone are dominating front-end
|
它于 2011 年在 Facebook 开始
|
|
1:17
|
JavaScript but more opinionated tools like Ember angular knockout are already
|
-
|
|
1:23
|
on the scene in the outside world Gangnam Style has just been uploaded to
|
Gangnam Style 刚上传到
|
|
1:28
|
YouTube Call Me Maybe is topping the charts and the freshest meme is the
|
YouTube Call Me Maybe 就高居 榜首，最新鲜的 meme
|
|
1:33
|
overly attached girlfriend in Internet years it's basically been an eternity so
|
是互联网时代过度依恋的女朋友， 这基本上是永恒的，所以系好
|
|
1:38
|
strap in set yourself away enable that do not disturb because this is quite the
|
安全带让自己走开吧 请勿打扰，因为这完全是
|
|
1:44
|
Underdog Story foreign
|
Underdog Story foreign
|
|
1:54
|
[Music] but this one doesn't
|
[音乐] 但这个不是
|
|
1:59
|
[Applause] [Music]
|
[掌声] [音乐]
|
|
2:03
|
just keep it on with this testing one two testing
|
只是继续进行此 测试一两个测试
|
|
2:14
|
[Music] foreign
|
[音乐] 外国
|
|
2:19
|
[Music]
|
[音乐]
|
|
2:36
|
work at Facebook I told my mom I was like really excited The Social Network
|
在 Facebook 工作 我告诉 我的妈妈， 我真的很兴奋社交网络
|
|
2:40
|
the movie had just come out and she had you know seen it recently and she was
|
这部电影刚刚上映，她让 你知道最近看过它，她
|
|
2:45
|
actively discouraging me from joining because she was like Mark Zuckerberg
|
积极劝阻我加入， 因为她说马克扎克伯格
|
|
2:49
|
doesn't seem like a very nice boy Facebook in the time I was there was I
|
看起来不像一个非常好的男孩 Facebook 在 我在那里的时候，我
|
|
2:54
|
don't think they'll be anything like it ever again it was certainly not like
|
认为他们不会再像现在 这样了，这肯定
|
|
2:57
|
anything that I had experienced before in fact just a couple months after I
|
不像我以前经历过的任何事情， 事实上，就在我
|
|
3:01
|
joined Kanye West came to visit Facebook's campus and he got up on a
|
加入 Kanye West 几个月后 ，他来参观 Facebook 的校园，他起床了
|
|
3:07
|
table in the cafe and you know wrapped a few bars and I was working mostly with
|
在咖啡馆的桌子上，你知道包裹了 一些酒吧，我主要和
|
|
3:12
|
this guy who had just graduated from college and I was trying to explain to
|
这个刚从大学毕业的人一起工作 ，我试图向
|
|
3:16
|
him you know I've worked these crap jobs in software at that point had been like
|
他解释你知道我 在那个时候从事过这些垃圾软件工作 就像
|
|
3:21
|
10 or 15 years nothing like this ever happens not to software Engineers you're
|
10 或 15 年 像这样的事情从来 没有发生在软件工程师身上 你是
|
|
3:27
|
my stressing your mama sues Mama say Mama say Mama Don the son JavaScript at
|
我在强调你妈妈起诉
|
|
3:32
|
the time I think was going through this little
|
-
|
|
3:35
|
bit of an existential crisis as to whether it was like a real programming
|
编程
|
|
3:40
|
language or a toy programming language and so
|
语言 或玩具编程语言，所以
|
|
3:44
|
there was a lot of churn so you had jQuery was popular and moo tools was
|
有很多流失，所以你有 jQuery 很流行，moo 工具很
|
|
3:48
|
popular and there was so many different like warring Frameworks to try to get
|
流行，有很多不同的 框架，比如试图
|
|
3:52
|
the Mind share and there's a lot of similarities between them but each one
|
获得思想份额的交战框架，它们之间有很多 相似之处 但是每一个
|
|
3:55
|
had its kind of bespoke differences and none of them were actually really
|
都有其定制的差异，而且 它们都不是
|
|
3:58
|
fantastic for building really kind of complicated user interfaces and apps
|
真正适合构建真正 复杂的用户界面和应用程序的，
|
|
4:03
|
there was this trend towards more sophisticated applications that do more
|
有一种趋势是更 复杂的应用程序可以做更多的
|
|
4:07
|
stuff and at Facebook we still had a primarily sort of server rendered
|
事情，而在 Facebook，我们仍然有 一种主要的服务器 呈现的
|
|
4:12
|
technology stack which um you know one of the things that we
|
技术堆栈， 嗯，你知道我们
|
|
4:16
|
fought against for a really long time was just growing JavaScript bundle sizes
|
长期反对的事情之一 就是增加 JavaScript 包的大小，
|
|
4:20
|
so as we moved more and more stuff to the client the client got slower and
|
所以 随着我们将越来越多的东西 移到客户端，客户端变得越来越
|
|
4:24
|
slower so we actually swung the pendulum towards server-side rendering and
|
慢，所以我们实际上将钟摆 转向了服务器端渲染，并且
|
|
4:27
|
towards you know minimal amounts of JavaScript for a while and there was
|
在一段时间内让你知道了最少的 JavaScript，并且有一种
|
|
4:31
|
this feeling that we knew that what we were doing for client-side development
|
感觉，我们知道我们 是什么 为客户端开发所做的
|
|
4:35
|
wasn't working but also that server side wasn't going to get us all the way there
|
工作是行不通的，而且服务器 端也不会让我们一路走来，
|
|
4:40
|
so I think that was the kind of environment that react came out of
|
所以我认为这是
|
|
4:57
|
I joined Facebook back in 2010 I've been doing a lot of Open Source work
|
我在 2010 年加入 Facebook 时产生的那种环境，我一直 做了很多开源工作，
|
|
5:02
|
particularly in the JavaScript world I was a committer on the dojo.js toolkit
|
特别是在 JavaScript 世界我 是 dojo.js 工具包的提交者
|
|
5:07
|
back in the day which is one of the the granddaddies of the JavaScript movement
|
，它 是 JavaScript 运动的祖父之一，
|
|
5:11
|
along with prototype and jQuery I spent my first two years of Facebook
|
还有原型和 jQuery 我在 Facebook 度过了头两年
|
|
5:16
|
on the mobile team we had started off a big push to compete
|
在移动团队， 我们已经开始大力推动
|
|
5:21
|
with Apple and Google and we thought that our best chance of success as a
|
与苹果和谷歌的竞争，我们 认为我们作为一家公司成功的最佳机会
|
|
5:25
|
company was to go directly to the web and really push to build out the HTML5
|
是直接进入网络 并真正推动构建 HTML5
|
|
5:30
|
ecosystem so as part of that we developed myself
|
生态系统，所以 作为其中的一部分，我们 自己开发
|
|
5:36
|
two other Engineers called Vladimir khalestikov and will Bailey built a
|
了另外两名名为 Vladimir khalestikov 的工程师，Will Bailey 构建了一个
|
|
5:40
|
framework called bolt JS so named because we bolted together a bunch of
|
名为 bolt JS 的框架，之所以如此命名 是因为我们将我们每个人都喜欢的一堆东西用螺栓连接在一起
|
|
5:44
|
things that each of us liked bolt was basically more or less
|
，bolt 基本上或多或少是
|
|
5:49
|
Facebook's implementation of a client's head MVC I think it was like a pretty
|
Facebook 对客户端 head MVC 的实现 我认为它是一个非常
|
|
5:53
|
good version maybe a better version of things like backbone and a couple of
|
好的版本，也许是当时存在 的主干和其他几个框架的更好版本，
|
|
5:58
|
other Frameworks that had existed at the time but it was born from a place of the
|
但它诞生于
|
|
6:04
|
specific constraints of Facebook it's the heart of your Facebook experience
|
Facebook 的特定限制，它完全 是你 Facebook 体验的核心
|
|
6:09
|
completely rethought from the ground up we've been working on it all year
|
从头开始重新思考 我们一整年都在努力
|
|
6:13
|
and we're calling it timeline Facebook was one of the first
|
，我们称之为 时间线 Facebook 是第一批
|
|
6:18
|
big products that was really an experience more than anything else
|
真正提供体验的大型产品之一，
|
|
6:22
|
you're not trying to buy groceries or get tickets or anything like that on
|
你不是想买杂货 或买票或 在 Facebook 上的任何类似的东西
|
|
6:26
|
Facebook you really just want to be entertained and as such you know the
|
你真的只是想被 娱乐，因此你知道
|
|
6:31
|
user interface itself needs to be really pleasing bolt was not a tool belt it was
|
用户界面本身需要非常 令人愉悦螺栓不是工具 b elt 它
|
|
6:36
|
truly a application development framework something designed and meant
|
确实是一个应用程序开发 框架，
|
|
6:40
|
to build complicated interactive rich apps and was being used to build pretty
|
旨在构建复杂的交互式丰富 应用程序，并且在 Facebook 被用于构建非常
|
|
6:46
|
complicated very real products at Facebook at the time we ended up having
|
复杂的非常真实的产品， 当时我们最终
|
|
6:50
|
to essentially replicate most of Facebook
|
不得不基本上复制
|
|
6:53
|
all the various apps be it timeline chat news feed we had a whole photos app that
|
Facebook 的大部分应用程序 timeline chat news feed 我们有一个我们构建的完整照片应用程序
|
|
6:59
|
we built and so obviously the team had to expand greatly like that so I think
|
，所以显然团队必须 像那样大幅扩展所以我认为
|
|
7:03
|
at some point we probably had maybe 25 Engineers working on all this between
|
在某个时候我们可能有 25 名 工程师在
|
|
7:08
|
building bold and building apps built on Bold and that's just on the mobile team
|
构建 bold 和构建基于 Bold 和 这只是移动团队
|
|
7:11
|
bolt was never the problem it was the architecture that would eventually break
|
的问题，螺栓从来都不是问题，
|
|
7:15
|
down for us as the the product itself got more complex and as we added more
|
随着产品本身 变得越来越复杂，随着我们向团队添加更多
|
|
7:20
|
Engineers to the team we didn't hit a wall but it started to get really really
|
工程师，我们并没有 碰壁，但架构开始崩溃了。 真的
|
|
7:24
|
hard to make changes and so you know that was around the time that Jordan was
|
很难做出改变，所以你知道 那是乔丹
|
|
7:29
|
on the ads team and he's like I wonder there's got to be a better way
|
在广告团队的时候，他就像我想知道 必须有更好的方法 你外国人
|
|
7:38
|
foreign
|
|
|
7:42
|
is an enigmatic figure he uh he's a little secretive so there's not much
|
是个神秘人物他呃他 有点神秘
|
|
7:48
|
that I know about him Jordan and I aren't necessarily we haven't
|
所以我对他知之甚少乔丹 我不一定我们
|
|
7:52
|
necessarily been in the spotlight much especially Jordan kind of shied away
|
不一定在聚光灯下很多 特别是乔丹
|
|
7:56
|
from spotlights since the early days Jordan was a product engineer at the
|
从早期开始就有点回避聚光灯 乔丹当时是一名
|
|
8:00
|
time working on ads and ads has one of the most complicated pieces of UI across
|
从事广告工作的产品工程师，广告拥有目前 整个 Facebook 上最复杂的用户界面之一，在
|
|
8:07
|
all of Facebook at the moment on the as team they were hitting much
|
团队中，他们正在触及
|
|
8:12
|
you know really hitting the limits of what you can do without react uh
|
你知道的很多东西，这确实触及了 你可以在不做出反应的情况下做的事情的极限 呃
|
|
8:16
|
complexity wise and just the developers ability to hold in their head and
|
复杂性明智，只是开发人员 能够牢记并
|
|
8:21
|
understand a bit of code that somebody else wrote and you know look at the
|
理解 其他人编写的一些代码，你知道看看
|
|
8:25
|
screen and say okay this code is doing that and I need to know why and Jordan
|
屏幕并说好吧，这段代码正在这样 做，我需要知道为什么，乔丹
|
|
8:29
|
had a lot of very interesting ideas around how you could take what we had
|
有很多 非常有趣的想法 ，关于如何利用我们
|
|
8:33
|
done in both and make it much more functional and make it more um ability
|
在这两个方面所做的工作， 使它更具功能性，并
|
|
8:36
|
to make it easier for it to scale with people's ability to understand large
|
使其更容易扩展，以适应 人们理解大型
|
|
8:40
|
applications and so we had a lot of ongoing dialogue and he would come back
|
应用程序的能力 ications 所以我们进行了很多 持续的对话，他会来来
|
|
8:43
|
and forth to us with various ideas how to change it I think one of the original
|
回回地告诉我们 如何改变它的各种想法我认为反应的原始
|
|
8:47
|
names for react was F bolt which is functional Bolt foreign
|
名称之一是 F bolt，它是 功能性的 Bolt 外语
|
|
8:55
|
to do it to solve some of the tricky Parts in bolts in an easier way so what
|
来解决一些问题 螺栓中棘手的部分以更简单的方式进行，所以
|
|
9:02
|
Jordan decided to do or at least the story that he had told me was
|
Jordan 决定做的事情或者至少 他告诉我的故事是
|
|
9:08
|
hey wouldn't it be easier if any time anything happened in the app API State
|
嘿，如果 应用程序 API 状态中
|
|
9:14
|
changes user type something we just blow away the entire UI and we re-render all
|
发生任何事情改变用户类型，我们会不会更容易 去掉整个 UI，我们重新渲染
|
|
9:19
|
of it if you look at what every other
|
所有这些， 如果你看看当时其他所有
|
|
9:23
|
framework was doing at the time it was called two-way data binding and this was
|
框架在做什么，它被 称为双向数据绑定，
|
|
9:27
|
not that it was like forget about data binding we're not
|
这并不是说 忘记数据绑定，我们不会
|
|
9:31
|
going to do that at all anytime anything changes we're just going to re-render
|
去 随时执行任何 更改我们将重新渲染
|
|
9:35
|
and then there's an asterisk which says well we're not going to remember
|
然后有一个星号 表示我们不会记住
|
|
9:37
|
everything we're going to try to render as little as possible but conceptually
|
我们将尝试渲染的所有内容 尽可能少但从概念上讲
|
|
9:41
|
we're not going to manage these relationships between views and models
|
我们是 不会管理这些 之间的关系 视图和模型，
|
|
9:45
|
we're just gonna honestly I thought it was completely
|
我们只是 老实说，我认为
|
|
9:48
|
crazy at the time I was really down on Frameworks in general and I thought
|
当时我真的很不喜欢 框架，我认为
|
|
9:52
|
there was no way that was going to work to many people that seemed like magic it
|
这完全是疯狂的，我认为这对许多人来说是不可能的，因为 它看起来像魔法，
|
|
9:57
|
was so far outside of everybody's idea of how things should work and do work
|
它太遥远了 每个人 对事情应该如何运作的想法以及如何运作
|
|
10:01
|
that um yeah it took a lot of commenting
|
，嗯， 是的，它需要很多评论
|
|
10:07
|
[Music] I've been working at Facebook for 10
|
[音乐] 我已经在 Facebook 工作了 10
|
|
10:34
|
years now I met this person called Jordan walk
|
年，现在 我遇到了一个叫 Jordan walk 的
|
|
10:38
|
some people told me like he had an interesting project about JavaScript and
|
人，有人告诉我他有一个 有趣的东西 关于 JavaScript 的项目，
|
|
10:42
|
I may be interested and so I had this meeting with him and uh one thing he
|
我可能会感兴趣，所以我 和他开了这次会议，呃
|
|
10:47
|
asked me at the beginning of the meeting was what is the most difficult thing to
|
，在会议开始时他问我一件事，
|
|
10:53
|
do in the front end right now and I mean I was six months out of
|
现在前端最难做的事情是什么 ，我的意思是我当时六岁 离开
|
|
10:59
|
school I was like I don't know and the thing he told me is updates you need to
|
学校几个月我就像我不知道， 他告诉我的事情是更新你需要
|
|
11:05
|
find the dumb node that is going to change you need to like change the
|
找到将要改变的哑节点 你需要喜欢改变
|
|
11:09
|
listener to like the Click event and like remove it and like do all of this
|
监听器以喜欢 Click 事件并 喜欢删除它并喜欢 做这一切
|
|
11:13
|
which is like pretty complicated and then this was also like a massive source
|
这是我 这很复杂， 然后这也就像是
|
|
11:18
|
of bugs within the Facebook adbase I was like okay yeah you're right like
|
Facebook 广告库中的大量错误来源， 我说好吧，是的，你是对的，
|
|
11:24
|
this is probably like the hardest thing and it was like I have a solution for
|
这可能是最困难的事情 ，就像我有解决方案一样，
|
|
11:28
|
this I was like okay this guy is crazy like
|
我觉得好吧 这家伙太疯狂
|
|
11:31
|
this is never going towards never going to be performance the meeting ended for
|
了 永远不会走向 永远 不会成为表演 会议
|
|
11:36
|
like a few weeks I forgot about the idea but uh one weekend I was like okay
|
结束了几周 我忘记了这个想法 但是呃 一个周末 我觉得好吧
|
|
11:41
|
maybe I should try this like maybe there's something to it
|
也许我应该试试这个 就像之前可能 有一些东西
|
|
11:44
|
[Music] before joining Facebook I walked on a
|
[音乐 ] joining Facebook 我走
|
|
11:49
|
way to find your guilds in World of Warcraft and we basically need to search
|
在魔兽世界中寻找你的公会的路上 ，我们基本上需要
|
|
11:54
|
through like 20 000 yields and I did like a lot of uh performance work to
|
搜索大约 20 000 个产量，我确实 喜欢很多呃性能工作，
|
|
12:00
|
like be the fastest way to display possible when you change all of those
|
当你改变所有的时候，我喜欢成为最快的显示方式 那些
|
|
12:04
|
filters into this real time and I was like okay I spent like months full time
|
实时过滤器，我 觉得好吧，我花了几个月的
|
|
12:10
|
like working on like making this super performance let's try it with react and
|
时间来制作这种超级 性能让我们用 React 来尝试它
|
|
12:14
|
in practice uh it took me like half an hour to write it and it was actually
|
，实际上我花了 半个小时来写它，它是 实际上
|
|
12:20
|
like not as performant but like around the same order of magnitude as
|
不像性能那么好，但喜欢与性能 大致相同的数量级
|
|
12:24
|
performance and I was like mind blown and to this day I became like the
|
，我感到很震惊 ，直到今天我成为
|
|
12:29
|
biggest react fan in the world I was in the photos team and like spending all of
|
世界上最大的 React 粉丝，我 在照片团队，喜欢把我所有的
|
|
12:32
|
my working hours like trying to like use react on my own project in the photos
|
工作时间都花在 尝试喜欢 在照片团队中对我自己的项目做出反应，
|
|
12:36
|
team evangelizing I felt like it could change the world which is it
|
传福音，我觉得它可以 改变世界，就是这样
|
|
12:44
|
[Music]
|
[音乐]
|
|
12:50
|
Jordan is making Headway on his project he's gotten others involved and they're
|
乔丹在他的项目上取得了进展，他让 其他人参与进来，他们
|
|
12:56
|
seeing the value but not everyone is impressed one manager started to take
|
看到了价值，但不是每个人都看到了 给一位经理留下了深刻的印象，开始
|
|
13:02
|
notice but saw Jordan's project is a distraction
|
注意到他，但看到乔丹的项目让人 分心，
|
|
13:06
|
so the athlete Byron to meet with Jordan and put a stop to it we get into a room
|
所以运动员拜伦与乔丹会面 并阻止了它，我们立即进入一个房间，
|
|
13:12
|
instantly I knew that this was going to be weird because we showed up with very
|
我知道这会 很奇怪，因为我们出现了非常
|
|
13:15
|
different energies so I'm showing up with this like okay Jordan I want to
|
不同的人 能量所以我 带着这个出现，好吧，乔丹，我
|
|
13:20
|
understand what's going on with your project but I also want to help make
|
想了解你的项目发生了什么， 但我也想帮助
|
|
13:25
|
sure that we are spending our time well and we're working on things that are
|
确保我们把时间花得很好 ，我们正在做的事情
|
|
13:29
|
gonna have longevity and solving problems we
|
将会长寿并解决我们
|
|
13:32
|
want to have and Jordan came in with like can I show you a demo of what I've
|
想要拥有的问题，乔丹进来了， 就像我可以向您展示我一直在做的事情的演示，
|
|
13:35
|
been working on like this is so exciting and it does this and it does that and
|
这太令人兴奋了 ，它做到了这一点，它做到了，
|
|
13:39
|
eventually like towards the end of this meeting with him I had to kind of admit
|
最终喜欢到最后 在 与他的这次会面中，我不得不
|
|
13:42
|
like he had something really compelled like I was now really interested in
|
承认他确实有某种被强迫的东西， 就像我现在真的很想
|
|
13:47
|
learning more about what what he was doing so Jordan's pitch to me was like I
|
更多地了解他在 做什么，所以乔丹对我的推介就像我
|
|
13:51
|
only want to invest in this and work on it if it's going to be something that
|
只想投资于此并为此努力 如果这将成为
|
|
13:54
|
people will use and if that's not going to be the case like sure we're not going
|
人们会使用的东西，如果 情况并非如此，我们肯定不
|
|
13:58
|
to do this he's like but I feel really strongly that all the ways we've been
|
会这样做，他说，但我非常 强烈地认为，
|
|
14:02
|
doing UI development up until now have been flawed whether they're a JavaScript
|
到目前为止，我们一直在进行 UI 开发的所有方式 有缺陷，无论它们是一个
|
|
14:06
|
library that doesn't quite work for us or whether it's like a 30 year old uh
|
不太适合我们的 JavaScript 库， 还是像一个 30 年的
|
|
14:10
|
tried and true model for doing UI application development like they all
|
UI 应用程序开发久经考验的真实模型， 就像它们都
|
|
14:14
|
suffer from the same base problem Estate Management
|
遇到相同的基本问题 房地产管理
|
|
14:19
|
and I think this is the way forward and Lee if you could just like dig into
|
，我认为 这个我 这是前进的方向 ，Lee 如果你愿意深入
|
|
14:23
|
the code and learn more and try it and then come back and we'll talk about
|
研究代码并了解更多并尝试它 然后回来，我们将
|
|
14:28
|
this again um then we can figure this out it's like
|
再次讨论这个， 嗯然后我们可以弄清楚它就像
|
|
14:31
|
all right all right and so I did I dug around the code and it was um
|
好吧好吧，所以我做到了 我仔细研究 了代码，嗯
|
|
14:36
|
a little hard to understand uh but I eventually got to play with it got to
|
，有点难以理解，呃，但 我最终开始使用它来
|
|
14:40
|
build a couple of things and uh like had to admit coming away that like yes there
|
构建一些东西，呃， 不得不承认离开了，就像是的，那里
|
|
14:44
|
was something incredibly interesting there and that was how I got sucked into
|
有一些非常有趣的 东西，那就是 我是如何被吸引到
|
|
14:49
|
the project I ended up working on it quite a bit for the the next couple of
|
这个项目中的 我最终 在接下来的
|
|
14:53
|
months Lee brings us like rigor and sort of design mentality to these things that
|
几个月里做了很多工作 Lee 给我们带来了严谨和 某种设计心态来处理这些东西，
|
|
14:59
|
um really helped with the initial versions of react in terms of
|
嗯 ，在标准化方面确实帮助了 React 的初始版本
|
|
15:02
|
standardizing it and turning it from something that was kind of like an ugly
|
把它从 有点像一个丑陋的
|
|
15:06
|
baby that it just uh grown up at Facebook to something that really people
|
婴儿，它刚刚在 Facebook 长大， 变成
|
|
15:09
|
could approach from around the world [Music]
|
了世界各地的人们真正可以接近的东西 [音乐]
|
|
15:12
|
there were a couple of problems that I faced right away when trying to
|
我 在尝试时立即遇到了几个问题 g
|
|
15:20
|
understand the code base and build something Not only was the the set of
|
理解代码库并构建 一些东西不仅
|
|
15:25
|
tools and the mental models really different from what I was used to as a
|
工具集和心智模型 与我作为 UI 工程师所习惯的完全不同
|
|
15:28
|
UI engineer the syntax and the programming just like
|
语法和编程就像所
|
|
15:33
|
Concepts involved just the terminology was also really different my takeaway
|
涉及的概念只是 术语也非常不同我的 外卖
|
|
15:38
|
was you know okay the whole bid here was that this would be simpler but I can't
|
是你知道好的，这里的整个出价是 这样会更简单，但我
|
|
15:43
|
help but feel like this is really complicated mostly as a as a desire for
|
忍不住觉得这真的很 复杂，主要是因为
|
|
15:47
|
me to understand the model um but also with a hope that it would
|
我希望了解模型， 嗯，但也希望它会
|
|
15:52
|
kind of end up helping resolve some things I
|
好 最终帮助解决了一些我
|
|
15:56
|
wanted to build uh like a glossary like what are all the things the concepts and
|
想建立的事情，呃，比如词汇表， 比如所有的东西，概念，
|
|
16:02
|
then what are all the like actions or like verbs that are going on here and so
|
然后是这里发生的所有类似的动作或 类似的动词，所以
|
|
16:08
|
I I literally just like listed them all out and then I would go back to Jordan
|
我真的很喜欢把它们全部 列出来 然后我会回到约旦，
|
|
16:11
|
I'd go back to other people working on it and ask questions like did I get this
|
我会回到其他从事这项工作的人 那里，问一些问题，比如我做
|
|
16:14
|
right are these definitions right and they go yeah okay no you should really
|
对了吗，这些定义是否正确， 他们说的是的，好的，不，你
|
|
16:17
|
think about it that way and be like okay well that's not how this and it would go
|
真的应该那样考虑 好吧，这不是这样的，它会
|
|
16:20
|
back and forth and back and forth and I'd be honing these definitions and
|
来回来回， 我会磨练这些定义，
|
|
16:24
|
along the way we'd realize like oh this concept and that concept are the
|
一路上我们会意识到，哦， 这个概念和那个概念是
|
|
16:28
|
same we're going to name them one thing
|
一样的， 我们要命名 他们是一件事
|
|
16:31
|
instead of two things so unwinding all of this and essentially writing up what
|
而不是两件事，所以展开了 所有这些，基本上写出了
|
|
16:35
|
ended up being like a reimagining of the component life
|
最终 就像是对组件生命周期的重新构想
|
|
16:39
|
cycle and therefore sort of the entire front-facing API for react
|
，因此有点像 React 的整个 前端 API
|
|
16:45
|
and I was very happy to see like incredible enthusiasm around that Jordan
|
，我很高兴看到 难以置信的热情
|
|
16:48
|
was like oh this is amazing this really clarifies the ideas at that point a
|
乔丹说，哦，这太棒了，这真的 澄清了当时的想法
|
|
16:52
|
handful of other folks had gotten involved with the project too and then I
|
，其他一些人也 参与了这个项目，然后我
|
|
16:56
|
spent sort of the next month or so sort of piece by piece folding those into
|
花了大约一个月的时间， 把它们一点一点地折叠
|
|
17:02
|
place and pretty significantly changing the surface API of react in the process
|
到位，然后 在这个过程中相当显着地改变 了 React 的表面 API，
|
|
17:07
|
that was I think the first shift from this being a thing that existed mostly
|
我认为这是第一个转变，从 一个主要存在
|
|
17:13
|
in Jordan's head that other people were playing with to a thing that all of a
|
于 Jordan 头脑中 的东西，其他人正在玩的东西到一个所有人都在玩的东西
|
|
17:16
|
sudden felt owned by the whole team uh where team here is like a collection of
|
突然感觉整个团队都拥有了 嗯 ，这里的团队就像
|
|
17:21
|
UI Engineers scattered across Facebook who were sort of bought in on this
|
分散在 Facebook 上的 UI 工程师的集合， 他们有点认同这个
|
|
17:24
|
Vision who now felt that like we now have the same terminology we can use
|
愿景，他们现在觉得就像我们现在 拥有相同的术语，
|
|
17:28
|
when someone has a question anyone can jump in and answer it rather than only
|
当有人有问题时我们可以使用 任何人都可以 加入并回答它，而不仅仅是
|
|
17:32
|
Jordan that was the first big shift [Music]
|
乔丹，这是第一个重大转变 [音乐]
|
|
17:40
|
one of the first projects um that Greg was used for was the ufi
|
第一个项目， 嗯，格雷格被用于的是
|
|
17:46
|
the universal feedback interface which is basically the likes comments and
|
ufi 通用反馈界面， 基本上是喜欢的评论和
|
|
17:52
|
shares at the bottom of each post this was still during Facebook's kind of web
|
底部的分享 每篇文章 都处于
|
|
17:56
|
era when Facebook on the web was like the sort of Big Driver of Engagement
|
Facebook 的网络时代，当时网络上的 Facebook 就像 是一种参与新闻提要的大驱动力
|
|
18:00
|
news feed had a billion people hitting it every day
|
，每天都有十亿人点击它，
|
|
18:04
|
and was massively tuned for performance heavily interactive surface both on the
|
并且在
|
|
18:10
|
input side of course you're like clicking it to add likes you're typing
|
输入端进行了大规模的性能调整 当然你喜欢 点击它来添加喜欢你正在
|
|
18:13
|
into it to add comments but also on the receiving side we want comments to come
|
输入它来添加评论但是在 接收方我们希望评论
|
|
18:16
|
in live so as you're looking at it as a comment comes in we want it to just pop
|
能够实时出现所以当你把它看成一个 com 消息进来了，我们希望它就在
|
|
18:20
|
up right there and there was this product desire for that interface to
|
那里弹出，这个 产品希望这个界面
|
|
18:25
|
feel almost like a one-off chat thread and that was so cool at that time and as
|
感觉几乎就像一个一次性的聊天线程 ，这在当时非常酷，当
|
|
18:32
|
that started to work the second thread was well okay if this can work for this
|
它开始工作时，第二个 线程很好 好吧，如果这可以用于这种
|
|
18:36
|
really isolated sense of messaging then what if it could work for messaging as a
|
真正孤立的消息传递， 那么如果它可以用于整个消息传递又会怎样
|
|
18:40
|
whole and this was another really complicated
|
，这是另一个非常复杂
|
|
18:44
|
and fraught with bug surface area that was when a lot of the ideas in react
|
且充满错误的表面积， 当时反应中的许多想法
|
|
18:49
|
congealed the jsx syntax was introduced and some of the ideas about how to work
|
凝结了 jsx 语法是 介绍了 一些关于如何
|
|
18:55
|
with data and react sort of were clarified a couple of our UI Engineers
|
处理数据和做出反应的想法，如果我没记错的话 ，我们的几个 UI 工程师
|
|
18:59
|
along with the messaging team if I remember correctly Jing Chen was sort of
|
和消息传递团队得到了澄清 Jing Chen
|
|
19:04
|
the champion of this project realized that we needed a completely new way to
|
是这个项目的冠军， 意识到我们需要一个全新的
|
|
19:07
|
think about State too
|
考虑 State 的方式也是
|
|
19:12
|
so my name is John um and I'm a software engineer and the
|
如此，所以我叫 John um，我是一名软件工程师
|
|
19:15
|
product infrastructure team at Facebook is an application architecture designed
|
，Facebook 的产品基础架构团队 是一个围绕 React 的单向原则设计的应用程序架构
|
|
19:20
|
around react's principle of unidirectional data flow paired with
|
onal data flow 与
|
|
19:25
|
flux react could go beyond the view layer to model entire applications this
|
flux react 相结合可以超越视图 层来对整个应用程序进行建模，这种
|
|
19:30
|
shift in how to think about State paired very well with how react was thinking
|
对 State 的思考方式的转变 与 react 对更新 UI 的思考方式很好地结合在一起，
|
|
19:34
|
about updating UI and ended up being sort of the next chapter for how to
|
并最终成为 下一章的
|
|
19:39
|
think about react being more than just how do you model complicated UI but how
|
思考方式 React 不仅仅是 如何为复杂的 UI 建模，而是如何为
|
|
19:45
|
do you model sufficiently complicated applications like this was something
|
足够复杂的 应用程序建模，就像
|
|
19:48
|
that expanded the full screen and multiple touch points and had navigation
|
这样扩展了全屏和 多个触摸点并可以导航
|
|
19:51
|
to it and it allowed us to step into that next chapter I remember asking Jing
|
到它，它让我们 进入下一章我记得问过 Jing
|
|
19:56
|
like hey how's it going with this react stuff you know do you think this is
|
说，嘿，这个 React 东西怎么样了， 你知道吗，你认为这
|
|
20:00
|
going to work she's like yeah this is pretty good I'm pretty sure it's gonna
|
会起作用吗，她就像是的，这 很好，我很确定它会
|
|
20:03
|
work that was when I became more convinced
|
起作用，那时我变得更加 确信
|
|
20:07
|
[Music] thank you
|
[音乐] 谢谢
|
|
20:17
|
[Music]
|
[音乐]
|
|
20:21
|
Instagram joined Facebook in 2012. I think we had started calling it react by
|
Instagram 于 2012 年加入 Facebook。我 想那时我们已经开始称它为 React，
|
|
20:27
|
then and there was a couple Engineers from Facebook that went to join
|
Facebook 的几位工程师加入
|
|
20:30
|
Instagram to help them expand the product offering at the time Instagram
|
Instagram 以帮助他们扩展 产品 ct 当时提供的 Instagram
|
|
20:35
|
was just an iOS and an Android app and they wanted to have a web presence as
|
只是一个 iOS 和一个 Android 应用程序， 他们希望在网络上
|
|
20:39
|
well foreign
|
也有 外国
|
|
20:43
|
[Music] 11 years in San Francisco it was a
|
[音乐] 在旧金山 11 年，这
|
|
20:49
|
really fun made a lot of great friends but the the change of pace out in the in
|
真的很有趣，结识了很多好朋友， 但节奏发生了变化
|
|
20:54
|
the countryside is is great um it's just very peaceful and nice
|
在乡下是很棒的， 嗯，非常安静和美好
|
|
20:59
|
I went to Facebook straight at school I studied computer science undergrad and I
|
我在学校直接去了 Facebook 我 本科学习计算机科学并
|
|
21:03
|
got a master's degree Facebook was believe it or not the like cool place to
|
获得了硕士学位 无论你相信与否，Facebook 都是
|
|
21:08
|
work back in 2010 it was like this great product that like everybody used it was
|
2010 年工作的好地方它 就像这个很棒的 产品，每个人都在使用它，它
|
|
21:13
|
super cool on college campuses and I was really excited to work there
|
在大学校园里非常酷，我 很高兴能在那里工作，在
|
|
21:19
|
foreign
|
国外
|
|
21:23
|
I joined Facebook video the pitch was we're the third largest
|
我加入了 Facebook 视频宣传我们是
|
|
21:29
|
video site in the world after YouTube and Dailymotion I think and there was
|
继 YouTube 和 Dailymotion 之后的世界第三大视频网站， 我认为和
|
|
21:35
|
like one engineer working on it and like you get to be engineer number two and I
|
好像有一个工程师在做这件事，就像 你成为二号工程师
|
|
21:38
|
was like that sounds pretty cool we worked really closely with the iOS
|
一样，我觉得这听起来很酷，我们 与
|
|
21:41
|
photos team in the Android Photos team and we were building an Instagram killer
|
Android Photos 团队中的 iOS photos 团队密切合作 ，我们是 bui 一个 Instagram 杀手
|
|
21:44
|
and nobody remembers this but it was called Facebook Camera
|
，没人记得这个，但它被 称为 Facebook Camera
|
|
21:48
|
one morning the photo scene got called into the office early they said like be
|
一天早上，照片场景很 早就被叫到办公室，他们说
|
|
21:52
|
at HQ at 8am and then the VP of engineering was like hey we bought
|
早上 8 点在总部，然后工程副总裁说， 嘿，我们买了
|
|
21:56
|
Instagram they're your new co-workers now and these were like our people that
|
Instagram，他们是你的新人 现在是同事，这些人就像我们的人，
|
|
21:59
|
they were like our Fierce competitors you know we looked at them a little bit
|
他们就像我们的激烈竞争对手， 你知道我们有点把他们
|
|
22:03
|
as the enemy I'm sure they looked at us a little bit as the enemy they were a
|
当作敌人，我敢肯定他们有点把我们 当作敌人，他们是一个
|
|
22:07
|
really small team at the time they had their core fundamentals really nailed
|
非常小的团队 他们真正确定了核心基础知识的时间，
|
|
22:10
|
but there was a lot of stuff they needed to figure out that they did not have the
|
但是他们需要弄清楚很多东西 ，而他们没有
|
|
22:15
|
team to figure out along with their own and a big one of those was what does it
|
团队来弄清楚自己的东西 ，其中很大的一个就是
|
|
22:19
|
mean for Instagram to be on the web the web experience is really important for
|
Instagram 意味着什么 在 web 上， web 体验对于
|
|
22:22
|
driving growth and so this was a pretty important priority and so me and this
|
推动增长非常重要，所以这是一个非常 重要的优先事项，所以我和这位
|
|
22:25
|
Designer Michael lumens started building all the web stuff and that's kind of
|
设计师 Michael lumens 开始构建 所有 web 的东西，这
|
|
22:30
|
where react enters the pictures when we started
|
就是 react 进入图片的地方 wh 然后我们开始
|
|
22:34
|
developing this website [Music]
|
开发这个网站 [音乐]，
|
|
22:42
|
we were given this mandate to use client rendering so I went to the product
|
我们被授权使用客户端 渲染，所以我去了 Facebook 的产品
|
|
22:48
|
infrastructure team at Facebook which was run by like Tom Aquino product
|
基础架构团队， 该团队由 Tom Aquino 运营，产品
|
|
22:54
|
infrastructure's role was to support any team that needed help
|
基础架构的角色是支持任何 需要帮助的团队，
|
|
22:59
|
and do it in a way that you know your key indicators of success are going to
|
并在 你知道你 成功的关键指标的一种方式
|
|
23:04
|
be other teams saying yeah that really helped us you go to them and you kind of
|
是其他团队说是的，这真的 帮助了我们你去他们那里，你有点
|
|
23:08
|
consult the Council of Elders and they they give you their recommendation and I
|
咨询长老会， 他们给你他们的建议，我
|
|
23:14
|
said hey we need to do client rendering what do we do and the recommendation at
|
说嘿我们需要做 客户端渲染 我们做什么，当时的建议
|
|
23:18
|
the time was yeah we don't know we've got like three different things that
|
是是的，我们不知道我们 正在处理三个不同的东西，
|
|
23:21
|
we're working on you should go try one we had uh something called bolt Js
|
你应该去试试一个， 我们有一个叫做 bolt Js 的东西，
|
|
23:28
|
there was a second thing called jshtml and then there was this this thing
|
还有第二个 叫做 jshtml ，然后有一个
|
|
23:35
|
called react you wouldn't spoke to Jordan about using
|
叫做 react 的东西， 你不会和 Jordan 谈论使用 React，
|
|
23:39
|
react and he came and talked to me about potentially using both for it but I
|
他来和我谈论 可能同时使用它，但我
|
|
23:43
|
think he really really liked Jordan's ideas around functional programming the
|
认为他真的很喜欢 Jordan 的 想法 围绕函数式编程，
|
|
23:48
|
conceptual model of react was like crazy Innovative and it really really spoke to
|
React 的概念模型就像是疯狂的 创新，它真的告诉了
|
|
23:52
|
me my background was in distributed systems I was not somebody that loved
|
我我的背景是在分布式 系统中，我不是一个喜欢
|
|
23:58
|
front end or thought front end was like doing things well so the fact that react
|
前端的人，也不认为前端就像把 事情做好，所以 React
|
|
24:02
|
came in with like a totally Fresh Approach and like didn't really care too
|
出现了 就像一个完全新鲜的 方法，并
|
|
24:06
|
much about existing best practices like I was I was on board with that so while
|
不太关心现有的最佳实践，就像 我在船上一样，所以当
|
|
24:11
|
I had evaluated all three I really just dove in on react to build a prototype
|
我评估了所有这三个方法时，我真的只是 投入了反应，首先构建了一个原型
|
|
24:14
|
first and that ended up shipping on instagram.com which was the second use
|
，结果是 在 instagram.com 上发布，这是有史以来第二次
|
|
24:21
|
of of reactant production ever and the first use of building a full application
|
使用反应物生产，也是 第一次使用端到端构建完整的应用程序
|
|
24:25
|
end to end in react
|
，
|
|
24:30
|
when I chose react for Instagram it was not well known within Facebook
|
当我为 Instagram 选择 React 时， 它在 Facebook 中并不为人所知
|
|
24:34
|
and it was this like kind of crazy science experiment
|
，这有点疯狂 科学实验
|
|
24:39
|
not even close by the time Instagram was and you know Pete was started playing
|
在 Instagram 出现时甚至还没有结束 ，你知道皮特开始
|
|
24:45
|
with it uh it was significantly better than it was in the early early stage uh
|
玩它，呃， 它比早期阶段好得多，呃，
|
|
24:50
|
but it still needed a ton of iteration we had to take this thing that was very
|
但它仍然 我需要大量的迭代， 我们不得不接受这个
|
|
24:53
|
much tied to Facebook's infrastructure which back then was a big giant PHP
|
与 Facebook 的基础设施非常相关的东西 ，当时它是一个巨大的 PHP
|
|
24:58
|
application and I had to go get that working in a Django application which is
|
应用程序，我不得不 让它在 Django 应用程序中工作，这是
|
|
25:02
|
a totally different system and what was key was not doing that once but making
|
一个完全不同的系统，什么是 关键不是只做一次，而是让它
|
|
25:07
|
that a repeatable process and and making sure that that pipeline didn't break I
|
成为一个可重复的过程，并 确保管道不会中断
|
|
25:12
|
think he hit a number of really interesting problems along the way which
|
-
|
|
25:15
|
quite proved the fact that react was not quite ready for that scale and along the
|
一路上，
|
|
25:21
|
way Pete and the team that he was working with into that building a lot of
|
Pete 和他的 团队正在构建许多
|
|
25:23
|
really interesting things [Music]
|
非常有趣的东西 [音乐]
|
|
25:28
|
foreign
|
国外，
|
|
25:50
|
some of these products ended up being fairly successful there were relatively
|
其中一些产品最终 相当成功，在相对
|
|
25:55
|
short time to to deliver a relatively high quality product that show that this
|
较短的时间内交付了一个相对 高质量的产品，这表明 这个
|
|
26:01
|
model could work and it was not just that but people liked developing using
|
模型可以工作，不仅 如此，而且人们喜欢使用
|
|
26:06
|
it and so that kind of spread and took off and especially if you got more and
|
它进行开发，所以这种模式传播开 来，尤其是当你得到越来越
|
|
26:12
|
more investment they came clear that this was
|
多的投资时 他们很清楚， 这
|
|
26:15
|
what we wanted to use and it was really ads that was kind of using Baltimore it
|
就是我们想要使用的东西，它确实是 广告，它在某种程度上使用了巴尔的摩，它
|
|
26:21
|
had a higher level investment more people working in that code base that
|
有更高层次的投资，更多的 人在
|
|
26:27
|
already knew it and more components so it was a harder shift to make
|
已经知道它的代码库和更多的组件中工作， 所以它更难转向
|
|
26:35
|
the ads team just before I joined ads from the mobile team had done a full
|
在我加入广告团队之前让广告团队
|
|
26:39
|
rewrite of the ads creation flow into bolt which took them I think upwards of
|
将广告创建流程完全重写为 bolt，我认为这花了他们六个月以上的
|
|
26:44
|
six months replacing a very old PHP application with what time was
|
时间 用当时被
|
|
26:50
|
considered a very modern JavaScript application but at the same time react
|
认为是非常现代的 JavaScript 应用程序替换了一个非常旧的 PHP 应用程序 但与此同时，
|
|
26:53
|
was also now actually deployed for real on Facebook and had a team that was
|
React 现在也实际部署 在 Facebook 上，并围绕它组建了一个团队，
|
|
26:59
|
forming around it so we now had two viable Frameworks that were both live on
|
所以我们现在有两个 可行的框架，它们都在
|
|
27:03
|
Facebook both solving real problems we shouldn't have two especially two that
|
Facebook 上运行，都解决了实际问题，我们 不应该有两个，尤其是两个
|
|
27:09
|
were similar similar enough to confuse people like if you looked at a code
|
相似到足以让人们感到困惑， 就像如果您查看代码，
|
|
27:12
|
their code almost looked identical but that worked really differently it would
|
他们的代码看起来几乎相同， 但工作方式
|
|
27:16
|
actually be an absolute nightmare if you had to work in both so we had to decide
|
却完全不同，如果 你 必须在两者中工作，所以我们必须
|
|
27:20
|
which which to use [Music]
|
决定使用哪个 [音乐
|
|
27:26
|
a lot of this was ended up being a conversation between myself and Jordan
|
] 很多这最终成为 我和乔丹之间的对话，
|
|
27:30
|
we did an evaluation of boredom a lot of performance-based stuff and trying to
|
我们对无聊进行了评估，很多基于 性能的东西并试图
|
|
27:36
|
figure out where the edge cases were on the pro side of react obviously there's
|
弄清楚 边缘情况在 反应的专业方面显然有
|
|
27:39
|
all the things that we know now it handles complexity way way more even
|
我们现在知道的所有事情它 处理复杂性的方式更多即使
|
|
27:44
|
when writing the as creation flow in bold we had already hit one place that
|
在用粗体编写 as 创建流程时 我们已经达到了一个地方，
|
|
27:48
|
you just could not do in Bolt without writing spaghetti code and you can do in
|
如果没有，你在 Bolt 中无法做到 编写意大利面条代码，你可以
|
|
27:52
|
react so we knew in the future even if it was only 10 of the experiences we
|
做出反应，所以我们知道将来即使 我们正在构建的体验中只有 10 个，
|
|
27:57
|
were building we're going to run into this problem again now it might only be
|
我们也会再次遇到 这个问题，现在它可能只有
|
|
28:00
|
10 unmaintainable but as you scale that across a company that is growing rapidly
|
10 个无法维护，但随着你扩展它 一家发展迅速的公司，
|
|
28:04
|
this becomes an absolute mess the cons of it on the other hand were that react
|
这变得一团糟 另一方面，它的缺点是
|
|
28:09
|
in a lot of ways was not battle tested yet there's a lot of things that simply
|
在很多方面的反应都没有经过实战测试， 但有很多事情
|
|
28:12
|
didn't work in react it couldn't handle forms they'd never done a text box and
|
在它无法处理的反应中根本不起作用 形式 他们从来没有做过文本框，
|
|
28:16
|
there's a lot of complexities around handing awkward form controls like radio
|
处理单选按钮等笨拙的表单控件有很多复杂性
|
|
28:19
|
buttons and so on that it messed up just performance issues where it would try
|
，它搞砸了 性能问题，它会
|
|
28:24
|
and re-render large blocks so they hadn't had to do all of the performance
|
尝试重新渲染大块，所以 他们不必做
|
|
28:28
|
improvements that obviously exist now on the organizational side that the other
|
现在在组织方面明显存在的所有性能改进， 另一个
|
|
28:33
|
con was that we had just done the six-month rewrite in both
|
缺点是我们刚刚完成了 为期六个月的重写，
|
|
28:37
|
um Facebook had done an IPO recently and the stock had
|
嗯 Facebook 最近进行了 IPO，
|
|
28:42
|
since IPO Facebook wasn't making enough money and
|
自 IPO 以来股票 一直没有 Facebook 没有赚到足够的钱
|
|
28:45
|
so the ads team is the team that makes you know that's where the money starts
|
所以广告团队是让你知道的团队，
|
|
28:48
|
if we stop for four months we're gonna have to tell everybody
|
如果我们停止四个月，那是
|
|
28:53
|
sorry no money for you so there was a lot of conversation back and forth about
|
钱开始
|
|
28:56
|
all this it was got very difficult initially a lot of the engineers that
|
的地方 最初非常困难， 很多使用螺栓的工程师，
|
|
29:00
|
used bolt including Shane realized just what you said like look we've invested
|
包括 Shane 都 意识到你所说的，就像我们
|
|
29:04
|
so much in this thing and it's it's really worked for all this stuff
|
在这件事上投入了很多，它 确实对所有这些东西
|
|
29:07
|
certainly we can work through the next set of challenges we're having so
|
都有效，我们当然可以努力 尽管我们面临着下一 组挑战，所以
|
|
29:10
|
initially there was opposition to react coming in and saying like how are you
|
最初有人反对做出反应 ，说你
|
|
29:14
|
gonna you know this new thing that's not even proven yet this is our business
|
怎么知道这个甚至还没有被证实的新事物， 但这是我们的业务，
|
|
29:18
|
this is really important when Jordan and I were working through it was definitely
|
这在乔丹和我工作时非常重要 通过它肯定是
|
|
29:22
|
uh some emotions uh there um and mostly I think it came from uh
|
呃一些情绪呃那里 嗯而且主要是我认为它来自呃
|
|
29:27
|
each of us having a lack of context of where the other one was coming from so I
|
我们每个人都缺乏 另一个人来自哪里的背景所以我
|
|
29:30
|
think there was a lot of talking past each other in the end Mike shroffer
|
认为最后有很多 相互交谈迈克 shroffer
|
|
29:34
|
stepped in and said look make the right technical decision make
|
介入并说， 做出正确的技术决策，
|
|
29:38
|
the right long-term decision and whatever it is
|
做出正确的长期决策 ，无论
|
|
29:43
|
you know I'll back you up but if you need to pause product development for
|
你知道什么，我都会支持你，但如果你 需要暂停产品开发
|
|
29:47
|
four months you can we all kind of just got in rooms and you know worked through
|
四个月，我们都可以 参与进来 房间，你知道经历了
|
|
29:52
|
all these things and got everything out in the air of you know what's a
|
所有这些事情，把一切都弄清楚 了，你知道什么是
|
|
29:55
|
technical problem what's an organization problem what's a financial problem uh
|
技术问题，什么是组织 问题，什么是财务问题，嗯
|
|
29:59
|
and uh kind of a computer understanding eventually
|
，嗯， 最终计算机的理解
|
|
30:03
|
um through uh through uh with lots and lots of coffee
|
嗯， 嗯，嗯，喝了很多很多咖啡
|
|
30:06
|
that the react was the right way to go but um it was not a straight line at all
|
，反应是正确的方式， 但嗯，这根本不是一条直线，
|
|
30:11
|
he ultimately was one of the biggest proponents of decision makers and ads
|
他最终是决策者和广告的最大支持者之一，在
|
|
30:16
|
switching all over everything to react and that doesn't happen in most
|
所有事情上都进行了反应 ， 这在大多数
|
|
30:21
|
companies and most companies if that's your baby project you try to undermine
|
公司和大多数公司都不会发生，如果那是 你的婴儿项目，你会试图
|
|
30:25
|
the other the the upstart because you're you know you're really defensive over
|
破坏另一个暴发户，因为 你知道你真的对
|
|
30:29
|
your own thing that was not the vibe at Facebook at the time and I think that
|
自己的事情进行防御，而这在当时的 Facebook 并不流行 我认为
|
|
30:33
|
Shane in particular really exemplified that
|
尤其是 Shane 确实 证明了
|
|
30:38
|
there was still a lot of work to do on the ads creation flow tensions were
|
在广告创作流程上还有很多工作要做
|
|
30:43
|
mounting and the team was stuck here again to get them unstuck is Jing Chen
|
-
|
|
30:50
|
we'd have this thorny management issue and a lot of people disagreeing with
|
-
|
|
30:54
|
each other up and down the management chain on both sides of you know in ads
|
在广告
|
|
30:57
|
and in this product infrastructure group those building react and we'd send Jing
|
和这个产品基础设施组
|
|
31:01
|
in to talk to the engineers and everyone come out like patting each other on the
|
中，很多人在管理链上上下下彼此意见不一 每个 人都喜欢互相拍拍对方的
|
|
31:05
|
back full agreement a plan to move forward so she's great at building a
|
背完全同意一个前进的计划 所以她很擅长建立
|
|
31:09
|
consensus because she's able to drill into the important technical details
|
共识因为她能够深入 研究重要的技术细节
|
|
31:14
|
identify them really quickly and and get everyone talking about the same thing
|
真正快速地识别它们并让 每个人都谈论同样的事情
|
|
31:17
|
she obviously helped both build the product but she also made sure that
|
她显然 帮助双方构建 产品，但她也确保
|
|
31:21
|
every time we found a bug in react or just something that didn't handle yet
|
每次我们发现 React 中的错误或 只是无法处理的问题时，
|
|
31:25
|
she either stepped back from products and then just fixed the framework or she
|
她要么退出产品 然后修复框架，要么
|
|
31:30
|
went back to the team and said look we need two or three Engineers working on
|
回到团队并说看 下个月我们 需要两到三名工程师来处理
|
|
31:33
|
this stuff for the next month to unblock the ads team the ads manager was
|
这些事情，以解除广告 团队的阻碍广告管理器
|
|
31:37
|
complicated enough that it actually ended up being a really great source of
|
非常复杂，以至于它实际上 最终成为了 um 性能改进的一个非常重要的来源，
|
|
31:42
|
um performance improvements and finding like where are the true points where it
|
并 发现它真正的作用在
|
|
31:47
|
does doesn't quite scale so I think it was a lot of like you using the building
|
哪里 规模不大，所以我认为 这很像您使用
|
|
31:51
|
blocks that we had and as you start to assemble them into a
|
我们拥有的构建块， 然后开始将它们组装成一个
|
|
31:54
|
really complicated looking application what are the new problems that come out
|
非常复杂的 l 预订应用程序 我们需要解决的新问题是什么，
|
|
31:57
|
of that way that we need to solve and there was definitely a lot of those this
|
肯定有很多，这
|
|
32:00
|
is one of the most fun intense periods of my career as I remember it we would
|
是我职业生涯中最有趣的紧张时期 之一，我记得我们
|
|
32:05
|
be going to meet with the team and we would have to help them put some feature
|
将与 团队，我们 将不得不帮助他们加入一些
|
|
32:08
|
in and we would code it up ourselves first and react just to make sure that
|
功能，我们会先自己编写代码 并做出反应，以
|
|
32:13
|
the that they wouldn't hit any rough edges or more like to find all the rough
|
确保他们不会碰到任何粗糙的 边缘，或者更像是
|
|
32:17
|
edges that we knew they'd hit and figure out what the solutions would be so it
|
找到我们知道的所有粗糙边缘 我 想出了解决方案，这
|
|
32:21
|
was really exciting because we were working on two things at the same time
|
真的很令人兴奋，因为我们 同时在做两件事，
|
|
32:25
|
one was delivering this really complicated really important software
|
一个是为 Facebook 呃广告经理交付这个非常 复杂非常重要的软件
|
|
32:29
|
project for Facebook uh the ads manager and the other was refining this
|
项目 ，另一个是改进这个
|
|
32:33
|
framework that we really believed in uh which was react
|
框架 我们真的相信呃 ，
|
|
32:38
|
by the time we had rebuilt the ads creation flow which I think took about
|
当我们重建广告创建流程时，我们做出了反应 ，我认为这花了大约
|
|
32:42
|
four months it had been battle tested with basically everything about the
|
四个月的时间，它已经过战斗测试 ，基本上
|
|
32:46
|
browser supports all the form fields and everything and also massive performance
|
浏览器的所有内容都支持所有 f orm 字段和 所有内容以及
|
|
32:51
|
issues that had been resolved so at that point it was kind of felt that it was
|
已经解决的大量性能问题，所以在 那时感觉它已经
|
|
32:56
|
ready to be open source because you know we we used it in multiple
|
准备好开源，因为 你知道我们在多种
|
|
33:01
|
different types of contexts and that uh you know um it would actually be
|
不同类型的上下文中使用它并且呃 你知道嗯它 实际上
|
|
33:05
|
generally useful to the public [Music]
|
通常对公众有用 [音乐]
|
|
33:18
|
where's
|
|
|
33:21
|
uh there is not sorry open sourcing reactor is never a
|
呃，不 抱歉，开源反应堆对我来说从来都不是
|
|
33:27
|
question for me that was the goal from the very beginning Tom had this
|
问题，这 从一开始就是目标 Tom 有这个
|
|
33:32
|
idea he called it project perception and he was really
|
想法，他称之为项目感知 ，我认为他真的很
|
|
33:37
|
angry I think it's probably the best word for he's angry that Facebook was
|
生气 这可能是最好的 词，因为他对 Facebook
|
|
33:40
|
hiring all these luminaries from the JavaScript World they would come to
|
从 JavaScript 世界招聘所有这些杰出人物感到愤怒， 他们会来到
|
|
33:44
|
Facebook and you know because we discouraged people from writing
|
Facebook，你知道，因为我们 不鼓励人们编写
|
|
33:48
|
client-side JavaScript and because it was a hard environment to maneuver in it
|
客户端 JavaScript，而且因为这 是一个难以操纵的环境
|
|
33:52
|
would actually go pick up mobile because that was where a lot of the interesting
|
，实际上 去选择移动，因为 那是很多有趣的
|
|
33:56
|
client-side development was happening and Tom was determined to change us
|
客户端开发发生的地方 ，Tom 决心改变
|
|
33:59
|
around I remember going to this conference and someone like I was
|
我们，我记得去 我参加了这次 会议，有人像我在和
|
|
34:04
|
talking to someone and I told them I worked at Facebook on JavaScript and
|
某人交谈，我告诉他们我 在 Facebook 从事 JavaScript 工作，
|
|
34:07
|
they're like why would you do that I hate what Facebook does to the
|
他们说你为什么要那样做我 讨厌 Facebook 对 JavaScript 行业所做的事情
|
|
34:10
|
JavaScript industry you have hired all these really great people from these
|
你雇佣了所有 这些非常棒的人来自 这些
|
|
34:14
|
really great projects and we have no idea what they're working on now they've
|
非常棒的项目，我们不 知道他们在做什么，现在
|
|
34:17
|
given nothing back so I think when react came along I started very early on
|
他们什么也没回馈，所以我想当 React 出现时，我很早就开始
|
|
34:23
|
talking about if this thing works for us I really want us to find a path to open
|
谈论这件事是否对我们 有用，我真的希望我们找到一条路
|
|
34:28
|
source and I was running that up the like management chain like very early so
|
开源，我 很早就在类似的管理链上运行了，所以
|
|
34:32
|
when the time came to open source it there were some meetings it was
|
当开源的时候， 有一些会议是
|
|
34:35
|
controversial but we had all the support we needed
|
有争议的， 但我们已经得到了我们需要的所有支持
|
|
34:39
|
already
|
|
|
34:44
|
the process of open sourcing uh is interesting there's first a technical
|
，开源的过程呃很 有趣 首先
|
|
34:50
|
problem to solve you have to figure out how to extract it out of your
|
要解决一个技术问题，你必须弄清楚 如何将它从你的
|
|
34:54
|
infrastructure and make it work in the open source which is all the homework
|
基础设施中提取出来，并使其在 开源中工作，这是
|
|
34:58
|
that we did for Instagram we made this call that like we will not
|
我们为 Instagram 所做的所有功课，我们做了这个电话 就像我们根本不会
|
|
35:02
|
impact developer productivity at all it's going to be entirely on the open
|
影响开发人员的生产力一样， 这将完全取决于
|
|
35:05
|
source team which was just a bunch of people that wanted to open source it to
|
开源团队，这只是 一群想要开源它以
|
|
35:10
|
make it work then actually pulling the trigger on open source
|
使其工作的人，然后实际上 拉动开源
|
|
35:14
|
we had to write a lot of documentation we spent actually a lot of time with the
|
我们不得不写很多东西 文档 我们实际上花了很多时间
|
|
35:19
|
documentation to explain like hey what is react what are all the concepts and
|
来解释文档，比如嘿什么 是反应什么是所有概念，
|
|
35:23
|
we try to put ourselves in the shoes of like somebody that want to build an app
|
我们试图让自己 站在想要构建应用程序的
|
|
35:27
|
how do we give the documentation in a way it like helps them do that polish
|
人的角度，我们如何在 这就像帮助他们完善
|
|
35:33
|
Channel as they did a lot of this because he really had the experience
|
Channel 一样，他们做了很多这样的事情， 因为他确实
|
|
35:35
|
with what the ecosystem needed to make this work at the time Apollo fantasy was
|
拥有生态系统所需 的经验，当时 Apollo fantasy 是
|
|
35:41
|
a huge force on open sourcing as was James Pierce who was the head of
|
开源的巨大力量， James Pierce 也是，他是
|
|
35:48
|
Facebook open source James had joined the company and he really wanted to
|
Facebook 开源负责人 James 加入 了公司，他真的很想
|
|
35:54
|
change Facebook's open source image we had previously open sourced a lot of
|
改变 Facebook 的开源形象，我们 以前开源了很多
|
|
35:58
|
stuff but we let it rot we would say hey we're an open source company here's our
|
东西，但我们让它腐烂了，我们会说，嘿， 我们是开放的，所以 urce 公司这是我们
|
|
36:02
|
great framework and then we would just never maintain it and James and Paul in
|
伟大的框架，然后我们 永远不会维护它，尤其是 James 和 Paul，
|
|
36:06
|
particular were like pretty instrumental in saying hey if we're going to open
|
他们非常 乐于说嘿，如果我们要
|
|
36:09
|
source react we're going to do it right internally there was a lot of excitement
|
开源 React，我们将在 内部进行，有很多 兴奋，
|
|
36:14
|
because we had already been using this thing for a while and it was working for
|
因为我们已经使用这个 东西一段时间了，它对
|
|
36:19
|
us we were excited about it we chose jsconf us which was kind of the
|
我们有用，我们对此感到兴奋，我们选择了 jsconf，这有点像
|
|
36:25
|
I don't know the Oscars of JavaScript is that fair representation maybe you know
|
我不知道 JavaScript 的奥斯卡奖 是公平的代表，也许你知道
|
|
36:30
|
all the celebrities are there and everyone's paying attention and
|
所有的 名人在那里， 每个人都在关注，
|
|
36:32
|
everybody watches it live on YouTube Tom and Jordan put together this
|
每个人都在 YouTube 上观看直播 汤姆 和乔丹整理了这个
|
|
36:36
|
presentation Tom is a great speaker and Jordan is a brilliant engineer it was
|
演示文稿 汤姆是一位出色的演讲者， 乔丹是一位出色的工程师，
|
|
36:40
|
like Lennon and McCartney type of situation there was no way that this
|
就像列侬和麦卡特尼那样的 情况，这
|
|
36:45
|
thing could possibly fail
|
件事不可能发生 失败
|
|
36:48
|
[Music] it was in Florida
|
[音乐] 那是在佛罗里达州，
|
|
36:56
|
um at like 9 00 a.m We were in Menlo Park and we woke up early we took the
|
嗯，大约上午 9 点，我们在门 洛帕克，我们很早就醒了，我们乘坐
|
|
37:01
|
first bus into the office it was completely empty and we're like getting
|
第一班公共汽车去办公室，那里 完全是空的，我们就像 gett
|
|
37:04
|
ready to like press the button on the repo to open sources Jordan and I were
|
准备好按下 repo 上的按钮 以开源 Jordan 和我
|
|
37:08
|
all excited we got up on stage I'm going to talk a bit about how we do JavaScript
|
都很兴奋我们上台了我 要谈谈我们如何
|
|
37:12
|
application development at Facebook it was a little unconventional I like did a
|
在 Facebook 进行 JavaScript 应用程序开发 这有点不同寻常我喜欢做
|
|
37:15
|
little bit of it he did more of it so along with react we are shipping an
|
一点点他做了更多所以 连同 React
|
|
37:20
|
embeddable XML syntax and we're calling that jsx and we jumped into showing some
|
我们正在发布一个可嵌入的 XML 语法，我们 称它为 jsx，我们开始展示一些
|
|
37:25
|
code and that code looked different it looked weird here we have react used
|
代码，这些代码看起来不一样， 这里看起来很奇怪，我们已经将
|
|
37:31
|
with jsx and people were rightfully skeptical we'll call it everyone hated
|
React 与 jsx 一起使用，并且 人们理所当然地 怀疑我们会称它为每个人都讨厌
|
|
37:37
|
it everyone thought it was awful foreign
|
它每个人都认为它是可怕的
|
|
37:45
|
[Music] ly we were expecting a much better
|
外国音乐
|
|
37:49
|
reception or at least an oh that's interesting exception we thought there'd
|
-
|
|
37:53
|
be some language nerds in there who would um think oh I can do fully
|
嗯，我想哦，我可以
|
|
37:58
|
functional program in the UI oh at least that's interesting it was a really
|
在 UI 中完成功能齐全的程序哦，至少 那很有趣，这是一次非常令人
|
|
38:01
|
humbling experience it was kind of a letdown for us because we had worked
|
羞愧的经历，这 对我们来说有点令人失望，因为我们
|
|
38:05
|
nights and weekends on getting this thing open sourceable and then when we
|
为了让这个东西 op 工作了几个晚上和周末 en sourceable 然后当
|
|
38:08
|
go to launch it everyone hated it the thing that everyone focuses on is that
|
我们发布它时每个人都讨厌它 每个人都关注的是
|
|
38:11
|
people really hated jsx
|
人们真的很讨厌 jsx
|
|
38:18
|
I haven't watched this video in a while
|
-
|
|
38:24
|
see these divs are not exactly what you're used to they're not
|
不是
|
|
38:28
|
Dom nodes so they're special reactives and I'll
|
Dom 节点， 所以它们是特殊的反应器，
|
|
38:32
|
get to why that's important I don't remember thinking that they were hating
|
我会明白为什么这很重要
|
|
38:35
|
it I don't remember at all thinking that they were like tweeting a bunch of a
|
-
|
|
38:41
|
bunch of stuff this is the slide for sure we haven't talked about any
|
肯定是幻灯片 我们没有讨论
|
|
38:45
|
problems we're trying to solve we haven't talked about why this is working
|
我们试图解决的任何问题 我们 还没有讨论为什么这
|
|
38:48
|
for us or what were the principles of design we're just like boom here's some
|
对我们有用或者设计原则是什么 我们就像繁荣一样 这
|
|
38:52
|
XML in your JavaScript and people are like hey what is happening
|
是你的 JavaScript 中的一些 XML 人们会 说，嘿，发生了什么事，
|
|
38:56
|
uh poor Jordan what we didn't really fully understand
|
可怜的乔丹 ，我们没有真正完全理解的
|
|
39:01
|
was how big of a Delta there was between where the rest of the world was in the
|
是，在世界其他地方的
|
|
39:06
|
JavaScript community and where Facebook was
|
JavaScript 社区和 Facebook 之间有多大的差异，
|
|
39:08
|
I don't blame them I don't think anybody who tweeted Facebook is crazy
|
我不怪他们，我 不要认为 在 Facebook 上发推文的人是疯子
|
|
39:12
|
was crazy themselves I think they were they were kind of right we were a little
|
他们自己很疯狂 我认为 他们是对的 我们有点
|
|
39:17
|
crazy I think there was a moment for me
|
疯狂
|
|
39:21
|
personally where I felt like you know my goal with the open sourcing
|
-
|
|
39:25
|
of this was to get us closer to the community and I may have set us back a
|
我可能让我们后
|
|
39:29
|
step I may have demonstrated that we actually have no idea what we're doing
|
退了一步我可能已经证明我们 实际上并不知道我们在做
|
|
39:34
|
because what we're doing is so much different than what the rest of the
|
什么因为我们正在做 的与社区其他人
|
|
39:37
|
community was doing and internally there was a
|
正在做的有很大不同并且在内部
|
|
39:41
|
well we messed that up we made the wrong call
|
我们搞砸了 那我们打错 电话了，
|
|
39:46
|
um because I think the measure of success would have been wow Facebook
|
因为我认为成功的衡量标准 是哇 Facebook
|
|
39:49
|
engineering is doing some really cool stuff and instead it was Facebook
|
工程正在做一些非常酷的 事情，相反，Facebook
|
|
39:52
|
engineering has no idea what they're doing I think that gsconf
|
工程不知道他们在 做什么，我认为 gsconf
|
|
39:56
|
um appearance might have been Jordan's last conference for a good few years I
|
um 外观可能是 乔丹 几年来的最后一次会议，我
|
|
40:01
|
think camokino didn't go back for a while as well it turned into a bit of a
|
认为 camokino 也有一段时间没有回去了 ，它无缘无故地变成了一个
|
|
40:04
|
troll Fest for no good reason and particularly for something that was as
|
巨魔节， 特别是对于
|
|
40:08
|
an Innovative and useful and you know just fantastic for developer
|
一些创新和有用的东西，哟 你知道 这对开发人员的工作
|
|
40:13
|
productivity and just it's literally a gift to everybody here here move faster
|
效率来说太棒了，它实际上是 给这里每个人的礼物免费移动更快
|
|
40:16
|
for free to have people misunderstand it and say all these bad things about it
|
让人们 误解它并说出所有这些不好的
|
|
40:21
|
that were just you know knee-jerk reactions without
|
事情只是 你知道下意识的反应而没有
|
|
40:24
|
actually having taken time to think about it
|
真正花时间思考 关于这件事，
|
|
40:26
|
um can only must have felt very bad especially because both Jordan and Tamil
|
嗯，一定感觉很糟糕， 尤其是因为乔丹和泰米尔
|
|
40:29
|
had already gone through all this internally in Facebook for two years but
|
人已经 在 Facebook 内部经历了两年，但
|
|
40:32
|
inside in Facebook it's a smaller scale you can just get in a meeting room and
|
在 Facebook 内部，规模较小， 你可以进入会议室
|
|
40:35
|
talk about it um but you can't really do that with the
|
谈论它， 嗯，但是 你不能真的对全世界都这样做，你
|
|
40:37
|
whole world can you there were some technical decisions that were made as
|
能不能有一些 技术决定
|
|
40:41
|
hard to react that were self-evident within Facebook but were like crazy when
|
很难做出反应，这些决定 在 Facebook 内是不言而喻的，但是
|
|
40:48
|
when um given to a different audience in the community so there was this notion
|
当 um 给社区中的不同观众时就像疯了一样， 所以有
|
|
40:51
|
of separation of concerns at the time like you didn't you shouldn't put your
|
当时这种关注点分离的概念 就像你不应该把你的
|
|
40:57
|
HTML CSS and JavaScript into the same file like should I really extract them
|
HTML CSS 和 JavaScript 放到同一个 文件中就像我真的应该把它们提取
|
|
41:02
|
out and you should like uh like have this separation and so this was like
|
出来然后你 你应该喜欢 这个分离，所以这
|
|
41:06
|
very like the best practice at the time what was interesting about the approach
|
就像当时的最佳实践一样， 在 React 中分离关注点的方法有趣的
|
|
41:12
|
to separation concerns in react is that you separate your concerns into
|
是 你将你的关注点分成
|
|
41:15
|
different components so rather than saying I have my view concerns over here
|
不同的组件，而不是 说我有我的观点关注点 在这里
|
|
41:19
|
and my model concerns over here you say you have your news feed concerns over
|
和我的模型问题在这里你说 你有你的新闻提要问题在
|
|
41:23
|
here your photo concerns over here your admin panel concerns over here so it's a
|
这里你的照片问题在这里你的 管理面板问题所以这是一种
|
|
41:28
|
different way of separating concerns and so there was like a lot of backlash
|
不同的分离问题的方式 所以周围有很多反对意见
|
|
41:32
|
around like oh those people at Facebook are clowns like they don't know how to
|
哦那些 Facebook 的人就像小丑一样，就像他们不知道如何
|
|
41:36
|
write software and everything we thought that react probably had no future
|
编写软件一样，我们 认为反应的一切可能在 Facebook 之外没有前途
|
|
41:39
|
outside of Facebook [Music]
|
[音乐]
|
|
41:52
|
it looked like all hope was lost for our friends at the Facebook office but
|
看起来我们 在 Facebook 办公室的朋友们的希望都破灭了，但
|
|
41:58
|
fortunately someone outside of Facebook was willing to give it a chance
|
幸运的是 Facebook willed to give it a chance
|
|
42:03
|
foreign [Music]
|
国外 [Music]
|
|
42:11
|
started using react in 2013 it was not popular in the community it had just
|
2013年开始用react 社区不流行 刚
|
|
42:17
|
been announced at jsconf I saw the announcement post on Hacker
|
在js上宣布 我在 Hacker News 上看到了公告帖子，
|
|
42:24
|
News and immediately thought that it would be helpful for one
|
并立即 认为这对
|
|
42:29
|
of the projects that I was working on at the time I was building an interactive
|
我当时正在从事的一个项目很有帮助， 当时我正在可汗学院构建一个交互式
|
|
42:33
|
math question editor at Khan Academy and it was something that had a very
|
数学问题编辑器， 它具有非常重要的
|
|
42:38
|
component oriented architecture I was trying to use backbone.js at the time
|
组成部分 面向架构 我 当时尝试使用 backbone.js
|
|
42:42
|
and found that the state management was getting a little bit hard and when I
|
，发现状态管理 变得有点困难，当我
|
|
42:48
|
looked at react I thought to myself wow this actually looks like it solves a lot
|
看到 React 时，我心想，哇， 这实际上看起来解决
|
|
42:53
|
of the problems that I have right now
|
了我遇到的很多问题 现在
|
|
42:57
|
I'm looking at this post from 2013 that I guess I wrote a week after I learned
|
我正在看这篇 2013 年的帖子， 我想我是在了解 React 一周后写的
|
|
43:05
|
about react and it was right after I had started trying to use it and somebody
|
，那是在我 开始尝试使用它之后，
|
|
43:11
|
had asked how is Facebook's react JavaScript library and I was a few days
|
有人问 Facebook 的 React JavaScript 库如何，我当时只是几个
|
|
43:19
|
into using it and so I decided to write an answer to that question based on my
|
使用了几天，所以我决定 根据我的
|
|
43:24
|
experience the answer I wrote is very
|
经验 写下这个问题的答案 我写的答案
|
|
43:30
|
positive I think I was having a really good time using it and it was solving my
|
非常积极
|
|
43:37
|
needs really well one line from the post says I just rewrote a 2000 line project
|
好吧，帖子中有一行 说我刚刚在 React 中重写了一个 2000 行的项目
|
|
43:42
|
in react and have now made a handful of pull requests to react everything about
|
，现在已经提出了一些 pull Requests 来
|
|
43:46
|
react I've seen so far seems really well thought out and I am proud to be the
|
响应我到目前为止所看到的关于 React 的一切似乎都经过 深思熟虑，我很自豪能成为
|
|
43:51
|
first non-facebook production user of react and I talked a little bit more
|
第一个非 -react 的 facebook 生产用户 ，我更多地谈到了
|
|
43:56
|
about some of the technical details and how it was helping me it's cool to look
|
一些技术细节， 以及它如何帮助我回顾起来很酷
|
|
44:01
|
back and it's almost a bit of a time capsule to see how even one week into
|
，这几乎是一个时间 胶囊，看看
|
|
44:09
|
react being released I was already pretty excited about it and I think that
|
反应是如何发布一周的 我已经 对此感到非常兴奋，我认为这种
|
|
44:15
|
excitement lasted for a long time I converted my entire code base that I
|
兴奋持续了很长时间
|
|
44:20
|
was working on at the time over to react I think it ended up being less code and
|
-
|
|
44:24
|
it was easier to understand and it was faster pretty quickly I said Okay I want
|
很快我说好吧，我想
|
|
44:30
|
to keep using react and I ended up deploying that to production my my
|
继续使用反应，我最终 将它部署到我
|
|
44:36
|
Rewritten code and that was I think the first production code using react
|
重写的代码的生产中，那是我认为 第一个在 Facebook 之外使用反应的生产代码
|
|
44:41
|
outside of Facebook foreign
|
外国
|
|
44:49
|
it was a brand new project that had just been open sourced and not many people
|
这是一个全新的项目 刚刚开源，之前没有多少
|
|
44:53
|
had used it before and so there were a bunch of rough edges it seemed like you
|
人使用过它，所以有 一堆粗糙的边缘，看起来你
|
|
44:57
|
know maybe nobody had tried to use it in a particular way before or if something
|
知道也许以前没有人尝试过 以特定方式使用它，或者如果某些
|
|
45:01
|
just wasn't documented well enough and I was trying to use it a slightly
|
东西没有得到足够好的记录，我 试图以
|
|
45:05
|
different way than it was intended I ran into these little bugs or issues where
|
一种与预期略有不同的方式使用它 我遇到 了这些小错误或问题，在这些错误或问题中，
|
|
45:10
|
it didn't work quite as I was expecting it to for some of those I read through
|
它并没有像我期望的那样工作 ，其中一些我通读
|
|
45:16
|
the source code and tried to figure out okay why isn't this working is there
|
了源代码并试图找出 答案 为什么这不起作用有
|
|
45:19
|
anything that I can be doing differently for other cases I ended up joining the
|
什么我可以在 其他情况下做不同的事情我最终加入了
|
|
45:26
|
IRC chat Channel where a lot of the core team members were hanging out after it
|
IRC 聊天频道，许多核心 团队成员在它开源后都在那里闲逛
|
|
45:32
|
had been open sourced that helped me get started not just
|
这不仅帮助我开始
|
|
45:38
|
using react but also starting to contribute to it as I started filing
|
使用 React，但也开始 为它做出贡献，因为我开始提交
|
|
45:42
|
issues and helping other people who were in that chat room as well as starting to
|
问题并帮助 那个聊天室中的其他人，以及开始
|
|
45:47
|
make small code changes and starting to improve react over time her perspective
|
进行小的代码更改并开始 随着时间的推移改进她
|
|
45:53
|
from you know Khan Academy and just being outside of Facebook was so
|
对你的看法 w Khan Academy 和 Facebook 之外的人非常
|
|
45:57
|
valuable so helpful so if he started as someone using react externally
|
有价值，非常有帮助，所以如果他开始是作为 外部使用 React 的人，
|
|
46:03
|
then sort of like moved on to being someone who contributed to react core
|
然后有点像转向成为外部 对 React Core 做出贡献的人，
|
|
46:07
|
externally then became the most significant contributor to react core
|
然后成为 React Core 最重要的贡献者，
|
|
46:11
|
then we would have these like weekly team meetings and invite Sophie to come
|
那么我们就会 每周开一次 团队会议，邀请索菲来
|
|
46:16
|
and so Sophie like worked out with her local manager at her company to like
|
，所以索菲喜欢和 她公司的当地经理一起工作，喜欢
|
|
46:20
|
carve out Friday afternoons to come to Facebook and hang out with us and so
|
抽出周五下午的时间来 Facebook 和我们一起出去玩，所以
|
|
46:26
|
determined not to do what we had done previously where we hired folks from the
|
决定不做我们以前做过的事情 我们从开源社区雇用了一些人
|
|
46:31
|
open source community and then they never contributed anything back she
|
，然后他们 再也没有贡献任何东西，她
|
|
46:35
|
became like the the first ever like open source recruited member of the team
|
成了团队中第一个像 开源一样招募的成员，
|
|
46:44
|
Sophie's involvement lifted the spirits of the react team it also got them
|
Sophie 的参与提升 了 React 团队的精神，这也让他们
|
|
46:48
|
thinking that maybe just maybe the rest of the ecosystem had just misreact
|
认为也许只是也许 生态系统的其他部分只是做出了
|
|
46:54
|
unfairly they had something special they knew it what they didn't know was how to
|
不公平的错误反应他们有一些特别的东西他们 知道但他们不知道的是如何
|
|
47:00
|
convince everyone else I think there are people on the team
|
说服 其他 人 我认为团队中有
|
|
47:03
|
like me and Jordan and Tom and christadeau who like the The Challenge
|
像我、乔丹、汤姆和 克里斯塔多这样的人，他们喜欢挑战赛
|
|
47:10
|
and the the competitive nature of it we knew that this was good technology and I
|
及其竞争性，我们 知道这是一项很好的技术，
|
|
47:16
|
was so sure of that that um you know I viewed it as just a a
|
我非常确定这一点，嗯， 你知道我看过 这只是一个
|
|
47:22
|
messaging problem you know okay we gotta crack how we message this to people
|
消息传递问题，你知道好吧，我们必须 破解我们如何向人们发送消息，
|
|
47:26
|
because they don't get it and we have to figure out how to how to bring them
|
因为他们不明白，我们必须 弄清楚如何将他们带到
|
|
47:29
|
there the open source feels like a milestone
|
那里开源感觉就像一个里程碑
|
|
47:33
|
and it feels like this is the end my impressive is just the beginning because
|
，感觉就像这样 我 印象深刻的是结束只是开始因为
|
|
47:37
|
when you open social actually have zero users now you need to actually like
|
当你打开社交时实际上有零 用户现在你需要真正喜欢
|
|
47:41
|
build a community uh get all of the bug fixed like make sure it actually solves
|
建立一个社区呃修复所有 错误就像确保它实际上解决
|
|
47:45
|
the use case for the people and so this is like when the Journey Begins we
|
了人们的用例所以这 是 就像旅程开始时，我们会
|
|
47:50
|
buckle down we and we we also realized I think that really when you have a
|
全力以赴，我们也意识到， 我认为当你有一个像这样的项目时，你必须一个一个
|
|
47:55
|
project like this that's um different you have to convince people
|
地说服
|
|
48:00
|
one by one so I think that's really what we focused
|
人们， 所以我认为这才是我们真正关注
|
|
48:03
|
on and we learned a lot doing that we
|
的 ，我们 l 赚了很多，我们
|
|
48:06
|
learned that the ideas in reactor are solid but
|
了解到 Reactor 中 的想法是可靠的，但
|
|
48:10
|
really the ideas are not what people encounter when they adopt a framework
|
实际上这些想法并不是人们 在采用框架
|
|
48:14
|
what they encounter are the docs and the error messages what they need more than
|
时遇到的，他们遇到的是文档和 错误消息，
|
|
48:19
|
anything else when they adopt something is an incremental way of doing that
|
当他们采用某些东西时，他们最需要的 是 一种渐进的方式，
|
|
48:23
|
so the team got to work they focused on spreading the knowledge of react one
|
因此团队开始工作，他们专注于 传播 React 的知识，
|
|
48:28
|
concept at a time one person at a time then an opportunity arose
|
一次一个人，一次一个人， 然后机会出现
|
|
48:33
|
another conference later the same year thank goodness Pete
|
在同年晚些时候的另一次会议上，谢天谢地，Pete
|
|
48:39
|
gave a talk at jsconf EU I had my desk over by the um by the product
|
在 jsconf EU I 上发表了演讲 我坐在 Tomo 旁边的产品
|
|
48:44
|
infrastructure team I was sitting next to Tomo and he's like oh we're just like
|
基础架构团队让我的办公桌过来 ，他说哦，我们就像
|
|
48:49
|
sponsoring this JS conf EU conference and like we have to give a keynote and
|
赞助这个 JS conf EU 会议一样，我们必须发表主题演讲，
|
|
48:54
|
like I don't want to give it because I think he was like he didn't want to go
|
就像我不想发表一样 这是因为我 认为他好像不想
|
|
48:57
|
through all that stuff because you know after you give the talk like people go
|
经历所有这些事情，因为你知道 在你发表演讲后就像人们
|
|
49:00
|
and yell at you after you get off stage and you go to the happy hour and stuff
|
在你下台后对你大喊大叫 然后你去欢乐时光并填满
|
|
49:04
|
it's like it's not not the most Pleasant thing in the world and I was like I'll
|
它' 好像这不是世界上最愉快的 事情，我想我会
|
|
49:08
|
do it um I'll take the free trip to Berlin and
|
做的， 嗯，我会免费去柏林旅行，然后
|
|
49:11
|
go uh give a talk at a conference hey I'm Pete uh I'm gonna talk to you about
|
去，呃，在一个会议上发表演讲，嘿， 我是皮特，呃，我要 与您讨论
|
|
49:16
|
a library for creating user interfaces that we call react
|
一个用于创建我们称为 React 的用户界面的库 ，我们几个月前
|
|
49:20
|
and we open source this at jsconfus a couple months ago and we got some kind
|
在 jsconfus 上开源了它，我们
|
|
49:26
|
of sarcastic responses on Twitter a little bit of snickering that kind of
|
在 Twitter 上收到了一些讽刺的回应， 有点窃笑那种
|
|
49:30
|
thing um we weren't really communicating what
|
东西， 嗯，我们不是真的 传达
|
|
49:33
|
we were doing um so I'd like to talk to you today
|
我们正在做的事情， 嗯，所以我今天想和你
|
|
49:35
|
about the design decisions um around react uh what we're doing
|
谈谈设计决策， 嗯，关于反应，嗯，我们正在做的
|
|
49:39
|
differently than other Frameworks and kind of the implementation that lets us
|
与其他框架不同的事情， 以及让我们
|
|
49:43
|
make these decisions and make it really fast
|
做出这些决定并使其真正 快速的
|
|
49:46
|
for this talk it was like here's what makes react different I'm not even
|
实现 这次谈话就像是 让 React 与众不同的原因 我什
|
|
49:49
|
trying to say it's good I'm not even trying to say you should use it I'm
|
至不想说它很好 我什 至不想说你应该使用它 我
|
|
49:52
|
trying to say that this is interesting and there's a lot of interesting stuff
|
只是想说这很有趣 而且有很多有趣的
|
|
49:56
|
about how this thing works that you should pay attention to
|
东西 这个东西是如何工作的，你 应该注意 继续
|
|
50:00
|
and um that really resonated with people and
|
， 嗯，这真的引起了人们的共鸣，
|
|
50:03
|
so we got these kind of early innovators you know if you think of the crossing
|
所以我们有这些早期的创新者， 你知道，如果你想到
|
|
50:07
|
the chasm diagram where you've got your your early
|
跨越鸿沟的 图表，你有你的早期
|
|
50:11
|
adopters and then you've got your laggers and in the middle you have your
|
采用者，然后你有你的 落后者，在中间 你有
|
|
50:14
|
kind of normal companies that talk really got those early adopters fired up
|
一些正常的公司，他们的谈话 真的让那些早期采用者兴奋起来
|
|
50:18
|
and evangelized and react inside of their own companies after Pete's talk
|
， 在皮特的演讲之后在他们自己的公司内部传福音并做出反应
|
|
50:22
|
interest started to pick up people started paying attention they just
|
，人们 开始关注他们只是
|
|
50:25
|
wanted to you know let me let me just see if there's something there and so we
|
想知道，让我 看看是否 那里有一些东西，所以我们
|
|
50:29
|
got this kind of like Slow Burn of adoption of react and it prompted some
|
得到了这种像 Slow Burn 的 采用反应，它引发了一些
|
|
50:34
|
really interesting conversations it recruited Brandon Bloom into the
|
非常有趣的对话，它 招募了 Brandon Bloom 进入
|
|
50:38
|
community who came from the functional programming World somewhere he started
|
社区，他来自函数式 编程世界，他开始
|
|
50:43
|
talking to his friends and said hey I think this like react thing is actually
|
与他的朋友交谈并说嘿我 认为 这种类似反应的事情实际上
|
|
50:47
|
worth paying attention to and then he goes and talks to his friend David Nolan
|
值得关注，然后他 去和他的朋友大卫诺兰交谈，
|
|
50:50
|
who is this very well known very well respected really great musician and
|
他是一个非常有名的人
|
|
50:56
|
JavaScript developer I think he was working at the New York Times at the
|
我认为他是非常伟大的音乐家和 JavaScript 开发人员，我想他 当时在纽约时报工作
|
|
51:00
|
time and I was passing through New York to do something and it grabbed coffee
|
，我正路过 纽约做某事，它喝了咖啡
|
|
51:06
|
and I asked Pete some questions and Brandon Brandon Bloom that was my friend
|
，我问了皮特一些问题， 布兰登布兰登布鲁姆是我的朋友
|
|
51:12
|
that said you should really look at react and the reason I was excited about
|
，他说 如果你是 JavaScript 开发人员，你真的应该看看 React 以及我对它感到兴奋的原因，
|
|
51:17
|
it more than I think you could have been if you were JavaScript developer
|
如果你是 JavaScript 开发人员，你可能
|
|
51:21
|
JavaScript is kind of multi-paradigm you can do object oriented you can do
|
-
|
|
51:24
|
functional if you want but it's not required but in closure enclosure script
|
会更 兴奋 但在闭包外壳脚本中，
|
|
51:29
|
functional is the most idiomatic thing and nothing existed like we were sort of
|
函数式是最惯用的东西 ，没有任何东西像我们
|
|
51:34
|
like always trying to get things to work but it was always felt like there was
|
总是试图让事情正常工作 一样存在，但总是感觉存在
|
|
51:38
|
friction I was like still early in my career right and this
|
摩擦，我就像 在我职业生涯的早期一样，
|
|
51:42
|
is like really senior super smart engineer and it was the type of thing
|
这就像真的 超级聪明的 高级工程师，在这种情况
|
|
51:47
|
where like he would ask me questions about it and I would like stumble to
|
下，他会问我 有关它的问题，我想结结巴巴地
|
|
51:51
|
explain it and I would explain it poorly and then he would repeat it back to me
|
解释它，但我会解释得不好 ， 然后他会以
|
|
51:54
|
in like a super eloquent great way and I was like yes I'm gonna steal that and so
|
一种非常雄辩的方式向我重复它， 我就像是的，我要偷那个，所以
|
|
52:01
|
when I sat with Brandon and Pete it was like this huge light bulb went off I was
|
当我和布兰登和皮特坐在一起时， 就像这个巨大的灯泡熄灭了，我
|
|
52:06
|
like finally this is so Random uh Facebook made this functional UI
|
终于觉得这是 所以随机 uh Facebook 制作了这个功能性 UI
|
|
52:12
|
framework Eureka I mean it was definitely a Eureka moment it it did
|
框架 Eureka 我的意思是这 绝对是一个 Eureka 时刻它确实
|
|
52:16
|
allow closure script programmers to finally write a reasonably performant
|
允许闭包脚本程序员 最终编写一个性能合理的
|
|
52:22
|
functional uis and it was very natural it was a very very good fit like a week
|
功能性 uis 并且很自然 它非常非常适合像
|
|
52:28
|
or two later he wrote this blog post called the future of JavaScript mvcs
|
一两个星期 后来他写了这篇 名为“JavaScript mvcs 的未来”的博客文章
|
|
52:31
|
that just like changed the trajectory of the project
|
，就像在许多方面改变了项目的轨迹一样，
|
|
52:34
|
in many ways you look at react and you're like there's no way this could be
|
你看待 React， 你会觉得这不可能
|
|
52:38
|
fast there's no way it could be efficient and then I showed like you
|
很快，也不可能很 高效，然后我 展示了你
|
|
52:42
|
know these diagrams of what um backbone and react ohm look like and react is
|
知道这些 um backbone 和 react ohm 的图表，并且 react
|
|
52:48
|
much better especially when you're using persistent data structures so my article
|
更好，尤其是当你使用 持久数据结构时，所以我认为我的文章
|
|
52:54
|
I think was focusing purely on the technical benefits of the design it
|
纯粹关注的 技术优势 它的设计
|
|
52:59
|
removed The Superficial consideration and I think people started saying okay I
|
消除了肤浅的考虑 ，我认为人们开始说好吧，我
|
|
53:05
|
will try it not I'm going to use it but it removed that I'm never going to use
|
会尝试，但我不会使用它，但 它消除了我永远不会使用
|
|
53:10
|
that too oh I'll give it a shot this is interesting once that post came out like
|
它，哦，我会试一试，这很 有趣 一旦那篇文章
|
|
53:16
|
within three months after that I would say that we were one of the big
|
在那之后的三个月内发布，我会 说如果你选择一个 JavaScript 框架，我们是最大的竞争者之一，
|
|
53:20
|
contenders if you were picking a JavaScript framework if you want to
|
如果你想
|
|
53:24
|
spread an idea you need to really convince a few people
|
传播一个想法，你需要真正 说服一些人
|
|
53:26
|
and have those people share your message you can't just be shouting at yourself
|
并让这些人分享你的 消息， 你不能只是对自己大喊大叫，
|
|
53:31
|
more people started to realize that react
|
更多的人开始意识到，在接下来的过程中， 对
|
|
53:35
|
some good ideas and made UI development simpler in a lot of ways over the course
|
一些好的想法做出反应，并 在很多方面简化了 UI 开发，
|
|
53:43
|
of the next I would say like year or two we're kind of just tracking things like
|
我想说一两年， 我们只是在跟踪
|
|
53:49
|
you know like Google Alerts of how many times is it being mentioned who's
|
像 Google Alerts 这样的事情，比如 它被提到了多少次，谁在
|
|
53:53
|
writing about it what projects are cropping up
|
写它，哪些项目正在 出现，
|
|
53:56
|
um because react was very unopinionated about a lot of stuff that you need in
|
嗯，因为 React 对构建前端 Web 应用程序所需的很多东西非常不以为然
|
|
54:00
|
order to build a front-end web application and you know people would
|
离子，你知道人们会
|
|
54:04
|
fill in the blanks and there was a bunch of State Management libraries that
|
填补空白，出现了 一堆状态管理库
|
|
54:08
|
cropped up and there was a bunch of you know router libraries that cropped up
|
，出现了一堆你 知道的路由器库
|
|
54:12
|
and server-side rendering strategies and so there was this sort of Slow Burn of
|
和服务器端渲染策略， 所以出现了这种 Slow Burn
|
|
54:16
|
adoption over the next year or two react is a small focused UI library but it
|
在接下来的一两年内采用 React 是一个小型的专注 UI 库，但它
|
|
54:22
|
proved capable when tackling Facebook's hardest problems in other big companies
|
在解决 Facebook 最棘手的问题时被证明是有能力的 ，其他大公司
|
|
54:26
|
noticed but there was one company especially
|
注意到了， 但有一家公司特别
|
|
54:30
|
eager to rethink best practices
|
渴望重新思考我们第一次听说 React 的最佳实践
|
|
54:34
|
[Music]
|
[音乐]
|
|
54:46
|
we first heard about react back in 2014 the Netflix website had been built using
|
2014 年 ，Netflix 网站是使用 Java web 构建的，
|
|
54:50
|
Java web uh it was very slow it took about 15 minutes to get up a build and
|
呃，它非常慢， 构建构建大约需要 15 分钟，
|
|
54:56
|
we decided to move to a more modern framework there we go now at the time we
|
我们决定转向一个更现代的 框架，我们现在就开始了，当时
|
|
55:02
|
weren't quite sure if you know this react thing was going to work out it was
|
我们不太确定你是否 知道这个 React 事情会成功，它
|
|
55:04
|
kind of new and so we were very apprehensive especially since we were
|
有点新，所以我们非常 担心，特别是因为我们正在
|
|
55:09
|
building the future of the next 10 years of the website right you know we make a
|
建设网站未来 10 年的未来， 你知道我们做得
|
|
55:13
|
bad choice now we got to backtrack um you know years worth of work and so
|
不好 现在的选择我们必须回溯， 嗯，你知道多年的工作，所以
|
|
55:17
|
we were very careful about you're not jumping into something that was too
|
我们非常小心，你不会 跳入太
|
|
55:20
|
bleeding edge and so what they did was they actually
|
前沿的东西 ，所以他们所做的是，他们实际上
|
|
55:23
|
pitted two teams against each other each was given 30 days to build a prototype
|
让两支球队互相对抗，每支球队 都得到了 30 几天来构建一个原型
|
|
55:27
|
with one being react and the other one being backbone and after 30 days the
|
，一个是反应，另一个 是主干，30 天后
|
|
55:31
|
choice was clear
|
选择很明确
|
|
55:35
|
so thank you all for coming out tonight we're really excited to have you here
|
所以感谢大家今晚的到来
|
|
55:37
|
and share the learnings that we've had building the new UI in react for the
|
-
|
|
55:40
|
past year it was not this stage it was our next
|
过去一年中 React 中的新 UI 这不是这个阶段，而是我们的下一个
|
|
55:43
|
stage over where I gave my react presentation back I guess in 2015.
|
阶段， 我想我在 2015 年给出了我的 React 演示文稿。
|
|
55:49
|
same feeling like oh my goodness I've got to convince all these people that
|
同样的感觉就像我的天哪， 我必须说服所有这些人
|
|
55:53
|
react is amazing
|
做出反应是 太棒了，
|
|
55:56
|
um but I guess it worked so as part of the team that built the new site using
|
但我想它是有效的，所以 作为团队的一员，一开始使用 React 构建新站点
|
|
56:00
|
react at first it was very clunky like you're writing components and they're
|
时，它非常笨拙，就像 你在编写组件一样，而且它们
|
|
56:04
|
not quite you know you're putting too much logic into them or you're thinking
|
并不完全你知道你在其中 放入了太多逻辑或者 你想
|
|
56:07
|
too big it's not clear the difference in the Paradigm and then you start to use
|
太多了 g 尚不清楚 范式中的区别然后你开始使用
|
|
56:12
|
it and you go okay wait wait wait I'm thinking much more Atomic hence the
|
它然后你就可以了等等等等我正在 考虑更多原子因此
|
|
56:16
|
symbol of react I'm thinking about this in individual reusability okay now I'm
|
反应的象征我正在 考虑个人可重用性好吧现在我在
|
|
56:21
|
thinking about the testability of these components I'm seeing the benefits now
|
想 关于这些组件的可测试性， 我看到了它现在带来的好处
|
|
56:24
|
come out of it I can reuse this over here we can test this over here we can
|
，我可以在这里重用它， 我们可以在这里测试它，我们可以在
|
|
56:28
|
change this here we can add props in here and it becomes very exciting to see
|
这里改变它，我们可以在这里添加道具 ，看到新范式变得非常令人兴奋
|
|
56:32
|
that new paradigm come to play and go this is going to be revolutionary this
|
来 来去去这将是革命性的
|
|
56:37
|
is going to change the world let's go back in time one year to the old Netflix
|
这将改变世界让我们 回到一年前的旧 Netflix
|
|
56:40
|
UI you guys might remember this one the overall look and feel is kind of like
|
用户界面你们可能还记得这个 整体的外观和感觉有点像
|
|
56:43
|
this old DVD kind of box art feel and so I actually want to show you one of the
|
这种旧的 DVD 盒子艺术的感觉，所以 我实际上想向您
|
|
56:48
|
early prototypes of what we thought the new UI would look like we knew that
|
展示我们认为新 UI 的早期原型之一， 我们知道
|
|
56:52
|
going forward the world was changing web was changed changing things were moving
|
未来世界正在发生变化，网络 正在发生变化，变化的事物发展得
|
|
56:56
|
faster and our competition was moving faster as well so choosing react and
|
更快，我们的竞争也发展 得更快 因此，选择 React
|
|
57:00
|
going with a more modern framework really helped us accelerate how fast we
|
并使用更现代的框架 确实帮助我们加快了
|
|
57:03
|
could build the website how fast we could get new changes that door how fast
|
构建网站的速度，我们可以以多快的速度 获得新的更改，我们可以以多快的速度
|
|
57:06
|
we could try improvements for our customers to make the best possible
|
为客户尝试改进 以获得最佳
|
|
57:10
|
experience
|
体验
|
|
57:13
|
and because of that we've been at the Forefront of leading what UI design
|
，因为 在 web 开发方面，我们一直 处于引领 UI 设计的最前沿，
|
|
57:17
|
looks like in terms of web development we've had a lot of companies copy us
|
我们有很多公司模仿我们
|
|
57:21
|
which we take is a great compliment but we were there first because of react and
|
，我们认为这是一个很好的赞美，但 我们首先在那里是因为 React
|
|
57:25
|
its ability to move so quickly in terms of design
|
及其移动能力 在设计方面如此之快，
|
|
57:28
|
this is how it ended up turning out and this is a UI that's big and immersive
|
这就是它最终的结果， 这是一个巨大的、身临其境的
|
|
57:33
|
and completely built in react so we're very very proud of it and the result
|
、完全内置于 React 中的 UI，所以我们 为此感到非常自豪，而结果
|
|
57:36
|
[Music] Netflix was now praising react publicly
|
[音乐] Netflix 现在公开称赞 React
|
|
57:44
|
and with a second big company betting big on react the framework grew in
|
并且 随着第二家大公司在 React 上押下重注 ，该框架越来越
|
|
57:49
|
popularity in fact it kind of took on a life of its own and the community
|
受欢迎，实际上它开始 了自己的生活，社区
|
|
57:54
|
started to take off
|
开始起飞
|
|
58:04
|
[Music] react at this point was getting more
|
[音乐] React 在这一点上变得越来越
|
|
58:10
|
popular and somebody on Twitter mentioned like
|
流行 并且 有人在 Twitter 上提到，
|
|
58:14
|
hey it would be cool to have like a react conference and a lot of people
|
嘿， 举办一个 React 会议会很酷，很多人
|
|
58:18
|
started like uh commenting and tweeting and everything about this and uh I went
|
开始喜欢，嗯，评论和推特， 以及关于这一切的一切，呃，我
|
|
58:22
|
to my manager tomokino and he was like there's like 50 tweets about react today
|
去找我的经理 tomokino，他 说今天有大约 50 条关于 React 的推文
|
|
58:27
|
like people are talking about organizing conferences should we organize a
|
就像人们在谈论组织 会议，我们是否应该组织一次
|
|
58:31
|
conference and I was like I don't know what that means I don't know how to do
|
会议，我当时想我不 知道那意味着什么，我不知道该怎么做
|
|
58:34
|
that but like maybe I was very post doing a conference um I thought it was
|
，但也许我很想 参加会议，嗯，我觉得这
|
|
58:39
|
very cool that we got so much traction without really pouring marketing money
|
很酷 即使 React 来自大型科技公司 Juggernaut Facebook，我们也没有真正投入营销资金就获得了如此大的吸引力 ，
|
|
58:46
|
into it even though react came from big tech company Juggernaut Facebook it was
|
这是
|
|
58:51
|
a small group of people that were like really dedicated to seeing this thing
|
一小群人，他们 真的致力于看到这件事的
|
|
58:54
|
succeed so it felt like this very Indie you know Rebel Alliance type of project
|
成功，所以感觉就像你知道的独立游戏 Rebel 联盟类型的项目
|
|
59:00
|
and so I was like we don't need a user conference like with like we got this
|
，所以我觉得我们不需要 像我们有这种
|
|
59:05
|
Cool vibe going on like let's see how far we can push it I was totally wrong
|
酷氛围一样的用户会议，让我们看看 我们能把它推到多远我完全错了
|
|
59:09
|
we had said to ourselves I think it would be fun to host a react conference
|
我们说 d 对我们自己，我认为 主持一个 React 会议会很有趣，
|
|
59:12
|
but are there even enough people using react who would want to go to that and
|
但是是否有足够多的人使用 React 想要参加那个会议，
|
|
59:17
|
eventually we decided Well let's try it let's try to host the conference and see
|
最终我们决定好吧，让我们尝试一下， 让我们尝试主持会议，
|
|
59:21
|
how it goes within a minutes all of the tickets were
|
看看它是如何 进行的 分钟所有的票都
|
|
59:26
|
sold out and we actually crashed the website that we are handled for like the
|
卖光了，我们实际上崩溃了 我们处理的网站，比如
|
|
59:31
|
actual payment system and everything
|
实际的支付系统，一切都
|
|
59:36
|
trap the CTO of Facebook actually like reach out to me saying like hey I have
|
让 Facebook 的 CTO 陷入困境，实际上就像联系 我说，嘿，我有
|
|
59:42
|
this very important like VP or CTO or like of some company that one scene that
|
这个非常重要的东西，比如副总裁或 CTO 或 就像一些公司，一个
|
|
59:47
|
couldn't get in like hey can you do as a favor and I was like I would love to
|
无法进入的场景，比如嘿，你能 帮个忙吗，我想我
|
|
59:53
|
like kill the CTO and everything but like you know like we're like completely
|
很想杀了首席技术官和一切，但 就像你知道的，就像我们已经完全
|
|
59:57
|
booked certainly we were very surprised about how quickly the tickets had sold
|
预订好了，当然我们非常 对门票售罄的速度感到惊讶
|
|
1:00:01
|
out we didn't realize just how much the react ecosystem had grown and just how
|
我们没有意识到 React 生态系统已经发展了
|
|
1:00:06
|
much enthusiasm had been created by early adopters
|
多少，以及 早期采用者
|
|
1:00:12
|
foreign [Music]
|
外国 [音乐]
|
|
1:00:25
|
quickly as far as conference planning goes and we just had it on campus in one
|
就会议计划而言迅速创造了多少 热情 s，我们刚刚在校园里
|
|
1:00:29
|
of our cafes and we you know bus people from the nearest hotel and it was very
|
的一家咖啡馆里吃了它，我们知道 最近酒店的巴士人员，它
|
|
1:00:35
|
very under produced um but it worked out really really well
|
的产量非常低， 嗯，但效果非常
|
|
1:00:40
|
good morning everyone and welcome to react Jessica
|
好，大家早上好 ，欢迎在会议上对杰西卡做出反应
|
|
1:00:46
|
the conference when they're like extremely extremely well as the
|
，当他们 作为
|
|
1:00:49
|
organizer of the conference I'm so excited to be here and we open source
|
会议的组织者，我非常非常 高兴能来到这里，我们开源
|
|
1:00:54
|
like a bunch of our projects like so react native and we started talking
|
了很多项目，比如 React Native，我们开始
|
|
1:00:57
|
about graphql about three day and so yeah it's been a massive success there
|
讨论 graphql 大约三天，所以 是的，这是一个巨大的 成功就
|
|
1:01:02
|
is this moment where you go and you see the stage and it's like there's a giant
|
在这一刻，你去那里，你看到 了舞台，就像有一块巨大的
|
|
1:01:07
|
wood cut out like logo of the react atom and
|
木头 被切割成反应原子的标志，
|
|
1:01:12
|
I was like my friend Michael the designer at Instagram drew that in front
|
我就像我的朋友迈克尔一样 ，Instagram 的设计师在我面前画了它，
|
|
1:01:17
|
of me like in the middle of the night before we were going to open sources
|
就像在中间一样 在我们要开源的前一天晚上，
|
|
1:01:20
|
thing because we needed a logo and I was like Michael just like throw something
|
因为我们需要一个标志，我 就像迈克尔一样，很快就把一些东西
|
|
1:01:22
|
together real quick and like now it's this thing that has somebody has built a
|
放在一起，就像现在有人
|
|
1:01:27
|
giant sign with this on it and there's something about the physical impact of
|
用这个在我身上做了一个巨大的标志 t 并且有 一些关于它的物理影响
|
|
1:01:30
|
that that's really cool that was the moment when it dawned on me that react
|
真的很酷那是 当我意识到反应
|
|
1:01:34
|
was becoming something different you know so for a long time what react
|
正在变得不同 你知道的那一刻所以很长一段时间
|
|
1:01:39
|
was to me was a software project and the reason why I wanted people to
|
对我来说反应是一个软件项目 以及我想要的原因 人们
|
|
1:01:44
|
adopt it was because I really thought it would make their software better and
|
采用它是因为我真的认为它 会让他们的软件更好，
|
|
1:01:47
|
make their lives better and make their on-call rotations better there are a lot
|
让他们的生活更美好，让他们 的值班轮换更好有
|
|
1:01:51
|
of reasons why I thought it would help them
|
很多原因我认为它会
|
|
1:01:54
|
after that conference what I realized is that react was becoming a community
|
在那次会议后帮助他们我意识到的 是反应 正在成为一个社区
|
|
1:01:57
|
there was meetups that would happen the immediate next week that would have an
|
，下周将举行聚会，届时 将有更多的
|
|
1:02:02
|
expanded audience that they could go deeper into some of the things that were
|
听众，他们可以 更深入地讨论所讨论的一些事情，这
|
|
1:02:05
|
discussed was really really cool and a huge recognition for us that the
|
真的很酷，并且 对我们来说是一个巨大的认可，
|
|
1:02:09
|
community was going to be an incredible part of what would make
|
社区将成为 使 React 起作用的令人难以置信的部分，
|
|
1:02:14
|
react work and had at that point was definitely already a really important
|
并且在那个时候 肯定已经是到目前为止
|
|
1:02:18
|
part of what had gotten react to that point so far
|
对那个点作出反应的非常重要的部分
|
|
1:02:21
|
[Music] it's proven to me that uh engaging with
|
[M usic] 它向我证明，呃，参与
|
|
1:02:26
|
your open source Community is is actually more important than the
|
你的开源社区 实际上比
|
|
1:02:30
|
technical work itself like if you don't have a community you don't have an open
|
技术工作本身更重要，如果你 没有社区，你就没有
|
|
1:02:33
|
source project I'm excited that we just continue rethinking best practices I
|
开源项目，我很高兴我们 继续 重新思考最佳实践 我
|
|
1:02:37
|
want to thank this community for making it possible for us to keep investing in
|
要感谢这个社区 让我们能够继续
|
|
1:02:40
|
this and keep working on it um that's all I got thanks
|
投资并继续努力 嗯，这就是我所得到的感谢，
|
|
1:02:47
|
it was a real high point for not just for me but for the team and you know I
|
这不仅对我而且对团队来说都是一个真正的高点 ，你知道我
|
|
1:02:52
|
think for Facebook engineering I think we really felt like
|
想想 Facebook 的工程，我认为 我们真的感觉
|
|
1:02:57
|
not just validated but like we were actually like doing something that
|
不仅仅是经过验证，而且我们 真的喜欢做
|
|
1:03:01
|
people cared about and it was a really really good feeling
|
人们关心的事情 ，这种感觉真的非常好，它已经
|
|
1:03:05
|
it was already like more widely used within the company but now it was like
|
在公司内部得到更广泛的使用，但现在感觉
|
|
1:03:09
|
okay how do we like actually start converting everything to react how do we
|
很好 我们是否真的喜欢开始 转换一切以做出反应 我们如何
|
|
1:03:14
|
like remove and deprecate like all of the other Frameworks and really like
|
像所有其他框架一样删除和弃用 并且真的很喜欢
|
|
1:03:18
|
double down on react oh hey I was going going from like an interesting product
|
加倍努力 哦嘿我 正从一个有趣的产品开始
|
|
1:03:23
|
to like this is the next big thing so it was really like a really amazing time to
|
喜欢这是下一件大事，所以 这真的是一段非常棒的时光，
|
|
1:03:28
|
be around and to like really like get the whole company like working together
|
真的很喜欢 让整个公司像一个人一样一起工作
|
|
1:03:31
|
as one uh you know to like make this happen
|
，嗯，你知道喜欢让这一切 发生
|
|
1:03:36
|
let's see I have some keepsakes up here which will be not easy for me to get
|
让我们看看我有一些纪念品 在这里 这对我来说不容易
|
|
1:03:44
|
down but
|
下来但
|
|
1:03:47
|
let's see I have some stickers oh this is a fun
|
让我们看看 我有一些贴纸哦这是一个有趣
|
|
1:03:52
|
one this is the first ever react die cut sticker
|
的这是有史以来第一个反应模切 贴纸
|
|
1:03:57
|
we ordered like a bunch of these and put them on our laptops and I just I never
|
我们订购了一堆这些并将 它们放在我们的笔记本电脑上我只是我 从来
|
|
1:04:00
|
wanted to use the last one that I had Facebook open source stickers
|
不想使用我拥有的最后一个 Facebook 开源贴纸
|
|
1:04:06
|
oh some of these will be a trip down memory lane for folks react conf we made
|
哦，其中一些将 成为人们的记忆之旅我们让
|
|
1:04:11
|
you know 2018 Facebook open source
|
你知道 2018 年 Facebook 开源
|
|
1:04:15
|
it's a good one react conf attendee badge
|
它是一个很好的 React conf 与会者 徽章
|
|
1:04:19
|
this was a book uh from the original react.js conf at Facebook's headquarters
|
这是一本书呃 来自 Facebook 总部的原始 react.js conf，
|
|
1:04:25
|
so this had a list of the speakers and the schedule and
|
所以这里有演讲者名单 和日程表，
|
|
1:04:30
|
um here's the Keynote and Christopher shadow
|
嗯，这是 Keynote 和 Christopher shadow，
|
|
1:04:35
|
we had all sorts of swag made and a bunch of other stuff so
|
我们制作了各种各样的 赃物和其他一些东西，
|
|
1:04:40
|
pretty good stuff pretty good memories
|
非常好， 非常好的记忆
|
|
1:04:46
|
dated with questions from the community and a new developer enters reacts orbit
|
ies 与来自社区的问题 和一个新的开发人员进入反应轨道
|
|
1:04:55
|
[Music]
|
[音乐]
|
|
1:05:12
|
what should I do with my hands
|
我应该用我的手做什么
|
|
1:05:17
|
so you're saying that I should actually uh start like uh let me Focus for a
|
所以你说我实际上应该 呃开始就像呃让我专注一
|
|
1:05:22
|
second just for the record I did not create react react was created by Jordan
|
秒钟只是为了记录我没有 create react react 是由 Jordan walk 创建的
|
|
1:05:27
|
walk I worked at a small startup we were
|
我在一家小型初创公司工作，我们正在
|
|
1:05:32
|
creating a sort of a digital publishing platform so there was a really complex
|
创建一种数字发布 平台，因此有一个非常复杂的
|
|
1:05:37
|
post editor with different blocks or like a scrollable text with like
|
后期编辑器，具有不同的块或 类似具有
|
|
1:05:42
|
different effects and stuff and so uh creating a dynamic kind of interactive
|
不同效果和内容的可滚动文本，所以呃 创建
|
|
1:05:46
|
editor for for these things was really difficult and we returned it with
|
对于这些东西，一种动态的交互式编辑器真的很 困难，我们用骨干返回了它
|
|
1:05:50
|
backbone I kind of wanted to give react a try because it was supposed to solve
|
我有点想尝试一下反应， 因为它应该解决
|
|
1:05:54
|
this problem the first react component I wrote was a
|
这个问题 我写的第一个反应组件是一个
|
|
1:05:57
|
like button so it was just like a button you click it and it says like you like
|
喜欢的按钮，所以它只是 就像一个按钮， 你点击它，它会说你喜欢
|
|
1:06:01
|
this or you and somebody like this or you and like 40 others like this so
|
这个或者你和某个人喜欢这个或者 你和其他 40 个这样的人喜欢这样
|
|
1:06:08
|
there was a bit of like a split and logic and then the way you would Express
|
所以有点像分裂和 逻辑然后你会的方式
|
|
1:06:11
|
this in uh like in other Frameworks at the time uh like you had you had to kind
|
就像当时在其他框架中一样表达这个， 就像你
|
|
1:06:17
|
of manually like watch what's changed and like update it and in react you
|
不得不手动观察发生了什么变化 ，喜欢更新它，作为反应，你
|
|
1:06:21
|
could just say if nobody liked this show this if one person like this show this
|
可以说如果没有人喜欢这个显示 这个如果一个人喜欢这个显示这个
|
|
1:06:25
|
otherwise show this and like it's a very natural way to write this kind of code
|
否则 展示这个，就像这是 编写这种代码的一种非常自然的方式
|
|
1:06:30
|
and yeah I just wrote that button and I was like yeah that looks good ship it
|
，是的，我刚刚写了那个按钮， 我说是的，看起来不错
|
|
1:06:35
|
and so we actually rewrote the entire app in react over the course of like 90
|
，所以我们实际上在大约 90 个月的时间里重写了整个应用程序以做出反应
|
|
1:06:41
|
months while still shipping new features so react speed up our development so
|
，同时 仍在发布新功能， 因此 React 大大加快了我们的开发速度，
|
|
1:06:46
|
much that we were able to add new features faster at the same time as we
|
以至于我们能够 在替换旧功能的同时更快地添加新
|
|
1:06:50
|
were replacing old features that's why I really kind of fell in love with it
|
功能，这就是为什么我 真的有点爱上它
|
|
1:06:58
|
a lot of things didn't exist back then like there was no such thing as a react
|
了很多东西不存在 那时候 好像没有反应
|
|
1:07:01
|
ecosystem so if you needed something it didn't exist you'd have to write it
|
生态系统这样的东西所以如果你需要 它不存在的东西你必须写它
|
|
1:07:07
|
so like you'd have to figure out how to do it because otherwise you're not going
|
所以你必须弄清楚如何 去做因为否则你
|
|
1:07:11
|
to have a product right so that's kind of what I did for a bunch of things
|
不会 有一个正确的产品 我做了很多事情，
|
|
1:07:16
|
one of those projects in particular was uh
|
其中一个项目特别是 呃
|
|
1:07:20
|
like I just saw like a big opportunity there
|
，我只是看到了一个巨大的机会， 当时
|
|
1:07:24
|
it was called react hot loader at the time so I wanted to give a talk about
|
它被称为 React 热加载器， 所以我想谈谈
|
|
1:07:28
|
that somebody else has done a talk that
|
别人已经做了一个
|
|
1:07:31
|
mentioned it earlier at reactant a really clever fellow called Damn abramov
|
早些时候在 reactant 上提到它的谈话是一个 非常聪明的家伙，名叫 Damn abramov
|
|
1:07:36
|
figured this out and he created the react hotloader and I felt that well
|
，他想出了这个，他创建了 react 热加载器，我觉得那很好
|
|
1:07:40
|
then that just wouldn't be interesting because people kind of already saw it
|
，那只是不会有趣， 因为人们已经看到了
|
|
1:07:44
|
which in retrospect I don't think it would be true but that's how I saw it at
|
它，回想起来我没有 我认为这是真的，但当时我就是这么看的，
|
|
1:07:48
|
the time so I wanted to kind of spice it up a little bit and I wanted to make a
|
所以我想 稍微加点趣味，我想
|
|
1:07:52
|
proof of concept of a thing I saw in breath Victor's demo that is often
|
证明我在呼吸中看到的东西的概念证明 维克多的演示通常
|
|
1:07:57
|
referred to as time traveling you're designing something embedded in
|
被称为 时间旅行 你在设计一些嵌入
|
|
1:08:02
|
time you need to be able to control time you need to be able to see across time
|
时间的东西 你需要能够控制时间 你需要能够看到时间
|
|
1:08:06
|
otherwise you're designing blind I didn't really know how to do it but I
|
否则你在盲目设计 我真的不知道该怎么做 但我
|
|
1:08:10
|
thought that's a cool idea for a talk so I'm gonna send the proposal if the
|
认为这是一个很酷的主意 谈一谈，所以 我走了 nna 发送提案，如果
|
|
1:08:14
|
proposal is successful then I'll just figure it out and it turned out that the
|
提案成功，那么我会 弄清楚，结果证明该
|
|
1:08:18
|
proposal was more successful than I thought it would be and so I made a
|
提案比我 想象的更成功，所以我为此做了一个
|
|
1:08:22
|
proof of concept for that and that approval concept became known as Redux
|
概念证明，这个 批准概念被称为 Redux
|
|
1:08:28
|
so my talk is about developer tools because react and hotel ordering and
|
所以我的演讲是关于开发者工具的， 因为 React 和酒店预订以及
|
|
1:08:33
|
time travel these are all developer tools he was like literally creating
|
时间旅行这些都是开发者 工具，他就像字面意思一样创建
|
|
1:08:37
|
Redux in service of being able to deliver this this talk and I called it
|
Redux 来服务于能够 提供这个演讲，我称之为
|
|
1:08:42
|
presentation driven development because the Thing That Shook out of it was you
|
演示驱动的开发 因为 That That Shook out 几年来，你
|
|
1:08:47
|
know this sort of like canonical State Management library for react apps for
|
知道这种类似 React 应用程序的规范状态管理库
|
|
1:08:50
|
for several years most of my work is around the react ecosystem because
|
，我的大部分工作都是 围绕 React 生态系统的，因为
|
|
1:08:54
|
that's what inspired me to contribute to the open source in the first place but
|
这首先激发了我为开源做出贡献， 但
|
|
1:08:59
|
there are two particular projects that I'm going to talk about today it was
|
有两个特定的项目 我今天要谈论的话题
|
|
1:09:03
|
very validating to give that talk
|
发表那个演讲是非常有效的，
|
|
1:09:07
|
but I was not surprised by the response because well I I had my
|
但我对回应并不感到惊讶， 因为我有我的
|
|
1:09:14
|
doubts but also I thought the talk was good like I thought it's a really good
|
怀疑，但我也 认为演讲 很好，就像我认为这是一次非常好的
|
|
1:09:18
|
talk and I was glad that people also liked it
|
演讲 ，我很高兴人们也喜欢它，
|
|
1:09:23
|
but I think it was actually not the talk that was uh that was really like the
|
但我认为这实际上不是演讲 ，呃，那对我来说真的很像那
|
|
1:09:27
|
moment for me I think it was just like being there
|
一刻，我认为就像 在那里一样
|
|
1:09:31
|
I kind of felt like you know like like going to Hogwarts for the first time I
|
我有点像你知道 的第一次去霍格沃茨的感觉
|
|
1:09:36
|
think it kind of had this uh this feeling because there were all these
|
，我觉得有这种 感觉，因为有很多
|
|
1:09:39
|
people who I only knew them as these avatars and when I season meet somebody
|
人，我只知道他们是这些 化身，当我遇到某人时
|
|
1:09:44
|
in person they they kind of become three-dimensional of course you kind of
|
，他们是他们 有点变成 三维的当然你有点
|
|
1:09:48
|
see the whole picture and I think it was just like such a wholesome feeling is
|
看到全貌我认为这 就像一种健康
|
|
1:09:53
|
the feeling that we are all trying to figure out what we can do with this
|
的感觉是我们都在努力 弄清楚我们可以用这个东西做什么但
|
|
1:09:58
|
thing and we don't know it yet and we're just playing with it
|
我们不知道的感觉 它还没有，我们 只是在玩它
|
|
1:10:05
|
that's also where I met jinchan I asked for for her advice before because she's
|
，这也是我遇到 jinchan 我 之前征求她的意见因为她是
|
|
1:10:11
|
one of the co-creators of the fox architecture so it was nice to meet her
|
fox 架构的共同创造者之一 所以很高兴见到
|
|
1:10:16
|
in person and she mentioned that actually Facebook is hiring in London
|
她，她提到 实际上 Facebook 在伦敦招聘
|
|
1:10:20
|
and so they arranged an interview for me right at the conference which was like
|
所以他们在会议上为我安排了一次采访， 这就像
|
|
1:10:25
|
our normal interview process the same I think like four interviews or something
|
我们正常的采访过程一样，我 想是四次采访或类似的事情，
|
|
1:10:28
|
like this but I I missed the second day of the conference but we just did an
|
但我错过 了会议的第二天，但我们只是在那里做了
|
|
1:10:32
|
interview there and so that's kind of how I got into Facebook
|
一次采访，所以这就是 我是如何进入 Facebook 的，
|
|
1:10:36
|
we just quickly grabbed them out of the conference a little bit like on the down
|
我们很快就把他们从 会议中拉了出来，有点像
|
|
1:10:41
|
low and then uh conducted the interviews um in the basement of a hotel I think is
|
低调，然后 呃在酒店的地下室进行了采访，我
|
|
1:10:48
|
that normal entries no Dan is so special he's always been all special I guess
|
认为正常的条目没有 Dan 如此特别， 他总是 非常特别我
|
|
1:10:54
|
like I would think of myself as like maybe the first
|
想我会认为自己 可能是
|
|
1:10:57
|
member of what would become the react team as you know it today because I
|
今天你所知道的 React 团队的第一个成员，因为我
|
|
1:11:03
|
joined a little bit earlier than I think Andrew Brian Luna and and like a bunch
|
加入的时间比我想象的要早一点 Andrew Brian Luna 和
|
|
1:11:09
|
of other people who work with us now and I joined at the time when a few people
|
其他一些人一样 现在和我们一起工作的人， 我加入的时候有几个
|
|
1:11:14
|
who worked with us before were just about to leave so I was kind of in this
|
以前和我们一起工作的人 正要离开，所以我有点处于这个
|
|
1:11:19
|
transitional period when the team was changing a lot
|
过渡时期，当时团队正在 改变很多
|
|
1:11:23
|
foreign
|
外国
|
|
1:11:26
|
[Music] do you remember the first time you met
|
[Musi c] 你还记得你第一次见到安德鲁吗
|
|
1:11:34
|
Andrew uh I think I've met
|
呃 我想我见过
|
|
1:11:37
|
I think I met him yeah well that was the clear moment maybe was that the first
|
我想我见过他 是的 很好 那是一个 清晰的时刻 也许是我们第
|
|
1:11:44
|
time we actually did you get invited to react conf because of that he had a
|
一次真正见面 你被邀请 参加会议 因为他有 一次
|
|
1:11:48
|
speech
|
演讲
|
|
1:11:51
|
I met him like I think before that I met you and Sophie and Joe and Tim like all
|
我遇到他就像我想的那样 我在同一周遇到了 你和 Sophie、Joe 和 Tim
|
|
1:11:56
|
in the same week yeah he started asking some questions that were very similar to
|
是的，他开始问 一些问题，
|
|
1:12:01
|
the questions that on the team we were talking about internally and so I just
|
这些问题与我们在团队 内部讨论的问题非常相似，所以我
|
|
1:12:04
|
remember like I gotta connect you with like Sebastian and Jordan and the rest
|
请记住，就像我要把你和 塞巴斯蒂安、乔丹以及团队的其他
|
|
1:12:08
|
of the team yeah and then also I was like to the recruiters I was like yeah
|
成员联系起来，是的，然后 我对招聘人员说，是的，
|
|
1:12:10
|
this guy like we gotta hire this Andrew guy and I think we were really fortunate
|
这个人就像我们要雇用这个安德鲁 人一样，我认为我们很早就很幸运
|
|
1:12:15
|
early on to have a bunch of people liking that kind of stepped up and they
|
了 有一群人 喜欢这种进步，
|
|
1:12:18
|
were like this seems cool I just want to be a part of this I just want to help
|
他们就像这样看起来很酷我只是想 成为其中的一部分我只是想帮忙
|
|
1:12:21
|
I didn't realize it was kind of like a freshman class sort of feeling at the
|
我没有意识到这有点像 新生班 时间
|
|
1:12:25
|
time started managing the team around that
|
开始管理团队 那个
|
|
1:12:28
|
time as well um and like I couldn't have really asked
|
时候也是， 嗯，就像我真的不能
|
|
1:12:31
|
for a better uh both project and like a set of colleagues and team to to join
|
要求一个更好的项目，就像 一群同事和团队一样加入
|
|
1:12:36
|
the beginning of phase two yeah that's cool
|
第二阶段的开始是的，这 很酷
|
|
1:12:40
|
[Music]
|
[音乐]
|
|
1:12:49
|
like man we're nailing this
|
就像我们正在搞定这个
|
|
1:12:55
|
[Music] react was now out of the hands of its
|
[音乐] React 现在已经脱离了其
|
|
1:13:00
|
Founders it was ready to take on New Life in the care of a new community
|
创始人的控制，它已经准备好在 一个新的社区
|
|
1:13:05
|
grown and future-minded team we tried to watch some of the numbers like the
|
成长和具有未来意识的团队的照顾下开始新的生活我们试图 观察一些数字，比如
|
|
1:13:11
|
number of GitHub stars or the number of npm downloads on Google Trends how many
|
GitHub 星数或 Google Trends 上的 npm 下载数量 有多少
|
|
1:13:16
|
people are searching for react and none of those numbers are perfect but
|
人在搜索 React ，这些数字都不是完美的，但
|
|
1:13:22
|
basically all of them kept going up over time and eventually got to a point where
|
基本上所有这些数字都随着 时间的推移不断上升，最终达到了
|
|
1:13:29
|
we looked at it and said oh yeah like millions of people essentially are using
|
我们看到它并说哦，是的，就像 数百万人一样 本质上是在使用
|
|
1:13:34
|
react there are a lot of little details in how we did things that encourages
|
React 在我们如何做一些
|
|
1:13:40
|
an ecosystem to participate that were critical Parts on making it what it is
|
鼓励生态系统参与的事情上有很多小细节，这些细节是 关键部分使它成为
|
|
1:13:46
|
today we didn't put everything in the framework we left a lot of it to the
|
今天的样子我们没有把所有东西都放在 框架中我们把很多东西留给了
|
|
1:13:51
|
ecosystem to innovate and we got a lot of contributions we got a lot of
|
生态系统到 创新，我们得到了 很多贡献，我们得到了很多
|
|
1:13:55
|
interest that way we got a lot of things spurring from that it was not ever a
|
兴趣，这样我们得到了很多 刺激，这从来都不是一个
|
|
1:14:03
|
foregone conclusion I like it's still surreal to me that it's as popular as it
|
已成定局的结论，我喜欢它对我来说仍然是 超现实的，因为它和它一样受欢迎，
|
|
1:14:07
|
is it's this great example of this like Underdog technology within a big company
|
这是一个很好的例子 这就像 一家大公司中的 Underdog 技术
|
|
1:14:12
|
where there could have been these forces that really pushed back on it I think a
|
，那里可能有这些 力量真的阻碍了它，我认为
|
|
1:14:17
|
lot of elements of good timing Good Fortune good luck good leadership
|
很多好时机的元素 好运好运好领导
|
|
1:14:22
|
support all sort of like aggregated to allow react to be a success that had we
|
支持所有类似的聚合 让反应成功 如果我们
|
|
1:14:28
|
missed a few of those or had a handful more things failed instead of succeeded
|
错过了其中的一些，或者有 更多的事情失败了而不是成功了，
|
|
1:14:33
|
then I do not think react would be in the spot that it is today
|
那么我认为反应不会 像今天这样，
|
|
1:14:37
|
I feel like you can't take anyone out of it and have it be what it became I think
|
我觉得你不能把任何人从中带走 ，让它成为什么 我想
|
|
1:14:43
|
in the early days obviously Jordan right like this thing wouldn't exist and then
|
在早期，显然乔丹是对的， 就像这件事不会存在一样，然后
|
|
1:14:46
|
Jing Chan just absolutely critical I mean she was so instrumental in the
|
Jing Chan 绝对是至关重要的，我的 意思是她在 React 的早期发挥了如此重要的作用，
|
|
1:14:51
|
early days of react that it just wouldn't have been a thing that we cared
|
以至于我们无法做到这一点
|
|
1:14:54
|
about if it didn't prove itself and then Shane O'Sullivan is responsible
|
担心它是否不能证明自己 然后 Shane O'Sullivan
|
|
1:14:59
|
for you know really I mean a very hard decision to like I'm gonna go this path
|
负责你知道真的我的意思是一个非常艰难的 决定喜欢我要走这条路
|
|
1:15:05
|
instead of that thing and then the engineers that worked on refining and
|
而不是那条路然后 致力于改进和迭代的工程师
|
|
1:15:08
|
iterating on it and turning it into something good it was Chateau and Paul
|
Chateau 和 Paul
|
|
1:15:12
|
shantacy and Pete hunt and my manager Adam wolf when I was like you know
|
shantacy 以及 Pete Hunt 和我的经理 Adam wolf 就在上面并将其变成了好东西，当时我就像你知道的那样
|
|
1:15:16
|
asking all these questions about like should we be do like is this even worth
|
问所有这些问题， 比如我们应该怎么做，这是否值得
|
|
1:15:20
|
it especially after JS conf when we were feeling defeated you know he was there
|
，尤其是在 JS conf 之后，当我们 感觉被打败了，你知道他在
|
|
1:15:24
|
to pick me back up and be like no look it is delivering value this is good keep
|
那里接我回来，好像没有， 它正在创造价值，这很好，继续
|
|
1:15:28
|
going and there's different phases too right you have the early early days and
|
前进，也有不同的阶段， 你有早期的早期，
|
|
1:15:31
|
you had the like for the next literally almost we're going on 10 years now with
|
你有类似的下一个字面意思 几乎我们 与
|
|
1:15:36
|
Sebastian's technical leadership and Andrew and Dan and Dominic and flarney
|
Sebastian 的技术领导以及 Andrew、Dan、Dominic、flarney
|
|
1:15:41
|
and Sophie and I I just feel like it's just a group of incredible people and if
|
和 Sophie 以及我一起工作了 10 年，我只是觉得这 只是一群不可思议的人，如果
|
|
1:15:48
|
you take any of them out of it it just looks pretty different it was
|
你把他们中的任何一个从中剔除，它 就会看起来 非常不同，这
|
|
1:15:53
|
really a team effort uh it was really a team effort from the
|
真的是团队的努力， 呃，从一开始就真的是团队的努力
|
|
1:15:57
|
very beginning
|
-
|
|
1:16:04
|
[Music] says that awesome Solutions are rarely
|
[音乐] 说，很棒的解决方案很少
|
|
1:16:10
|
created by large organizations it's almost always one person with passion
|
是由大型组织创造的，它 几乎总是一个有激情
|
|
1:16:14
|
and vision that slowly start to infect others this is this is a great summary
|
和远见的人慢慢开始感染 其他人，这是 这是
|
|
1:16:20
|
of how react became react because it was never inevitable it was always this wild
|
对反应如何变成反应的一个很好的总结，因为 它从来都不是不可避免的，总是这个疯狂的
|
|
1:16:26
|
idea that kept Gathering momentum person by person and any expected react to fail
|
想法让一个人一个人地聚集动力 ，任何预期的反应都会失败
|
|
1:16:32
|
and if it weren't for the hard work of a few determined developers it very well
|
，如果不是 一些坚定的开发人员的辛勤工作，它 很
|
|
1:16:38
|
could have
|
可能
|
|
1:16:42
|
this is just the beginning of the react story the story of how a community
|
这只是 React 故事的开始 社区如何
|
|
1:16:47
|
transformed an underdog UI Library into the most popular JavaScript framework
|
将失败者 UI 库转变为 当今最流行的 JavaScript 框架的故事
|
|
1:16:52
|
today
|
|
|
1:16:56
|
this is react podcast I'm fantastic
|
这是 React 播客 我太棒了
|
|
1:17:03
|
[Music]
|
[音乐]
|
|
1:17:18
|
[Music]
|
[音乐]
|
|
1:17:27
|
thank you
|
谢谢你
|
|
1:17:31
|
I'm like so tempted to just prize FaceTime Jordan right now be like
|
我是 就像 现在很想奖励 FaceTime Jordan 就像
|
|
1:17:36
|
interview it's just really strange to think that
|
接受采访一样 认为
|
|
1:17:41
|
you're just so close to death the first reactive shirt that we made
|
你离死亡如此之近真的很奇怪我们制作的第一件 活性衬衫
|
|
1:17:49
|
thousands of developers find jobs across Europe using Honeypot if you're up for a
|
如果你准备好在
|
|
1:17:53
|
new challenge in one of these European cities sign up at honeypot.io
|
这些欧洲城市之一迎接新的挑战，
|
|
1:17:58
|
if you want to see more Tech documentaries then subscribe so you
|
那么开发人员会在欧洲使用 Honeypot 找到工作。
|
|
1:18:02
|
don't miss the next one
|
-
|
|
1:18:07
|
[Music]
|
音乐]
|