Author
React is an open source JavaScript framework, that isn’t actually a framework. But it is currently the most commonly used front-end development technology in the world. React, originally developed by and still maintained by Facebook and supported by an active open source community, is in fact a JS ‘library’.
ReactJS is responsible for building a hierarchy of, or rendering UI components and provides support for both frontend and server-side.
Like all JavaScript frameworks and libraries, React’s primary use case is in the creation of dynamic user interfaces, which update on the client (user)-side. The page doesn’t have to be refreshed in the browser but automatically updates. Exactly like a Facebook feed does. This is why the social media giant invested in developing its own JavaScript library, specifically tailored to the needs of its own apps.
Why Is React The Most Used Of The JavaScript Frameworks & Libraries?
React has established itself as the most used front-end JS framework/library in the world because it is popular with both software developers and project sponsors. What’s the appeal to both the software engineers and architects that build apps, and the organisations that invest in them?
Your flexible, scalable, React development resource
Dedicated teams, team extensions and delivery management
Why Is React Favoured By Developers Ahead Of Other JS Frameworks & Libraries?
“I still think React’s the front-end framework that got it right. At this point, I’ve given up on keeping up to date with all the latest technologies. Between front-end, back-end, and infra, it’s impossible to be on top of everything.”
“But every now and then I go through the other front-end frameworks to see how their APIs have evolved.”
“React’s philosophy to stay close to the language is what makes me stick with it.”
“A loop is a loop. A conditional is a conditional.”
“When you need a component you just import it. It’s a function and it follows the same rules when it comes to closures and scope.”
“Nowadays, knowing JavaScript is only half of the puzzle. You need a technology to combine it with. But React seems to give the best value for your already existing JS knowledge.”
Alexander Kondov, Principal Engineer at News UK
ReactJS’s popularity with the development community is rooted in its flexibility (derived from the fact it’s a library rather than a framework – we’ll address the distinction in more detail later), speed and relatively accessible learning curve.
But there are other JavaScript libraries and frameworks that developers ‘like’ to use to almost the same extent. The 2019 State of JavaScript report ranks Svelte and Vue.js as almost as popular (89%, 88%, and 87% respectively) as React on the basis of developer satisfaction levels.
Despite the fact developers show similar levels of satisfaction with Svelte, a relatively new framework option, and Vue.js, React developers are in far more demand than those specialised in either of its JavaScript peers and rivals.
There Are More React Developer Job Opportunities
On the popular jobs portal Monster.com, there are 7678 open positions for React developers/engineers as of late October 2020 – compared to 1029 for Vue.js roles and just 16 for Svelte. On StackOverFlow.com, which only posts available development and IT specialist roles, there are currently 520 React positions being advertised. For Vue.js and Svelte developers, the number of jobs listings is 168 and 3 respectively.
In fact, Monster lists 7260 and StackOverFlow 304 vacancies for Angular engineers. Far more than for either Vue.js or Svelte, making it, by some distance, the 2nd most in-demand JS framework/library with employers. That’s despite the fact Angular only ranks 5th in terms of developer satisfaction levels.
As an IT outsourcing company, at K&C we can also testify to the fact we receive significantly more enquiries from organisations looking for React support than for any other JavaScript alternative.
The take-away is that there are obviously different factors influencing the popularity of a given JavaScript framework or library with developers themselves and the organisations hiring developers. However, React is uniquely popular with both sets of stakeholders.
Why Is React Favoured By Project Sponsors Ahead Of Other JS Frameworks & Libraries?
The organisations hiring software developers have slightly different priorities to those of the developers themselves. The latter prioritise how convenient it is for them to learn and apply a given JS framework or library to front-end development projects. If they feel a particular option is most convenient for them to create applications to a broad range of common specifications, they’ll favour it.
For the organisations putting up the funds for application development, there is a broader range of considerations that inform their preference.
K&C - Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?
Drop us a line to discuss your needs or next project
Technically Flexible & Performant Across A Broad Range Of Use Cases
The minimum qualifying criteria is, or should be, that a given framework or library is a good technical fit with the application’s specifications. Ideally, the choice will be flexible to the needs of a wide range of potential specifications. That will allow the same team to work across a variety, or all, of an employer’s applications.
Developer Satisfaction
It’s also a big plus if developers want to work with a coding language, framework or library. That will improve their job satisfaction levels, which has a positive impact on productivity and retention rates, which will ultimately feed through to the bottom line.
Smaller Skills Gap
But there are other business case reasons why React is currently the most popular choice for front end development. One is that there are more React developers on the market than there are specialists in any of the other JS framework/library options available. That’s important because it makes hiring, which is never easy when it comes to good software engineers, less of a bottleneck.
Future-Proofed
A smart project sponsor will choose to develop with technologies that are as future-proofed as possible. A deep pool of potential employees is one key factor to future-proofing a software development project. If hiring new team members to scale resources, or replace outgoing employees, is especially difficult, that can prove to be a serious problem that ultimately becomes an expense – either directly or indirectly. Salaries may become inflated or projects delayed and/or ongoing work disrupted.
React is among the most future-proofed technologies in software development because there is strong pool of React developers. At least compared to other choices – there’s a general shortfall of qualified software developers relative to demand. And greater demand for React developers creates a virtuous circle. Junior developers entering the workforce are more likely to choose to specialise in technologies for which there is higher demand.
There are other reasons why React can be considered an especially future-proofed technology. The library is maintained by Facebook, one of the largest companies in the world. It also has, partly by virtue of React developer numbers being high, an especially active open source community. The combination of Facebook’s backing and a large, and engaged open source community means React is continually being updated and improved and is in little danger of becoming obsolete in the foreseeable future.
Backwards Compatibility and Gradual Upgrades – React 17
Another aspect to future-proofing business-critical software applications that React excels in is that as well as continually being improved upon, the library also has high backwards compatibility – which means the most recent version is compatibly with previous versions.
In fact, the most recent version of React, React 17 (released in stable version on October 20th, 2020), surprised with no new features at all. Instead, the ‘stepping stone’ version is focused on making React more backwards compatible than ever. That’s been achieved by React 17 allowing for ‘gradual updates’ of applications.
Prior to React 17, upgrading a React application necessitated upgrading the entire app’s code base to the latest version. Even if that was generally easier than doing so with most other frameworks, it wasn’t possible to add new features coded in the most recent version of React to an application otherwise built with earlier versions. At least not in a way that wasn’t fragile and it often caused problems with events. Now you can.
If an app is built in React 17, and development later continues in React 18 or future versions, it will be possible to upgrade the rest of the app iteratively – piece by piece. That’s achieved by allowing for legacy parts of the app to be lazy loaded on demand. React has a gradual upgrade demo on Github that shows how this works.
There have also been changes made to how React 17 deals with event delegation. Event handlers will no longer be attached at the document level. Instead, they are attached to the root DOM container into which the React tree is rendered:
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
React 17 will also call
rootNode.addEventListener()
under the hood instead of
document.addEventListener()
for most events, as was previously the case.
Backwards compatibility and the ability to upgrade React application piece by piece can be a major plus for larger applications and those not actively maintained.
Scope of Application
Of course, React may not be the optimal choice of framework or library to use to develop absolutely every application. It has its limitations in certain contexts, which is why JavaScript development is not a React monopoly (even if the current trend is to it becoming a duopoly with Angular). But most JS application use cases can be nicely handled using React.
Scope of application, athe fact that React will be a good choice for most JavaScript development projects, is another major plus for the organisations who employ software developers. If a strategic choice is made to build a React team, it would be a rare exception that React will not be a good choice for any future JavaScript project.
React Native – Mobile Development Upskilling Straightforward
React Native, React’s mobile development library, is another example of the technology’s scope of application. It’s relatively straightforward for React developers to subsequently upskill themselves by also learning React Native.
The main difference between building browser-based apps in React and mobile apps in React Native is that in former the virtual DOM is used to render browser code in Reactjs. While in the latter, native APIs are used to render components in mobile. The code communicates with different environments.
Otherwise, much of the rest of the process is the same. If a developer is experienced the patterns of props, render props, components, HOCs and lifecycle in React, they are much of the way towards being able to work in React Native. The core rules are the same. They will only have to learn how to retarget for an Android or iOS environment, rather than a browser.
The skills cross-over between React and React Native is an another benefit of React for both employers/project sponsors and developers. Being able to develop both browser-based and mobile apps makes a developer more valuable, multi-functional and adds flexibility that makes life easier for project managers. All major pluses that help React stand out as a practical choice for project sponsors, without compromising the quality of the software.
In short, the foundation of React’s popularity is that it answers to both an application’s business case from the sponsor’s point of view, and developer preference. The two have fed off each other to consolidate React’s position at the top of the JavaScript hierarchy of frameworks and libraries.
React – A Technical Breakdown
Ultimately, the commercial appeal of React from both the perspective of project sponsors and software developers is anchored in the library’s technical excellence. It didn’t achieve the popularity which has future-proofed it by apps developed using React being technically inferior to those developed in Angular, Vue.js or any of the other major JavaScript alternatives.
So, what are the key technical features that underpin React’s technical excellence as a JavaScript library?
Javascript Library vs. Javascript Framework: What’s The Difference?
The ‘technical’ difference between a JavaScript framework (like Angular or Vue.js) and library (like React) is that a framework defines how a developer designs an application and a library consists of functions that an application can call to perform a task. The framework calls on the application code. An application calls on the library’s code.
What’s the practical difference? Let’s try to illustrate it with a metaphor. If you want to build a house, you will typically have 3 choices:
1.) An entirely custom architecture designed from the ground up. You can choose if the bedroom is 12m2, or 18m2 and if it is a rectangular or square shape. There are some best practise rules that will stop expenses getting out of hand or things not working as efficiently as they might. But otherwise, you have complete freedom to customise every little detail. Especially if budget is of little concern. This approach is like building an application’s frontend in pure JavaScript.
2.) A modular design, that allows for different elements to be mixed and matched. You can choose a between a range of room sizes and shapes and mix and match them to your needs and preferences. Again taking into consideration some practicalities such as plumbing and electrics. This option will still leave lots of freedom but bring down expenses and build time considerably as the house builder will either have, or be able to order, the pre-made elements used to build the available range of modules. This approach is like building an application using a library like React.
3.) A defined architecture, with custom finish. If you buy a home from a property developer who first builds the house and then sells it (or sells it at some stage during construction), you might have a choice between a range of models. 2-bedroom, 3-bedroom etc. But the basic architecture of each example of one model will be identical. The rooms will all be in the same place and the same size. You can do a huge amount of interior customisation that will really change the look and feel of one house compared to another with the exact same basic architecture. If you’re ready to spend the money, you will probably be able to do some internal remodelling, like knocking down walls. Or adding an extension at the back.
What you can easily customise is limited to interior design, but you know the practicality of the architecture has been well road-tested for reliability and functionality. It’s cost-effective. And you can always add an extension a few years down the line. This approach is like building an application using a framework.
Virtual DOM Improves Update Speed of Dynamic User Interfaces
React’s speed is in large part down to its use of a virtual DOM. A DOM (document object model) is a programming API, or viewing agreement, on the documents (in a broad sense meaning the way information is stored and represented) that form data inputs and outputs. It defines the logical structure of documents and the way a document is accessed and manipulated.
React uses a virtual DOM, which is much faster than a conventional DOM. For a page using a conventional DOM to update with new information, the whole page has to be rewritten from beginning to end, then rendered. If the DOM is virtual, only the section containing the updated data needs to be rewritten.
Re-Usable Components Increase Development Efficiency
Being component-based is far from unique among JavaScript libraries and frameworks. Most, especially the popular ones, are. But even if being component-based is not an advantage that sets React apart from alternatives, it is still worth noting as a strength.
Components are logically separable units, or bits of code, that combine to form a full application. For example, form fields could be reused as components in the form editor in the backend of an app, where forms are built and on the actual form (as we render forms as html using server-side Javascript).
Being able to reuse the same components throughout and between applications saves development time and maintenance time and helps keep the look and feel of an app consistent throughout.
State and Props
States and props are used in React to control component data flow. Props are variables passed to a React component by its parent component. Props extent functionality and can then be used like variables within one function, allowing components to be used more broadly.
A React state is also a variable, but one directly initialised and managed by the component. The data in states and props are used to render the Component with dynamic data. The changeable internal data held by a component, which influences the state of the view, is stored in the state member variable of the class.
If the state within the component changes, the rendering function is automatically called up again, immediately displaying the latest values of the data. In fact, it is this reactive quality of the state of React components which gives the library its name.
Server-Side Rendering
Like other JS frameworks, React can also be rendered on the server-side by using node.js, which significantly improves the load and response time of applications.
React & React Use Cases – The Big Name Applications Built On The JS Framework (That’s Actually A Library)
Facebook’s browser and mobile applications are, of course, React-based, as are those of Facebook-owned Instagram. For some insight into other large, well-known browser-based applications built using React, and mobile applications build on React Native, take a look at some of these examples:
React Applications
- Whatsapp (web version)
- Netflix
- Airbnb
- Cloudflare
- Dropbox
- BBC
- Imgur
- Postmates
- Paypal
React Native Mobile Applications
- Walmart
- SoundCloud Pulse
- Wix
- com
- Bloomberg
- Tesla
Drawbacks To The React Framework – Nothing’s Perfect
React also has cons and qualities that could be seen as weaknesses in a particular context. The mains React drawbacks that developers and project sponsors often highlight are:
Development Time
The fact that React is a library rather than a framework offers greater flexibility and choice. Which is a key reason why it’s so popular and often preferred to the more rigid structure imposed by frameworks. But the flipside to the coin is that building an app from smaller blocks inevitably takes more time. You can create more complex models from Lego® than DUPLO®, but it will take more time and effort.
More Room For Error
Small modules offering greater choice of how an application is put together, also means more rope to hang yourself with. With greater power, comes greater responsibility. Enterprise-level applications can favour frameworks because they are stabler. Less moving parts means less can go wrong.
React’s Documentation Struggles To Keep Up With Its Development
Some developers feel that the fact React is constantly being updated with new features and tools has led to deficiencies in the documentation of high-quality instructions.
JSX
Another feature of React seen as a pro by some and con by other is its use of the syntax extension JSX. JSX allows for JavaScript to be mixed with HTML. This has advantages, such as protecting code from injections. But some developers think JSX is overly complex and resembles old-fashioned ‘spaghetti code’, steepening the learning curve to mastering React.
SEO Considerations
This is a JavaScript wide consideration that is not limited to React. But if there is any intention, now or in future, for pages of a React app to rank on Google’s search engine, developers have to have a number of things in mind to make sure the app is SEO friendly.
There is absolutely no technical reason why a React app can’t be well search engine optimised. But there are specifics involved in this that have to be catered to. Making sure a React application is search engine friendly requires understanding of how the Googlebot processes JavaScript.
For a detailed dive into SEO for JavaScript applications, you can refer to our blog on the topic.
Should You Choose React For Your Next Development Project?
As of 2020, React may be the most popular of all the JavaScript frameworks and libraries, a position that doesn’t appear under threat in the foreseeable future for reasons discussed above. But if Reactjs or React Native are the right choices for your next application, or a strategic organisational decision for all applications, rests on a multitude of factors – both technical and with view to the business case.
If you would benefit from consultation on the JS framework or library best suited to the technical specifications of your project, or need to establish or scale your React resource through team augmentation or a dedicated React development team, we’d love to hear from you.
If you already have detailed technical specifications, we can accurately price quote for even large, enterprise-level applications within 24 hours, based on a well-practised in-house methodology. Or we can help you firm up detailed technical specs for a React application, based on your general functionality requirements.
When does IT Outsourcing work?
(And when doesn’t it?)
