October 30, 2017   |   4min read

Native or React Native? Choose the Best Tech for your Project

Luckily for all, going native is not the only option when it comes to developing your mobile app nowadays. Instead, our choice is broader.

I must admit that I was one of the strongest advocates of native technologies. My conviction was supported by constant research and market monitoring. During the last 8 years we have seen a lot of enthusiasts proclaiming the end of native development. What happened with all these new shiny technologies that were to be the next big thing? They usually settled in a niche and disappeared from view. But it’s different today—something has finally changed and we have more options to choose from—all depending on the scope, budget and character of the project. In the following article I’ll present a brief analysis of native and non-native technologies. It is important to take all this into consideration when deciding which technology would work best for your project.

Check if React Native
is the right tech for your project

The champion

Native app development has many benefits. Just to name a few:

  • We get official support from the platform vendor.
  • We can choose the desired abstraction level to operate on. This allows us to find a sweet spot between development effort, and required level of control.
  • Even with a relatively high level of abstraction the performance is impeccable.

If the market consisted of a single platform, we would be able to end discussion. In fact, the market is split into two almost equal parts between iOS and Android. Two platforms using different languages and adopting different paradigms. As a result, the respective developer teams can only cooperate on a conceptual level. Sharing almost no code. Additional effort needs to be put into testing their work and synchronizing their efforts. All this makes developing natively fairly expensive.

The failed contenders

The obvious solution to this problem would be to use one language and one paradigm for all the platforms. Ideally this “holy grail of mobile development” should be already based on a popular technology. Take these two together and you get a perfect candidate: JavaScript. The temptation is big. Both iOS and Android come with a component called WebView which, to put it simply, displays a webpage inside an app. Add some layering around and even access to native API’s is possible. This concept, known commonly as hybrid mobile apps, or web-containers, seems to be the solution. The biggest name here is Phonegap.

But when we take a closer look, a fundamental flaw can be observed: the lack of performance. JavaScript on its own is an interpreted language. And because of its prototype-based programming model, it isn’t easy to optimize its execution. The UI engine based around HTML and CSS is also order of magnitude slower than a more direct approach. On a relatively slow device like a smartphone, this has a noticeable impact on the perceived performance. That may be one of the reasons why Mark Zuckerberg from Facebook, a strong supporter of web-containers, announced in 2012: “The biggest mistake we made as a company was betting too much on HTML5”.

There are other technologies like Xamarin or Appcelerator that adopt the idea of a common language, but drop the HTML part for a self-made abstraction layer, or direct mapping of the native UI components. Performance may be better, but most of the cost benefits are also gone.

The runner-up

What was really missing in the hybrid app approach was a performant implementation of a cross-platform UI abstraction layer. In 2013 Facebook presented a solution, at first only for the web, in the form of React. The underlying tech called “Virtual DOM” provides a smart approach for describing UI in a HTML-like declarative manner. This representation is later translated either to normal HTML or when using React Native, to native UI components. Although nice for programmers (it improves productivity a lot) this doesn’t solve the performance problem. The novelty lies is the way React handles changes to the element tree. The engine, once it “knows” what needs to be done, can do smart things in order to assure that the UI stays fluid. For example by deciding to postpone part of the work until the next rendering frame. The framework still uses JavaScript, but the main performance bottleneck is no longer there.

This combination of productivity and performance improvements makes, in our opinion, a fundamental difference in comparison to the previous hybrid technologies. As a nice side effect: the application can share a lot of code between the two main deployment targets: web and mobile. Our experience shows that around 50% code reuse can be achieved.

And the winner is…

Taking all this into account, we think that these two competing approaches will dominate the mobile ecosystem in the foreseeable future. When choosing technology for your project, follow the golden rule. If only one platform is targeted, or absolute control and performance are required, then native development should be selected. If cost-effectiveness and time-to-market are the key factors, React + React Native should be considered.

Good luck!

Antoni Kędracki

Principal Software Engineer

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!