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.
- 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. HybridWhen 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] haveHowever, 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.
Easy to learn if you know reactIt’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 UIOne 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.
Converting apps is easyIf 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.
Disadvantages of React NativeReact 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 technologyFirst 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 availableThe 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.
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.