The Evolution of React Native

A Brief Overview of the React Native Framework

The React Native development framework has become one of the most popular and beloved cross-platform mobile development tools on the market.

Its past tells an interesting story and paints a bright future.

The Early Days of Mobile Development

The original iPhone was released on June 29, 2007. It contained only Apple’s native apps with no option to add third-party applications. It’s hard to imagine now, but the only apps that were originally on the iPhone were those built by Apple.

It wouldn’t be until a year later with the release of the iPhone 3G that the App Store was launched. The Google Play Store was introduced in 2009. Here are some of the features of the iPhone that were not included in its original release:

1. Verizon Support. The iPhone was originally only released for AT&T. It actually wasn’t until years later on February 3, 2011, that the iPhone was available on Verizon.

2. The App Store. Because you could not originally create third-party applications for the iPhone, there was no App Store.

3. Copy and Paste. Indeed, you could not copy and paste text when the iPhone was originally released.

4. A Front Camera. The first iPhone only had a camera on the back.

5. Video Recording. While you could take pictures, you could not record videos.

6. Photo Messaging. You could originally only send text-based SMS messages. It wasn’t until later that the iPhone would support MMS messages that contained photos or other assets.

7. GPS. It’s hard to imagine that the original iPhone really had no way to track you. Implementing Google Maps would have been impossible.

Today’s landscape is far more populated with millions of apps in each of the major app stores. Major companies and individual developers alike release a total of tens of thousands of new apps each month.

The Original Cross-Platform Frameworks

One of the first roadblocks that software developers realized they had to overcome was how to get their code to run in different environments. The software written in a popular programming language doesn’t automatically work on all operating systems that support that language.

Enter the concept of cross-platform frameworks. What if you could write the code once and then run it anywhere? The idea was a novel one, and one difficult to implement.

After all, you would need the cooperation of dissimilar companies, right? Or at the very least you’d have to do all the work yourself to support multiple environments.

But to be able to develop and execute your software on multiple platforms, reaching a much larger user base – the payoff would be enormous. All it would take would be the development of the right tools.

Xamarin

Xamarin was founded in 2011 by Mexican programmer Miguel de Icaza. Microsoft acquired the company in 2016.

Soon after, the software behemoth announced that they would make the software development kit open-source and a free tool within Microsoft Visual Studio.

It featured a C# shared codebase that allowed software developers to write code for Windows, Android, and iOS apps. The use of shared code with native user interfaces was another progression on the hunt for a balance between ease of use and wide support.

Xamarin is still a popular cross-platform technology for mobile apps today, in particular for .NET developers. It is also an interesting technology as it targets platforms like the Apple Watch, tvOS, macOS, and others, while some cross-platform technologies limit themselves to iOS and Android.

Apache Cordova

Adobe Systems purchased a company named Nitobi in 2011. They rebranded as PhoneGap and released an open-source version of their software called Apache Cordova.

The mobile development framework enabled developers to build apps for devices using CSS3, HTML5, and JavaScript.

The apps developed were hybrid. They were not truly native mobile apps since layouts were rendered via WebViews instead of relying on the platform-specific native user interface framework.

They were not purely web-based apps either because they were packaged apps and had access to native APIs.

The History of React Native

React Native was birthed from React. We need to go further back and look at how the React JavaScript library came into existence to understand how we got where we are today with the React Native framework.

A Star Is Born

React began in Facebook’s Ads Manager app. Originally, the software developers coded the Facebook ads platform in the typical fashion for the time.

HTML code was plastered in the mobile app. It seemed like a good idea. Multiple mobile platforms could display it since it was basically a website. It gave the same look on mobile as the web version.

However, it didn’t have the feel of a native iOS or Android app. And there were performance issues that began to appear.

Over time as new features were added, the code became more complex and unwieldy.

More engineers were needed to handle the expanding code. Things started to slow down due to cascading updates. Re-rendering of the application – even due to minor changes in the view -made for a slow slog through the mud for the user.

Eventually, the code became so labyrinthian that a software engineer couldn’t be sure what data changes were updating which parts of the app. Something needed to change.

That was a difficult situation for the team. In the course of app development, if you can no longer understand your code, then you cannot effectively keep working!

And, of course, it wasn’t only the engineers who suffered. The user experience was terrible too.

Jordan Walke, one of the engineers on the team, built a prototype to improve system efficiency. This led to the creation of the React framework in 2012.

Separating React

In the same year, Instagram came under the Facebook umbrella. Their developers began to examine the Facebook web development stack. Interest was piqued when they set their eyes on React because it could prove useful for some apps they wanted to develop.

Unfortunately, the React framework was tightly bound to the Facebook development stack.

Pete Hunt, one of the developers on the team agreed that it needed to be disassociated and work began to decouple React from the rest of the Facebook stack. Facebook released it as an open source in 2013.

The Frustration with Web Technologies

Solutions like Apache Cordova that used web technologies on mobile platforms quickly grew out of style. While web apps allow companies to move faster and use their existing web development teams to build for mobile, it turned out that the performance of web-based technologies was no comparison to native technologies. Users could easily tell when they were using an app that was built with web technologies as these apps tended to be slower and less responsive than native mobile apps.

Facebook announced in 2012 that it would become a mobile-focused company. This dramatic shift was a course change for the company and its crew of career-long web developers.

“The biggest mistake we made as a company was betting too much on HTML as opposed to native.” – Mark Zuckerberg, circa 2012.

The reasons the company needed to move away from this method were clear. Mobile devices and computers have fundamental differences, and this is where the cracks were beginning to show in their mobile iOS and Android apps.

• The WebView method of wrapping a browser in an application lacked support for keyboard native APIs. This made detection of the on-screen keyboard difficult.
• Mobile operation systems deal with gestures and touch events that are much faster than an onClick event for web coding. Add in the coding complexity of two- or three-finger gestures and the WebView way of doing things becomes even more incompatible with mobile.
• Mobile browsers cannot be queried to see if an image is loaded or not. WebView couldn’t effectively handle the management of images.

All these reasons and more fueled the development of cross-platform frameworks that gave the benefits of native iOS and Android mobile apps without the drawbacks.

A Seed of Change

Developers decided they needed to have native iOS and Android apps for a better user experience. But native development has problems that detract from their effectiveness too.

In particular, there is one aspect of native mobile development that software developers and businesses have never fully accepted, which is that you have to have separate codebases for iOS and Android. This often means hiring two teams, paying much higher development costs, and creating disjointed user experiences, all to build the same piece of software twice.

Christopher Chedeau was a young developer who joined Facebook in 2012. He saw the difficult situation the company was facing in transitioning to mobile-first applications and came up with a solution.

Jordan Walke had found a way to generate native components in iOS from JavaScript. Christopher and Jordan teamed up with Ashwin Bharambe and Lin He to optimize the prototype over two days.

They could now create native UI elements from JavaScript running directly on the mobile device instead of through costly service calls.

This was the seed of a solution to the mobile app development problem they were facing.

Internal Hackathon

Facebook organized an internal hackathon in the summer of 2013. Engineers were convinced by the end that Jordan and crew were onto something.

The prototype could be used to develop a framework for mobile app development using JavaScript. A full team was organized for building this technology. React Native was born.

React Native Becomes Open-Sourced

The basic React Native framework was released at the React.JS Conference in January 2015. In March 2015, React Native was open-sourced and made available on GitHub.

In September, React Native for Android was also made available.

In 2016 the React Native framework’s Facebook developers announced that the React Native framework would be expanded to different platforms. Windows and Tizen, a Linux-based OS designed by Samsung, would support it.

A React Native App Receives a Rejection from Apple?

In 2017, some React Native apps began receiving rejections from the Apple App Store. These warnings came during compliance reviews that every app must undergo before being allowed on the App Store.

Rumors began to fly that React Native apps were no longer supported because Apple was restricting the possibility of downloading and executing external JavaScript code.

The danger in such a practice is that an app’s behavior could change after the review process. Apparently, Apple changed the way it interpreted its policies and began to enforce them more strictly.

This led to the banning of a popular Swift library which was used to update and patch some native apps. Some libraries in React Native were affected too and labeled as insecure.

These seemed to be pieces of code that allowed the execution of code from external sources. This was despite Apple’s own exception that allowed apps to download and run scripts if they did not change the main purpose of the application.

After a few tense weeks in April 2017, the affected users found that the issue was with suspicious libraries and not an issue with React Native itself.

Here you can check for a more detailed overview of React Native vs. Swift.

The Current State of React Native

React Native has matured into a stable and popular product with avid followers. In its current state, React Native has a lot of attractive positives that entice developers.

Community Acceptance and Support

The worldwide community has readily accepted React Native.

Its popularity can be traced, in part, to its foundation in JavaScript. Developers that already have a background in web application code find it easy to pick up.

React Native has a community-driven approach with more than 50,000 active contributors.

It continues to have the support of Facebook engineers as they actively develop and update the platform.

Code Reusability

One big advantage of React Native is that developers don’t have to create separate codebases for iOS and Android.

Generally, about 90% of the code can be reused between the two platforms.

This leads to more rapid app development since coders can get their software to market faster.

Rich UI Choices

React was created as a user interface improvement. That focus has transitioned to React Native too. React Native UI components correlate directly to their native component counterparts.

A React Native app has the look and feels of a native app and the component-centric design makes it easy to create both simple and complex user interfaces.

Simplified Maintenance of iOS and Android Mobile Apps

A live reloading feature of React Native allows the dev to see changes in real-time. They can add edits to the code while the app is loading and see the changes instantly.

Software creators don’t need to re-submit the app for the app store’s approval process with each code change.

Other Benefits

Companies don’t need to maintain separate teams when they use React Native code.

Whether the intention is to create an Android app or an iOS app, the same development team can design one codebase that will support either – or both.

This may lead to development cost savings of up to 40%!

Other Modern Cross-Platform Technologies

React Native isn’t the only option when it comes to frameworks that can be used to write multi-platform code for mobile apps.

Some iOS and Android devs. look at other options when building apps.

Flutter

Flutter development is an open-source framework from Google. Its code compiles to ARM or Intel machine code or JavaScript for speedy performance on any device.

It features automated testing, debugging tools, and every other feature necessary for natively compiled multi-platform apps.

You use the Dart programming language to develop with Flutter.

Here you can find an expanded comparison of React Native vs. Flutter.

Xamarin

Xamarin is Microsoft’s solution for Android and iOS developers. It harnesses the familiarity of the .NET environment that many businesses are already familiar with.

It extends the capabilities of .NET with tools and libraries and is coded using the Microsoft C# programming language.

Xamarin can be used for building native apps and cross-platform ones.

It is more mature than React Native with a longer history. However, React Native eclipsed Xamarin back in 2017 and boasts three times the market share of the Microsoft solution.

For a complete overview, here you can see more about React Native vs. Xamarin.

Ionic

Ionic is a complete open-source software development kit for creating hybrid and progressive web applications. The original version was released in 2013 by Driffy Co.

With a reliance on CSS, HTML5, and Sass, the Ionic framework allows for fast and easy development. It can use Cordova and Capacitor plugins to gain access to host OS components like the camera, GPS, and flashlight.

Check here a profound comparison between React Native vs. Ionic.

The Clear Popularity Contest Winners

React Native and Flutter are the most popular cross-platform frameworks. Each is being used by more than 30% of the worldwide software dev community.

Cordova, Ionic, and Xamarin round out the honorable mentions. Many other frameworks like Unity, NativeScript, and Kotlin are considered by aspiring app development teams too.

The Future of React Native

What does the future hold for React Native? Here are some key elements that might determine the direction of React Native in the near future.

Increased Performance Through Fabric

Fabric is a Facebook project that hopes to make React Native’s tools more performant, and hopefully more interoperable with other platforms other than iOS and Android.

A reduction in app architecture overload could lead to faster run times than other cross-platform options.

A thread is a channel through which the system communicates with a user. Currently, in React Native, JavaScript code is run in one thread, native code runs in another thread, and there is a “bridge” that uses the JSON format to communicate changes between different threads. This leads to decreased performance in some situations, and Fabric has redesigned the fundamental architecture of React Native apps to mitigate the performance issues that have been associated with this bridge layer.

Add in the ability to asynchronously render in React Native and a simplified bridge mechanism between JavaScript and the framework and Fabric promises some impressive gains.

Continual Upgrades to Keep Up with iOS and Android

Expect the growth to continue in both the user base and the community support that React Native enjoys.

There is nothing better than seeing an active community with plenty of pull requests to make other devs want to try their hand at a different tool.

And since iOS and Android development is a field of constant evolvement, we can expect React Native to follow suit in order to keep up with the latest operating systems and device upgrades.

Expanded Applications

Innovative tech is exploding in the market. Watches and other wearables like VR, smart televisions, and the Internet of Things all benefit from embedded and third-party apps.

It is only a matter of time before software developers using React Native turn an interested eye to these platforms. Demand will breed innovation.

The great thing about the future is that we have little to no idea what next crazy, off-the-wall tech will enter the market next! If it needs an app, React Native will be there to help.

You can also see here a complete guide to React Native.