React-Native is a Hybrid Mobile Framework, which allows you to create various applications using javascript (JavaScript).

Unlike other mobile hybrid technologies, though, in this framework, you will not create a “Web App,” but ultimately, you will get a fully-fledged application that compiles its JavaScript code on an application.

Interestingly, the type of application will be unrecognizable from iOS applications made with Objective-C language and Android apps built in java language.

This means that React-Native offers the benefits of native apps and Hybrid Apps applications without any of their vulnerabilities.

The purpose of this article is to examine the authenticity of the features introduced for this framework. To achieve this, we will create an application in the “Swift” and “React-Native” frameworks.

 The application should be so simple that it can be used to work with both platforms to the right size and complete the build of apps in a timely manner.

Meanwhile, the functionality of the application should be so complex that it can compare the performance of the CPU, graphics processor (GPU) and memory usage.

The app we intend to build has four tabs. The first tab name will be “Profile” and will allow the user to log in to Facebook so that he can receive the profile of the user, his name and email, and they will be displayed on the page.

The second tab name will be “To Do List” and will provide a simple list of daily tasks using the NSUserDefaults (iPhone internal storage). In this tab, there are functions related to adding items and removing items.

The third tab name will be “Page Viewer,” and includes a Page View Controller.

The display controller will have three screens that the user can replace (green, red, and blue screens). The last tab name will be “Maps,” which will include the map display section.

This section zoom in on the user’s current position and specify the user’s location with a blue dot.

Swift programming process

The first part is iOS and Swift. Learning this language is almost easy and similar to many other programming languages, such as Java and ++ C. To develop with Swift, you need to learn the Cocoa Touch framework. Learning this framework is a little harder than Swift.

The software development environment or Apple code editor (Xcode) is highly advanced and user-friendly. You can click on the section called “Storyboard” and adjust the settings for the screenshots in accordance with your order.
This is done by placing an arrow on the screen at the start of the program.

In the first tab (Profile), you can display the image, name tag, and email tag using Drag and Drop, in any desired location.

Then, put the above mentioned in the program code and communicate with them by creating a new variable.

In the next step, when the user is logged in to Facebook, you need to set up the programmer’s name and settings for the variables according to the values ​​of Facebook.

It may take about three weeks for you to learn and get used to Swift / iOS coding.

You can get the Swift codes for the program listed from the “Program Code Link”. In the following, images are presented in the final environment of the program.

React-Native programming process

The second part is React-Native. To work with this framework, you need to learn JavaScript language. Learning this language is harder than Swift, but it’s not difficult.

At the beginning of learning, you may be confused by the high level of content. However, if you focus well on the content and learn them well, you can start coding after a week.

One of the benefits of React-Native is that unlike iOS, all the codes are clear and distinct, and you know what each line of code does.

On iOS, you have to do tweaking for each page in order to properly display pages on different screens.

 In React-Native Unlike iOS, all tweaks have been pre-designed for you.

To check this, you can try your app on multiple iPhone screens with different screens.

As the React-Native uses the Flexbox layout, this frameworks are compatible with the screen size that the program will display; this type of design is called responsive design.

You can get React-Native Release Notes for the program listed from the “Program Code Link”. Below are screenshots of the final program environment.

Compare program performance

Now is the time to come up against the Swift and React-Native builds and compare their performance.

For this purpose, the software “Instruments”, Apple’s product, which is located in the Xcode editor, is used.

The parts that are compared to the two programs are: CPU (using the Time Profiler, GPU (using the Core Animation tool) and memory consumption (using the Allocations tool).

 The Instruments software allows you to connect a mobile device to a computer, run an application, select the required measurement tool, and record performance results.

In each program, there are four tabs. For each tab, there is a “task” that runs this task to measure the performance of the program in each section.

The function of the first tab is to log in to Facebook. In the code of this program, the graph request (Graph Request) is used to restore the profile image, email and user name from Facebook to the program.

The To Do List task is to add and remove a “daily task item” from the corresponding list.

The third page, Page View, performs the movement between three Pageviews. The task of the fourth tab is to execute codes for zooming in on the map and displaying the current position of the user using a blue dot.

Measure CPU performance

We compare each of the tabs in terms of CPU performance:

Profile: The React-Native framework wins this section with 1.86 percent better performance in CPU utilization.

While executing the task, the tab was recorded and the values ​​were logged and the “Log in with Facebook” button was pressed for a sudden jump in CPU usage.

To Do List: In this tab, React-Native also showed a better performance by 1.53 percent.

When executing the tasks of the tab and recording the measurement of the values, and at the moment of adding and deleting an item in the list, there were several sudden jumps in CPU usage.

Page View: In this section, Swift beat React-Native with a difference of 8.82%.

When performing the function of this tab and recording the measurement of values ​​and at the moment of movement between different pages, there were several sudden jumps in CPU usage.

While stopping on a page, this consumption dropped, but again, CPU usage increased again.

Maps: In this tab, Swift showed a better performance by 13.68 percent. During the execution of this tab and recording the measurement of the values ​​and at the moment of pressing the tab, a sudden jump in CPU consumption was observed.

At the same moment, the current position of the user was found in the map and was determined by a blinking blue dot.

While Swift in both bilingual and React-Native also had better performance in bilingual bundles, Swift, with 17.58 percent difference, showed better performance in CPU utilization.

If you spend more time working with the program instead of focusing on each tab task and then stopping it, the results may change. However, there was no change in CPU usage when changing tabs.

Measure GPU performance

The second criterion we will review is GPU performance. For each Swift and React-Native application, tasks are executed within each tab, and then the measured values ​​are recorded.

The maximum value in the Y axis is 60 frames per second. Each time, a value is recorded by the Core Animation tool. Using the mean value of these values, the following charts are plotted:

Now, compare each of the tabs in terms of GPU performance:

Profile: The swift language, this part was won by Ø , with a low difference of 1.7 frames per second. While executing the task of this tab and recording the measurement of values, a sudden jump in frames per second was observed at the moment of pressing the “Log in with Facebook” button.

To Do List: In this tab, React-Native also performed better at 6.25 frames per second than Swift.

When executing the tasks of this tab and recording the measurement of values, a sudden jump in frames per second was observed at the moment of adding and deleting an item in the list.

Page View: In this episode, Swift beat the React-Native with 3.6 frames per second. When performing the function of this tab and registering the measurement of the values, at a moment of rapid movement between the pages, the frame rate per second suddenly reached 50.

When stopped on a page, this value dropped, but frames again increased by moving again.

Maps: In this tab, React-Native showed a better performance by 3 frames per second.

While executing the task of this tab and recording the measurements, a sudden jump in frames per second was observed at the moment when the “Maps” tab was pressed.

At this moment, the tab is busy finding the current position of the user on the map and specifying it by a blinking blue dot.

This time, Swift in bilingual and React-Native also had better performance in bilingualism. However, React Native with 0.95 frames per second superior overall performance with GPU utilization.

An interesting point in this section was the amount of power that Facebook received from the React-Native codes, which made the framework win over the native iOS (Swift).

Measuring memory performance

The third comparative criterion is the amount of memory performance in each frame. The process of executing and registering values ​​is the same as in the previous two sections.

Y axis (memory) is considered in the bottom line up to the maximum value. The time interval considered for this comparison is 1 milliseconds.

In milliseconds, a value is recorded by the “Allocations” tool. To draw the chart below, we use average values.

Now, compare each of the tabs in terms of memory performance:

Profile: The swift language won this section using less than 0.02 MB (MiB).

While executing the task of this tab and recording the sizes, there was a sudden jump on the memory while pressing the “Log in with Facebook” button.

To Do List: In this tab, React-Native showed better performance with 0.83 MB of memory.

During the execution of the task in the tab and recording the sizes, several sudden jumps to the memory were observed at the minute when the item was added to the list.
Then, removing an item from the list, the use of the memory dropped.

Page View: React-Native also used 0.04 MB of memory less than Swift.

During the execution of this tab and recording the sizes, there was no sudden jump in memory when moving between pages. In fact, nothing changed.

Maps: The React-Native architecture, with a huge difference of 61.11 megabytes less memory than Swift, won this section.

While executing the task of this tab and recording the sizes, a sudden jump in memory was observed at the minute when the tab “Maps” was selected.

Then, removing an item from the list, the use of the memory dropped. In both programs, the amount of memory was increased during the tab execution, but eventually it reached a constant value.

The React-Native function in three tabs and Swift in one tab was better than the other. In total, React-Native used 61.96 Kbps less memory and won the benchmark.

In addition, an important issue was identified when using the “Maps” tab. If sync zooming or moving within the map (in both applications), the amount of memory usage increases exponentially. Maps, the most used memory in each case.

Conclusion

Apps made in Swift and React-Native are almost identical in appearance. Given the comparisons made in the field of CPU, GPU,

and memory performance, while implementing each of the four tabs in the programs,

the implementation of both programs was almost identical.

Swift, in the CPU and React-Native benchmarks, showed better performance in GPU (low difference) and memory (with a huge difference). React-Native comes in the first place.

The point that was not considered for these comparisons was the review of a native Android platform. However, if React-Native were to defeat a native iOS, it would probably be better off than Native Android.

The results prove that React-Native is the future framework. This framework has many advantages and disadvantages.

React-Native, written using JavaScript language (a generic language among developers), is faster and cheaper; its extension code is for iOS and Android,

and developers can provide updates directly to users so that other users are worried about downloading updates.

In addition to the tips mentioned, only one year after React-Native’s presence, the framework has been better off than Swift apps.