00:28 fox jumps over the lazy dog
00:33 this is react podcast I'm chantastic
00:36 today we're going back way back back to
00:40 the beginning of react
00:42 10 years in the rear view mirror it may
00:45 feel like react was always going to
00:47 succeed did a framework by Facebook was
00:50 too big to fail but this isn't that kind
00:52 of story in fact there were many times
00:55 in reacts history where it seemed like
00:57 it wasn't going to succeed at all
01:00 so what happened how did react go in 10
01:04 years from looking Dead on Arrival to
01:07 becoming the dominant front-end
01:09 JavaScript framework that it is today
01:12 it starts at Facebook in 2011 jQuery and
01:16 backbone are dominating front-end
01:17 JavaScript but more opinionated tools
01:20 like Ember angular knockout are already
01:23 on the scene in the outside world
01:25 Gangnam Style has just been uploaded to
01:28 YouTube Call Me Maybe is topping the
01:30 charts and the freshest meme is the
01:33 overly attached girlfriend in Internet
01:35 years it's basically been an eternity so
01:38 strap in set yourself away enable that
01:41 do not disturb because this is quite the
01:57 but this one doesn't
02:03 just keep it on with this
02:06 testing one two testing
02:36 work at Facebook I told my mom I was
02:38 like really excited The Social Network
02:40 the movie had just come out and she had
02:42 you know seen it recently and she was
02:45 actively discouraging me from joining
02:47 because she was like Mark Zuckerberg
02:49 doesn't seem like a very nice boy
02:50 Facebook in the time I was there was I
02:54 don't think they'll be anything like it
02:55 ever again it was certainly not like
02:57 anything that I had experienced before
02:59 in fact just a couple months after I
03:01 joined Kanye West came to visit
03:03 Facebook's campus and he got up on a
03:07 table in the cafe and you know wrapped a
03:09 few bars and I was working mostly with
03:12 this guy who had just graduated from
03:14 college and I was trying to explain to
03:16 him you know I've worked these crap jobs
03:18 in software at that point had been like
03:21 10 or 15 years nothing like this ever
03:24 happens not to software Engineers you're
03:27 my stressing your mama sues Mama say
03:29 Mama say Mama Don the son JavaScript at
03:33 I think was going through this little
03:35 bit of an existential crisis as to
03:37 whether it was like a real programming
03:40 or a toy programming language and so
03:44 there was a lot of churn so you had
03:46 jQuery was popular and moo tools was
03:48 popular and there was so many different
03:49 like warring Frameworks to try to get
03:52 the Mind share and there's a lot of
03:53 similarities between them but each one
03:55 had its kind of bespoke differences and
03:57 none of them were actually really
03:58 fantastic for building really kind of
04:01 complicated user interfaces and apps
04:03 there was this trend towards more
04:06 sophisticated applications that do more
04:07 stuff and at Facebook we still had a
04:10 primarily sort of server rendered
04:12 technology stack which
04:15 um you know one of the things that we
04:16 fought against for a really long time
04:18 was just growing JavaScript bundle sizes
04:20 so as we moved more and more stuff to
04:22 the client the client got slower and
04:24 slower so we actually swung the pendulum
04:26 towards server-side rendering and
04:27 towards you know minimal amounts of
04:29 JavaScript for a while and there was
04:31 this feeling that we knew that what we
04:33 were doing for client-side development
04:35 wasn't working but also that server side
04:38 wasn't going to get us all the way there
04:40 so I think that was the kind of
04:43 environment that react came out of
04:57 I joined Facebook back in 2010 I've been
05:00 doing a lot of Open Source work
05:02 particularly in the JavaScript world I
05:05 was a committer on the dojo.js toolkit
05:07 back in the day which is one of the the
05:09 granddaddies of the JavaScript movement
05:11 along with prototype and jQuery
05:13 I spent my first two years of Facebook
05:18 we had started off a big push to compete
05:21 with Apple and Google and we thought
05:23 that our best chance of success as a
05:25 company was to go directly to the web
05:28 and really push to build out the HTML5
05:30 ecosystem so as part of that we
05:36 two other Engineers called Vladimir
05:38 khalestikov and will Bailey built a
05:40 framework called bolt JS so named
05:42 because we bolted together a bunch of
05:44 things that each of us liked bolt was
05:46 basically more or less
05:49 Facebook's implementation of a client's
05:51 head MVC I think it was like a pretty
05:53 good version maybe a better version of
05:56 things like backbone and a couple of
05:58 other Frameworks that had existed at the
06:00 time but it was born from a place of the
06:04 specific constraints of Facebook it's
06:06 the heart of your Facebook experience
06:09 completely rethought from the ground up
06:11 we've been working on it all year
06:13 and we're calling it
06:15 timeline Facebook was one of the first
06:18 big products that was really an
06:20 experience more than anything else
06:22 you're not trying to buy groceries or
06:25 get tickets or anything like that on
06:26 Facebook you really just want to be
06:28 entertained and as such you know the
06:31 user interface itself needs to be really
06:32 pleasing bolt was not a tool belt it was
06:36 truly a application development
06:38 framework something designed and meant
06:40 to build complicated interactive rich
06:44 apps and was being used to build pretty
06:46 complicated very real products at
06:48 Facebook at the time we ended up having
06:50 to essentially replicate most of
06:53 all the various apps be it timeline chat
06:56 news feed we had a whole photos app that
06:59 we built and so obviously the team had
07:01 to expand greatly like that so I think
07:03 at some point we probably had maybe 25
07:05 Engineers working on all this between
07:08 building bold and building apps built on
07:10 Bold and that's just on the mobile team
07:11 bolt was never the problem it was the
07:13 architecture that would eventually break
07:15 down for us as the the product itself
07:18 got more complex and as we added more
07:20 Engineers to the team we didn't hit a
07:22 wall but it started to get really really
07:24 hard to make changes and so you know
07:27 that was around the time that Jordan was
07:29 on the ads team and he's like I wonder
07:30 there's got to be a better way
07:42 is an enigmatic figure he uh he's a
07:46 little secretive so there's not much
07:48 that I know about him Jordan and I
07:50 aren't necessarily we haven't
07:52 necessarily been in the spotlight much
07:54 especially Jordan kind of shied away
07:56 from spotlights since the early days
07:58 Jordan was a product engineer at the
08:00 time working on ads and ads has one of
08:04 the most complicated pieces of UI across
08:07 all of Facebook at the moment on the as
08:09 team they were hitting much
08:12 you know really hitting the limits of
08:14 what you can do without react uh
08:16 complexity wise and just the developers
08:19 ability to hold in their head and
08:21 understand a bit of code that somebody
08:22 else wrote and you know look at the
08:25 screen and say okay this code is doing
08:27 that and I need to know why and Jordan
08:29 had a lot of very interesting ideas
08:31 around how you could take what we had
08:33 done in both and make it much more
08:34 functional and make it more um ability
08:36 to make it easier for it to scale with
08:38 people's ability to understand large
08:40 applications and so we had a lot of
08:42 ongoing dialogue and he would come back
08:43 and forth to us with various ideas how
08:45 to change it I think one of the original
08:47 names for react was F bolt which is
08:49 functional Bolt foreign
08:55 to do it to solve some of the tricky
08:59 Parts in bolts in an easier way so what
09:02 Jordan decided to do or at least the
09:05 story that he had told me was
09:08 hey wouldn't it be easier if any time
09:11 anything happened in the app API State
09:14 changes user type something we just blow
09:17 away the entire UI and we re-render all
09:21 if you look at what every other
09:23 framework was doing at the time it was
09:25 called two-way data binding and this was
09:27 not that it was like
09:29 forget about data binding we're not
09:31 going to do that at all anytime anything
09:33 changes we're just going to re-render
09:35 and then there's an asterisk which says
09:36 well we're not going to remember
09:37 everything we're going to try to render
09:39 as little as possible but conceptually
09:41 we're not going to manage these
09:43 relationships between views and models
09:47 honestly I thought it was completely
09:48 crazy at the time I was really down on
09:50 Frameworks in general and I thought
09:52 there was no way that was going to work
09:55 to many people that seemed like magic it
09:57 was so far outside of everybody's idea
09:59 of how things should work and do work
10:03 yeah it took a lot of commenting
10:32 I've been working at Facebook for 10
10:35 I met this person called Jordan walk
10:38 some people told me like he had an
10:40 interesting project about JavaScript and
10:42 I may be interested and so I had this
10:44 meeting with him and uh one thing he
10:47 asked me at the beginning of the meeting
10:49 was what is the most difficult thing to
10:53 do in the front end right now
10:57 and I mean I was six months out of
10:59 school I was like I don't know and the
11:02 thing he told me is updates you need to
11:05 find the dumb node that is going to
11:07 change you need to like change the
11:09 listener to like the Click event and
11:11 like remove it and like do all of this
11:13 which is like pretty complicated and
11:16 then this was also like a massive source
11:18 of bugs within the Facebook adbase
11:21 I was like okay yeah you're right like
11:24 this is probably like the hardest thing
11:26 and it was like I have a solution for
11:29 I was like okay this guy is crazy like
11:31 this is never going towards never going
11:33 to be performance the meeting ended for
11:36 like a few weeks I forgot about the idea
11:38 but uh one weekend I was like okay
11:41 maybe I should try this like maybe
11:43 there's something to it
11:46 before joining Facebook I walked on a
11:49 way to find your guilds in World of
11:51 Warcraft and we basically need to search
11:54 through like 20 000 yields and I did
11:57 like a lot of uh performance work to
12:00 like be the fastest way to display
12:02 possible when you change all of those
12:04 filters into this real time and I was
12:06 like okay I spent like months full time
12:10 like working on like making this super
12:12 performance let's try it with react and
12:14 in practice uh it took me like half an
12:16 hour to write it and it was actually
12:20 like not as performant but like around
12:22 the same order of magnitude as
12:24 performance and I was like mind blown
12:26 and to this day I became like the
12:29 biggest react fan in the world I was in
12:31 the photos team and like spending all of
12:32 my working hours like trying to like use
12:35 react on my own project in the photos
12:36 team evangelizing I felt like it could
12:39 change the world which is it
12:50 Jordan is making Headway on his project
12:52 he's gotten others involved and they're
12:56 seeing the value but not everyone is
12:59 impressed one manager started to take
13:02 notice but saw Jordan's project is a
13:06 so the athlete Byron to meet with Jordan
13:09 and put a stop to it we get into a room
13:12 instantly I knew that this was going to
13:14 be weird because we showed up with very
13:15 different energies so I'm showing up
13:17 with this like okay Jordan I want to
13:20 understand what's going on with your
13:22 project but I also want to help make
13:25 sure that we are spending our time well
13:27 and we're working on things that are
13:30 have longevity and solving problems we
13:32 want to have and Jordan came in with
13:33 like can I show you a demo of what I've
13:35 been working on like this is so exciting
13:36 and it does this and it does that and
13:39 eventually like towards the end of this
13:40 meeting with him I had to kind of admit
13:42 like he had something really compelled
13:44 like I was now really interested in
13:47 learning more about what what he was
13:48 doing so Jordan's pitch to me was like I
13:51 only want to invest in this and work on
13:53 it if it's going to be something that
13:54 people will use and if that's not going
13:56 to be the case like sure we're not going
13:58 to do this he's like but I feel really
13:59 strongly that all the ways we've been
14:02 doing UI development up until now have
14:03 been flawed whether they're a JavaScript
14:06 library that doesn't quite work for us
14:07 or whether it's like a 30 year old uh
14:10 tried and true model for doing UI
14:12 application development like they all
14:14 suffer from the same base problem
14:19 and I think this is the way forward
14:21 and Lee if you could just like dig into
14:23 the code and learn more and try it
14:26 and then come back and we'll talk about
14:30 um then we can figure this out it's like
14:31 all right all right and so I did I dug
14:34 around the code and it was um
14:36 a little hard to understand uh but I
14:39 eventually got to play with it got to
14:40 build a couple of things and uh like had
14:42 to admit coming away that like yes there
14:44 was something incredibly interesting
14:46 there and that was how I got sucked into
14:49 the project I ended up working on it
14:50 quite a bit for the the next couple of
14:53 months Lee brings us like rigor and sort
14:56 of design mentality to these things that
14:59 um really helped with the initial
15:00 versions of react in terms of
15:02 standardizing it and turning it from
15:04 something that was kind of like an ugly
15:06 baby that it just uh grown up at
15:08 Facebook to something that really people
15:09 could approach from around the world
15:12 there were a couple of problems that I
15:17 faced right away when trying to
15:20 understand the code base and build
15:21 something Not only was the the set of
15:25 tools and the mental models really
15:26 different from what I was used to as a
15:30 syntax and the programming just like
15:33 Concepts involved just the terminology
15:36 was also really different my takeaway
15:38 was you know okay the whole bid here was
15:40 that this would be simpler but I can't
15:43 help but feel like this is really
15:44 complicated mostly as a as a desire for
15:47 me to understand the model
15:50 um but also with a hope that it would
15:53 end up helping resolve some things I
15:56 wanted to build uh like a glossary like
15:59 what are all the things the concepts and
16:02 then what are all the like actions or
16:04 like verbs that are going on here and so
16:08 I I literally just like listed them all
16:10 out and then I would go back to Jordan
16:11 I'd go back to other people working on
16:12 it and ask questions like did I get this
16:14 right are these definitions right and
16:15 they go yeah okay no you should really
16:17 think about it that way and be like okay
16:18 well that's not how this and it would go
16:20 back and forth and back and forth and
16:21 I'd be honing these definitions and
16:24 along the way we'd realize like oh
16:26 this concept and that concept are the
16:29 we're going to name them one thing
16:31 instead of two things so unwinding all
16:33 of this and essentially writing up what
16:36 like a reimagining of the component life
16:39 cycle and therefore sort of the entire
16:42 front-facing API for react
16:45 and I was very happy to see like
16:46 incredible enthusiasm around that Jordan
16:48 was like oh this is amazing this really
16:50 clarifies the ideas at that point a
16:52 handful of other folks had gotten
16:54 involved with the project too and then I
16:56 spent sort of the next month or so sort
17:00 of piece by piece folding those into
17:02 place and pretty significantly changing
17:04 the surface API of react in the process
17:07 that was I think the first shift from
17:11 this being a thing that existed mostly
17:13 in Jordan's head that other people were
17:15 playing with to a thing that all of a
17:16 sudden felt owned by the whole team uh
17:19 where team here is like a collection of
17:21 UI Engineers scattered across Facebook
17:23 who were sort of bought in on this
17:24 Vision who now felt that like we now
17:27 have the same terminology we can use
17:28 when someone has a question anyone can
17:30 jump in and answer it rather than only
17:32 Jordan that was the first big shift
17:40 one of the first projects
17:43 um that Greg was used for was the ufi
17:46 the universal feedback interface which
17:49 is basically the likes comments and
17:52 shares at the bottom of each post this
17:53 was still during Facebook's kind of web
17:56 era when Facebook on the web was like
17:58 the sort of Big Driver of Engagement
18:00 news feed had a billion people hitting
18:04 and was massively tuned for performance
18:06 heavily interactive surface both on the
18:10 input side of course you're like
18:11 clicking it to add likes you're typing
18:13 into it to add comments but also on the
18:14 receiving side we want comments to come
18:16 in live so as you're looking at it as a
18:18 comment comes in we want it to just pop
18:20 up right there and there was this
18:22 product desire for that interface to
18:25 feel almost like a one-off chat thread
18:29 and that was so cool at that time and as
18:32 that started to work the second thread
18:34 was well okay if this can work for this
18:36 really isolated sense of messaging then
18:38 what if it could work for messaging as a
18:41 and this was another really complicated
18:44 and fraught with bug surface area that
18:47 was when a lot of the ideas in react
18:49 congealed the jsx syntax was introduced
18:52 and some of the ideas about how to work
18:55 with data and react sort of were
18:57 clarified a couple of our UI Engineers
18:59 along with the messaging team if I
19:02 remember correctly Jing Chen was sort of
19:04 the champion of this project realized
19:06 that we needed a completely new way to
19:07 think about State too
19:14 um and I'm a software engineer and the
19:15 product infrastructure team at Facebook
19:17 is an application architecture designed
19:20 around react's principle of
19:22 unidirectional data flow paired with
19:25 flux react could go beyond the view
19:27 layer to model entire applications this
19:30 shift in how to think about State paired
19:32 very well with how react was thinking
19:34 about updating UI and ended up being
19:37 sort of the next chapter for how to
19:39 think about react being more than just
19:42 how do you model complicated UI but how
19:45 do you model sufficiently complicated
19:47 applications like this was something
19:48 that expanded the full screen and
19:50 multiple touch points and had navigation
19:51 to it and it allowed us to step into
19:53 that next chapter I remember asking Jing
19:56 like hey how's it going with this react
19:58 stuff you know do you think this is
20:00 going to work she's like yeah this is
20:02 pretty good I'm pretty sure it's gonna
20:03 work that was when I became more
20:21 Instagram joined Facebook in 2012. I
20:25 think we had started calling it react by
20:27 then and there was a couple Engineers
20:28 from Facebook that went to join
20:30 Instagram to help them expand the
20:32 product offering at the time Instagram
20:35 was just an iOS and an Android app and
20:37 they wanted to have a web presence as
20:46 11 years in San Francisco it was a
20:49 really fun made a lot of great friends
20:51 but the the change of pace out in the in
20:54 the countryside is is great
20:56 um it's just very peaceful and nice
20:59 I went to Facebook straight at school I
21:01 studied computer science undergrad and I
21:03 got a master's degree Facebook was
21:05 believe it or not the like cool place to
21:08 work back in 2010 it was like this great
21:11 product that like everybody used it was
21:13 super cool on college campuses and I was
21:16 really excited to work there
21:23 I joined Facebook video
21:26 the pitch was we're the third largest
21:29 video site in the world after YouTube
21:31 and Dailymotion I think and there was
21:35 like one engineer working on it and like
21:36 you get to be engineer number two and I
21:38 was like that sounds pretty cool we
21:39 worked really closely with the iOS
21:41 photos team in the Android Photos team
21:42 and we were building an Instagram killer
21:44 and nobody remembers this but it was
21:46 called Facebook Camera
21:48 one morning the photo scene got called
21:50 into the office early they said like be
21:52 at HQ at 8am and then the VP of
21:55 engineering was like hey we bought
21:56 Instagram they're your new co-workers
21:57 now and these were like our people that
21:59 they were like our Fierce competitors
22:01 you know we looked at them a little bit
22:03 as the enemy I'm sure they looked at us
22:05 a little bit as the enemy they were a
22:07 really small team at the time they had
22:08 their core fundamentals really nailed
22:10 but there was a lot of stuff they needed
22:12 to figure out that they did not have the
22:15 team to figure out along with their own
22:16 and a big one of those was what does it
22:19 mean for Instagram to be on the web the
22:20 web experience is really important for
22:22 driving growth and so this was a pretty
22:23 important priority and so me and this
22:25 Designer Michael lumens started building
22:27 all the web stuff and that's kind of
22:32 enters the pictures when we started
22:34 developing this website
22:42 we were given this mandate to use client
22:46 rendering so I went to the product
22:48 infrastructure team at Facebook
22:50 which was run by like Tom Aquino product
22:54 infrastructure's role was to support any
22:57 team that needed help
22:59 and do it in a way that you know your
23:02 key indicators of success are going to
23:04 be other teams saying yeah that really
23:06 helped us you go to them and you kind of
23:08 consult the Council of Elders and they
23:11 they give you their recommendation and I
23:14 said hey we need to do client rendering
23:16 what do we do and the recommendation at
23:18 the time was yeah we don't know we've
23:20 got like three different things that
23:21 we're working on you should go try one
23:23 we had uh something called bolt Js
23:28 there was a second thing called jshtml
23:33 and then there was this this thing
23:37 you wouldn't spoke to Jordan about using
23:39 react and he came and talked to me about
23:41 potentially using both for it but I
23:43 think he really really liked Jordan's
23:45 ideas around functional programming the
23:48 conceptual model of react was like crazy
23:50 Innovative and it really really spoke to
23:52 me my background was in distributed
23:55 systems I was not somebody that loved
23:58 front end or thought front end was like
24:00 doing things well so the fact that react
24:02 came in with like a totally Fresh
24:04 Approach and like didn't really care too
24:06 much about existing best practices like
24:08 I was I was on board with that so while
24:11 I had evaluated all three I really just
24:12 dove in on react to build a prototype
24:14 first and that ended up shipping on
24:18 instagram.com which was the second use
24:21 of of reactant production ever and the
24:23 first use of building a full application
24:25 end to end in react
24:30 when I chose react for Instagram
24:32 it was not well known within Facebook
24:34 and it was this like kind of crazy
24:39 not even close by the time Instagram was
24:43 and you know Pete was started playing
24:45 with it uh it was significantly better
24:47 than it was in the early early stage uh
24:50 but it still needed a ton of iteration
24:52 we had to take this thing that was very
24:53 much tied to Facebook's infrastructure
24:55 which back then was a big giant PHP
24:58 application and I had to go get that
25:00 working in a Django application which is
25:02 a totally different system and what was
25:05 key was not doing that once but making
25:07 that a repeatable process and and making
25:10 sure that that pipeline didn't break I
25:12 think he hit a number of really
25:14 interesting problems along the way which
25:15 quite proved the fact that react was not
25:18 quite ready for that scale and along the
25:21 way Pete and the team that he was
25:22 working with into that building a lot of
25:23 really interesting things
25:50 some of these products ended up being
25:51 fairly successful there were relatively
25:55 short time to to deliver a relatively
25:58 high quality product that show that this
26:01 model could work and it was not just
26:04 that but people liked developing using
26:06 it and so that kind of spread and took
26:10 off and especially if you got more and
26:12 more investment they came clear that
26:15 what we wanted to use and it was really
26:18 ads that was kind of using Baltimore it
26:21 had a higher level investment more
26:24 people working in that code base that
26:27 already knew it and more components
26:29 so it was a harder shift to make
26:35 the ads team just before I joined ads
26:38 from the mobile team had done a full
26:39 rewrite of the ads creation flow into
26:42 bolt which took them I think upwards of
26:44 six months replacing a very old PHP
26:47 application with what time was
26:50 considered a very modern JavaScript
26:51 application but at the same time react
26:53 was also now actually deployed for real
26:55 on Facebook and had a team that was
26:59 forming around it so we now had two
27:01 viable Frameworks that were both live on
27:03 Facebook both solving real problems we
27:06 shouldn't have two especially two that
27:09 were similar similar enough to confuse
27:11 people like if you looked at a code
27:12 their code almost looked identical but
27:14 that worked really differently it would
27:16 actually be an absolute nightmare if you
27:18 had to work in both so we had to decide
27:26 a lot of this was ended up being a
27:28 conversation between myself and Jordan
27:30 we did an evaluation of boredom a lot of
27:33 performance-based stuff and trying to
27:36 figure out where the edge cases were on
27:38 the pro side of react obviously there's
27:39 all the things that we know now it
27:42 handles complexity way way more even
27:44 when writing the as creation flow in
27:46 bold we had already hit one place that
27:48 you just could not do in Bolt without
27:50 writing spaghetti code and you can do in
27:52 react so we knew in the future even if
27:55 it was only 10 of the experiences we
27:57 were building we're going to run into
27:59 this problem again now it might only be
28:00 10 unmaintainable but as you scale that
28:02 across a company that is growing rapidly
28:04 this becomes an absolute mess the cons
28:06 of it on the other hand were that react
28:09 in a lot of ways was not battle tested
28:11 yet there's a lot of things that simply
28:12 didn't work in react it couldn't handle
28:14 forms they'd never done a text box and
28:16 there's a lot of complexities around
28:17 handing awkward form controls like radio
28:19 buttons and so on that it messed up just
28:22 performance issues where it would try
28:24 and re-render large blocks so they
28:26 hadn't had to do all of the performance
28:28 improvements that obviously exist now on
28:31 the organizational side that the other
28:33 con was that we had just done the
28:35 six-month rewrite in both
28:37 um Facebook had done an IPO recently and
28:43 Facebook wasn't making enough money and
28:45 so the ads team is the team that makes
28:47 you know that's where the money starts
28:48 if we stop for four months we're gonna
28:51 have to tell everybody
28:53 sorry no money for you so there was a
28:55 lot of conversation back and forth about
28:56 all this it was got very difficult
28:58 initially a lot of the engineers that
29:00 used bolt including Shane realized just
29:02 what you said like look we've invested
29:04 so much in this thing and it's it's
29:05 really worked for all this stuff
29:07 certainly we can work through the next
29:08 set of challenges we're having so
29:10 initially there was opposition to react
29:12 coming in and saying like how are you
29:14 gonna you know this new thing that's not
29:16 even proven yet this is our business
29:18 this is really important when Jordan and
29:21 I were working through it was definitely
29:22 uh some emotions uh there
29:25 um and mostly I think it came from uh
29:27 each of us having a lack of context of
29:29 where the other one was coming from so I
29:30 think there was a lot of talking past
29:32 each other in the end Mike shroffer
29:34 stepped in and said look
29:36 make the right technical decision make
29:38 the right long-term decision
29:43 you know I'll back you up but if you
29:45 need to pause product development for
29:47 four months you can we all kind of just
29:50 got in rooms and you know worked through
29:52 all these things and got everything out
29:54 in the air of you know what's a
29:55 technical problem what's an organization
29:57 problem what's a financial problem uh
30:00 computer understanding eventually
30:04 through uh with lots and lots of coffee
30:06 that the react was the right way to go
30:08 but um it was not a straight line at all
30:11 he ultimately was one of the biggest
30:13 proponents of decision makers and ads
30:16 switching all over everything to react
30:19 and that doesn't happen in most
30:21 companies and most companies if that's
30:22 your baby project you try to undermine
30:25 the other the the upstart because you're
30:27 you know you're really defensive over
30:29 your own thing that was not the vibe at
30:32 Facebook at the time and I think that
30:33 Shane in particular really
30:38 there was still a lot of work to do on
30:41 the ads creation flow tensions were
30:43 mounting and the team was stuck here
30:46 again to get them unstuck is Jing Chen
30:50 we'd have this thorny management issue
30:52 and a lot of people disagreeing with
30:54 each other up and down the management
30:55 chain on both sides of you know in ads
30:57 and in this product infrastructure group
30:59 those building react and we'd send Jing
31:01 in to talk to the engineers and everyone
31:03 come out like patting each other on the
31:05 back full agreement a plan to move
31:07 forward so she's great at building a
31:09 consensus because she's able to drill
31:12 into the important technical details
31:14 identify them really quickly and and get
31:16 everyone talking about the same thing
31:17 she obviously helped both build the
31:19 product but she also made sure that
31:21 every time we found a bug in react or
31:24 just something that didn't handle yet
31:25 she either stepped back from products
31:28 and then just fixed the framework or she
31:30 went back to the team and said look we
31:32 need two or three Engineers working on
31:33 this stuff for the next month to unblock
31:35 the ads team the ads manager was
31:37 complicated enough that it actually
31:39 ended up being a really great source of
31:42 um performance improvements and finding
31:45 like where are the true points where it
31:47 does doesn't quite scale so I think it
31:49 was a lot of like you using the building
31:52 and as you start to assemble them into a
31:54 really complicated looking application
31:55 what are the new problems that come out
31:57 of that way that we need to solve and
31:59 there was definitely a lot of those this
32:00 is one of the most fun intense periods
32:03 of my career as I remember it we would
32:05 be going to meet with the team and we
32:07 would have to help them put some feature
32:08 in and we would code it up ourselves
32:10 first and react just to make sure that
32:13 the that they wouldn't hit any rough
32:15 edges or more like to find all the rough
32:17 edges that we knew they'd hit and figure
32:19 out what the solutions would be so it
32:21 was really exciting because we were
32:24 working on two things at the same time
32:25 one was delivering this really
32:27 complicated really important software
32:29 project for Facebook uh the ads manager
32:31 and the other was refining this
32:33 framework that we really believed in uh
32:38 by the time we had rebuilt the ads
32:40 creation flow which I think took about
32:42 four months it had been battle tested
32:44 with basically everything about the
32:46 browser supports all the form fields and
32:48 everything and also massive performance
32:51 issues that had been resolved so at that
32:54 point it was kind of felt that it was
32:56 ready to be open source because
32:59 you know we we used it in multiple
33:01 different types of contexts and that uh
33:03 you know um it would actually be
33:05 generally useful to the public
33:24 sorry open sourcing reactor is never a
33:27 question for me that was the goal
33:30 from the very beginning Tom had this
33:32 idea he called it project perception
33:37 angry I think it's probably the best
33:38 word for he's angry that Facebook was
33:40 hiring all these luminaries from the
33:42 JavaScript World they would come to
33:44 Facebook and you know because we
33:46 discouraged people from writing
33:48 client-side JavaScript and because it
33:50 was a hard environment to maneuver in it
33:52 would actually go pick up mobile because
33:54 that was where a lot of the interesting
33:56 client-side development was happening
33:57 and Tom was determined to change us
33:59 around I remember going to this
34:02 conference and someone like I was
34:04 talking to someone and I told them I
34:06 worked at Facebook on JavaScript and
34:07 they're like why would you do that I
34:09 hate what Facebook does to the
34:10 JavaScript industry you have hired all
34:12 these really great people from these
34:14 really great projects and we have no
34:16 idea what they're working on now they've
34:17 given nothing back so I think when react
34:20 came along I started very early on
34:23 talking about if this thing works for us
34:26 I really want us to find a path to open
34:28 source and I was running that up the
34:30 like management chain like very early so
34:32 when the time came to open source it
34:34 there were some meetings it was
34:37 but we had all the support we needed
34:44 the process of open sourcing uh is
34:47 interesting there's first a technical
34:50 problem to solve you have to figure out
34:52 how to extract it out of your
34:54 infrastructure and make it work in the
34:55 open source which is all the homework
34:58 that we did for Instagram
34:59 we made this call that like we will not
35:02 impact developer productivity at all
35:04 it's going to be entirely on the open
35:05 source team which was just a bunch of
35:07 people that wanted to open source it to
35:10 make it work then actually pulling the
35:12 trigger on open source
35:14 we had to write a lot of documentation
35:16 we spent actually a lot of time with the
35:19 documentation to explain like hey what
35:20 is react what are all the concepts and
35:23 we try to put ourselves in the shoes of
35:25 like somebody that want to build an app
35:27 how do we give the documentation in a
35:31 way it like helps them do that polish
35:33 Channel as they did a lot of this
35:34 because he really had the experience
35:35 with what the ecosystem needed to make
35:38 this work at the time Apollo fantasy was
35:41 a huge force on open sourcing as was
35:45 James Pierce who was the head of
35:48 Facebook open source James had joined
35:51 the company and he really wanted to
35:54 change Facebook's open source image we
35:56 had previously open sourced a lot of
35:58 stuff but we let it rot we would say hey
36:00 we're an open source company here's our
36:02 great framework and then we would just
36:04 never maintain it and James and Paul in
36:06 particular were like pretty instrumental
36:08 in saying hey if we're going to open
36:09 source react we're going to do it right
36:13 internally there was a lot of excitement
36:14 because we had already been using this
36:17 thing for a while and it was working for
36:19 us we were excited about it
36:21 we chose jsconf us which was kind of the
36:25 I don't know the Oscars of JavaScript is
36:28 that fair representation maybe you know
36:30 all the celebrities are there and
36:31 everyone's paying attention and
36:32 everybody watches it live on YouTube Tom
36:35 and Jordan put together this
36:36 presentation Tom is a great speaker and
36:39 Jordan is a brilliant engineer it was
36:40 like Lennon and McCartney type of
36:43 situation there was no way that this
36:45 thing could possibly fail
36:56 um at like 9 00 a.m We were in Menlo
36:59 Park and we woke up early we took the
37:01 first bus into the office it was
37:03 completely empty and we're like getting
37:04 ready to like press the button on the
37:06 repo to open sources Jordan and I were
37:08 all excited we got up on stage I'm going
37:10 to talk a bit about how we do JavaScript
37:12 application development at Facebook it
37:13 was a little unconventional I like did a
37:15 little bit of it he did more of it so
37:17 along with react we are shipping an
37:20 embeddable XML syntax and we're calling
37:22 that jsx and we jumped into showing some
37:25 code and that code looked different it
37:28 looked weird here we have react used
37:31 with jsx and people were rightfully
37:34 skeptical we'll call it everyone hated
37:37 it everyone thought it was awful
37:47 ly we were expecting a much better
37:49 reception or at least an oh that's
37:52 interesting exception we thought there'd
37:53 be some language nerds in there who
37:55 would um think oh I can do fully
37:58 functional program in the UI oh at least
37:59 that's interesting it was a really
38:01 humbling experience it was kind of a
38:03 letdown for us because we had worked
38:05 nights and weekends on getting this
38:06 thing open sourceable and then when we
38:08 go to launch it everyone hated it the
38:10 thing that everyone focuses on is that
38:11 people really hated jsx
38:18 I haven't watched this video in a while
38:24 see these divs are not
38:27 exactly what you're used to they're not
38:30 so they're special reactives and I'll
38:32 get to why that's important I don't
38:33 remember thinking that they were hating
38:35 it I don't remember at all thinking that
38:39 they were like tweeting a bunch of a
38:41 bunch of stuff this is the slide for
38:44 sure we haven't talked about any
38:45 problems we're trying to solve we
38:46 haven't talked about why this is working
38:48 for us or what were the principles of
38:50 design we're just like boom here's some
38:52 XML in your JavaScript and people are
38:54 like hey what is happening
38:59 what we didn't really fully understand
39:01 was how big of a Delta there was between
39:03 where the rest of the world was in the
39:06 JavaScript community and where Facebook
39:08 I don't blame them I don't think anybody
39:10 who tweeted Facebook is crazy
39:12 was crazy themselves I think they were
39:15 they were kind of right we were a little
39:19 I think there was a moment for me
39:21 personally where I felt like
39:23 you know my goal with the open sourcing
39:25 of this was to get us closer to the
39:28 community and I may have set us back a
39:29 step I may have demonstrated that we
39:32 actually have no idea what we're doing
39:34 because what we're doing is so much
39:36 different than what the rest of the
39:37 community was doing and internally there
39:41 well we messed that up we made the wrong
39:46 um because I think the measure of
39:47 success would have been wow Facebook
39:49 engineering is doing some really cool
39:51 stuff and instead it was Facebook
39:52 engineering has no idea what they're
39:54 doing I think that gsconf
39:56 um appearance might have been Jordan's
39:59 last conference for a good few years I
40:01 think camokino didn't go back for a
40:03 while as well it turned into a bit of a
40:04 troll Fest for no good reason and
40:06 particularly for something that was as
40:08 an Innovative and useful and you know
40:11 just fantastic for developer
40:13 productivity and just it's literally a
40:14 gift to everybody here here move faster
40:16 for free to have people misunderstand it
40:19 and say all these bad things about it
40:22 you know knee-jerk reactions without
40:24 actually having taken time to think
40:26 um can only must have felt very bad
40:27 especially because both Jordan and Tamil
40:29 had already gone through all this
40:31 internally in Facebook for two years but
40:32 inside in Facebook it's a smaller scale
40:34 you can just get in a meeting room and
40:36 um but you can't really do that with the
40:37 whole world can you there were some
40:39 technical decisions that were made as
40:41 hard to react that were self-evident
40:43 within Facebook but were like crazy when
40:48 when um given to a different audience in
40:50 the community so there was this notion
40:51 of separation of concerns at the time
40:54 like you didn't you shouldn't put your
40:57 HTML CSS and JavaScript into the same
41:00 file like should I really extract them
41:02 out and you should like uh like have
41:04 this separation and so this was like
41:06 very like the best practice at the time
41:09 what was interesting about the approach
41:12 to separation concerns in react is that
41:14 you separate your concerns into
41:15 different components so rather than
41:17 saying I have my view concerns over here
41:19 and my model concerns over here you say
41:22 you have your news feed concerns over
41:23 here your photo concerns over here your
41:27 admin panel concerns over here so it's a
41:28 different way of separating concerns and
41:30 so there was like a lot of backlash
41:32 around like oh those people at Facebook
41:34 are clowns like they don't know how to
41:36 write software and everything we thought
41:38 that react probably had no future
41:39 outside of Facebook
41:52 it looked like all hope was lost for our
41:55 friends at the Facebook office but
41:58 fortunately someone outside of Facebook
42:00 was willing to give it a chance
42:11 started using react in 2013 it was not
42:15 popular in the community it had just
42:17 been announced at jsconf
42:20 I saw the announcement post on Hacker
42:24 News and immediately
42:26 thought that it would be helpful for one
42:29 of the projects that I was working on at
42:31 the time I was building an interactive
42:33 math question editor at Khan Academy and
42:36 it was something that had a very
42:38 component oriented architecture I was
42:40 trying to use backbone.js at the time
42:42 and found that the state management was
42:46 getting a little bit hard and when I
42:48 looked at react I thought to myself wow
42:51 this actually looks like it solves a lot
42:53 of the problems that I have right now
42:57 I'm looking at this post from 2013 that
43:01 I guess I wrote a week after I learned
43:05 about react and it was right after I had
43:08 started trying to use it and somebody
43:11 had asked how is Facebook's react
43:14 JavaScript library and I was a few days
43:19 into using it and so I decided to write
43:21 an answer to that question based on my
43:26 the answer I wrote is very
43:30 positive I think I was having a really
43:32 good time using it and it was solving my
43:37 needs really well one line from the post
43:40 says I just rewrote a 2000 line project
43:42 in react and have now made a handful of
43:44 pull requests to react everything about
43:46 react I've seen so far seems really well
43:49 thought out and I am proud to be the
43:51 first non-facebook production user of
43:54 react and I talked a little bit more
43:56 about some of the technical details and
43:59 how it was helping me it's cool to look
44:01 back and it's almost a bit of a time
44:04 capsule to see how even one week into
44:09 react being released I was already
44:12 pretty excited about it and I think that
44:15 excitement lasted for a long time
44:17 I converted my entire code base that I
44:20 was working on at the time over to react
44:22 I think it ended up being less code and
44:24 it was easier to understand and it was
44:27 faster pretty quickly I said Okay I want
44:30 to keep using react and I ended up
44:33 deploying that to production my my
44:36 Rewritten code and that was I think the
44:40 first production code using react
44:41 outside of Facebook
44:49 it was a brand new project that had just
44:50 been open sourced and not many people
44:53 had used it before and so there were a
44:55 bunch of rough edges it seemed like you
44:57 know maybe nobody had tried to use it in
44:59 a particular way before or if something
45:01 just wasn't documented well enough and I
45:03 was trying to use it a slightly
45:05 different way than it was intended I ran
45:07 into these little bugs or issues where
45:10 it didn't work quite as I was expecting
45:12 it to for some of those I read through
45:16 the source code and tried to figure out
45:18 okay why isn't this working is there
45:19 anything that I can be doing differently
45:21 for other cases I ended up joining the
45:26 IRC chat Channel where a lot of the core
45:29 team members were hanging out after it
45:32 had been open sourced
45:34 that helped me get started not just
45:38 using react but also starting to
45:40 contribute to it as I started filing
45:42 issues and helping other people who were
45:44 in that chat room as well as starting to
45:47 make small code changes and starting to
45:50 improve react over time her perspective
45:53 from you know Khan Academy and just
45:55 being outside of Facebook was so
45:57 valuable so helpful so if he started as
46:00 someone using react externally
46:03 then sort of like moved on to being
46:05 someone who contributed to react core
46:07 externally then became the most
46:09 significant contributor to react core
46:11 then we would have these like weekly
46:14 team meetings and invite Sophie to come
46:16 and so Sophie like worked out with her
46:18 local manager at her company to like
46:20 carve out Friday afternoons to come to
46:23 Facebook and hang out with us and so
46:26 determined not to do what we had done
46:28 previously where we hired folks from the
46:31 open source community and then they
46:33 never contributed anything back she
46:35 became like the the first ever like open
46:38 source recruited member of the team
46:44 Sophie's involvement lifted the spirits
46:46 of the react team it also got them
46:48 thinking that maybe just maybe the rest
46:51 of the ecosystem had just misreact
46:54 unfairly they had something special they
46:57 knew it what they didn't know was how to
47:00 convince everyone else
47:02 I think there are people on the team
47:03 like me and Jordan and Tom and
47:06 christadeau who like the The Challenge
47:10 and the the competitive nature of it we
47:13 knew that this was good technology and I
47:16 was so sure of that that um
47:20 you know I viewed it as just a a
47:22 messaging problem you know okay we gotta
47:25 crack how we message this to people
47:26 because they don't get it and we have to
47:28 figure out how to how to bring them
47:31 the open source feels like a milestone
47:33 and it feels like this is the end my
47:35 impressive is just the beginning because
47:37 when you open social actually have zero
47:39 users now you need to actually like
47:41 build a community uh get all of the bug
47:43 fixed like make sure it actually solves
47:45 the use case for the people and so this
47:47 is like when the Journey Begins we
47:50 buckle down we and we we also realized I
47:53 think that really when you have a
47:55 project like this that's
47:58 um different you have to convince people
48:01 so I think that's really what we focused
48:04 and we learned a lot doing that we
48:07 the ideas in reactor are solid but
48:10 really the ideas are not what people
48:12 encounter when they adopt a framework
48:14 what they encounter are the docs and the
48:16 error messages what they need more than
48:19 anything else when they adopt something
48:20 is an incremental way of doing that
48:23 so the team got to work they focused on
48:26 spreading the knowledge of react one
48:28 concept at a time one person at a time
48:30 then an opportunity arose
48:35 later the same year thank goodness Pete
48:39 gave a talk at jsconf EU I had my desk
48:42 over by the um by the product
48:44 infrastructure team I was sitting next
48:46 to Tomo and he's like oh we're just like
48:49 sponsoring this JS conf EU conference
48:52 and like we have to give a keynote and
48:54 like I don't want to give it because I
48:56 think he was like he didn't want to go
48:57 through all that stuff because you know
48:59 after you give the talk like people go
49:00 and yell at you after you get off stage
49:02 and you go to the happy hour and stuff
49:04 it's like it's not not the most Pleasant
49:06 thing in the world and I was like I'll
49:09 um I'll take the free trip to Berlin and
49:11 go uh give a talk at a conference hey
49:14 I'm Pete uh I'm gonna talk to you about
49:16 a library for creating user interfaces
49:20 and we open source this at jsconfus a
49:23 couple months ago and we got some kind
49:26 of sarcastic responses on Twitter
49:28 a little bit of snickering that kind of
49:31 um we weren't really communicating what
49:34 um so I'd like to talk to you today
49:35 about the design decisions
49:37 um around react uh what we're doing
49:39 differently than other Frameworks and
49:41 kind of the implementation that lets us
49:43 make these decisions and make it really
49:46 for this talk it was like here's what
49:47 makes react different I'm not even
49:49 trying to say it's good I'm not even
49:51 trying to say you should use it I'm
49:52 trying to say that this is interesting
49:54 and there's a lot of interesting stuff
49:56 about how this thing works that you
49:58 should pay attention to
50:01 um that really resonated with people and
50:03 so we got these kind of early innovators
50:06 you know if you think of the crossing
50:08 diagram where you've got your your early
50:11 adopters and then you've got your
50:12 laggers and in the middle you have your
50:14 kind of normal companies that talk
50:16 really got those early adopters fired up
50:18 and evangelized and react inside of
50:20 their own companies after Pete's talk
50:22 interest started to pick up people
50:24 started paying attention they just
50:25 wanted to you know let me let me just
50:28 see if there's something there and so we
50:29 got this kind of like Slow Burn of
50:32 adoption of react and it prompted some
50:34 really interesting conversations it
50:36 recruited Brandon Bloom into the
50:38 community who came from the functional
50:39 programming World somewhere he started
50:43 talking to his friends and said hey I
50:45 think this like react thing is actually
50:47 worth paying attention to and then he
50:48 goes and talks to his friend David Nolan
50:50 who is this very well known very well
50:53 respected really great musician and
50:56 JavaScript developer I think he was
50:58 working at the New York Times at the
51:00 time and I was passing through New York
51:03 to do something and it grabbed coffee
51:06 and I asked Pete some questions and
51:10 Brandon Brandon Bloom that was my friend
51:12 that said you should really look at
51:14 react and the reason I was excited about
51:17 it more than I think you could have been
51:19 if you were JavaScript developer
51:21 JavaScript is kind of multi-paradigm you
51:23 can do object oriented you can do
51:24 functional if you want but it's not
51:26 required but in closure enclosure script
51:29 functional is the most idiomatic thing
51:32 and nothing existed like we were sort of
51:34 like always trying to get things to work
51:37 but it was always felt like there was
51:38 friction I was like
51:40 still early in my career right and this
51:42 is like really senior super smart
51:44 engineer and it was the type of thing
51:47 where like he would ask me questions
51:48 about it and I would like stumble to
51:51 explain it and I would explain it poorly
51:53 and then he would repeat it back to me
51:54 in like a super eloquent great way and I
51:59 was like yes I'm gonna steal that and so
52:01 when I sat with Brandon and Pete it was
52:03 like this huge light bulb went off I was
52:06 like finally this is so Random uh
52:09 Facebook made this functional UI
52:12 framework Eureka I mean it was
52:14 definitely a Eureka moment it it did
52:16 allow closure script programmers to
52:19 finally write a reasonably performant
52:22 functional uis and it was very natural
52:25 it was a very very good fit like a week
52:28 or two later he wrote this blog post
52:29 called the future of JavaScript mvcs
52:31 that just like changed the trajectory of
52:34 in many ways you look at react and
52:37 you're like there's no way this could be
52:38 fast there's no way it could be
52:40 efficient and then I showed like you
52:42 know these diagrams of what um backbone
52:45 and react ohm look like and react is
52:48 much better especially when you're using
52:50 persistent data structures so my article
52:54 I think was focusing purely on the
52:56 technical benefits of the design it
52:59 removed The Superficial consideration
53:01 and I think people started saying okay I
53:05 will try it not I'm going to use it but
53:08 it removed that I'm never going to use
53:10 that too oh I'll give it a shot this is
53:13 interesting once that post came out like
53:16 within three months after that I would
53:19 say that we were one of the big
53:20 contenders if you were picking a
53:22 JavaScript framework if you want to
53:24 spread an idea you need to really
53:25 convince a few people
53:26 and have those people share your message
53:29 you can't just be shouting at yourself
53:31 more people started to realize that
53:35 some good ideas and made UI development
53:40 simpler in a lot of ways over the course
53:43 of the next I would say like year or two
53:45 we're kind of just tracking things like
53:49 you know like Google Alerts of how many
53:51 times is it being mentioned who's
53:53 writing about it what projects are
53:56 um because react was very unopinionated
53:58 about a lot of stuff that you need in
54:00 order to build a front-end web
54:01 application and you know people would
54:04 fill in the blanks and there was a bunch
54:06 of State Management libraries that
54:08 cropped up and there was a bunch of you
54:10 know router libraries that cropped up
54:12 and server-side rendering strategies and
54:14 so there was this sort of Slow Burn of
54:16 adoption over the next year or two react
54:19 is a small focused UI library but it
54:22 proved capable when tackling Facebook's
54:24 hardest problems in other big companies
54:28 but there was one company especially
54:30 eager to rethink best practices
54:46 we first heard about react back in 2014
54:48 the Netflix website had been built using
54:50 Java web uh it was very slow it took
54:53 about 15 minutes to get up a build and
54:56 we decided to move to a more modern
54:58 framework there we go now at the time we
55:02 weren't quite sure if you know this
55:03 react thing was going to work out it was
55:04 kind of new and so we were very
55:06 apprehensive especially since we were
55:09 building the future of the next 10 years
55:10 of the website right you know we make a
55:13 bad choice now we got to backtrack
55:15 um you know years worth of work and so
55:17 we were very careful about you're not
55:19 jumping into something that was too
55:21 and so what they did was they actually
55:23 pitted two teams against each other each
55:24 was given 30 days to build a prototype
55:27 with one being react and the other one
55:29 being backbone and after 30 days the
55:35 so thank you all for coming out tonight
55:36 we're really excited to have you here
55:37 and share the learnings that we've had
55:39 building the new UI in react for the
55:41 it was not this stage it was our next
55:43 stage over where I gave my react
55:45 presentation back I guess in 2015.
55:49 same feeling like oh my goodness I've
55:51 got to convince all these people that
55:56 um but I guess it worked so as part of
55:58 the team that built the new site using
56:00 react at first it was very clunky like
56:03 you're writing components and they're
56:04 not quite you know you're putting too
56:06 much logic into them or you're thinking
56:07 too big it's not clear the difference in
56:10 the Paradigm and then you start to use
56:12 it and you go okay wait wait wait I'm
56:14 thinking much more Atomic hence the
56:16 symbol of react I'm thinking about this
56:18 in individual reusability okay now I'm
56:21 thinking about the testability of these
56:22 components I'm seeing the benefits now
56:24 come out of it I can reuse this over
56:26 here we can test this over here we can
56:28 change this here we can add props in
56:29 here and it becomes very exciting to see
56:32 that new paradigm come to play and go
56:35 this is going to be revolutionary this
56:37 is going to change the world let's go
56:38 back in time one year to the old Netflix
56:40 UI you guys might remember this one the
56:42 overall look and feel is kind of like
56:43 this old DVD kind of box art feel and so
56:47 I actually want to show you one of the
56:48 early prototypes of what we thought the
56:50 new UI would look like we knew that
56:52 going forward the world was changing web
56:55 was changed changing things were moving
56:56 faster and our competition was moving
56:57 faster as well so choosing react and
57:00 going with a more modern framework
57:01 really helped us accelerate how fast we
57:03 could build the website how fast we
57:05 could get new changes that door how fast
57:06 we could try improvements for our
57:08 customers to make the best possible
57:13 and because of that we've been at the
57:15 Forefront of leading what UI design
57:17 looks like in terms of web development
57:19 we've had a lot of companies copy us
57:21 which we take is a great compliment but
57:23 we were there first because of react and
57:25 its ability to move so quickly in terms
57:28 this is how it ended up turning out and
57:31 this is a UI that's big and immersive
57:33 and completely built in react so we're
57:35 very very proud of it and the result
57:42 Netflix was now praising react publicly
57:44 and with a second big company betting
57:47 big on react the framework grew in
57:49 popularity in fact it kind of took on a
57:53 life of its own and the community
57:54 started to take off
58:08 react at this point was getting more
58:11 and somebody on Twitter mentioned like
58:14 hey it would be cool to have like a
58:15 react conference and a lot of people
58:18 started like uh commenting and tweeting
58:20 and everything about this and uh I went
58:22 to my manager tomokino and he was like
58:25 there's like 50 tweets about react today
58:27 like people are talking about organizing
58:29 conferences should we organize a
58:31 conference and I was like I don't know
58:33 what that means I don't know how to do
58:34 that but like maybe I was very post
58:36 doing a conference um I thought it was
58:39 very cool that we got so much traction
58:42 without really pouring marketing money
58:46 into it even though react came from big
58:49 tech company Juggernaut Facebook it was
58:51 a small group of people that were like
58:52 really dedicated to seeing this thing
58:54 succeed so it felt like this very Indie
58:57 you know Rebel Alliance type of project
59:00 and so I was like we don't need a user
59:02 conference like with like we got this
59:05 Cool vibe going on like let's see how
59:06 far we can push it I was totally wrong
59:09 we had said to ourselves I think it
59:11 would be fun to host a react conference
59:12 but are there even enough people using
59:14 react who would want to go to that and
59:17 eventually we decided Well let's try it
59:20 let's try to host the conference and see
59:24 within a minutes all of the tickets were
59:26 sold out and we actually crashed the
59:29 website that we are handled for like the
59:31 actual payment system and everything
59:36 trap the CTO of Facebook actually like
59:40 reach out to me saying like hey I have
59:42 this very important like VP or CTO or
59:45 like of some company that one scene that
59:47 couldn't get in like hey can you do as a
59:50 favor and I was like I would love to
59:53 like kill the CTO and everything but
59:55 like you know like we're like completely
59:57 booked certainly we were very surprised
01:00:00 about how quickly the tickets had sold
01:00:01 out we didn't realize just how much the
01:00:04 react ecosystem had grown and just how
01:00:06 much enthusiasm had been created by
01:00:25 quickly as far as conference planning
01:00:27 goes and we just had it on campus in one
01:00:29 of our cafes and we you know bus people
01:00:32 from the nearest hotel and it was very
01:00:35 very under produced
01:00:37 um but it worked out really really well
01:00:40 good morning everyone
01:00:41 and welcome to react Jessica
01:00:46 the conference when they're like
01:00:48 extremely extremely well as the
01:00:49 organizer of the conference I'm so
01:00:51 excited to be here and we open source
01:00:54 like a bunch of our projects like so
01:00:56 react native and we started talking
01:00:57 about graphql about three day and so
01:01:00 yeah it's been a massive success there
01:01:02 is this moment where you go and you see
01:01:04 the stage and it's like there's a giant
01:01:09 cut out like logo of the react atom and
01:01:12 I was like my friend Michael the
01:01:14 designer at Instagram drew that in front
01:01:17 of me like in the middle of the night
01:01:18 before we were going to open sources
01:01:20 thing because we needed a logo and I was
01:01:21 like Michael just like throw something
01:01:22 together real quick and like now it's
01:01:24 this thing that has somebody has built a
01:01:27 giant sign with this on it and there's
01:01:29 something about the physical impact of
01:01:30 that that's really cool that was the
01:01:33 moment when it dawned on me that react
01:01:34 was becoming something different
01:01:37 you know so for a long time what react
01:01:39 was to me was a software project
01:01:41 and the reason why I wanted people to
01:01:44 adopt it was because I really thought it
01:01:46 would make their software better and
01:01:47 make their lives better and make their
01:01:49 on-call rotations better there are a lot
01:01:51 of reasons why I thought it would help
01:01:54 after that conference what I realized is
01:01:56 that react was becoming a community
01:01:57 there was meetups that would happen the
01:02:00 immediate next week that would have an
01:02:02 expanded audience that they could go
01:02:03 deeper into some of the things that were
01:02:05 discussed was really really cool and a
01:02:07 huge recognition for us that the
01:02:09 community was going to be
01:02:12 an incredible part of what would make
01:02:14 react work and had at that point was
01:02:16 definitely already a really important
01:02:18 part of what had gotten react to that
01:02:23 it's proven to me that uh engaging with
01:02:26 your open source Community is is
01:02:28 actually more important than the
01:02:30 technical work itself like if you don't
01:02:31 have a community you don't have an open
01:02:33 source project I'm excited that we just
01:02:35 continue rethinking best practices I
01:02:37 want to thank this community for making
01:02:38 it possible for us to keep investing in
01:02:40 this and keep working on it
01:02:42 um that's all I got thanks
01:02:47 it was a real high point for not just
01:02:50 for me but for the team and you know I
01:02:52 think for Facebook engineering I think
01:02:54 we really felt like
01:02:57 not just validated but like we were
01:03:00 actually like doing something that
01:03:01 people cared about
01:03:03 and it was a really really good feeling
01:03:05 it was already like more widely used
01:03:07 within the company but now it was like
01:03:09 okay how do we like actually start
01:03:12 converting everything to react how do we
01:03:14 like remove and deprecate like all of
01:03:16 the other Frameworks and really like
01:03:18 double down on react oh hey I was going
01:03:20 going from like an interesting product
01:03:23 to like this is the next big thing so it
01:03:25 was really like a really amazing time to
01:03:28 be around and to like really like get
01:03:30 the whole company like working together
01:03:31 as one uh you know to like make this
01:03:36 let's see I have some keepsakes up here
01:03:41 which will be not easy for me to get
01:03:49 I have some stickers oh this is a fun
01:03:52 one this is the first ever react die cut
01:03:57 we ordered like a bunch of these and put
01:03:58 them on our laptops and I just I never
01:04:00 wanted to use the last one that I had
01:04:03 Facebook open source stickers
01:04:06 oh some of these will be a trip down
01:04:08 memory lane for folks react conf we made
01:04:12 Facebook open source
01:04:15 it's a good one react conf attendee
01:04:19 this was a book uh from the original
01:04:22 react.js conf at Facebook's headquarters
01:04:25 so this had a list of the speakers and
01:04:28 the schedule and
01:04:30 um here's the Keynote
01:04:33 and Christopher shadow
01:04:35 we had all sorts of
01:04:37 swag made and a bunch of other stuff so
01:04:40 pretty good stuff
01:04:42 pretty good memories
01:04:46 dated with questions from the community
01:04:49 and a new developer enters reacts orbit
01:05:12 what should I do with my hands
01:05:17 so you're saying that I should actually
01:05:19 uh start like uh let me Focus for a
01:05:22 second just for the record I did not
01:05:25 create react react was created by Jordan
01:05:29 I worked at a small startup we were
01:05:32 creating a sort of a digital publishing
01:05:35 platform so there was a really complex
01:05:37 post editor with different blocks or
01:05:40 like a scrollable text with like
01:05:42 different effects and stuff and so uh
01:05:44 creating a dynamic kind of interactive
01:05:46 editor for for these things was really
01:05:49 difficult and we returned it with
01:05:50 backbone I kind of wanted to give react
01:05:52 a try because it was supposed to solve
01:05:55 the first react component I wrote was a
01:05:57 like button so it was just like a button
01:05:59 you click it and it says like you like
01:06:01 this or you and somebody like this or
01:06:05 you and like 40 others like this so
01:06:08 there was a bit of like a split and
01:06:10 logic and then the way you would Express
01:06:11 this in uh like in other Frameworks at
01:06:15 the time uh like you had you had to kind
01:06:17 of manually like watch what's changed
01:06:19 and like update it and in react you
01:06:21 could just say if nobody liked this show
01:06:23 this if one person like this show this
01:06:25 otherwise show this and like it's a very
01:06:28 natural way to write this kind of code
01:06:30 and yeah I just wrote that button and I
01:06:32 was like yeah that looks good ship it
01:06:35 and so we actually rewrote the entire
01:06:39 app in react over the course of like 90
01:06:41 months while still shipping new features
01:06:44 so react speed up our development so
01:06:46 much that we were able to add new
01:06:49 features faster at the same time as we
01:06:50 were replacing old features that's why I
01:06:52 really kind of fell in love with it
01:06:58 a lot of things didn't exist back then
01:06:59 like there was no such thing as a react
01:07:01 ecosystem so if you needed something
01:07:04 it didn't exist you'd have to write it
01:07:07 so like you'd have to figure out how to
01:07:09 do it because otherwise you're not going
01:07:11 to have a product right so that's kind
01:07:14 of what I did for a bunch of things
01:07:16 one of those projects in particular was
01:07:20 like I just saw like a big opportunity
01:07:24 it was called react hot loader at the
01:07:26 time so I wanted to give a talk about
01:07:28 somebody else has done a talk that
01:07:31 mentioned it earlier at reactant a
01:07:34 really clever fellow called Damn abramov
01:07:36 figured this out and he created the
01:07:38 react hotloader and I felt that well
01:07:40 then that just wouldn't be interesting
01:07:42 because people kind of already saw it
01:07:44 which in retrospect I don't think it
01:07:46 would be true but that's how I saw it at
01:07:48 the time so I wanted to kind of spice it
01:07:50 up a little bit and I wanted to make a
01:07:52 proof of concept of a thing I saw in
01:07:54 breath Victor's demo that is often
01:07:57 referred to as time traveling
01:08:00 you're designing something embedded in
01:08:02 time you need to be able to control time
01:08:03 you need to be able to see across time
01:08:06 otherwise you're designing blind
01:08:08 I didn't really know how to do it but I
01:08:10 thought that's a cool idea for a talk so
01:08:12 I'm gonna send the proposal if the
01:08:14 proposal is successful then I'll just
01:08:16 figure it out and it turned out that the
01:08:18 proposal was more successful than I
01:08:20 thought it would be and so I made a
01:08:22 proof of concept for that and that
01:08:23 approval concept became known as Redux
01:08:28 so my talk is about developer tools
01:08:30 because react and hotel ordering and
01:08:33 time travel these are all developer
01:08:35 tools he was like literally creating
01:08:37 Redux in service of being able to
01:08:40 deliver this this talk and I called it
01:08:42 presentation driven development because
01:08:44 the Thing That Shook out of it was you
01:08:47 know this sort of like canonical State
01:08:48 Management library for react apps for
01:08:50 for several years most of my work is
01:08:53 around the react ecosystem because
01:08:54 that's what inspired me to contribute to
01:08:56 the open source in the first place but
01:08:59 there are two particular projects that
01:09:01 I'm going to talk about today it was
01:09:05 validating to give that talk
01:09:07 but I was not surprised by
01:09:11 the response because well I I had my
01:09:14 doubts but also I thought the talk was
01:09:16 good like I thought it's a really good
01:09:19 and I was glad that people also liked it
01:09:23 but I think it was actually not the talk
01:09:25 that was uh that was really like the
01:09:27 moment for me I think it was just like
01:09:31 I kind of felt like you know like like
01:09:34 going to Hogwarts for the first time I
01:09:36 think it kind of had this uh this
01:09:38 feeling because there were all these
01:09:39 people who I only knew them as these
01:09:42 avatars and when I season meet somebody
01:09:44 in person they they kind of become
01:09:46 three-dimensional of course you kind of
01:09:48 see the whole picture and I think it was
01:09:51 just like such a wholesome feeling is
01:09:53 the feeling that we are all trying to
01:09:56 figure out what we can do with this
01:09:58 thing and we don't know it yet and we're
01:09:59 just playing with it
01:10:05 that's also where I met jinchan I asked
01:10:09 for for her advice before because she's
01:10:11 one of the co-creators of the fox
01:10:14 architecture so it was nice to meet her
01:10:16 in person and she mentioned that
01:10:18 actually Facebook is hiring in London
01:10:20 and so they arranged an interview for me
01:10:23 right at the conference which was like
01:10:25 our normal interview process the same I
01:10:27 think like four interviews or something
01:10:28 like this but I I missed the second day
01:10:31 of the conference but we just did an
01:10:32 interview there and so that's kind of
01:10:34 how I got into Facebook
01:10:36 we just quickly grabbed them out of the
01:10:39 conference a little bit like on the down
01:10:41 low and then uh conducted the interviews
01:10:46 um in the basement of a hotel I think is
01:10:48 that normal entries no Dan is so special
01:10:51 he's always been all special I guess
01:10:54 like I would think of myself as like
01:10:57 member of what would become the react
01:11:00 team as you know it today because I
01:11:03 joined a little bit earlier than I think
01:11:05 Andrew Brian Luna and and like a bunch
01:11:09 of other people who work with us now and
01:11:12 I joined at the time when a few people
01:11:14 who worked with us before were just
01:11:16 about to leave so I was kind of in this
01:11:19 transitional period when the team was
01:11:31 do you remember the first time you met
01:11:35 uh I think I've met
01:11:37 I think I met him yeah well that was the
01:11:42 clear moment maybe was that the first
01:11:44 time we actually did you get invited to
01:11:46 react conf because of that he had a
01:11:51 I met him like I think before that I met
01:11:53 you and Sophie and Joe and Tim like all
01:11:56 in the same week yeah he started asking
01:11:58 some questions that were very similar to
01:12:01 the questions that on the team we were
01:12:02 talking about internally and so I just
01:12:04 remember like I gotta connect you with
01:12:06 like Sebastian and Jordan and the rest
01:12:08 of the team yeah and then also I was
01:12:09 like to the recruiters I was like yeah
01:12:10 this guy like we gotta hire this Andrew
01:12:12 guy and I think we were really fortunate
01:12:15 early on to have a bunch of people
01:12:16 liking that kind of stepped up and they
01:12:18 were like this seems cool I just want to
01:12:20 be a part of this I just want to help
01:12:21 I didn't realize it was kind of like a
01:12:23 freshman class sort of feeling at the
01:12:26 started managing the team around that
01:12:29 um and like I couldn't have really asked
01:12:31 for a better uh both project and like a
01:12:34 set of colleagues and team to to join
01:12:36 the beginning of phase two yeah that's
01:12:49 like man we're nailing this
01:12:58 react was now out of the hands of its
01:13:00 Founders it was ready to take on New
01:13:03 Life in the care of a new community
01:13:05 grown and future-minded team we tried to
01:13:08 watch some of the numbers like the
01:13:11 number of GitHub stars or the number of
01:13:13 npm downloads on Google Trends how many
01:13:16 people are searching for react and none
01:13:19 of those numbers are perfect but
01:13:22 basically all of them kept going up over
01:13:25 time and eventually got to a point where
01:13:29 we looked at it and said oh yeah like
01:13:31 millions of people essentially are using
01:13:34 react there are a lot of little details
01:13:37 in how we did things that encourages
01:13:40 an ecosystem to participate that were
01:13:44 critical Parts on making it what it is
01:13:46 today we didn't put everything in the
01:13:48 framework we left a lot of it to the
01:13:51 ecosystem to innovate and we got a lot
01:13:54 of contributions we got a lot of
01:13:55 interest that way we got a lot of things
01:13:58 spurring from that it was not ever a
01:14:03 foregone conclusion I like it's still
01:14:05 surreal to me that it's as popular as it
01:14:07 is it's this great example of this like
01:14:10 Underdog technology within a big company
01:14:12 where there could have been these forces
01:14:15 that really pushed back on it I think a
01:14:17 lot of elements of good timing Good
01:14:19 Fortune good luck good leadership
01:14:22 support all sort of like aggregated to
01:14:24 allow react to be a success that had we
01:14:28 missed a few of those or had a handful
01:14:31 more things failed instead of succeeded
01:14:33 then I do not think react would be in
01:14:36 the spot that it is today
01:14:37 I feel like you can't take anyone out of
01:14:40 it and have it be what it became I think
01:14:43 in the early days obviously Jordan right
01:14:45 like this thing wouldn't exist and then
01:14:46 Jing Chan just absolutely critical I
01:14:49 mean she was so instrumental in the
01:14:51 early days of react that it just
01:14:52 wouldn't have been a thing that we cared
01:14:54 about if it didn't prove itself
01:14:56 and then Shane O'Sullivan is responsible
01:14:59 for you know really I mean a very hard
01:15:02 decision to like I'm gonna go this path
01:15:05 instead of that thing and then the
01:15:07 engineers that worked on refining and
01:15:08 iterating on it and turning it into
01:15:10 something good it was Chateau and Paul
01:15:12 shantacy and Pete hunt and my manager
01:15:14 Adam wolf when I was like you know
01:15:16 asking all these questions about like
01:15:18 should we be do like is this even worth
01:15:20 it especially after JS conf when we were
01:15:22 feeling defeated you know he was there
01:15:24 to pick me back up and be like no look
01:15:25 it is delivering value this is good keep
01:15:28 going and there's different phases too
01:15:30 right you have the early early days and
01:15:31 you had the like for the next literally
01:15:34 almost we're going on 10 years now with
01:15:36 Sebastian's technical leadership and
01:15:38 Andrew and Dan and Dominic and flarney
01:15:41 and Sophie and I I just feel like it's
01:15:45 just a group of incredible people and if
01:15:48 you take any of them out of it
01:15:50 it just looks pretty different it was
01:15:53 really a team effort
01:15:55 uh it was really a team effort from the
01:16:06 says that awesome Solutions are rarely
01:16:10 created by large organizations it's
01:16:12 almost always one person with passion
01:16:14 and vision that slowly start to infect
01:16:18 others this is this is a great summary
01:16:20 of how react became react because it was
01:16:23 never inevitable it was always this wild
01:16:26 idea that kept Gathering momentum person
01:16:29 by person and any expected react to fail
01:16:32 and if it weren't for the hard work of a
01:16:35 few determined developers it very well
01:16:42 this is just the beginning of the react
01:16:45 story the story of how a community
01:16:47 transformed an underdog UI Library into
01:16:50 the most popular JavaScript framework
01:16:56 this is react podcast I'm fantastic
01:17:31 I'm like so tempted to just
01:17:34 prize FaceTime Jordan right now be like
01:17:36 interview it's just really strange to
01:17:41 you're just so close to death the first
01:17:45 reactive shirt that we made
01:17:49 thousands of developers find jobs across
01:17:51 Europe using Honeypot if you're up for a
01:17:53 new challenge in one of these European
01:17:55 cities sign up at honeypot.io
01:17:58 if you want to see more Tech
01:18:00 documentaries then subscribe so you
01:18:02 don't miss the next one
