In the world of mobile app development, we’re always looking for shorter development cycles, quicker time to deployment, and better app performance. With two operating systems dominating the landscape, businesses creating mobile apps often face a compromise: apps that provide a better user experience, or apps that are faster to develop and run on more platforms and devices? Before diving in the React Native vs hybrid, let’s briefly remind ourselves what native and hybrid apps are.
- Hybrid apps are essentially websites embedded in a mobile app through what we call a webview. They are developed using HTML5, CSS, and Javascript and execute the same code regardless of the platform in which they run. They can, with tools like PhoneGap and Cordova, use the native features of a device, like GPS or camera.
- Native apps are developed in the language required by the platform it targets Objective-C or Swift for iOS, Java for Android etc. The code written is not shared across platforms and their behavior varies. They have direct access to all features offered by the platform without any restriction.
React Native vs Hybrid
| React Native | Hybrid | |
|---|---|---|
| Write once, run everywhere | The goal of RN is not to provide a way to write once and run everywhere. Rather, they want developers to use the components which best follow the native behaviors of the platform. | A typical hybrid app will run the same code regardless of the platform, and that is what Hybrid is capable of doing. However, in order to feel more “native”, Ionic will adopt a few of its behaviors according to the platform. |
| The Language stack | React Native is based on the Javascript framework React and, thus, uses Javascript code that resembles HTML but essentially isn’t—they call it JSX. With that, the display logic is blended in with the business logic. | Hybrid is a framework based on Angular, a Javascript framework. It uses HTML templates for its views. It is in line with the Mode-View-Controller pattern as views and logic are clearly separated. |
| Testing during development | With React Native you see the result of your modifications as you make them. No need to recompile, rebuild, etc.; the result is instant in an emulator or a real device. Pretty amazing! | you can instantly preview your app in your browser and mobile devices. It instantly refreshes as you make changes to your application. |
| Plugins and Community | A lot of plugins are already available on NPM for React Native. There’s even a plugin to use PhoneGap/Cordova plugins, which means that you instantly inherit the hundreds of mature plugins from the other community. | PhoneGap and Cordova have been around for a while so there is a high chance that a plugin already exists to expose the native feature you need in your webview. They also have a marketplace where developers sell and offer Ionic plugins. |
| Developer experience | React Native renders native views, no Webview here. This means, all the browser compatibility issues go away. You can focus on more important things rather than wasting hours or days fixing bugs. | Building a hybrid app means, you automatically inherit all the issues that the web has. All those pesky bugs which only appear in one browser, all those different styles working differently across different browsers, believe me, it’s hard, really hard. |
| User experience | Since all views are Native, the performance will be much better, and you get the Native feel with super smooth animations, just how you want it to be. And since React Native is just a library bundled with your app | A major problem with hybrid apps is performance. The web was originally built for web pages, not the complex apps we make today. On high-end phones, a hybrid app is probably going to run just fine, though not as smooth as you would want, but it’s OK. Things get worse with low-end phones, though, and there are tons of people with low-end phones. |
Why do people even make Hybrid apps?
For most of the startups, the resources are limited and the time window is shorter. They want to reach more people in a shorter period of time, and without having to spend tons to get experienced Android/iOS developers (which tend to be very expensive), when they are just starting out.
A hybrid approach is tempting. By building a hybrid app, you’re able to reach more people, as you can have a web client, an Android client, and an iOS client, all with the same codebase, plus some code for Native integration. In addition to it, web apps have a much faster iteration cycle. And you don’t have to wait for weeks to get the update approved in the App store. But there are several problems with the hybrid approach. Both users as well as developers, suffer.
Not everything is perfect
React Native sounds too good to be true. There must be some tradeoffs, right?
Yeah, React Native is relatively new. Even though Facebook uses it in their production apps e.g. — Facebook Ads Manager, there are still lots of unresolved issues. Fortunately, React Native is Open Source. So, anyone can try to fix bugs and send pull requests. They are very open to contributions from the community, so we’re in luck.
- Since many browser APIs are poly filled, they might be slightly inconsistent with the browser version. Many useful browser APIs might not be available at all. For example, Facebook doesn’t use WebSockets, so it’s a community responsibility to add WebSocket support.
- As all network APIs are poly filled, the network traffic doesn’t appear in Chrome developer tools. So debugging network traffic can become a bit harder.
- Some things might get confusing for newcomers. For example, the Navigator component which handles history and screen transitions is poorly documented. But once you get it, it’s super simple.
- There is also an issue, where Animations drop frames if you’re not deferring the rendering until the animation is complete, as they run in the same thread as JavaScript. It’s pretty easy to fix, but might be confusing at first.
- Keyboard handling is another issue which can be confusing. You need to listen to keyboard events and manually add a spacer below the input box if it is attached to the bottom.
Conclusion
I can’t tell you which is better React Native vs hybrid because I firmly believe that it depends on many factors: you, your project, your user requirements, the acquired skills of your team, etc. They both do different things, and both do it well. It’s like comparing an Xbox and a PlayStation, MacOS and Windows, a car and a motorcycle. Neither is better than the other.
However, I can tell you which one I prefer on React Native vs hybrid comparision. It is React Native. I personally value the native rendering more than the rest. To me, apps need to be extremely fast and responsive, and in React Native, I have found a good compromise between writing pure native applications, or pure hybrid apps.
Now, my best advice to you is to try them out both, pick one, and make the best out of it!
References
- React Native – Learn once, write anywhere: Build Mobile app with React
- Building Hybrid Apps with AngularJS and Ionic
