2. What are you looking to work on?
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.
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.
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
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.
Styling in ReactJS is created using CSS as opposed to the stylesheet used by React Native
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.
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.
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:
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.
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.
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.
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:
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.
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).
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.
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.
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:
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.
Join global leaders who depend on Lolly Co to transform their businesses with advanced technology & automation.