Jeudi 29 mars 2018
React Native: Will a cross-platform app development dream come true ?
© Shutterstock / DrMadra
React Native may be new, but it has a lot to offer. Is it the long-awaited path towards cross-platform mobile development? In this article, Anna Klimenko and Alexander Kotov explain why React Native makes sense for developing across multiple mobile platforms.
Don’t struggle so much, the best things happen when not expected,” Gabriel Garcia Marquez once said. The invention of React Native (RN) was no different!
It all started with the intent of Facebook to make the development across mobile platforms quicker and with fewer developer efforts. Being restricted by the specifics of the native platform languages, Facebook could not update their mobile app as quickly as they did it with their website.
In 2013, a new technology named React Native was invented at an internal Facebook hackathon. Mainly intended for internal purposes, this technology allows for building native apps for Android, iOS, and Window Phone using JavaScript and React.JS components.
RN very quickly went out into the big IT world and set its place among other Frontend technologies. The RN history timeline consists of the following highlights:
- Summer 2013 – React Native was born as a Facebook’s internal hackathon project.
- January 2015 — React.JS Conference: the first RN preview.
- March 2015 — F8 Conference: RN was announced open-source and available on GitHub.
- September 2016 — UI Toolkit was launched for RN.
- September 2017 — First Conference on RN, Poland.
SEE MORE: Stack Overflow survey: Developers love TensorFlow & React, dread Hadoop & Angular
React Native vs. Hybrid
When clients say that they want an app for all mobile platforms, they think that they only need one app, not three apps written by three different teams for iOS, Android, and Windows Phone. Native apps are always the best for each individual platform, as far as look, feel, and performance are concerned. However, despite these benefits, native app development is slower and much more expensive. First of all, mobile devices vary wildly. Different mobile devices have a variety of screens. Android, in particular, has a catastrophic number of options to keep track of and optimize for. Secondly, the compiling time after every minor change seriously slows down development. Another option is hybrid development. For example, if a client wants to test a startup idea to deliver it to the market quickly. There are many hybrid apps like Basecamp or Untappd in the stores today. With the help of frameworks like Cordova and Ionic, hybrids can easily cope with most of the standard features and mimic native behavior.SEE MORE: React: The skill employers want vs. the skill developers [don’t] have
However, if you really want a native-looking app that is efficient and scalable, then you should build a mobile app with React Native. At first glance, it may seem that there is no difference between RN and hybrid development. They both have a common aim: to facilitate mobile app development and make native-looking apps with less time, money, and effort. But the hybrids run on a base of WebView — a middle layer between an app and native shell. Such approach affects the app behavior smoothness and performance. React Native doesn’t use WebView; that makes the application speed almost as good as in the native Android or iOS apps. Facebook, Instagram, Skype, Walmart, Uber, Airbnb, SoundCloud, and more are fully or partially built with the help of RN for both iOS and Android.Why is React Native so cool?
There are many reasons why we love React Native, but we’ve narrowed it down to our top five.JavaScript is rendered into platform-specific languages
Though it’s not exactly like pushing the “make it all good” button, development with RN is still much easier and quicker than with platform-specific or hybrid development. Around 80-85% of JavaScript code can be rendered to mobile platform languages with help of ready-made native components. You create the code in JavaScript and all that you need to do is adjust it to the UI of your selected platform. JavaScript is rendered to iOS or Android code and then an end-user receives an app that actually runs in the native code. This kind of approach makes the application run fast and look natural.Easy to learn if you know react
It’s easy for developers experienced with React to understand React Native-specifics since they both use the same reactive programming paradigm. Lots of tutorials and a vibrant GitHub community make it possible to master these skills quickly.SEE MORE: A peek into React: 5 reasons why I love it
Flexbox and SVG for an adaptive UI
One of the advantages of React Native app development is that it uses the Flexbox technology for a layout that adapts UI to all screen dimensions. This seriously saves time for development as you don’t need to adjust the code for different OS versions and screen sizes. Here is the example of Flexbox ability to transform into different screen dimensions.You won’t need as many developers
Most of the apps can be written by one JavaScript developer as there are a lot of ready-to-use components that work with the phone hardware like Bluetooth, GPS, accelerometer, camera, and push notifications and allow fulfilling any typical tasks. Sometimes you have to write components by yourself, which may be challenging if you are not acquainted with the platform-specific programming languages. Another option is that you may cooperate with Android or iOS developers to speed up the release.Converting apps is easy
If you already have a web application written with React, you can quickly migrate it into a RN mobile version. This is obviously much simpler than writing it from scratch. Of course, you will have to make some manipulations with layout and styles, as well as change the interactions with a server. Overall, this kind of migration saves you heaps of time. Let’s imagine we developed some music sharing application like SoundCloud. To facilitate the process, the following scheme can be used:- Create app in RN
- Let the iOS and/or Android developers write some native components if they are missing
- Bridge these components to the rest of the RN code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
const initGalleryConstants = (type) => { let resultantArr = []; switch (type) { case 'photo' : if (Platform.OS === 'ios' ) resultantArr.push( 'ALAssetTypePhoto' ); if (Platform.OS === 'android' ) resultantArr = [ 'image/jpeg' , 'image/png' , 'image/gif' ]; break ; case 'video' : if (Platform.OS === 'ios' ) resultantArr.push( 'ALAssetTypeVideo' ); break ; } return resultantArr; }; export const GALLERY_PHOTO = initGalleryConstants( 'photo' ); export const GALLERY_VIDEO = initGalleryConstants( 'video' ); |
SEE MORE: React is growing faster than JavaScript in general while Angular is losing ground to Vue
Disadvantages of React Native
React Native is still the new kid on the block as far as mobile development goes. Like any young technology, obviously it still has quirks and issues.Still raw technology
First of all, React Native is immature. Despite that, improvements are implemented quickly. It’s not just Facebook developers working on the changes, but also contributions from community members. This accelerates the technology evolution and maturity. Here’s one example from several months ago. At the time, there was no good solution for navigation, making development difficult. But, by the end of April 2017, React Navigation was released and took a huge step towards the first stable release with up to 300 bug fixes. Since then, we’ve already used React Navigation in a recent project and it was really cool: quick to install, easy to use, and it has 60fps animation and native components for a great look and feel. The only problem we had was that making this component work with redux; the solution wasn’t intuitive, so we had to spend some time wrapping our heads around it.Some components aren’t available
The most significant disadvantage for React Native is that many components are still unavailable. But the good thing is that very few components are left to develop. It’s only a question of time. For now, you have to write the missing components by yourself. Recently at Greenice, we worked on one interesting project. During development, we were challenged by a lack of official components for mobile cameras and Bluetooth. Luckily, we managed to find more or less appropriate components in the community and we were able to rebuild them to our needs. We wrote native Android and iOS code to add camera effects, a gif-making tool, flash-effect, sliders, Bluetooth mechanism, and more. While this process took most of the development time, this was much faster than if we would create separate iOS and Android apps. Now the app runs perfectly and we gained valuable experience. Thus, we tested it in person so that if you need to create some unique features, you can always write them in a native language and combine with RN code.SEE MORE: JavaScript developers prefer React, want to ditch Angular & are attracted to Vue.js
Why choose React Native?
Today, you may see requests for React Native from employers and developers alike. The front-end developers that know RN will be in demand for the years to come. In addition to creating new apps from scratch, many companies want to rewrite their existing native apps to RN. The main reasons for that are better scalability for different platforms, higher performance than in hybrids, and easier overall maintenance.Advantages for employers
- Fewer developers. You will get one code easily rendered for different platforms with the efforts of only one RN developer.
- Quicker to make changes. RN makes the development process more agile and responsive to the changing requirements.
- Cheaper. Hiring iOS and Android developers is more expensive than hiring a RN developer.
- High app performance. The performance is a constant point of concern in mobile development. There is certainly some difference in speed between native and hybrid apps. But the performance of most of the RN apps is almost as good as of the native ones.
- Time-saving. With RN, you don’t waste time for drawing interfaces for different screen dimensions. Development and all continuous changes are quicker than with native mobile languages.
SEE MORE: React Native: A new competitor to native development?
Advantages for developers
- Exciting experience. RN is a young and quickly maturing technology that is interesting to follow. There are not many specialists yet and you can be one of the first in the niche.
- The learning curve is low. Having a good knowledge of React and understanding mobile development principles, it is possible to learn RN in about a month or so. If you have some basics in iOS and Android native languages, it can also help you make really great platform-specific things quicker.
- Great community. Though the technology hasn’t even reached its 1.0 release, the technology is often updated and enhanced. Due to the community the technology quickly progresses and you can find the components that are still missing officially.