Tom
29th October 2020 · 20 min read

With the recent competition surrounding cross platform development ramping up, the term “React” is becoming increasingly ubiquitous and not only in the IT and business worlds.

This article will take you through ReactJS and React Native to help you decide which would be better when developing your digital strategy.

Chapter 1
What is ReactJS?

ReactJS, or just React, is a JavaScript library of reusable components - especially reusable User Interface (UI) elements - created by engineer Jordan Walke working for Facebook in 2011.

Walke used XHP (an HTML component library for PHP) to create FaxJS, the first prototype of ReactJS. ReactJS supports both front-end and server and is designed for web deployment for developing the view layer for mobile and web-based applications - the view layer is used alongside model and controller layers (i.e. the three essential logic modules for apps) in an MVC framework.

ReactJS was developed originally to accommodate the rapidly expanding number of team-members and app-features causing increasing amounts of grief to the company as a whole. Following an increase in customer demand for real-time feedback - for example updating scrolling comments on their live news feed - the whole app became unstable, and so the React family was put into action.

Chapter 2
What Is React Native?

React Native (RN) is Facebook’s open-source, cross platform development framework for building native mobile apps (Android/iOS/Windows) developed to meet their mobile expansion requirements.

This is achieved using existing architecture & language (i.e. ReactJS), making it highly accessible and incredibly flexible. Using third party libraries developers can make anything, and the bare-bones nature of the framework encourages constructive freedom. Due to this inherently simple framework and RN’s close relationship with ReactJS, React Native is supported by a large and passionate community of third party developers.

Bloomberg magazine chose React Native when developing its mobile app because “[RN is] the first tool that truly delivers on the promise of cross-platform native app development.”(Gabriel Lew, a senior software engineer at Bloomberg.) Code reusability played a big role too and Bloomberg were typical of many large companies having to support two full teams of developers for both Android & iOS.

Arguably RN’s strongest single quality is the significant potential time and financial savings due to reusable components and code. It incorporates much of ReactJS but helps implement it for a truly native feel across all devices.

“React Native is a great framework that bridges the gap [web and mobile]... At Discord, it has brought us incredible efficiency. It allows us to write reusable code, learn from each other, and move fast with a two-person team.”

- Funghao (Robin) Chen, Mobile Lead at Discord

Chapter 3
What Are The Differences?

In essence, RN is a secondary version of React, designed for a similar but ultimately alternative purpose. Being fundamentally designed to fulfill different criteria - so direct comparison is neither possible nor clear - there are going to be several fundamental differences. These are:

ReactJS uses Virtual DOM to render browser code and React Native uses native APIs as a bridge to render components on mobile. For Android components this means utilising Java APIs and invoking Objective-C API to render to iOS.

React Native doesn’t use HTML. This brings with it a slight syntax learning curve for anyone going from ReactJS to RN.

React Native doesn’t use CSS. instead, for standard CSS-features like animations, it uses special APIs.

ReactJS is a base derivative of React DOM but for the web platform. React Native however is a base derivative in itself. This means components change, but workflow and syntax remain identical.

ReactJS is in essence a JavaScript library, which enables the programmer to create an engaging and high performing UI Layer. React Native is an entire framework for building cross-platform apps, be it web, iOS or Android.

Apps developed with ReactJS use HTML for rendering UI; whereas React Native uses JSX (or JavaScript XML) an XML/HTML-like extension to JavaScript. Just like HTML, JSX tags can have a tag name, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression.

Styling in ReactJS is created using CSS as opposed to the stylesheet used by React Native

What Are Some Important Bits?

Virtual DOM & DOM Refreshes

The Domain Object Model (DOM) is a logical structure of documents in HTML, XHTML or XML formats. DOM is a very important element for ordering and displaying elements both in web pages and apps as it is a viewing agreement on data inputs and outputs.

React uses an abstract copy, or Virtual DOM, which partially refreshes as opposed to the slower full alternative available to frameworks working with the “Real” DOM. This is achieved by creating an in-memory data structure cache to compare differences, and then update the browsers displayed DOM with no noticeable effect on the user experience. By only rendering the changed subcomponents rather than the whole page, hot reload facilitates a faster, better performance due to quicker rebuilding potential - for example building a highly dynamic UI with changing elements.

ReactJS uses React DOM, its predecessor for base abstraction.

graphic of a comparison between a real and virtual DOM
Real vs. Virtual DOM

React Native needs to use native API to render UI components via a JS bridge, which connects the framework to native modules so application components look just like their equivalent native UI elements. Asynchronous JSON messages sent via the Bridge instruct the native code and work on a principle of expecting a response from native in the future but without any confirmation.

This logical and simple solution gave RN a distinct advantage over most of its competition upon release and with the frenetic pace of technical advances Facebook are constantly redesigning React Native to stay ahead. This is done in tandem with the greater community as a whole populating the exponentially expanding RN ecosystem including components, libraries, tools, IDEs, web browsers, code extensions. There are always meetups and conferences being arranged for and by RN users all over the world, and this proactive community engagement is something that really helps foster a strong RN community presence.

But it isn't all down to 3rd party developers. Since 2019 Facebook have been taking each of the four core sections (React, Javascript, Bridge, Native) and improving them individually. This is Facebook’s solution to the limitation of the bridge system's fundamental architecture and it is going well. By redesigning the fundamental architecture and according to Facebook press release:

“by using JSI, JavaScript can hold reference to C++ Host Objects and invoke methods on them.”

This is a huge deal. Currently, the instruction but no response model requires that whether the app is used or not, Native Modules used by JavaScript code need to be initialized at startup. Instead, loading each module only when required, and holding direct reference to it, eliminates the necessity to communicate using batched JSON messages via the old bridge. This will limit or even eventually eliminate the need to serialize/deserialize, significantly improving startup time for Native Module-heavy apps.

Another reason this is so important is because of C++. to share code between Android and iOS without relying on JavaScript, C++ has for some time been the best of few options. With Android native code being written in C\C++ anyway, and iOS supporting it by default via Objective-C, this will greatly improve performance, accessibility and from a mobile developer perspective is a huge leap forward.

graphic of the react native rendering process
React Native Rendering

Testing

Everybody needs testing. Luckily this is one of the strongest points when discussing both ReactJS and react native. There is no point releasing software that doesn't work, or works badly. End Users are increasingly intolerant of even the slightest downtime or poor performance and clients will likely get frustrated paying for a product, or products, that don’t work. Put simply: the easier tests are to write and run the more testing gets done. The knock on effect is not only shipping better software faster but it saves time, limits fatigue and frustration and is financially beneficial too. When talking about ReactJS there are a couple of particularly interesting aspects:

Data Binding

React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It's easier to debug self-contained components of large ReactJS apps.

Testability

ReactJS applications are easy to test, much easier than some of its competition. React views can be treated as functions of the state, so we can manipulate the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

Similarly for React Native, testing is a major time and money saver. It also uses Flux. Certainly compared to the development of native applications just the fact that only one codebase (more correctly 90%+ due to the necessity for some platform specific code) needs testing is already a big plus. Add to that the potential for problems with both android and iOS application versions, should things really go wrong you could find cross-platform development, with an experienced team in place, up to 50% faster.

Chapter 4
ReactJS, Google bots & SEO

One of the most important aspects of web development is SEO, and with 90 percent of all search requests done via Google the relationship between your website/application and Google is vital. ReactJS uses a process of server-side rendering, driving more organic traffic and providing an overall improvement to the SEO strategy and execution of the website, and increasing the SEO value of a webpage/app.

The first five links that appear in search results always get the most traffic so ensuring you rank highly is not only desirable but necessary to allow your product to succeed. The technology you use plays a huge role therefore in the decision process from the outset. Javascript has some limitations when it comes to indexing but luckily there are solutions to this problem. To understand the limitations first we need to look at what and how Google bots index.

Google bots understand HTML really well. Google uses bots to rank sites by constantly crawling the web for new and updated pages before analysing the content and indexing the data via Caffeine to Google’s vast central repository - Google Index. The purpose is to provide faster, constantly improving user experience as content and images are pre-rendered.

But what does this have to do with JS? Well, when indexing an HTML page it looks something like this:

graphic of indexing with html
Indexing With HTML

However when indexing JS, the process requires extra steps and is therefore much slower than HTML page indexing. So before the bot can find new links and add them to the crawling queue it first needs to analyse them differently.

graphic of indexing with javascript
Indexing With JavaScript
Chapter 5
Community Matters

The ecosystems of both ReactJS and RN are very strong. Not only does Facebook heavily support them, but 3rd party developers and advocates are well-educated, helpful and have created a massive number of libraries, components and tools. In addition to this, Microsoft are heavily supporting Facebook in this endeavour. Not only by dropping their own cross-platform development solution (Xamarin) but actively adopting RN for their cross-platform development needs. So far Microsoft's Outlook Web App has been built using RN, but the wheels are in motion for Windows Desktop, Mac, Android, and iOS apps to all also be built with React Native.

This all places Microsoft front and centre for React Native development for Windows & MacOS. Additionally to Outlook, the Xbox division has been increasingly using RN for their redesigned cross-platform applications. With Microsoft betting so heavily on Facebook and RN, it is unlikely the Office team is planning on replacing their native desktop / iOS / Android apps with web wrappers. This is amazing for the general RN ecosystem and continued support from the likes of Microsoft makes the React/JS community a safer place to work and build than a lot of Facebook’s competitors. They also have the support of Tesla who use React Native to actively develop apps to control their cars remotely (Smartcar) and to help manage their high capacity wall mounted rechargeable battery (Powerwall).

What do you need?

Do you need a website only? Maybe just an app? Are you likely to port to a different platform at a later date? These are the kind of questions to consider when looking at which option to use. In reality they serve very different purposes, however should the need arise it’s good to look at who uses them and why.

Who uses RN?

Although using the correct technology is hugely important, it is more important to identify the type of business it will be applied to. This includes taking into account the needs and demands of users and customers, and identifying areas of a business that would benefit the most and then taking an innovative approach. When looking at successful examples, the overwhelming majority are industry disruptors and companies willing to change completely if that's what the market and industry demand.

Take Uber Eats - their original dashboard for restaurant owners (the others being drivers or customers) used ReactJS, however the mobile/tablet-heavy weighting of their user base across multiple operating systems made the switch to RN and cross platform development. They already had teams in place with experience developing Android/iOS mobile applications, so adding to this the high degree of reusable code already in place and familiarity with JS, development was much faster.

Statistics from statista showed 42% of programmers working in cross-platform mobile frameworks use RN and despite current competition from Flutter heating up it is still the most used framework. Crucially, RN hasn’t lost any market share since 2019, suggesting that instead Flutters gains came at the expense of Cordoba, Ximarin and Ionic (RIP?), who all showed heavy user-losses compared to the previous year.

graphic of indexing with javascript
Source: Statista
Chapter 6
Who Uses React?

Since ReactJS uses Javascript this makes it a very good choice for longterm web development. Javascript is the world's most popular and widely used overall programming language. A recent study by jetbrains looking at the most popular languages and frameworks found ReactJS is not only still the most popular framework, but also found its share has grown by 10% since 2019. This is supported by the following Google analytic showing the interest over time in React, jQuery, Angular and Vue.js. React has the most upward trend and has carved a constantly increasing wedge between itself and Angular.

So React is the most popular framework for development, but by how much? A lot - almost 500k downloads since 2015, nearly 200k more than jQuery. And in the interest over time analysis jQuery has fallen considerably:

Total number of downloads between 2015-12-30 and 2019-12-30:

Package Downloads
React 496,083,207
jQuery 293,953,794
Angular/core 163,190,496
Vue 84,298,469
Svelte 1,749,070

Add to this the job opportunities available and you can see that a lot of people use React. To support this, data from Eric Elliot’s excellent article “Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade” showed a distinct pro-React trend in job posting, with almost 45% of the market share.

Conclusion

Although different, at a push a good suggestion regarding which route to go down would be to use ReactJS for creating apps with high functionality, complex calculations, dynamic and responsive UI for web interfaces; and React Native if you need cross-platform functionality with the feel of a native mobile application.