13th October 2020
Performance, functionality and user experience are some of the most important aspects of modern web applications. Every day we use apps that are logical, lightning fast and consistent for a reason: they perform a key function or service reliably and predictably.
In contrast, the multitude of apps that don’t make sense, aren’t consistent or load slowly are used only when necessary or tested once and deleted forever. When we have no choice but to use a corporate web or mobile application that is clunky, the experience can compound frustrations and even lower morale among users or employees. This can result in slower work which, multiplied over hundreds or thousands of staff, can translate to quite a bit of money being lost or wasted due to poor functionality.
In today’s competitive business environment, applications must be developed quickly and updated frequently — and keeping the user experience consistent across different platforms and browsers poses a real challenge.
Not long ago this was a huge problem for developers. The larger a codebase became, the more time it took to debug errors. That meant slower update times and more people working to update and maintain the applications, often hunting for miniscule components in the code that were causing performance bottlenecks.
The Facebook Ads web application is a complex tool that does a lot of calculations and UI updates based on user inputs. Facebook was having issues with adding features as the app grew and decided to rethink their approach to the application. The result was React.js.
At the time, React.js presented a completely new approach to building web UIs. It discarded traditional development fundamentals that were hindering innovation and was initially met with skepticism from the developer community for its brazen disregard for established best practices.
Facebook, however, pushed forward and was diligent in showing the community why React’s novel approach was a step forward. Since its release to open source in 2013, React has revolutionised the way developers approach UI design.
React.js is declarative and functional
React.js takes a declarative approach to programming which makes the components, the fundamental building blocks of applications, reusable. Before React, Facebook and everyone else used imperative components in their applications. Imperative components rely on state and are much more complex and error-prone than declarative components — thus, the inordinate amount of time spent finding errors and bottlenecks.
One of the great things about declarative components is that they are easy to read and understand, and they adhere to functional programming standards. As Eric Elliott wrote, “Functional code tends to be more concise, more predictable and easier to test than imperative or object-oriented code.”
React.js uses a Virtual DOM
Another powerful feature of React.js is that it uses a Virtual Document Object Model (VDOM), which means it keeps a representation of the actual DOM in its memory and updates it based on user input or other factors. This helps make composing Single Page Apps (SPAs) simple with React. Facebook users will know that when you click an item on the platform, a new page is not loaded. Instead, the application takes our interactions and loads the corresponding data into our page via the VDOM.
Now consider Facebook from a design standpoint. When you click on messages, a drop-down appears with a profile pic, name and the first few words of recent messages from your friends. Let’s say we want to make the friends’ names bold. With React, we only need to make the change in one place to make all friends’ names in the messenger drop-down bold. The component that lists each message is the only property we need to change, making consistency in the design much easier to maintain and update.
React can incorporate Server Side Rendering
React shows where errors have occurred in the code
As applications grow more complex and more features are added, the potential for code errors increases. React handles error detection and reporting in a very straightforward fashion: It will literally display what error occurred and on which line, allowing developers to easily locate issues in the code and fix them.
This leads to more productive and happier developers who are able to release better code quicker. All that results in more cost-effective development and less time wasted on debugging complicated applications.
React app developers can be integrated into a project in no time
In the past, expanding a development team meant spending a lot of time onboarding new hires, showing them how an app works and getting them familiar with the structure and interface components.
Because of its declarative nature, React developers can jump into a brand new project, read the code and begin making changes immediately without fear of breaking the application. Any code changes they make will affect only the components they are working on, and if something breaks, React will tell them what broke and where so they can fix it immediately.
React is open source and has a thriving community
Facebook purchased Instagram in 2012 and wanted to use React for the UI. Because of this, Facebook needed to decouple React from its application and make it usable in multiple projects. They eventually decided to make it open source as a result. Since its release to the world, React has steadily gained popularity, and there are now millions of developers using React to create amazing applications.
There are many active online communities where developers can go for help with best practices and application architecture, as well as worldwide, in-person meetups for React enthusiasts to come together and discuss React. The open source community is also continually extending and improving React with reusable components and expanding its functionality.
React boasts a great developer experience
Developer tooling in React makes writing and testing code simple. With its fast refresh feature, changes made to code via a DevTools extension or tool are immediately updated in the application without having to refresh the page or wait for the entire application to reload. The edited components are automatically updated in the VDOM. Other features allow developers to understand the relationship between components better, track performance and easily debug application errors via descriptive error messages.
Additionally, there are great tools available that empower developers to create component-driven UIs such as Storybook and React Styleguidist. The developer friendliness of React inspires more consistent and intuitive UIs that translate to better performing and more stable application architectures.
React embraces the “Learn once, write anywhere” philosophy
In an effort to make building applications more functional and less complicated to write for multiple platforms, Facebook embraced a “learn once, write anywhere” philosophy. Along with React Native, which we’ll dive into in another post, React allows developers to build applications in one library and reuse their code with little modification across multiple platforms and browsers. This makes creating compelling, cross-platform apps from one codebase a reality.
A powerful tool
Since its open source release in 2013, React has become a powerful library for creating modern web applications that are highly performant, predictable and consistent. With companies such as Facebook, Airbnb and Dropbox (to name a few) building their products on React, it is quickly becoming the standard for web UI development. Moreover, its thriving community and developer friendliness have helped to establish it as a mature and robust library that can be used to create compelling enterprise solutions of all kinds.