The history of the React framework: how Facebook acquired Instagram and why it led to the discovery of the source code React.js

Today React is one of the most popular JavaScript libraries for the user interface in the world: more than 70 thousand "stars" on Githab, at least 1100 authors and millions of downloads every month - in addition, this framework is used by more than 4 thousand companies . But when Facebook first showed React to the world, very few people were pleased.



We decided to plunge into the history of the birth of one of the most popular technologies in the software development world - React , and invited Pete Hunt (Pete Hunt), who stood at the origins of this library (now he is the general director of Smyte ), so that he would finally tell about why React was created, why this technology became popular on Facebook after acquiring Instagram, and how it eventually came to people.

')

Highlights

From Facebook Camera to Instagram purchase

Mark (Zuckerberg) has gathered everyone and says: “Mobile devices will“ shoot ”, so we urgently drop everything and transfer resources to mobile development.” It seemed to me to be some kind of crazy idea: we could not support the work of the largest photo site on the network, having a handful of people in the team. It is completely pointless to transfer people to the development of applications for iOS and Android, which constitute a very small fraction of our traffic. But it turned out that Mark was 100% right - that's why I am not the CEO of Facebook ...



We developed the Facebook Camera application, and even were proud of what happened ... But Instagram came - and our project sank into oblivion ...



The guys from Instagram were given a garage on Facebook, where they could sit and calmly saw their idea. They used reliable Facebook security systems, but they also continued using AWS , and also developed their own product strategy, as far as I can tell ... And I was the first Facebook employee to be transferred to Instagram ...



Transferred to Alconost

Instagram needs a website

They already had pages with photos, and the web only seemed to be in plans, so at first the team focused on mobile devices: Instagram is always primarily smartphones, tablets, etc. In addition, they have a lot of public content, therefore I think the search engine optimization was an important part of the work ...



... It was impossible to see all the photos uploaded by someone. We wanted to fix this, but there was a problem: Django worked on the application servers, Postgres on the database servers, which could only support a certain number of connections ... there was nowhere to load, and the maintenance of many dynamic web pages was a significant load. visible from the web. We decided to transfer the rendering to the client side.



I went to Facebook front-end developers (the UIE team) and asked: “Guys, we need a JavaScript framework. What advice do you have? ”They answer:“ Well ... we now have three or four experimental projects in our work: BoltJS, JSHTML, and such a thing is React . ” ... I looked at these libraries, talked with those who worked on them, and decided to try React .

React is gaining popularity on Facebook

Developers from the advertising department came to me - and this is one of the most powerful front-end fenders on Facebook - and asked: “How do you like React to work?” And I answer: “Now I’m a fan of this thing, I don’t want to hear anything else "...



It turned out that Jordan Walke (Jordan Walke) - the one who came to mind to do React - from the advertising department team. While working on some product, he thought: “To change something here is a complete headache: you miss a semicolon somewhere and the company can lose its daily income.” Jordan worked on his idea at night, on weekends, lingered after work - but in the end managed to convince the rest of the team to let him immerse himself in this project entirely. He pored over the framework all day, and eventually developed the input-ahead component and deployed it, it seems, in a small block of News Feeds, but it was not a separate application — the first full-featured application was Instagram ...



So, in the advertising department they decided: "It worked in the" News Feed ", it worked in Instagram - we will try it in our office." The same was said in the mobile search team: “It worked in the“ News Feed ”, it worked on Instagram and, they say, the guys from the advertising department are going to implement it - so we will try,” and so on.

Opening the source code of the React framework

Everyone involved in Facebook was very worried then, because we wrote documentation for this, prepared everything.



Later that year there was a conference of JSConf EU. I wrote a speech that said something like this: “I’m not going to convince you that React is better. I’ll just tell you how this library is different, and show three or four approaches that no one tried to use before. ” This time, the audience turned out to be much more supportive (compared to the first talk about the React framework).



When discussing React, stability is often overlooked. When I left Facebook, there were already tens of thousands of React components — and that’s hundreds of thousands of lines of code. If you make a change in the framework that breaks compatibility, then you can't just tell the rest to rewrite the components — all those hundreds of thousands of lines ... I had to do this with the React team. Therefore, some kind of automation was needed with the help of some scenarios, and these scenarios needed to be published in the community: the Angular 2 approach could not be applied here, because the same people made fundamental changes and rewritten the components.

General thoughts and thoughts about the future of the React library

I would like the React team to give badges-certificates to third-party libraries that seemed to say to the others: “We bless this library and believe that it implements the right approach.” ...



Recently I started testing Fiber tests - it looks like this is a really cool project. It has a lot of really interesting ideas that pleases. The announcement of the development of React VR is also an interesting event. Just think how many platforms you can navigate using React Native or just React: iOS, Android, the Internet, and now also virtual reality ... The result is a huge segment, which is great, because you can minimally teach developers to use JavaScript, give the basics React - and then, having the API documentation of all these platforms, they will be able to immediately get down to business and begin to work productively. It's great, and I am very pleased to see how everything turned out.

---

Pete Hunt, CEO @ Smyte. OG React.js. Ex-Facebook and Instagram



Jonas: Hello everyone. Pete, tell us a little about yourself?

Pete: Of course. My name is Pete Hunt. Once upon a time, I worked on Facebook - on the React framework team. In the past two or two and a half years, I have been the CEO and co-founder of a company called Smyte.



Facebook does this: for the first six weeks you are included in the program of the training course (bootcamp) - I don’t know if this is so now, but then it was the first six weeks of work. You are given a variety of tasks, and you are working on them: the front-end, the back-end, the infrastructure, the mobile software, and so on according to the technologies used.



Q: What about working with photos? Have you encountered any difficulties when dealing with large-scale work with video and photos?

P: Of course. I joined video work and did a bit of support and maintenance.



At that time, a lot of things were happening at the same time: the Chronicle appeared, and it had many search functions and the like. It is also important that at that time there was access to mobile platforms, so literally a couple of months after I joined the company, Mark (Zuckerberg) gathered everyone

“Mobile devices will“ shoot ”, so we urgently drop everything and transfer resources to mobile development.”

- Mark Zuckerberg

Many were transferred from web development to a team of mobile platforms, and this made me angry because I did not understand why this was necessary. I did not have a smartphone, so all this “mobility” did not deceive me. It was, it seems, 2011, and my first smartphone appeared only when I received a diploma.



It seemed to me to be some kind of crazy idea: we could not support the work of the largest photo site on the network, having a handful of people in the team. It is completely pointless to transfer people to the development of applications for iOS and Android, which constitute a very small fraction of our traffic. But it turned out that Mark was 100% right - that's why I'm not the CEO of Facebook.



Q: Yes, it was a good idea.

P: Without a doubt. Someone was taken to mobile development teams, and amid all this, less busy people on Facebook had the opportunity to buy some products and infrastructure. So when we acquired Instagram , they told us: “We need an experienced person from the team that worked with the photo, which will go to Instagram, develop the necessary web components for them, integrate them and help the guys join the Facebook team. In general, you need to take them correctly. ” And I was among the first Facebook employees who were transferred to Instagram.



Q: But you were still not sure that the future was mobile?

P: I, generally speaking, are still trying to understand how this happened. In general, one day (or evening) we received an e-mail at the post office - something like this: “Guys, come back to work early tomorrow: we will have an important announcement.” We came - and this is what they told us: “The fact is that somewhere in an hour it will be announced that we bought Instagram, their team will come to meet this afternoon.” “Wow!” I thought.



A: Well, yes, it turned out interesting. So, in the afternoon 14 people came to your office.

P: Yes, I think there was about 14 people. Somewhere there is a photo in which you can count exactly.



Q: Did you like the Facebook Camera?

P: Well, I wouldn't say that. I was already imbued with the spirit of the company and wished her success, wanted us to win, but it was not at all like success ... but it turned out I was wrong.



The guys from Instagram were given a garage on Facebook, where they could sit and calmly saw their idea. They used reliable Facebook security systems, but they also continued using AWS , and also developed their own product strategy, as far as I can tell. Interestingly, it all looked very separate. I did not speak with Mark, nor with the management, nor with anyone else, but it seemed that they were simply given the opportunity to do what they wanted.



Q: So how did it happen that you were transferred to Instagram?

P: They needed a website.



Q: Didn’t they have it then?

P: They already had pages with photos, and the web only seemed to be in plans, so at first the team focused on mobile devices: Instagram is always primarily smartphones, tablets, etc. In addition, they have a lot of public content. , therefore, I think, an important part of the work was optimization for search engines ... I, in fact, was the first full-time developer who was sent to the Instagram team from Facebook.



Q: When you got there, did they have a front-end framework yet?

P: The task was to develop something that, it seemed to us, would be a complete set of web applications. We were going to start with the photo and profile pages, and then make the pages of hash tags, a map (for example, for a geo-search) and the like - all this for the Instagram website.



A: And before that there were pages for individual photos?

P: Yes, there was a page for a photo, then the site instagram.com appeared, which served more as a billboard for the application. That's all they had.



Y: Yes, I remember, you could only view the photo.

P: Yeah, and it was impossible to see all the photos uploaded by someone. We wanted to fix this, but there was a problem: Django worked on the application servers, Postgres on the database servers, and this database can only support a certain number of connections. We had a limitation on capabilities, and we already squeezed everything that was possible - there was nowhere to load further, and the creation and maintenance of many dynamic web pages is a tangible burden, especially when they are visible from the Internet. We decided to transfer the rendering to the client side.



Facebook tried not to use JavaScript : the client needs to load more, the processor load increases, and this is another language that will have to be learned. So we had quite a bit of javascript code, but this code was used everywhere. I kind of knew JavaScript, but not much. So I went to Facebook front-end developers (the UIE team - developing user interfaces) and asked: “Guys, we need a JavaScript framework. What would you advise? ”



They answer: "Well ... we now have three or four experimental projects in our work: BoltJS, JSHTML, and such a thing is React ." For each of these solutions there were pilot projects, maybe something else ... I remember that, it seems, Facebook hired webOS developers, and these guys are good at their job. We also had a mobile framework Javelin, so there were a lot of different options. I looked at these libraries, talked with those who worked on them, and decided to try React .

“Between the points“ let's try React ”and“ let's run something to work ”there was a lot of blood, sweat and tears”.

Q: What made you make that decision? What about the other options? Just liked the name or? ..

P: All of these solutions had their own “hello world”, but if you had to do rendering in client applications before, then after seeing React, you might think that this is too good to be true. But we launched this framework, and it worked fine.



Y: On the profile page?

P: On Instagram profile page.



Q: So you were impressed with the speed of work. Having understood what a cool thing this React is, you immediately began to develop a profile page on it.

P: Yes, but between the points “let's try React” and “let's run something to work” there was a lot of blood, sweat and tears.



Something on Facebook was able to do very well and even better than anyone else, but there was also something for which they simply used cloud services.



Here is a good example: the entire Facebook JavaScript code, including React, was collected by a packer developed internally - a very advanced tool that used either machine learning or some kind of statistics: this thing looked at the download logs of individual modules and dependencies scheme and carried out optimization - indicated which modules should be combined, and what should be loaded in advance.



The packer, by the way, was written by Ph.D., and it worked just amazing: better than the Webpack , better than everything that can be found in open source codes to this day, but, unfortunately, it was heavily tied to the Facebook infrastructure.



In the end, I went to the management and took a team of either three, or four developers who helped me: we wanted to finish and put together this whole set of business products. By this moment we tried React - it fascinated us, and we were going to do everything on it.



Q: At what point did you realize that React is a great thing and should be used? Maybe there were some premonitions? Well, for example: "Perhaps, if you take up React, it will be cool." How was it?

P: The whole team worked. I also cleaned up a lot of things in the API, corrected something in performance and packaged everything for Instagram - and then we used a lot of this when we opened the source codes.



Q: So, if you look at how it all developed, it turns out that you had an idea that you tried - and it proved its viability. By the way, how many users were on Instagram at that time?

P: I don’t remember already, but it seems like no less than ten million.



Q: So, you knew that to some extent this thing scaled well. Did you immediately start writing everything else using React?

P: It seemed to me that this framework is just a super-cool thing, with a truly innovative approach; I wanted to be a part of it. Therefore, in my free time I began to contribute to the code - to the code base on the Facebook side. As new products were released, I corrected errors, cleaned the API, wrote documentation, and so on.



Y: In Instagram.

P: Yes - but these fixes were returned to the React core.



Q: The source code was open from day one?

P: Not really. Facebook has completely opened the source code of the React library for the Instagram team.



The single source of the modules was the Facebook code base, so when we needed to use a function, we simply selected the necessary code and exported it to Instagram. And it always resulted in a problem: I had a “hacker” script that translated everything into RequireJS and could break, for example, something - I had to fix it. So at that time, stability could only be dreamed of.



Q: You made a change, and basically it happened gradually. Then you had to write "News Feed", and you were obviously going to use React. And what happened after the "news feeds", remember?

: : - — , . BoltJS, React.



BoltJS , . DOM — React. , React, , , .



, React: DOM, , . DOM . , IE7 8, , , , , .



: , . , . , , BoltJS, React.

: , — - — : « React ?» : « , »



, UIE , : , , .



: , . — React? - ? ?

: - ?



: , .

: . , - , , . , ? , , , , . . «» , , . .



, (Jordan Walke) — , React, — . - , : «- — : - — ».



, , , ( , ). , , , « », — .



: , React - — - ?

: — « ». - : 1% « » .



: … , — , . , - 1% , — React.

: . - JavaScript-.



, , , «» . : ? , , JavaScript, React.



: ?



: React , ?

: . React , « » : , . , , , , . — . JavaScript- — .



: React?

: … — : . , (Michael Lowman) — : - , . , .



, — ( , ), : «, React, …» , , , .



. : «, , React».



: React — .

: , . , React , , , , , - — . , DOM , . , , 90% , React, 10% .



: ? , , , : , , , ?

: . - : . iOS — Three20 , iOS- : , — , , . , , - , (James Pearce). , React.



JSConf 2013 — , , , - . - . (Tom Occhino) — , — , - . - : «, -; — , », — , . , - XML JavaScript , . : «XML? XML, , JavaScript-, … — ».



, React, «OK» . , , .



: .

: , — , , , . - , React , , . , … — . , .



: , , , , Webpack.

: . Webpack , , . . , , : , .



: , React, Webpack?

: , . , , , Webpack , React.



: , -, ? «»?

: , . JSConf 2013 .



React , , . IRC-, — , : (Chang Lu) (Ben Alpert), . , : «, JSConf», — : « !»



: « , — !»

: — . : , (Christopher Chedeau) . - , — , - . , , . JSConf EU : « , React — . , , - , ». (David Nolen) — , ClojureScript . - React, , : MVC- JavaScript ( The Future of JavaScript MVC Frameworks ). React, . , - , React: - — — , React, .



: . , — StackShare. , ?

: 2013- — , 2014 .



: , : « StackShare», — - . , , : «, , ?»

: , , , — , , . : , , StackShare — .



: , - , . , . , : « React — , ?»

: React , : - , - — React, . , React — , — OCaml.



: - , ?

: - , TTI ( ). , , , , , . , — ?



: , — .

: . React, . , React — . - , , — .



: . ?

: , React. - - , : Angular 2 , .



: . ? ?

: . React, , , React - -, , , , : , . , .



, , — , . API. , — Google . NodeJS API . , , , . , .



, React , : , . . , . API - Node.js. : , - «document.--». — - , - : , , .



: React - , ?

: . -, , . : , , React. , « JavaScript». : , , — — .



, React -, : « , ». , : - — , React . , , , , .



: . , -, React? , -, ? — ? React Native, , , , — .

: Fiber — , . - , . React VR — . , , React Native React: iOS, Android, , . - React Microsoft Word — , .



, , JavaScript, React — , API , . , , . «» Windows Mac: , , React. , React.



- - . , . React, — , . , . , « »: , , , , , , - , , . , . , , - , .



: . : Smyte React?

: , Smyte — .

Smyte — « »: Smyte — API, «» — , , . , - , , , , . , , , .



: — « ». : , , — .



. , , , React, , , — , .



: Smyte , , ?

: . : GoFundMe, Indiegogo YouCaring, . — Quora, musical.ly TaskRabbit. , , , . , , , — .



: , . , - , , - . Smyte ? Smyte?

: . , , Smyte. … , , , , , .



, , . : « , ». Smyte: , , , .



: ! , .

: , .





Alconost is hiring



The article is translated in Alconost.



We at Alconost in the Minsk office to work on the Nitro project (professional live online translation service) need a cool Frontend developer (React.js).Send a story about yourself and examples of what we did before at dev@alconost.com.



More about the company