Hit enter to search or ESC to close

The Evolution of JavaScript and React

kdiev

When Facebook Engineers found it increasingly harder to manage their vast codebase in the early 2010s, they had to hire more hands, over time the cascading code and technical debt, slowed them down as the company codebase expanded; and they had to find a way around it.

Facebook runs on XHP, which is Facebook’s customized version of PHP that comes with automatic XSS protection. XSS exploits are typical man-in-the-middle attacks that steal user sessions and cookies, compromising secured and personal data.

While XHP is excellent at securing Facebook from data breaches, it wasn’t good at all when it had to render dynamic web pages, every change in the state required a re-rendering of the entire Document Object Model (DOM) causing losses of saved user data in the DOM.

This got Facebook thinking on how to update the state without having the need of user to manually reload the DOM. Solving this problem led to the emergence of React, a JavaScript library for building user interfaces. After the development of a prototype by Jordan Walke, the feature was tested on the like and comment feature.

 

Soon after Facebook acquired Instagram, React was decoupled and used on Instagram as a Library. This was the first step in the evolution of React as a global front-end library for developers.

At the 2013 JSConf in the US, React was open-sourced by Facebook as a JavaScript Library. Several fortune 500 companies have adopted it like AirBnB, Trello, FreeCodeCamp etc.

After a backlash from Developers over the BSD+ patent in 2017, React was re-licensed under the MIT License sparking widespread interest in the library.

 

Key features of React

 

  • Virtual DOM: imagine a bicycle object with 2 tires, 2 wheels, and other parts, colored red, let’s call it “Bikee”, for every change in any of these properties or mutation to the object (say the color is resprayed blue), React realizes what has changed through it’s props/state comparing algorithm and updates that particular node through “reconciliation”, without reloading the entire DOM.

 

  • Server-side rendering: React is capable of rendering on the server instead of the client. This increases page load time resulting in better user experience, improves search engine indexing and site conversion through social media sharing. After the single page, React App is generated on server-side, all other subsequent interactions are handled on the client-side.

 

  • Portals: Portals is a new cool feature that allows Developers to target and render components outside of the DOM hierarchy of the parent component. This feature is excellent at targeting and rendering Modals, Overlays, Pop-ups etc.,

 

  • React Native: React Native is a JavaScript library for building native Android and ios applications using React. React Native works with Native APIs via React Primitives to render Native platform UI, which uses the same API other native Apps use to provide a cross-platform native experience.

 

  • React 360: React 360 is a framework for the creation of 3D and VR user interfaces. It is built on top of React. React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web, it is developed by Oculus VR ( a sub-company of Facebook) for building VR Apps via the declarative component method of building React Apps. React 360 is simplifying the VR app creation ecosystem.

Leave a Reply

Your email address will not be published.Required fields are marked *