10 December, 2019
How did we get here? A few words on React framework
React’s history starts in 2011 when Jordan Walke, Facebook specialist responsible for Facebook Ads, created FaxJS, the early prototype of soon-to-be hit framework. His efforts had a specific purpose – Facebook was really struggling with managing their advertising tool and desperately needed a solution that would handle this situation. According to Walke, “making a change on this product is terrifying like potentially lose a day of revenue because you’ve missed a semicolon or something”. The development team worked their assets off full-time, nights and weekends to make React reality.
Finally, React debuted in 2012 but it wasn’t until May 2013 when it was publicly presented on JS ConfUS as an open-source. Initially, the IT community was, to put it lightly, quite unconvinced. The creators were determined to change that – in 2014 the so-called #ReactJsWorldTour started with a mission to turn as many people as possible into React lovers. It was only smooth sailing from there – to the point where React Native for iOS and Android was created. But let’s leave this story for mobile developers…
The latest massive milestone in React’s history was React 16.8 that premiered on 16th February 2019. It introduced React Hooks that revolutionized the way components are created. We already covered this topic in our previous article about React’s useMemo hook. React is constantly being developed and already evolved to 16.12 version. I’m sure we can expect more from it in the future.
What makes React so popular? Let’s take a look at the list of advantages:
- Designed for scaling and reusable – the component architecture is perfect for writing the code once and then use it again in other applications. Normally, when an update happens, one component can affect others and ruin the whole app – not to React! Reusing system components with internal logic is great for code’s maintenance, growth and is probably the most important benefit of this framework.
Mobile devs, have this one – React Native is technically a separate tool, components are different but you CAN say that the way of writing code to web and mobile versions is very similar. Having said that – no more mentioning Native in this article!
- Saves time and money – if a developer can use the code again and again, logically they save lots of time and budget that would be otherwise spent on a repetitive task.
- Simplicity – if you had any previous experience in software development, it’s quite easy to understand and learn React from scratch. It’s component-based and most of the components are a single function that performs from top to bottom, hence why it’s easy to understand how the code works.
- Super easy to test – there are special libraries created to test React like react-testing-library.
- Performance – React stores it’s own copy of the DOM (Document Object Model) tree called Virtual DOM. When something changes in it, React transfers those changes from the virtual tree to real one and updates the appropriate subcomponents.
- Support – React is created by Facebook and hordes of independent contributors, so there’s no way it’s going to disappear or discontinue in the foreseeable future. That means your web applications are safe and sound.
What companies use React in their web applications?
Are you ready for a display of crème de la crème, Forbes and Fortune A-listers, tech leaders, user-favourites who put their money on React?
No surprises here – Facebook is the main reason why React was created in the first place. React implemented in Facebook’s frontend allows for notifications to be displayed for the user in real-time. This way there’s no need to reload the page every time you suspect you got a new message, comment or post on your News Feed.
When Instagram was acquired by Facebook in 2012 it hadn’t a web application yet – hence why developers quickly rolled up their sleeves and got to work. The web version of Instagram is fully based on the ReactJS library. Similarly to FB’s case, React is necessary to display photos on the map in real-time or directly from selected location and support hashtag counters (really helpful for social media marketers).
💬 WhatsApp Web
Just like Instagram, WhatsApp has been a Facebook product for a while now. And just like Instagram – its web version is React-based. AND just like Instagram, it’s all about displaying messages in real-time. You can use this web app without installing any applications, plus you won’t leave any information behind on your device. WhatsApp Web uses WebSockets for communication so the server knows all the time whether the user is online, writes a message or reads the delivered ones.
Gamechanger in streaming services with 125 million subscribers around the world, Netflix has been rewritten to React in 2014. The growing platform needed an improved start-up and loading speed, performance, scalability and UX. Looking at happy users, Netflix definitely benefited from this change.
Nearly three million users operate on Atlassian tools – at The Software House, we use Confluence, Jira and Bitbucket. Atlassian decided to pick React because their main priority was re-usability – since it’s deployable to the web, mobile and desktop, their developers can recycle libraries between all the versions.
Disney is a powerhouse and their new service – Disney+ will be their weapon in the upcoming battle for the streaming market. The web application is written in React and uses Redux to control the app’s state and store downloaded information about TV series and movies.
📧 Yahoo! Mail
Yahoo! Mail has surely come a long way as far as their solutions are concerned – firstly it was C++, HTML (still in the 90s!), then Oddpost, Java, Python, JS in 2004, followed by Classic PHP, JS and finally next-gen NodeJS, React, MicroJS in 2015. Phew! Eventually, Yahoo picked React because of virtual DOM, easy debugging, independent components, and… a constantly growing ReactJS community.
🔫 Battlefield 1
In this video game, React is used to build the user interface. React allows writing your own renderers, which means the execution of the application code doesn’t have to spit out HTML but any other thing, e.g. information for the computer game engine on what to display on the screen.
It doesn’t end here – the list of all the big companies that had/have love affair with React is quite long and includes BBC, Dropbox, IMDb, PayPal, Imgur, American Express, Dailymotion, Lyft, Uber, New York Times, Reddit, Archive.org, Airbnb, Urban Dictionary, Coursea, OK Cupid, Variety, The Economist, Buffer, HBO, Product Hunt, and much more…
The Software House works in React too
In our portfolio, we have lots of successful React projects including a GPS tracker Weenect that shows you the location of your pet, child or elderly person on the map in real-time, or Synerise Storybook – a tool for developers who work on the easily-personalised marketing dashboard with reusable UI components.
Of course, we’re not comparing ourselves or our projects to Facebook or Disney, let’s not be ridiculous. However, if you happen NOT to be one of the largest corporations in the world, and desperately need proficient React developers, we can actually help you with that. 😉