How to choose between Native vs React Native vs HTML5 Hybrid?
The favourite question of 2017 for the developer world i guess :)
I have been asked this at least once on every project i have worked on and so for the last time, i will create this and forward this url who ever asks, ha ha.. Feel free to add your view in comments. Cheers!
I will take a use case here since based on the app you build your need will be different. If you want to build spotify this is not your matrix ;0
Use Case:
Building a service or utility app, cross platform with support for low end devices, targeted for country like India and Indonesia. User experience is important for the app as well as cost of building and maintaining. Client probably don't have a development team and reached out to you for a solution.
| Type/Framework | Native | React Native | HTML5 Hybrid (Cordova/Phone Gap) | Comments, considering utility app | Points, considering utility app |
|---|---|---|---|---|---|
| API Access | Access to all native API like 3D touch, Dual Camera, Android Password Manager etc. | Access to limited APIs. React has access to API which are common across platforms. But extended API access is also possible through custom build. | Only limited to HTML5 API | For the current project we believe we wont need platform specific API and hence React Native or HTML5 Hybrid both could work | Native: 0 RN: 2 Hybrid: 2 |
| 3rd Party compatibility | Easily compatible with third party libraries or SDK | React Native support will be needed as part of SDK to be able to integrate. Native SDK can also be integrated with additional custom build | Only SDK made for Cordova will be compatible. These SDKs are mostly HTML5 based SDK. Complex SDK like image processing, GPU intensive plugins will not be available for Cordova | Since the project doesn't needs any third part SDK both React Native and HTML5 hybrid could be good options. | Native: 0 RN: 2 Hybrid: 2 |
| Performance | Native apps always perform best. They have direct access to GPU/CPU resources and can leverage all the available resource in an OS | React Native promises 60FPS rendering of UI elements, means as human we will not be able to figure out the performance delay when compared to Native, but technically they will be bit slow because they run on a JavaScript run time rather than natively | Comparatively slower than both the two options since its rendering the UI on a web browser within the app. Huge impact in performance when rendering in low end android phones which don’t have best in class browsers available. | Performance wise we will always choose Native above everything and 2nd best would be React Native, Since we may target low end phones on the markets we wont suggest HTML5 Hybrid for this. | **Native:**2 RN: 2 Hybrid: 0 |
| Maintenance | Native app means multiple code base, one for each platform. Over time; maintaining multiple code base adds costs to the project more when compared with shared code base. | React native works with single code base, but platform specific code can be written separately and still leverage the same code base. Example: Navigation on android is different from navigation on IOS and hence we can custom build both of them while maintaining the same code base. This also means we are building maintenance overhead for certain features but we don’t compromise the experience. | Same code base, you can build platform specific code as well but when building Hybrid app we tend to use single code base as a standard. Overtime maintenance is much easier and cheaper. | Since we may not be building OS specific features both Hybrid and React Native can work for us in this case. | **Native:**0 RN: 2 Hybrid: 2 |
| Development Cost | For Native apps, you will need native IOS and native android developers, generally they adds to the cost and usually cannot be leveraged across platforms. So over time you will need to maintain 2 teams. | For React Native, we can leverage React Native developers, who comes from web development background. You can maintain the same team for both platforms. | Here you can leverage web developers directly and same team can work on both platforms code. The same team can be leveraged on the brand website as well. | Both Hybrid and React Native are viable option, though Hybrid apps will be cheaper from team prospective as you can leverage even your web team for this. | Native: 0 RN: 1 Hybrid: 2 |
| Creative | When building Native, Creative team has the freedom to build any interactive design and animations. | React Native do support animations but various styling aspects and integrations may not be fully supported. For example Shadow element on Android 4.4.2 and below is not supported. Now in that case since the number of users are very low on such OS you can do a graceful degradation of interface but while designing technical team and creative team needs to be aware of such short comings. | Any design and animations possible on web can be supported on this. But due to impact of performance, 60 FPS is not promised and performance lag can be seen in low end devices when building medium to high complexity interactions. | Since we will be building utility app, we don’t anticipate overly complex animations and hence both React Native and Hybrid app could work, but if we choose hybrid app we need to be overly cautious on the amount of animations done on the app. | Native: 2 RN: 1 Hybrid: 1 |
| Terms and Conditions and Licensing | Frameworks for Native coding been maintained by their respective brands, example Swift for IOS is from Apple and Kotlin by Google, making sure when a new OS is launched the latest and greatest feature are available as API for the developers. | React Native is maintained my Facebook, even though its open source its recommended to review the terms and conditions to make sure client interest doesn't conflicts with Facebook business. Also Facebook does a monthly release of React Native, even though they will not always support the latest greatest feature they tend to listen to feedback from community and release features every month. | For Hybrid app, couple of options available. PhoneGap is maintained by Adobe, Cordova is open source and maintained my Apache Ionic and other similar frameworks, uses Cordova but provides a SAAS way of deploying the product. Any new HTML5 features will be supported if the OS supports those as part of their browser support. | Unless there is any reason of conflict with Facebook T&C React Native is our framework of choice, else we would suggest Hybrid or Native. | Native: 2 RN: 1 Hybrid: 2 |
The funny part ( totally unintended and coincidental ) if you sum up the points you will find that RN and HTML5 hybrid app scores the same, but then i would suggest choosing RN in that case because your overall app will be a better performing app when compared to the Hybrid app.
You can use the same matrix for any other use case. Just revalidate the points to support your use case. Until next time. Cheers!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent