Forget the tech-speak. This React Native overview is for the business savvy, not the tech savvy. You’re here because you need an app if you want to stay competitive. And the app world is unknown territory for you. It’s a different landscape to the web. Different technology. Different, and fewer, service providers.
We know how it is. Choosing to invest in unfamiliar technology is one of those decisions that has a bet-the-farm feel to it. Right now you’re weighing options and worried that you’re about to throw away money, years, and your foothold in the market.
This article will help with your decision making. It’s going to start with a bit of history, so you have sense for the technological landscape. Then it’s going to give an easy-to-understand overview of the concepts behind the technology. Finally, it will cover the advantages of React Native, which are many, and the caveats, which are few, but for some businesses are deal breakers.
The React Native backstory
Credit: National Center for Supercomputing Applications/University of Illinois Board of Trustees.
30 years ago(!), in 1990, the first web browser was built. Not many people outside of hardcore geeks saw it. In 1993 the first popular browser was released: NCSA Mosaic, soon to be dethroned by Netscape Navigator. In 1995 Netscape introduced JavaScript to the world.
In the 25 years since, software engineers have been adding capabilities to JavaScript, mastering its potential, and trying to develop strategies to deliver an interactive, application-like user experience from a platform designed to display documents. React, which React Native is built upon, is the latest and currently greatest, manifestation of this.
React came out of Facebook and has been in use since 2011 and open source since 2013. React Native (an extension to React) has been used by Facebook since 2013 and was open sourced in 2015. At almost a decade of use, these are mature technologies powering big name sites and apps and supported by a rich ecosystem of add-ons and enthusiasts.
React was Facebook’s answer to the question – how do you deliver an immersive and responsive user experience inside of a browser?
The same question web developers have been asking each other since 1995. Each time the answer was a little better, giving incremental gains. This time, with React, the answer was revolutionary.
The technology behind React and React Native
At the simplest level, so simple it sounds unimportant, React is very good at telling the browser what exactly on the page needs to be redrawn. The less that needs to be redrawn, the faster the user interface – buttons clicking, timelines scrolling – can respond.
With React, your user can be typing into your search bar at the top of the page, reading the auto-complete suggestions pulled live from the server, while at the same time, at the bottom of the page, a like count updates on a photo. And nothing, except those two elements, a very small part of the overall page, gets redrawn.
It doesn’t sound exciting. But for developers it is. Because it comes along with a method of building an interactive website where React does all the tedious bookkeeping that keeps your site fast, while the developer does all the fun bits related to how it works and how it is structured.
The leap from sites to apps
With React handling the bookkeeping, developers could work at a faster pace and a higher level. That search bar at the top of your page? That could now be a component — a standalone piece of user interface that could be placed anywhere on the page, used anywhere on a site. It could even be open sourced and used anywhere on the internet.
The same with the three step wizard you use to sign up new users. Or a mega menu. Or a video player. Or a chat box.
It occurred to the React team at Facebook that what the code was doing in the browser — creating interface components out of HTML elements like <button> and <textarea> — could be done inside a mobile application. But instead of creating interface components out of HTML elements, it could simply use the native interface components — scrollbars, buttons, sliders, etc.
So React Native was born. At its heart is a virtual machine that runs JavaScript — all the code that covers your business logic, and it translates the calls to display pictures, text and interactive elements into displaying native user interface components.
React Native can be used to run the same code on Android, Android TV, iOS, macOS, tvOS, Web, Windows and the Universal Windows Platform (covering Windows 10, Windows Mobile and Xbox).
Depending on the product, anywhere from 60% to 90% of the code can be re-used from a React-based web app in a Reactive Native mobile app. This is one of the many reasons that at SoftwareSeni we advise clients to test their idea and prove their business case using a React web app – it’s an investment in reusable code in an environment where iteration can happen quickly. Much faster than with a mobile app, where the platform store review process can slow things down.
The React Native advantage
For someone wanting an app for their business, React Native has six major advantages going for it.
Maturity – computer years are even shorter than dog years. 7 years since launch and 5 years open source make React Native an established technology.
Popularity – developers love React and React Native, which means finding developers to build your app is not a problem. Finding good, effective developers — well, that problem never goes away.
Ecosystem – combine maturity with popularity and you get thousands and thousands of open source libraries that implement functions you want and need, dedicated tools and services, as well as experienced partners like SoftwareSeni.
Speed – building a React Native app is faster than developing an app in native code. Multiply that advantage by the number of platforms you’re launching on. And if you’ve started your journey with a React-based web app to prove your business case, the move to a mobile app is even faster. You’ve already done the hard work.
Cost – the speed advantage above should have already clued you in that React Native apps are cheaper than native apps. The availability of developers contributes to that, as does the deep ecosystem of re-usable code. Depending on the app and the team, they can be 2 to 10 times cheaper than native apps across multiple platforms.
Performance – because React Native uses the native components supplied by the device operating system, React Native apps run as silky smooth as a native app. They also get full access to all of the phone’s features — camera, microphone, location, etc.
React Native caveats
Nothing’s perfect. Great as React Native is, it does have a few drawbacks. The biggest one is that it is limited to certain kinds of apps. You wouldn’t make a game in React Native. If your app needs to do large amounts of drawing or manipulating things on the screen, you need to look at building a native app.
If you have an interface feature that React Native does not support you will have to get a custom native component built on each platform you plan to support. It is cheaper than building an entire native app, but it adds complexity and thus cost to the project. Involving SoftwareSeni during the design process can ensure you don’t accidentally end up in this situation.
Finally, a React Native app is only half of the customer experience equation. You cannot forget the backend. No matter what technology you use in your app the backend still needs to be built and that development time and cost is not affected by the app framework.
Take-aways
The take-away from all this is that React Native is a great choice for building an app, if not the best. The apps produced using the technology can stand shoulder-to-shoulder on your customers’ home screens with the likes of other React Native apps from Instagram, Facebook and Netflix.
Throw in the free cross platform features, allowing you to target the top end consumers on iPhones and the mass market on Android devices, and it becomes a no-brainer.
If you’ve been thinking of creating an app for your business, or if your business needs to be an app, get in touch and we can talk about the timeline options for getting your idea to market.
