• No results found

Native development VS React Native

N/A
N/A
Protected

Academic year: 2023

Share "Native development VS React Native"

Copied!
60
0
0

Loading.... (view fulltext now)

Full text

By developing an application that can render images, and by measuring the rendering performance of the application. Finally, due to the limited packaging of the IOS platform and the difficulty of measuring the display speed of the Android platform, we switched to measuring the display performance of the Android application.

Mobile app development method

Nagappan, M et al (2016) stated that since Apple introduced the first generation smartphone iPhone in 2007, it started the iteration of modern mobile applications. At the same time, the centralized mobile application market called "App Store" has made the mobile application market unprecedentedly large.

Native development for mobile platforms

IOS:Object-C/Swift

Roshan, S et al (2017) stated that iOS devices are known for the excellent user experience they provide to users. Its user interface and user experience have been highly optimized for the needs of users, and at the same time these devices are fast, powerful and compact.

Android:Java/Kotlin

Web view and React JavaScript

Adding components to the web page via the render method shows the simplicity of React.js and speeds up the app development via various components. The React Native project, derived from React.js, enables developers to achieve a fully consistent development experience based on JavaScript and React.js, and build world-class native apps.

Cross-platform development framework - React Native

React.js is a JavaScript library for building user interfaces that originated as an internal project at Facebook. De Sousa, M (2020) believes that the characteristics of React.js are: simplicity, easy learning, Native approach, Data binding, and the generated programs are easy to test. As shown in the code in Figure 2, define a component class called HelloMessage by inheriting the class from React.Component, and add this component to the element whose ID is an instance through the render method to display the content.

Market environment

Brito, H et al (2019) stated that the feedback they got on React Native from programmers was very good and they found it very intuitive to develop through the same framework. That way, regardless of which platform you are on, you can create an app with the same content.

Application performance

H1: Apps developed natively on the IOS platform have faster image rendering speeds than apps developed with cross-platform JavaScript frameworks. H2: Apps developed natively on the Android platform have faster image rendering speeds than apps developed with cross-platform JavaScript frameworks.

Method description

The experiment will collect data in the same mobile phone (one for Android and one for IOS), but different models of mobile phones may have different results. To ensure the objectivity of the measurement in the experiment, the experiment will collect data on several different browsers.

Literature Study

Yoon, I et al (2000) show in their article the importance of image display speed for applications. Unlike Novac, CM et al (2021) in their experiments only used different JS frameworks to develop applications with computing functions, and tested the rendering speed of the applications.

Progression

React Native - Try displaying text, buttons and images

React Native - Complete the app, try to add picture function

The third commit added 3 new js files, namely header.js, addTodo.js and todoImage.js. The View in the middle layer contains the AddTodo button with the Image function and the View in the inner layer. As shown in Figure 10, also in the App.tsx file, use useState, an interface of React, to create an array called Image that can contain images, and use the built-in setImage program to add images to add and remove.

Figure 10 array and function Code in App.tsx file
Figure 10 array and function Code in App.tsx file

React Native - Removed text-related code, improved image adder

After a small error in the fourth commit, the preview of the application is shown in Figure 36. In this pilot study, the image rendering time of the two applications has a significant difference. But the P-value reached 0.7178, which indicates that there is no difference in the rendering performance of the two applications.

The P-value of the ANOVA is also very small, indicating a difference between the rendering performance of the two applications. From the line graph and bar graph, it can be seen that the rendering performance of the Native application is better than that of the ReactNative application.

Figure 13 code in addTodo.js file
Figure 13 code in addTodo.js file

Native IOS (Swift) - Try iterating through the array, adding delete functionality

Native IOS (Swift) - Determine what the Item Model and Item display

Since ItemModel.swift was created with fixed content, only the image is shown in Figure 19. The first image in Hstack is the code to call the image, and the second image is the data of the array named image in ItemModel.swift. The blue item on the right represents an item named ItemModel passed to ListImageView.swift.

Figure 19 ListImageView.swift
Figure 19 ListImageView.swift

Native IOS (Swift) - Add ObservableObject, add picture adding program

The purpose of this pilot study is to investigate the image rendering speed of the application between different development methods. From the bar chart in Figure 53, it can be seen that the average rendering speed of the two applications is similar, but the React Native application is not very stable. From the bar chart in Figure 55, the average render time for the two applications is similar, but the data for React Native is more scattered.

The STD value of the ReactNative app is about six times that of the Native app. Or change the calling method in the development language to make the response time of the application program shorter.

Figure 22 function in ListViewModel.swift
Figure 22 function in ListViewModel.swift

Native Android (Kotlin) - Add fragment, determine layout

Native Android (Kotlin) - Determine Task Model, Create Fragment ViewBinding

Similar to NewTaskSheet.kt, by defining the binding and taskViewModel, setting the onClickListener event and setting the appropriate settings for the two array types in the taskViewModel.

Figure 33 TextInput code in fragment_new_task_sheet.xml  Change the two TextViews in fragment_new_task_sheet.xml to TextInput
Figure 33 TextInput code in fragment_new_task_sheet.xml Change the two TextViews in fragment_new_task_sheet.xml to TextInput

Native Android (Kotlin) - onCreate-> onViewCreated

Native Android (Kotlin) - Add TaskItem, Update TaskViewModel

As shown in Figure 38, the code in TaskViewModel.kt needs to be updated because the TaskItem is added and defined. When init{} is called, it initializes an empty mutableList and then adds the passed TaskItem to the addTaskItem program. As for the two programs updateTaskItem and setCompleted, they are used to update the name and content of the TaskItem and to confirm whether it is completed, but these functions are not needed in the final product, so they are deleted in the end.

Figure 38 update code in TaskViewModel.kt
Figure 38 update code in TaskViewModel.kt

Native Android (Kotlin) - Update NewTaskSheet

In the line graph in Figure 50, the fluctuation of the React Native application is obvious, and the rendering time of the native application does not fluctuate much. From the line chart in Figure 56, changing the image makes the data for the two applications overlap to some extent. Finally, this experiment only tested the rendering performance of the image, and it does not represent the overall rendering performance of the two development methods.

Figure 40 update save button code in NewTaskSheet.kt
Figure 40 update save button code in NewTaskSheet.kt

Native Android (Kotlin) - Add TaskItem Adapter and Views Holder

Native Android (Kotlin) - Delete code about text, add image function

The subsequent commitment is to delete the code related to the text and add the program related to the image at the same time so that the application only adds images.

Figure 46 app preview
Figure 46 app preview

Pilot Study

Analysis of Pilot Study

Looking at the standard deviation of application rendering times, native application rendering performance is better. The reason for the overlap of the standard deviations is that the content and functions of the two applications are essentially the same, but the influence on the data caused by different experimental methods and implementation codes cannot be ruled out. As for the application program of the IOS platform, since packaging the IPA file of the IOS platform requires a developer account, a developer account must be purchased.

Presentation of examination

Analysis

Test cases 1

Because of the multiple spikes, the IZ value for React Native in Table 3 is even higher than the average value. This shows that this time the data is not very accurate in the evaluation of React Native. At the same time, this also makes the P value very small, which can be said to be infinitely close to 0, which also means that the rendering performance of the two applications is different.

Test cases 2

In test case 2, the measurement process is similar to test case 1, except that the number of simultaneously rendered images is changed to 3. Judging from the line graph in Figure 54, the increase in the number of simultaneously rendered images leads to greater fluctuations in the data. Since the data of both applications have multiple spikes, the data in Table 4 shows that the average values ​​of the two applications are similar, but in terms of CI and STD, the original application is more accurate.

Test cases 3

In the case of test 3, the measurement process is similar to the case of test 1, except that the size and resolution of the given image are doubled. From the bar graph in Figure 57, the average rendering time of the Native app is higher than that of the ReactNative app, but the distribution of the React Native data is relatively scattered. Since there are only a few points, the STDs in Table 4 become smaller, but from the point of view of CI, the data accuracy of the Native app is still higher than that of the ReactNative app.

Conclusions

In test case 2, two applications are rendering 3 images at the same time, which increases the rendering time of both applications, but the average values ​​of the two data sets are unexpectedly very close. Compared to Test Case 1, the average value of the Native application increased, while the average value of the ReactNative application decreased. In addition, the STDs of both apps are almost the same, the number of Native apps has increased and the number of ReactNative apps has decreased.

Summary

Discussion

The first is whether this experiment can be replicated so that other people can conduct experiments in the future and confirm the experimental results. The application code for this experiment will be presented on GitHub for easy reproduction. Ultimately, it should be the type of image that affects the effectiveness of the results.

Ethics and society

During the implementation of this experiment, to ensure the reliability of the results, the function of the application chose a single image to add. Efficient operation can reduce the application's response time and resource consumption, and less runtime can also reduce the application's energy consumption. This experiment only measured the comparison between different applications on one device on the Android platform.

Future Work

Because performance analytics tools are developed with the goal of increasing market share, better applications lead to better market share. Every platform should have an official performance analysis tool, and it's hard for an unofficial multi-platform performance analysis tool to beat the official performance analysis tool. 15TH IBERIAN CONFERENCE ON INFORMATION SYSTEMS AND TECHNOLOGIES (CISTI'2020) Gan, XB; Dai, K; Wang, ZY (2008) Low-level component for OpenGL ES-oriented.

Figure

Figure 7 Image about HelloMessage code in React Native
Figure 9 Main screen Code in App.tsx file
Figure 10 array and function Code in App.tsx file
Figure 11 header.js file
+7

References

Related documents

The second research question investigates where React Native has a worse development in performance compared to Kotlin between test cases, to find the functionality that

In an experiment, this can be ensured by independently choosing the measurement settings on both sides so quickly that no physical signal (limited by the speed of light) can

We do not use students’ percentile expectations because grade percentile is a relative performance measure and the classical measurement error assumption is

Whereas in Case Study 2, by modelling the predicted extent of message size reduction as an IF within the HASTE tools, we can define a policy to prioritize image processing and