DEV Community

Cover image for React.js, behind the scenes
Diona Rodrigues
Diona Rodrigues

Posted on • Updated on • Originally published at dionarodrigues.dev

React.js, behind the scenes

Did you watch the React.js documentary released on YouTube a few weeks ago? Some of Facebook's tech engineers spoke about how React started in the company as Bolt.js and how some decisions were made around it. They also talked about how the community rejected the framework when they first introduced it, and how it has changed significantly in the months since.

Even though React.js was created inside one of the biggest tech companies, it's interesting (and inspiring) to see how an idea can grow to become one of the most used libraries in the world of front-end development. From an initial idea to solve a specific problem to an open source modern project with the collaboration of many developers around the globe. An idea that spawned others, such as Redux.

Watch the video and check out some key points below.

React documentary summary (spoiler alert)

The year was 2011 when React started on Facebook - in a scenario where jQuery, Backbone, MooTools and other similar javascript tools dominated front-end development. They first called it Bolt.js, then thought about FBolt.js until it became React.js. Sometimes referred to as a framework, sometimes as a library.

Based on the difficulties Facebook's front-end team was having in creating a complex UI at the time, two software engineers created Bolt.js, a client-side MVC framework that tied together some existing JS tools to handle with the complex interactivity of primitive Facebook timeline, chat, news feed and other advanced applications.

But as the use of Bolt.js and also the team grew, Jordan Walk, a product engineer working in ads at the time, had some interesting ideas for changing Bolt, making it much more functional, removing its MVC architecture and adding the concept of re-rendering when something in the UI has changed - that's when React came into being, but with its initial name as FBolt (Functional Bolt). Later they also introduced JSX syntax and, through Jin Chen ideas, another great software engineer, they also introduced ways for handling states in React based on Flux architecture, which was a new chapter in the framework development process.

But it was around 2012, when Facebook acquired Instagram, that the framework was renamed React and the web version of Instagram was the first full end-to-end application in production developed using this modern tool.

The documentary also showed the risky decision they took after several business discussions to continue using React instead of its initial version called Bolt, as React had not yet been fully developed and its use would impact the company's business for a while.

The next step was to make React an open source tool. And they did it by making this announcement at the US JSConf in 2013, a famous javascript-focused event. In an age where best practice was splitting HTML, CSS, and JS into separate files, the React way of creating components using JSX and mixing them all together was not well accepted by the community, and this announcement was a disaster.

It was then that Sophie Alpert, a non-Facebook developer, saw React and decided to use it. She solved some technical details by rewriting about 2,000 lines of the library's code based on the project she was working on - and then made a pull request to the React repository. And as you can imagine, she became a member of Facebook's engineering team.

And then, in the same year, 2013, they decided to announce React again at the UE JSConf, which took place in Berlin. From that point on, the community slowly started talking about the library and trying it out, realizing the simplicity of how React creates rich UIs. And companies have also started using React. In 2014, Netflix decided to use React to rewrite its platform, which contributed a lot to the library's popularity.

2015 was the year of the first React.js Conf where they made React Native an open source project and started talking about GraphQL and Relay. It was a huge hit with the community and Facebook decided to convert all of their apps to React and remove all other JS frameworks. That's when a few other developers also showed up, including core team member Dan Abramov - famous for creating Redux.

Some of the software engineers responsible for React's success no longer work at Facebook, but they certainly left their legacy there (and in the dev world). :)

Software engineers in the documentary

Additional notes

One off-topic thing I think is amazing to note is that the documentary highlighted some diversity in IT. I believe there is much more to be done, but having LGBTQAI+ people as managers is inspiring. To be even more complete, I would also like to see more black people in the film.

See you next time! 😁

Top comments (12)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Thanks so much for sharing this sum up, Diogo! I'm gonna have to check out this doc later on today.

Collapse
 
dionarodrigues profile image
Diona Rodrigues

I hope you like it! :)

Collapse
 
adrianketh profile image
Adrian keth Olita

Just want to share this infographic on the history of React bairesdev.com/react/#react-history

Collapse
 
dionarodrigues profile image
Diona Rodrigues

Thanks for sharing it

Collapse
 
efpage profile image
Eckehard

Thank´s a lot for sharing the link. I´m very happy to get this background information.

People tend to present React as the one-tool-that-fit´s-all-needs. It is good to see, that react was mainly created to better handle the complexity, that arises from large teams and complex projects. It also has it´s price and it is still a work in progress.

Today, React serves a wide range of applications, but it is not necessarily the best solution to build a family hompage. In any case we should be happy, that there are different tools, as there are very different tasks to solve.

Collapse
 
dionarodrigues profile image
Diona Rodrigues

You're so welcome!
I see your point @efpage and completely agree with you. React is defintelly not for all types of projects and developers should make their decision wisely. Sometimes I see people using a complex solution (like React) for a simple project (like a landing page), for instance. The best way is really understand the needs of the project in order to find the best solution for that specific problem - and sometimes plain HTML/CSS/JS is more than enought.

Collapse
 
efpage profile image
Eckehard • Edited

The point which React adresses is pretty clear: Handle complex interactions. But this comes with a long and steep learning curve (see: Writing for-loops in an untold language). If you go with plain HTML/CSS/JS (which you will need as a precondition to use React anyway), you will end with a relatively small but universal set of commands to use, that serves for all cases.

For me it is not clear, whether the promise, that React made, will be kept. It comes with a big overhead and there are still a lot of performance issues.

But the main thing is: Performance is not everything! The question is not: Who ist fastest, but: Is it fast enough? So, maybe we should not ask: "Do we need React", but "Do we still need React"

Thread Thread
 
dionarodrigues profile image
Diona Rodrigues • Edited

If we isolate the initial concept of React, I think you have a good idea of how to use this framework. However, nowadays React is much more than that. It is a powerful engine that has been used to create web apps (client-side and server-side rendering), static websites, mobile apps... There are also many powerful tools built on top of React such as Next.js and Gatsby that is beeing used to create marketing websites as well.

I believe that React created an ecosystem around it that made it take different directions over time, but still preserving its essence. The question, I would say, is: why are developers using React in any kind of project? I believe that one of the reasons is because many developers right now start their careers from these frameworks instead of learning the possibilities of HTML, CSS and JS outside these frameworks.

Collapse
 
time121212 profile image
tim brandom

Super insightful!
Thank you!

Collapse
 
dionarodrigues profile image
Diona Rodrigues

You're so welcome!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.