Many times, during the interaction with our customers or potential customers we are asked for the technology options. We believe that such decisions should be should be based on multiple factors such as project requirement, development timeline, quality, performance and stability requirements. Selecting the right platform or framework has the potential to speed up development process, increase team’s productivity and create a stable, high performance product that would ensure customer satisfaction.
When it comes to selection of a new technology for development of mobile apps, there are quite a few factors that we should keep in mind. Some of them are as follows;
- Team Organization – Localized or Distributed?
- Team Competence on the technology
- Learning curve
- Mobile App requirement – Performance, User Experience, Stability etc.
- Project Type – Greenfield or Brownfield?
A holistic study and evaluation of all the above factors are very much essential to ensure development and deployment of a top class mobile application that stable, performant, maintainable and extensible.
The objective of this whitepaper is to assess and evaluate current two such prominent technologies “React Native” and “Angular+NativeScript” in the mobile app development space. This is a comparative study to analyze the two technology one on one on various factors that enable us to choose the right one for a specific application.
ReactNative and Angular+NativeScript both offer high-performance options for writing native mobile apps. Each supports reusing code for iOS and Android; however, these two native-focused options take different approaches to constructing native apps. NativeScript looks to manage user interfaces in a repeatable way for both iOS and Android platforms. Whereas, React Native chooses to embrace its multi-platform nature. It’s goal is to abstract the business logic while supporting and extending the differences in UI rendering between each platform.
Native approach vs Hybrid framework approach
Hybrid apps can be very similar to Native apps. From a user perspective, there is little difference; hybrid apps are downloaded, installed and run in the same manner as native apps. From an engineering perspective; however, the applications run very differently. Hybrid apps run inside a native application which uses a WebView, a browser less webpage loader. The native application which houses the WebView provides access to some native platform functionality.
Hybrid frameworks and progressive web apps are growing more popular. Hybrid approaches are great for quick early development, but their performance suffers significantly compared to native apps. Another drawback is that the ‘imitation’ native UI hybrid apps use can be off-putting compared to a true native look. However, hybrid frameworks and Progressive Web Apps are likely to continue improving and are an option worth monitoring and exploring for future mobile development.
Angular + NativeScript
NativeScript is developed by Telerik, a subsidiary of Progress, and presumably has strong resources and robust development behind it. NativeScript pairs very well with Angular, but use of Angular is not required. NativeScript is a real cross-platform option providing full Native API access.
NativeScript provides a CLI tool which allows for automation of tasks involved in scaffolding a new NativeScript project, building it, developing in a live environment, debugging and deploying.
NativeScript apps can be debugged using the NativeScript CLI or VS Code. Running tnsdebug
platform will build and run the app as well as open the NativeScript inspector debugging tool.
For mobile development environments, xCode and Android Studio are required to emulate iOS and Android devices respectively.
When used in conjunction with Angular, NativeScript projects are structured very similarly to Angular projects. The main difference is that Angular has HTML and DOM support while NativeScript does not.
NativeScript provides a set of component views which can be used to build the interface of a mobile app. Many of these views package the corresponding native view for each platform. For example, NativeScript provides a Buttonview which renders as android.widget.button on Android devices and renders as UIButton on iOS devices.
NativeScript also provides a variety of layout views which are used as containers to structure the UI and position other elements.
The structure of React Native mimics that of React. The only significant difference is the use of mobile components instead of web components in render functions to display content. While there is a slight learning curve, it can be picked up quickly by an experienced React developer. Another divergence from React is the use of Stylesheet – an abstraction similar to CSS Stylesheets.
React Native Stylesheet has a camelCase syntax and a slight difference in style able properties from standard CSS, which may be a pain point for some.
There are a few prerequisite installs for React Native to run in a development environment :
- Watchman – utility that performs actions on code changes
- React Native Command Line Interface – initializes and runs React Native projects
- xCode (IOS only) – iOS development environment
- Android Studio (Android Only) – Android development environment
- React Native Debugger (optional) – Standalone app for debugging react native with Redux. Can be configured to replace the default debugger.
While the written code between iOS and Android can be shared, the development environments and requirements are quite different.
Development for iOS requires some additional configuration and setup in xCode:
- Apple Developer Account
- Code Signing – All apps must be code signed and provisioned to launch on a device, to use certain services, to be distributed for testing, or to be uploaded to iTunes Connect.
Once the prerequisites are complete, applications are ready to be built, developed, and deployed. Development makes use of either the iOS simulator (included with xCode) or an actual device. Additionally, there is an option to develop through the React Native Command Line interface using the iOS emulator.
Development for Android also requires some additional configuration:
- Java SE development Kit (JDK) – Installation of development environment for building applications, applets, and components using Java.
- Installation of Android Virtual Device(AVD) – A list of available AVDs is available by opening the AVD Manager in Android Studio. Alternatively, running applications on an actual device is possible by setting a device into debug mode.
Choosing between React Native and Angular + NativeScript is somewhat similar to choosing between React and Angular themselves. Where React Native extends how React provides tools instead of patterns, Angular + NativeScript extends Angular’s opinionated approach to application development. Apps with complex UI architecture, lots of rendering and custom elements are likely to be better supported by React Native. NativeScript will excel where a truly single, cross-platform code base and strong consistency across multiple UI paradigms is desired.
In terms of real world deployment, React Native has the backing of Facebook and is used extensively in the Facebook and Instagram mobile applications whereas NativeScript has less prominent adopters.