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 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 the development process, increase the team’s productivity and create a stable, high performance product that would ensure customer satisfaction.
When it comes to the selection of a new technology for the 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 in 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.
Mobile Strategy
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 mobile development frameworks allow basic web tools like HTML, CSS and JavaScript to be used for developing progressive web apps. Native frameworks also allow web tool use for mobile development, but they leverage the native API of Android or iOS devices for UI and other functionalities. Both approaches provide the same purpose: to support the creation of mobile applications through existing web technologies.
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 a platform which allows developers to write cross-platform mobile applications using JavaScript, TypeScript or even Angular.
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.
All native platform APIs on both iOS and Android can be directly accessed using JavaScript or TypeScript. NativeScript allows developers to share large amounts of an application’s code between iOS and Android apps – a significant time saver and productivity boost. NativeScript and Angular can even be combined to allow for sharing large amounts of code between web and mobile development. The structure of an Angular + NativeScript mobile project is very similar to the structure of an Angular web project and will feel familiar to those experienced with Angular.
Tools
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.
Structure
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.
NativeScript runs JavaScript code, which allows reuse of code from a corresponding web app. It’s worth noting that not all JavaScript will run; since NativeScript does not use HTML or the DOM, libraries reliant on either of these (such as jQuery) will not work. By contrast, code that doesn’t touch the user interface (e.g. lodash, underscore, moment) will work in NativeScript exactly as it does in a web app. NativeScript uses a standard-compliant CSS declaration. Although only a subset of the CSS language is supported, this allows for reuse of some CSS code between web and mobile apps.
React Native
React Native is a JavaScript platform for building mobile applications using the React library. It allows React developers share much of an application’s code between iOS and Android apps, which simplifies development and saves time. For those experienced with React, React Native will feel quite similar. Both React and React Native make use of the Virtual DOM. Whereas React renders web components, React Native takes JavaScript code and trans piles it to Java for Android and/or Objective-C for iOS.
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.
Tools
There are a few prerequisite installs for React Native to run in a development environment :
- Node – JavaScript runtime
- 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.
Development
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.
Conclusion
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.
References:
1. https://developers.google.com/web/progressive-web-apps/
2. https://ionicframework.com/docs/developer-resources/progressive-web-apps/
3. https://developer.telerik.com/featured/nativescript-works/
4. https://developer.android.com/reference/android/webkit/WebView.html
5. https://www.nativescript.org/
6. http://www.telerik.com/
7. https://www.progress.com/
8. https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript
9. https://github.com/NathanWalker/angular-seed-advanced
10. https://docs.nativescript.org/tooling/visual-studio-code-extension
11. https://docs.nativescript.org/tooling/debugging#debugger-commands
12. https://docs.nativescript.org/start/ns-setup-os-x
13. https://docs.nativescript.org/angular/code-samples/ui/layouts
14. https://lodash.com/
15. http://underscorejs.org/
16. https://momentjs.com/
17. https://docs.nativescript.org/ui/styling#introduction
18. https://facebook.github.io/react-native/
19. https://facebook.github.io/react-native/docs/platform-specific-code.html
20. https://facebook.github.io/react-native/releases/0.33/docs/stylesheet.html
21. https://developer.apple.com/xcode/
22. https://developer.android.com/studio/features.html
23. https://www.npmjs.com/package/react-native-debugger-open
24. http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
