Why You Can’t Ignore React Native in 2017

Why you can’t ignore React Native in 2017:  #ReactJS #JavaScript

  • Using a native API and wrapping it into React components the framework allows you to develop applications that are barely distinguished from their native counterparts.
  • Essentially, you can take the boilerplate that you would normally use for building web applications with React, replace “React” with “React Native”, change the way application is mounting and swap the routing with React Native navigator.
  • If you need to install a package with a native API under the hood (i.e. the code written in Java or ObjC or even both), you will need to use a special tool called rnpm (it was a separate tool at the time we were using it but was eventually merged into React Native).
  • If you encounter a bug in a React Native package and you don’t have the experience in native development, you are definitely going to need some help from mobile developers who usually don’t know anything about React and React Native as well.
  • React Native is a good choice for your next application, if:

    What is more, React Native can be an ultimate tool for those who:

    If that’s the case, you will be definitely more efficient using React Native than the native platform.

Technical stories based on our experience

@ReactiveConf: Why you can’t ignore React Native in 2017: #ReactJS #JavaScript

If you’ve been following the latest web development news, then you probably know how much hype React Native is getting today. As a slight digression, it all started when Facebook released React which fundamentally changed the way most of the web UIs are written today and inspired the creation of other frameworks and libraries with its component-based architecture.

From then on, the community has seen many attempts to combine JS, HTML, and CSS to develop native mobile applications, e.g. Apache Cordova, Ionic etc. In spite of being acknowledged as viable solutions, all of them have a very sizable drawback. To be more specific, they run inside WebView which doesn’t use native platform’s API. In a nutshell, this results in performance degradation.

React Native is a whole different story, though. Using a native API and wrapping it into React components the framework allows you to develop applications that are barely distinguished from their native counterparts. Unlike Cordova and Ionic, React Native managed to achieve the declarative approach to writing UIs without having to sacrifice the native performance.

Pay less, get more

The first and the most important advantage – which was also the selling point of React Native ever since it appeared – is that you are basically getting two applications for the price of one (it’s even three now). And despite you are going to encounter some issues, which is – surprise – the case with 99% of technologies, the boost in development efficiency totally pays off.

React Native comes with a dev menu which allows you to apply changes by simply reloading the app. The point is that it’s really fast. All you need to do is change the file, reload the app, wait a couple of seconds, and voila – the updates are done. Native developers, however, need to rebuild the whole application which is not only a waste of time but also extremely annoying.

Essentially, you can take the boilerplate that you would normally use for building web applications with React, replace “React” with “React Native”, change the way application is mounting and swap the routing with React Native navigator. Everything else is just the same – you don’t even need to use webpack for building since React Native comes with babel and a builder by default. It took only a couple of days for our JS/React developers to come up with ready mobile components. We also used Redux for the state management and it works absolutely the same as when developing web applications.

There are some tweaks (especially for iOS) like scrolling to the input when focusing in which you need to use a low-level API to get it working. Also, Native Picker is like the standard select input in Android, but looks differently in iOS. Other than that, there are no serious issues with writing UIs.

One of the biggest React Native upsides is the declarative way of writing user interfaces. Flexbox out-of-the-box (no pun intended) support makes writing UIs much less painful comparing to imperative style of the native platform.

Considering that the first public release of React Native was about three years ago (at the time this article is being written), it’s quite natural that the framework lacks the stability of a mature technology. However, there are also other downsides you should know about.

If you need to install a package with a native API under the hood (i.e. the code written in Java or ObjC or even both), you will need to use a special tool called rnpm (it was a separate tool at the time we were using it but was eventually merged into React Native). The problem is that it doesn’t always work. For example, when you need to install a package manually, all there is left to do is hope that the package maintainer had the trouble to provide relevant documentation. The manual installation procedure boils down to adding some Java/ObjC code (depending on platform) which may feel like conjuring some black magic if you’ve never worked with native platforms before.

Though it will probably sound too obvious to native developers, we are going to say it anyway: don’t rely on emulators only. In spite of the fact that both real devices and emulators equally help to discover many subtle UI discrepancies, it’s better not to take chances and stick to using real devices all the time.

… if you want to be efficient that is. For beginners, this is the most time-consuming part. If you encounter a bug in a React Native package and you don’t have the experience in native development, you are definitely going to need some help from mobile developers who usually don’t know anything about React and React Native as well. Keep that in mind when choosing React Native to develop your next application.

The React Native packager may lose connection when you haven’t reloaded the code for some time and then disconnect the device to launch the packager again which is obviously annoying. And one more thing is that sometimes you need to start with resetting the cache through `npm start — —reset-cache`.

This point isn’t quite related to React Native, but unless you’re building an application that isn’t going to be released to the public, you need to learn how to deploy mobile applications. For Androiders, this would be just another trivial procedure. When it comes to iOS, though, deploying mobile applications is a total nightmare. Thankfully, we have experienced mobile developers who can always help our team to handle all those certificates, device identifiers, profile provisions, and how to make a build with XCode.

Another thing about the building phase is that you can choose from various tools for shipping React Native apps. Microsoft’s CodePush service is one of the most interesting ones. Basically, it sees React Native as a bundled JS app so you don’t really need to go through build/release/review cycle. Instead, you just push new changes and let the service take care of updating the end clients. It doesn’t take a genius to figure out how much time this approach saves.

React Native is a good choice for your next application, if:

What is more, React Native can be an ultimate tool for those who:

If that’s the case, you will be definitely more efficient using React Native than the native platform. Finally, considering our own experience and the pace of React Native evolvement we strongly believe that the framework will succeed in becoming a great solution.

Why You Can’t Ignore React Native in 2017