Why you should (or shouldn’t) use React Native

use-react-native

React Native is a powerful platform for building cross-platform apps that have the native look and feel users love, though it can struggle with CPU-intensive tasks.

Perfect cross-platform development is a hot topic in the software world. It’s essentially El Dorado: everyone argues about whether it really exists, and if anyone were to discover it they’d be rich beyond their wildest dreams.

Hybrid solutions are closer than ever- but they still can’t compare to the performance and reliability of native apps.

Enter React Native, a relative newcomer that aims to live up to the “write once, run everywhere” promise. React Native apps are native apps, just built using a different toolset, and their popularity is booming with developers and businesses alike.

Of course, while React Native is an incredible and promising tool it isn’t the long-awaited “map to El Dorado”. There are still limitations when it’s held up against native apps.

Read on to explore the power of React Native, find out where its limitations lie, and decide where it fits in a modern enterprise technology stack.

What is React Native?

React Native is a framework for building natively-rendered mobile apps using ReactJS, a JavaScript code library developed and maintained by Facebook.

The framework’s main selling point is its ability to create cross-platform apps that provide a much better user experience than the current hybrid options on the market, closer to that of native apps.

The Case For React Native

React Native takes a different approach than other hybrid and mobile web models. Instead of trying to simulate native performance, it takes actual native user interface (UI) building blocks and assembles them with React’s special brand of JavaScript.

Because these are the same building blocks iOS and Android use, React Native apps render like native apps. They have the same native look and feel device loyalists expect.

Developers have the option to write and embed custom native code, as well as writing in a mixture of native and React to get the exact function desired while maintaining the native appearance.

Native rendering is a huge benefit. Besides the obvious boost to user experience, it gives React Native a host of additional perks.

Cross-platform development

With React Native, one codebase runs on iOS, Windows, and Android. Only a small portion of the app needs to be customized for each operating system. It provides faster, more reliable performance than hybrid or web apps, too.

Development Speed 

In theory developers build their code once, in JavaScript, and React Native takes care of creating platform-specific versions. In reality the translation between operating systems isn’t perfect, but there’s still a huge chunk of the codebase shared between platforms.

That cuts development time for an app by as much as half while still supporting multiple platforms. If there’s already a web app, much of that code can be used with React Native to trim development timelines even more.

Developer productivity

React Native is a dynamic toolset with a lot of productivity features, like integrated components that provide “shortcuts” to common tasks. The framework also uses hot reloading, so developers don’t have to recompile the entire app every time they make a change.

Besides playing a role in React Native’s fast development speed, these features create an enjoyable, productive developer experience. Cutting out unnecessary interruptions helps developers stay engaged, which leads to better end products.

Cost

There are clear savings in both time and money when one app can be repurposed to cover all devices. There are fewer overall development costs and a lower up-front investment. Maintaining one code base lowers long-term maintenance expenses.

Even when the additional code to tailor the app for each operating system is considered, there’s much less work involved than in building multiple independent native apps. Plus, more efficient development means that the single React Native app is done sooner than comparable apps.

Add in the shorter time to market (and the ability to begin working towards ROI) and it’s easy to see how the savings add up.

The Case Against React Native

There’s a strong argument to be made that React Native comes closer to mimicking native apps that any of its current competitors. The idea to use natively-rendered components is an innovative approach with a lot of promise.

However, there are tradeoffs involved in making it work that mean React Native apps still fall short of native ones. Here are the major issues critics have with the framework:

Performance

The number one drawback to React Native is performance. It is better than other hybrid tools and web apps, but there’s no getting around the large overhead framework that slows down performance when measured against native apps.

For straightforward, simple apps and proof-of-concept work, the reduction in performance isn’t noticeable enough to have a huge impact. Using React Native for anything more complex could mean taking a hit to user experience.

“Reusable” codebase

As mentioned earlier, the “write once, use anywhere” motto isn’t entirely accurate. Developers have to configure the app for each platform. The size of that extra bit of code depends on the app’s function and the relevant operating system (some are more React-friendly than others).

In practice anywhere from 60-90% of the codebase can be fully shared. Although this still cuts development time by a significant amount, it does mean React Native isn’t a perfect platform-agnostic solution.

Size

React Native apps are bigger than native apps. This has a few unfortunate side effects. Users with older or economy model devices might not be able to handle it.

Those in developing markets often don’t have reliable access to 3G networks, so downloading large apps takes too much time. Finally, customers don’t like to use all their device storage on apps.

They might not download a large app, and when they start to run out of room for photos larger apps are the first to get deleted. Good developers have a few tricks for reducing the size of a React Native app, but it’s still something to keep in mind.

Quality Assurance Issues 

Debugging React Native gets complicated. Apps can be made with a mixture of custom native code, third party plug-ins, and regular React Native components.

It takes experience to navigate the app when tracking down the source of a problem.

Growing pains

The downside of being new and innovative is that React Native still has maturing to do. Facebook is actively tweaking and updating in response to user feedback, but they tend to be slow to update the software development kits (SDKs) when Android or Apple does.

Also worth mentioning is that as a younger tool, the documentation isn’t as user-friendly as it could be. It varies between highly dense in some places and too loose to be helpful in others.

That’s something that will ease over time, but right now it can be a hassle. New third-party libraries springing up are a mixed blessing: they offer more options for shortcuts but can introduce vulnerabilities into an app if they aren’t vetted carefully.

Exploring Alternatives

Looking at alternatives is a useful way to define a project’s priorities and decide whether React Native is the best fit. Here’s how it stack up against other formats:

  • Native apps: Native apps are the only practical option for graphics- and processing-intensive apps. They outperform every other type of app on the market. It takes time and money to build native apps, though, and most enterprise apps don’t need that level of performance to be successful.
  • Hybrid apps: Hybrid apps are essentially web apps with a native “wrapper”. They have the same advantages as React Native when it comes to development speed and cost savings. However, most hybrid apps can’t fully access device hardware, and their UIs don’t have a native feel.
  • Progressive Web Apps (PWA): PWAs operate within a browser. They can be given the feel of a native app and even can access some device features with the user’s permission. Their biggest draw is that users don’t need to download anything before use. On the flip side, PWAs don’t have full device access and use battery faster than other app formats. Without an app store presence they suffer in mobile search rankings, too.

use-react-native

Making the Call

When used for an app that plays to its strengths, React Native is a serious force-multiplier. It enables faster development, more responsive update cycles, and that all important “native UI” feel that consumers respond to.

It’s simple to build a basic, flexible app and scale it as usage grows. A lot of major players (besides Facebook and Instagram) use React Native in their apps, including:

  • Walmart
  • Airbnb
  • Wix
  • UberEATS
  • Soundcloud
  • Skype

Used outside its strengths, however, React Native adds an unnecessary layer of complexity. Developers unfamiliar with it can wind up with a large, convoluted, hard to manage codebase.

It isn’t well-suited to CPU-intensive apps, either. Trying to substitute React Native where a truly native app is needed leads to performance issues and the resulting degraded user experience. (It should be noted that a growing number of lighter VR/AR apps are being built with React Native, so the lines are blurring.)

Making the call on whether to use React Native depends on the app at hand. As a general rule it should be considered for projects where user experience and budget are equally important and when development speed is critical.

It should be ruled out for apps that are expected to be CPU-intensive (which is still the wheelhouse of native apps) or where the download barrier is a major concern (which might be better suited to Progressive Web Apps).

Best Mobile App Development Company in Orlando

When in doubt, consult with an experienced developer.

Orlando mobile development leader Concepta has experience with working with some of the biggest names in various industries to help them overcome business challenges, grow sales, and improve processes.

They know that each problem calls for a specific solution.

For example, the solution Concepta created for Kaluah Tours was very different from the one they built for FEMA (and vice versa).

Consultations take time, but they’re worth it. React Native has a host of benefits to offer if a specific app does fall within its “sweet spot”.

Are you ready to harness the power of React Native? Set up a complimentary appointment with one of Concepta’s developers to upgrade your mobile presence today!

Request a Consultation

Mobile Enterprise Series: Progressive Web Apps

pwas-enterprise-app

For some businesses, progressive web apps (PWAs) are the way to go. They offer a good balance between ROI and customer experience – as long as the project is a good fit.

Establishing a mobile presence isn’t an option anymore.

It’s a requirement for companies that want to stay competitive in an increasingly connected world.

Even small businesses benefit from the increase in traffic that comes from making a good mobile impression. The question of “if” has now shifted to “how”.

A New Take on Mobile

The push for mobile solutions has inspired several different approaches.

Mobile websites are the easiest to set up. A company’s existing web page is simply made responsive to adjust to a more mobile-friendly format which user access through the browser.

This involves rearranging navigation, increasing text size, loading smaller or fewer images, and more.

It’s easier and cheaper than other options, but that simplicity comes at the cost of customer experience.

Native apps provide the best customer experience from a usage angle. They’re downloadable programs independent of the browser.

Because native apps are specific to each device, they can provide the exact use conventions customers expect.

Building for every device can be expensive, though, and customers aren’t always willing to download another app.

Hybrid apps and PWAs exist in the middle ground between these extremes. Hybrid apps are essentially a native “wrapper’ with a web app inside.

The same web app can then be used for different devices.

Progressive web apps take the opposite approach: they’re apps that are hosted on a sponsoring website and accessed through the browser.

There’s nothing to download, but the app can still access some device features to offer a better user experience.

PWA Benefits

PWAs can very nearly match native apps when it comes to user experience. They operate on multiple platforms; any browser that supports PWAs will run them.

As of April 2018 Microsoft is also supporting them, so the list of holdouts is shrinking.

Developing progressive web apps is faster since one app can serve multiple platforms.

Companies have the option to use web developers instead of pricier and more in-demand mobile specialists, so the cost is lower as well.

Maintenance is low relative to other mobile options (besides responsive sites, but those can’t even come close to offering the same level of UX).

Updates can be made centrally and pushed to customers. There’s no need to download updates.

That brings up one of the most appealing benefits of PWAs: the low barrier to adoption.

Users only have to click a link and allow the app to use their device’s features. There’s no download or lengthy setup required.

PWA Limitations

Of course, this isn’t a perfect solution for all use cases.

PWAs don’t have full functionality on all browsers. In those cases they revert into a mobile website with no extra features.

They also can’t access all a device’s features like native apps can.

Battery usage can be significantly high and load times are a bit slower than apps in general.

While PWAs outperform many mobile options, they do have lower performance than native apps.

This is most noticeable with feature-rich applications and graphics or animations where there are lots of adjustable controls .

Weighing the Alternatives

Native apps

Native apps and PWAs share a lot of features: offline access, push notifications, full-screen access, desktop icons, and more.

PWAs have some benefits over native. Pages can be shared via link or bookmarked.

They’re easy to find, accessible by everyone regardless of device, and save on data usage.

In the past limited device usage kept companies from developing PWAs, but now they can access most device features: camera, microphone, location, vibration, screen orientation, and more.

There are some device features that they don’t have, though work is being done on accessing them.

Near-Field Communication, light sensors, magnetoscope, some directional tools, shape detection, and similar functions remain out of reach.

Plus, PWAs by nature can’t usually access things like contacts, calendars, SMS, device settings, phone, and more.

Users don’t like allowing those to websites for privacy reasons.

As mentioned earlier, there’s a reduced performance on feature-heavy or highly graphic apps. Those perform better on native.

Hybrid apps

Hybrid apps and PWAs can be said to be taking opposite approaches: one brings the web to an app and the other puts an app in the web.

Hybrid offers slightly better performance and can mimic OS conventions for a more predictable and familiar user experience.

However, PWAs don’t need wrappers. They come closer to the “write once, run everywhere” philosophy, meaning their development costs are lower.

Both have similar offline capabilities.

Mobile web pages

Progressive web apps are the clear winner here. PWAs offer far more functionality and options to users than mobile pages.

Companies have increased load times by as much as 90% by switching to PWAs.

Making the Call

Mobile strategy, like all digital decisions, should be informed by business needs. PWAs can be developed quickly and on a tight budget.

They are the way to go if a company is fighting “app drop” and needs to encourage adoption.

However, if Apple users are the target market PWAs won’t be the right fit since they won’t run well on that OS.

Orlando Mobile App Development Company

Concepta, one of Orlando’s leading mobile development companies, works with clients of all sizes and budgets.

We know the value of a wide toolkit to help our partners overcome business challenges, grow sales, and improve internal processes.

For some businesses, Concepta recommends progressive web apps (PWAs).

We offer a good balance between ROI and customer experience- as long as the project is a good fit.

Is a PWA the right choice for your company? Schedule your free consultation to take advantage of Concepta’s 12 years of experience in powering digital strategies.

Request a Consultation