Mobile data access speeds up the company's business processes. Mobile coordination of memos or approval of vacations is a familiar component of work in corporations. Every employee has mobile devices, so the company can use these devices without investing in them. A large zoo of mobile devices must be considered when developing a corporate mobile application: it should work and have the same appearance on all devices.

In this publication, we consider the creation of such corporate mobile applications using various JavaScript frameworks.

Corporate mobile apps are usually distributed through the company's internal app stores. This makes it possible to control access to applications within the company, as well as forcibly install application updates centrally. For the development and delivery of corporate mobile applications, an appropriate infrastructure, known as the Mobile Enterprise Application Platform (MEAP), is required.

For MEAP, an analyst from leading companies Gartner and Forrester was conducted and a comparison of existing platforms and vendors was made ( Gartner Magic Quandrant and Forrester Wave, respectively). All the leaders of these comparisons are considering the possibility of creating native and hybrid applications. Native applications are written using specific platform programming languages ​​(swift or Objective C for iOS, Java for Android). Hybrid mobile applications are written in JavaScript using various libraries and frameworks.
')
Using JavaScript frameworks allows you to create new mobile applications by the existing front-end development team. For the company, this means that the same team can perform different tasks - website development, mobile application development.

Among the leading frameworks, there are two of the most popular frameworks: Ionic 2 and React Native. Then each of them is considered separately, and their comparison is also performed. The comparison was performed for only two operating systems: iOS and Android.

Most corporate applications that are used on mobile are very simple. The employee is provided with the minimum amount of data necessary for making a decision. Another aspect of such applications is the need to enter data during operation. Given the limitations of mobile devices (form factor), data entry forms will also not be large. These nuances were taken into account when evaluating the created mobile applications (and comparing them with native mobile applications written in the languages ​​native to each platform). The corporate mobile application does not require super-high performance (such as in applications with millions of users from Facebook), it is necessary that such an application does not “slow down” on relatively simple forms.

Ionic 2

Ionic Framework is a framework for creating hybrid mobile applications. It includes a set of JavaScript and CSS components created on the basis of Angular 2, SASS and Apache Cordova. The history of this SDK begins in 2013, when the company Drifty Co. decided to create its own infrastructure for writing hybrid applications, which will be focused on performance and will be built using modern web standards. Release Ionic 1 - held in May 2015. Version 2 was released in 2016. The main difference between the second release and the first one is the transition from Angular 1.x to Angular 2.x.

At its core, the Ionic Framework is an addition to the very popular Apache Cordova framework, but with its powerful CLI (Command Line Interface) and extensive documentation. Following the principles of Apache Cordova, applications on the Ionic Framework are hybrid HTML applications. Such applications on the phone run in a special shell (UIWebView for iOS and WebView for Android), which allows you to display HTML and execute JavaScript. Accordingly, when working in the application, the user works as if in a web browser.


Apache Cordova application architecture ( source )

Apache Cordova is a kind of layer between the user interface and device resources. Any user interface widgets or MV * (Model-View) frameworks are not included. If you need to use UI widgets and / or MV * framework, then you need to select and include them in the application yourself, as third-party resources. Ionic 2 is one of the frameworks that provides UI widgets. The MVC model for it provides the Angular 2.

Native phone features (for example, camera, key storage, GPS coordinates) are not accessible from a web browser. Therefore, Apache Cordova plugins are used to work with them. In addition to the official plug-ins, there are a number of third-party open plug-ins.

React native

React Native is a JavaScript framework developed by Facebook to create native mobile applications using JavaScript. The history of React Native began in 2013 with Facebook’s internal hackathon project. React Native was first publicly told at React.js Conf in January 2015, in March 2015 at F8 it was announced that React Native is available on GitHub. The framework is built on the basis of the ReactJS library. React Native uses JavaScript API on top of native components. When creating an application, it writes JavaScript code that works with the native components of the operating system. That is, React Native uses the same fundamental standard UI blocks as regular iOS and Android applications without using either the browser or WebView / UIWebView.


React Native application architecture ( source )

An application on React Native uses a separate thread to execute javascript in the device. This thread interacts with the native code. It is important to note that native components (including user interface elements) are different for different operating systems. And, accordingly, for each operating system it is necessary to create its own “bridges” between the JavaScript code and these components. A number of such components are provided by Facebook, and there are also many freely available components developed by the community.

Ionic 2 vs React Native

Ionic 2 and React Native allow you to create mobile applications. The fundamental difference between these frameworks lies in the type of mobile application that is created using one or another framework. Ionic 2 allows you to create a hybrid mobile application that renders in WebView / UIWebView; if you need to use the platform API, you need to use additional plugins. React Native allows you to create a native mobile application using the fundamental UI building blocks (like regular iOS and Android applications written in the native language Objective-C / Swift and Java, respectively). The application on React Native uses certain templates defined by the platform itself.


Code execution and communication with the native API in applications written in Ionic 2 (left) and React Native (right)

The diagram shows the components of the application code and the call to the native API from the applications. In the case of Ionic 2, the user interface is rendered by the browser, and for React Native, the operating system itself. This difference manifests itself in more familiar component rendering and smoother application animations on React Native. The user interface of React Native applications will be closer to other applications of the platform. Since an application written in React Native is compiled into a platform native language, it is not necessary to use additional intermediate components (for example, Cordova), often this gives better application performance. Performance issues are one of the problems with Ionic 2.

When a native event occurs, the frameworks handle it differently. Ionic 2 blocks the stream and transfers control to the JavaScript code, waiting for its instructions. React Native runs JavaScript in a separate background thread, interacting with the main thread asynchronously.

Code

For creating an application on Ionic 2, the frameworks Angular 2 and Apache Cordova are used. The application can be written in JavaScript or any other language that is broadcast in JavaScript. The most popular typed JS superset is TypeScript, introduced by Microsoft in 2012 and positioned as a web application development tool that extends JavaScript capabilities, and most of the examples in the Angular 2 documentation are implemented in it. Angular 2 implements the dependency injection design pattern Dependency Injection), which consists of 3 elements:

• Injector - provides API access for dependency injection
• Provider - describes how to create a dependency instance; has a marker pointing to the factory function that creates the object
• Dependency - the type to which the created object belongs.

In addition, Angular 2 uses a component approach that allows you to share business logic, work with the front. In addition, the separation is also used at the level of the project elements: HTML, JavaScript and CSS are saved in separate files.

In order to start writing an application on React Native, you need to get acquainted with ReactJS, JSX. It is also recommended to work with Redux and EcmaScript 2015 to speed up development, but knowledge of these components is optional.

You can also use Flow - this is a static code analyzer and a set of syntactic structures to directly indicate the type of variable. Flow can calculate the type of a variable, without making changes to the code (unlike TypeScript), which allows you to start using it now in any project. It is possible to independently specify types in the TypeScript style.

In the process of writing an application on React Native, you create components that are self-sufficient, each component is responsible for changes in its state. There are stateless and stateful components. Components that do not have a state can transmit properties (props are set by the parent component and are fixed during the entire life cycle of the component ).

Debug

Debugging applications in Ionic 2 is standard for front-end developers. After running the application on the emulator / device, it is possible to debug applications using Safari web inspector (iOS only) or Chrome Developer tools. These tools provide access to HTML, CSS, and JavaScript. During debugging, you can quickly edit styles, search for nodes in html, execute and watch the result of JavaScript functions, as well as network requests. In addition to running on a device or an emulator, in the case of Ionic 2, it is also possible to launch the application directly in the browser ( ionic serve ). This can speed up development, and with the help of the ionic serve --lab testing applications on different diagonals of screens and platforms is simplified.

Ionic 2 has a Live Reload option. It allows you to make changes to the code and see these changes on the device / emulator without rebuilding. However, it is not always possible to use it. After starting due to working in a web browser when using http requests, we encounter a CORS problem.

To debug applications on React Native, it is possible to use Chrome Developer Tools. If development is carried out on devices from Apple, then it is possible to use the Safari web inspector for an emulator or an iOS device. To view the view items, you can select the “Show inspector” option in the Emulator / Device Developer Menu. At the same time, you can see the styles of elements, but changing them is possible only in the IDE (the method for quickly editing styles in developer tools does not work here). But using LiveReload or HotReload options within a few seconds, the saved changes will be visible on the emulator / device. If global changes are made to the code, it is better to rebuild the project. Also in the Developer Menu is the Network tab, which allows you to track HTTP requests. Here you can see the type of request, method, url, and more. After debugging in the browser it is unusual. For debugging, you can also use IDE for each of the platforms - Android Studio and Xcode, with which you can examine in detail all the logs and operation of the application (resource consumption, speed, etc.).


An example of debugging an application created with React Native on an iPhone 6 smartphone (iOS 10.2)

Building a debug application written in Ionic 2, in a browser, is faster than building an application on an emulator using React Native. It is also worth noting that the start of the finished application Ionic 2 on the device, slower than in a similar application on React Native.

Thus, debugging applications on Ionic 2 is faster and more familiar to front-end developers.

Styles

Ionic 2 is written HTML5 code and uses the familiar front-end developer SASS. There are no restrictions on dimensional units, the SASS preprocessor is used, flex marking can also be applied. I often had to redefine Ionic 2 variables. But sometimes this was not enough, it was necessary to study the final html in the browser, see what additional elements were generated and what styles they had to understand what and where to redefine or add. Also, a significant difference was in the display of elements on different platforms. What looked good on iOS devices sometimes broke styles on Android devices, it was necessary to find compromises.

In React Native, the creation of styles is different from the usual for frontend developer. Here css-detailed syntax is used, which is written as a js object. Then this object with “styles” is transformed into understandable platform instructions for the location and coloring of elements.

Imposition is performed by absolute values, no relative values. A big plus is the use of flex-like markup when styling components, which allows you to resize the component depending on the size of the container. If you specify " flex: 1 ", then the component will occupy all the available space. If there are several components, they evenly distribute among themselves all the available space. This minimizes the time spent on styles, since this approach will allow you to display elements in proportion to the size of the screen. Both on the phone and on the tablet, the result is the same, nothing “does not leave” and “does not crawl”. Almost always for applications on RN styles are valid for both platforms. If the styles are still interrupted, the binding to the platform is used. For example, in our application there was a situation when it was necessary to use zIndex - everything worked perfectly on iOS, but on Android this property (which was applied to the Header component) contributed to incorrect display of other interface elements (Tabs).

Styling in Ionic 2 took longer than in React Native. But the design of our application was fairly simple and minimalist. Perhaps, when developing complex design solutions, having access to a full-featured css, Ionic 2 would have won in time and convenience.

Sizes of applications

For both frameworks, there are "empty" applications - these are application frameworks with minimal code. Such applications are generated using the CLI:

• Ionic 2: ionic start myApp blank --v2
• React Native: react-native init AwesomeProject

Empty applications were going in two modes: debug and release. The first mode is designed for debugging the application, the second - for the direct delivery of ready-made applications to end users.

	Ionic 2		React native
	Debug application	Application in release mode	Debug application	Application in release mode
iOS	18.3 Mb	17.9 Mb	4.8 Mb	4.6 Mb
Android	5.54 Mb	4.0 Mb	32.38 Mb	16.35 Mb

Applications on different frameworks have different sizes on different platforms. Ionic 2 wins on Android, and React Native wins on iOS.

The popularity and activity of frameworks

When comparing the popularity of frameworks, you need to consider that React Native is a younger technology. Initially, React Native had only iOS support. Android support in React Native appeared only in August 2015, and the Ionic Framework at that time was developing for more than two years (although it had version 1.0) and had the support of all popular platforms.

Popularity and activity were compared by the two most popular resources: stackoverflow and github.

For the Ionic Framework on stackoverflow, there are about 60000 results for Ionic and Ionic 2. When reviewing the statistics on the Github repository, it is important to note that in mid-2016, the Ionic 2 code migrated to the Ionic repository. In the Ionic repository, more than 200 participants made about 6000 commits in 15 branches with 88 releases. The project repository contains ~ 700 open questions and ~ 9000 closed.

For React Native on stackoverflow, there are about 25,000 results for react-native. Statistics on the Github React Native repository show that this framework is more active than Ionic 2: more than 1200 participants made about 10,000 commits in 60 branches with 160 releases. There are ~ 1100 open questions and ~ 7000 closed questions in the repository of the project.

It is possible to look at statistics of use of frameworks on open resources (for example, on stackshare.io ). According to the statistics of NPMTrends (statistics on downloading npm packages), you can see that over the past year Ionic 2 has been leading the downloads with confidence, but in the past few months React Native takes the lead.


Download statistics for npm packages

The framework sites also have examples of ready-made applications: applications on Ionic 2 , applications on React Native . For both frameworks, there are a large number of third-party Starter Kit that will help create an application with a ready-made structure ( Starter Kits Ionic Framework , Starter Kits React Native ).

The development and use of the React Native framework has recently become more active.

Ionic 2 vs React Native: a comparison by example

The task of comparing Ionic 2 and React Native in practice was set for the front-end developers team.

Business Process Applications on Camunda BPM

To select the framework, which we will later use to write mobile applications, we wrote a mobile client for Camunda BPM . Camunda BPM is a BPMS (Business Process Management System) in which our team of backend developers implemented a number of business processes.

For implementation in the mobile client, we chose one business process - the process “Application for equipment”. This business process consists of several steps: creating an application, approving various roles (head of department, system administrator, technical department, accounting, deputy general director), directly issuing equipment. During the business process, the application may be returned to the initiator for editing. Some of the approval steps are assigned to a team of specialists.


Business Process Chart “Application for Equipment”

The form with which the user works depends on the status of the application and the rights of the user. In the form it was possible to enter only text data. Some forms are dynamic, for example, the “comment” field is displayed depending on the action selected by the user (Approve / Decline).

In the application, the user works in this way:

1. To create a new task, the user selects the required process from the list of available ones. After selecting the user displays a screen with a form for registration of the application.
2. After creating the Application, the user returns to the task list, which is presented on three tabs:
   
   
   • tasks created by the user;
   • tasks awaiting user decision;
   • tasks that are assigned to a group of people where the user can take on their decision;
     
3. If the user has access to the Application, then for each task he can review the information in the application in detail and view the history of its completion.
4. If the user makes a decision on the application, then part of the Application form becomes available for editing with options for making a decision.
5. When working with applications, a task search is also available, which displays the results at the user's request.
6. The application has user authentication functions.

A mobile client that performs the functions described above was implemented on each of the frameworks we compared.

Comparisons of Ready Applications

While testing our application, we compared the rendering speed of the page depending on the framework and platform. For this, an additional test page was created in each project. The data for the drawing was generated in a loop without accessing the server. From these data, 1000 “Card” elements were created, the rendering time of which was measured. The “Card” component eforgively it can be represented by such html:

 <div> <header> <h2>Task Name</h2> </header> <div> <h3>Subscribe</h2> <span>date</span> </div> </div> 

Each component (relevant for both the framework) has a life cycle: the component will be mounted, the component will be drawn, the component will be deleted, and so on. All of these phases have methods, the so-called lifecycle-methods, and that is what we used to conduct the tests. Testing was conducted using the time() and timeEnd() methods of the Console object.

For a React Native project, the time() method was called in componentWillMount (this method is called only once before rendering is the first time), and the timeEnd() method is called in componentDidMount (this method is called only once, after the first rendering).

For a project on Ionic 2, the time() method was called in the constructor (the first life cycle event that runs when the page was created), and the timeEnd() method was called in ionViewDidEnter (reports that everything is fine and that the page is fully loaded and fully entered into field of view, the transition animation with any internal setup is completed).

Testing was conducted on the emulator and on the device. Testing for iOS devices - on the iPhone SE emulator (iOS 10.2), on the device - iPhone SE (iOS 10.2.1); for Android devices - on the Asus Nexus 7 emulator (Android 6), on the device - Asus Nexus 7 (Android 6.0.1). The table shows the average drawing time of 1000 “Card” elements in milliseconds.

	IPhone SE Simulator	iPhone SE	Simulator Nexus 7	Asus nexus 7
Ionic 2	5354.6 - 5272.5	5663.1 - 5859.5	1401.3 - 1750.6	7040.3 - 9385.4
React native	36.1 - 47.6	32.5 - 35.2	45.4 - 56.1	44.1 - 52.3

Directly for our application, we compared CPU and memory usage for iPhone SE (iOS 10.2.1) and Moto Z Play (Android 7.0) devices.


CPU usage


Memory usage

Ionic 2 is inferior to React Native in almost all tested parameters, except for the use of memory on Android (the application load time test is especially interesting).

As in the case of "empty" mobile applications, ready-made mobile applications on different platforms differ several times.

	Ionic 2		React native
	Debug application	Application in release mode	Debug application	Application in release mode
iOS	17.5 Mb	17.4 Mb	6.6 Mb	6 Mb
Android	6.78 Mb	4.6 Mb	33.64 Mb	16.79 Mb

Ionic 2 wins on the use of CPU and application size on Android. React Native on the same parameters - on iOS.

findings

Corporate applications for mobile devices, created using JavaScript, have occupied their niche. The speed of such applications is sufficient compared to applications written in native platform languages. In general, one cannot say that some kind of framework is better, and some kind is worse. They are just different. The choice depends on the tasks, the ultimate goal and many other factors. In general, we can recommend using Ionic 2 for the rapid development of prototypes of mobile applications, and React Native - for the full development of ready-made solutions. Below is a list of the advantages and disadvantages of each framework, based on our impressions of using Ionic 2 and React Native.

Advantages of Ionic 2:

• a well-known set of tools - for a frontend developer, the set of technologies used is familiar, it significantly reduces the time for the task
• quick start - using the application templates provided to us by Ionic, you can create a prototype in a short time to show to the customer (we are talking only about the methods of the frameworks described on the official websites, we have not considered third-party Starter Kit)
• "Write once, run anywhere" - the written application works on all popular platforms, it gives cross-platform with minor code changes

Disadvantages of Ionic 2:

• stylization - changing the default styles to bring them in accordance with the layout significantly increases the time spent on creating and testing applications on different platforms and devices
• Browser use - longer application load and poor responsiveness when the CPU is loaded due to using the browser shell to simulate the behavior of components of each platform
• native functions - when a native event occurs, the main thread is blocked and control is passed to the JavaScript code, waiting for its instructions, which can lead to unpredictable operation of native functions

Benefits of React Native:

• standard native UI blocks — the use of the fundamental standard UI blocks, like regular iOS and Android applications, familiar to the user from other native applications, facilitates user interaction with the application
• non-blocking javascript execution - javascript runs in a separate background thread, interacting with the main thread asynchronously
• styling - the application looks equally good on different platforms and devices
• load on the CPU - tests carried out by the application using the CPU and memory show better results compared to Ionic 2

Disadvantages of React Native:

• the need to work with native platform code - it may be necessary to understand the components written in ObjectiveC / Swift or Java
• complexity of the start (without experience with ReactJS) - additional time is needed for getting to know React, JSX and a different writing approach (components as separate interface units that are responsible for their own state and behavior)

useful links

Ionic 2

• Ionic Framework official site
• Article on Habrahabr "Ionic: comments on myths after a year of use"
• Ionic creator
• Must-have plugins for Ionic Must-have plugins for Ionic Framework

React native

• The official website of React Native
• A set of useful links Awesome React Native
• Announcement React Native (Habrahabr)
• Tutorial "React Native - one JS is not enough"
• In Depth description of React Native and its interaction with the mobile platform
• Comparison of iOS performance on swift and React Native
• Sandbox for running React Native in the browser
• React Native Plugins
• Using react-devtools with React Native

Comparing Ionic (2) and React Native

• React Native vs Ionic 2 framework: Side-by-Side Comparison
• React Native vs Ionic: A Side-by-Side Comparison
• Ionic Framework vs React Native (medium)