React Native Performance Evaluation

Smartphones have become an ubiquitous device for people, and there are multiple mobile platforms to choose from. For mobile developers this means more work, as they will need to learn the tools and technologies unique to each platform, and develop their application separately for each platform. Cross platform tools such as React Native promise a solution where developers can use the same tools and technologies across different platforms. A React Native application is essentially a JavaScript application that controls native user interface components. As such, a React Native application has to perform more background work compared to an equivalent native mobile application. This thesis studies whether React Native carries any meaningful performance penalties with it on the Android platform, and whether it is possible to work around these problems. It aims to provide some insight into the performance figures of React Native for both developers considering the technology and researchers wanting to do further research. Methods for measuring application launch times, render latency of components, navigation latency and list scrolling are presented. In all but the last case, the measurements can be directly compared between a React Native and an Android application to find out the exact overhead of React Native in each situation. The findings indicate that React Native does incur meaningful performance penalties compared to native code. In many cases the performance hit is not significant enough to cause user frustration, but especially on older devices common operations such as application launch and component rendering are noticeably slower and may have up to 10 times longer latency than the native equivalent. On modern devices the overhead of React Native is less noticeable, making React Native a better fit when targeting newer hardware.Smarttelefoner har blivit allestädes närvarande bland folk, och det finns flera olika plattformer att välja mellan. För mobilutvecklare innebär detta mera arbete, eftersom de måste behärska diverse plattformers unika verktyg samt teknologier, och dessutom utveckla sina applikationer för varje platform skilt. Plattformsoberoende teknologier som t.ex. React Native erbjuder en lösning som möjliggör användningen av samma verktyg och teknologier för flera olika plattformer. En React Native applikation är i grund och botten en JavaScript applikation som kan rita upp nativa användargränssnittskomponenter. Detta betyder att en React Native applikation är tvungen att göra mera arbete jämfört med en nativapplikation. Detta diplomarbete undersöker om huruvida React Native har några betydelsefulla prestandaproblem på Android plattformen, och om det är möjligt att kringgå sådana problem. Arbetets syfte är att ge en insikt i React Natives prestanda åt utvecklare som överväger att använda teknologin, samt åt forskare som vill göra vidare forskning inom ämnet. Metoder presenteras för att mäta applikationers starttid, komponenters ritningstid, latens i hantering av navigation, samt rullandet av en lista. I alla utom det sista fallet kan resultaten jämföras direkt mellan React Native och Android, vilket ger oss exakt information över hur mycket extra beräkningstid React Native behöver i respektive situation. Undersökningen påvisar att React Native är betydligt långsammare än nativkod i vissa fall. Ofta är skillnaden inte tillräckligt stor för att orsaka frustration hos användaren, men speciellt på äldre telefoner kan vanliga händelser som applikationens starttid eller komponenters rittid vara till och med 10 ggr. långsammare i en React Native applikation jämfört med en ekvivalent Android applikation. På moderna telefoner är skillnaden mellan React Native och nativkod inte lika stor, vilket gör att React Native passar bättre in ifall applikationens målgrupp använder nyare hårdvara

EKSPLORASI FRAMEWORK REACT NATIVE DALAM PEMBANGUNAN APLIKASI BERBASIS MOBILE (STUDI KASUS : APLIKASI REMINDER MUTABA’AH AMAL YAUMIYAH)

Dalam proses pembangunan aplikasi yang berkualitas baik, pengembang harus menggunakan praktek rekayasa software yang benar, salah satunya dengan memperhatikan layer rekayasa perangkat lunak. Kakas yang merupakan salah satu layer rekayasa perangkat lunak terus mengalami perkembangan tiap waktunya sehingga diperlukan suatu pemahaman akan kakas yang sesuai dengan kebutuhan aplikasi yang dikembangkan. Salah satu kakas terkini yang menarik perhatian dalam hal pembangunan aplikasi berbasis mobile adalah React native. Untuk mengetahui manfaatnya, React native akan coba dieksplorasi untuk menghasilkan perangkat lunak yang berkualitas baik. Kegiatan eksplorasi React native akan mengacu kepada atribut faktor kualitas McCall yaitu portability, reusability, dan maintainability. Seiring berjalannya kegiatan eksplorasi, perancangan dan implementasi aplikasi pengingat mutaba’ah yaumiyah akan diterapkan dengan react native sehingga hasil eksplorasi dapat lebih dirasakan manfaatnya. Diharapkan pengetahuan dari hasil eksplorasi react native dapat membantu dalam pembangunan aplikasi berbasis mobile berkualitas baik. Kata kunci : eksplorasi react native, layer kakas rekayasa perangkat lunak, faktor kualitas McCall, pengingat mutaba’ah yaumiya

Sovelluskehitys React Nativella

Insinöörityössä tutustuttiin mobiilisovelluskehityksen toteutustapoihin, hybridisovellusten ohjelmistokehyksiin sekä React Native -ohjelmistokehykseen. Työn tavoitteena oli oppia React Nativen käyttöä ja kehittää sovellus, jolla on täysin yhteinen koodikanta Android- ja iOS-alustoille. React Native on ohjelmistokehys, jonka avulla voi kehittää hybridisovelluksia Android-, iOS- ja Windows Phone-alustoille. Sen toiminta pohjautuu alustakohtaisten natiivikomponenttien käsittelyyn, mikä poikkeaa perinteisistä hybridisovelluksista. Perinteiset hybridisovellukset toteutetaan web-tekniikoilla, ja ne hyödyntävät kohdealustan WebView-säiliötä. React Nativen avulla kehitetyt sovellukset ovat alustariippumattomia natiivisovelluksia. Työn teoriaosuudessa syvennyttiin React Nativen toimintaperiaatteisiin ja pyrittiin havainnollistamaan muun muassa renderöinnin toimintaa. Käytännön osuudessa kuvataan sovelluskehitystä React Nativella oman sovelluksen ja koodiesimerkkien avulla. Lopputuloksena syntyi tavoitteiden mukainen Stats Collector -mobiilisovellus. Sovelluksen avulla voi kerätä tilastoja jalkapallo-ottelusta. Sovellusta on tarkoitus kehittää lisää ja julkaista se Googlen ja Applen sovelluskaupoissa.This thesis focuses on software development with React Native. Different methods of mobile application development and hybrid frameworks are also covered. The goal of the thesis was to learn to develop applications with the React Native framework and to develop a hybrid application with a common codebase for Android and iOS. React Native is a framework for developing Android, iOS and Windows Phone applications. It uses native components directly which differs from traditional hybrid frameworks. Traditional hybrid applications are developed using web-technologies and they use WebView containers to display the content. Applications made with React Native are platform independent native apps. The theory section concentrates on the operational principles of React Native. The section tries to illustrate for example how the rendering works in React Native. The software development with React Native is also described, including code samples and screenshots from Stats Collector application. The Stats Collector application was the result of the project and it met all the objectives. The application is for collecting match statistics from a football match. The application is supposed to be released in Google’s and Apple’s app stores after some further development

React Native -animaatiot

Nykypäivänä älypuhelimia on enemmän kuin koskaan. Vastatakseen sekä iOS- että Android-käyttäjien tarpeisiin sovelluskehittäjien piti kehittää sovellukset molemmille alustoille. Erillisen sovelluksen kehittäminen molemmille alustoille ei kuitenkaan ollut aina business-näkökulmasta katsottuna järkevää. Ratkaisuksi kehitettiin hybridiviitekehykset, joiden avulla kehittäjät pystyivät kääntämään yhden lähdekoodin monelle alustalle. Samaan aikaan, erottuakseen massasta, sovelluksen piti tarjota nykyaikaisia käyttöliittymäkokemuksia, joihin kuuluvat vahvasti eleet sekä animaatiot. Monet hybridiviitekehykset eivät kuitenkaan kyenneet tarjoamaan tätä kokemusta. Työssä kartoitettiin, mitä mahdollisuuksia React Native-kehittäjällä on modernien käyttöliittymäkomponenttien luomiseen. Eri menetelmien erojen selvittämiseksi päätettiin kehittää bottomsheet-komponentti. Kyseinen komponentti on yleisesti käytetty ja sisältää sekä eleitä että animaatoita. Työssä käyvät ilmi eri animaatiomenetelmien erot, viat, ja vahvuudet. Tulokseksi saatiin suositus siitä, miten React Native -kehittäjän kannatta kehittää elepohjaisia ja animoitavia käyttöliittymäkomponentteja

APLIKASI LAYANAN JAHIT MENGGUNAKAN FRAMEWORK REACT NATIVE

Human lifes inseparable from primary needs, namely clothing, food and boards. Clothing is a basic human need for clothing used to protect the human body. Current development making clothes can not only protect the human body but also develop into fashion with various models which of course require tailoring services to sew clothes according to customer needs. The process of the customer getting the desired tailor service when this is still using word of mouth or ordering services atau sew on one tailor who has subscribed. Batam city has many services  home tailors and customers who still use these methods and less efficient for a tailor and a prospect. This study aims to build a sewing service application which supports the provision of home sewing services and customers. Development  this application uses the waterfall model and testing The application uses the black box testing method. Programming language that used is PHP and Javascript using the react native framework as framework and MySQL as database. This application is expected to make it easier for a customer and tailor to be able to connect with each other using the application

Comparing the Usage of React Native and Ionic

This project will compare two popular programming frameworks for building mobile applications. These frameworks are called ‘cross-platform frameworks’ as they can develop applications on multiple platforms. The scope of this project is to understand the structural reasons for the differences in these frameworks. While this project does speculate on reasons for choosing either framework, this project does not attempt to make a hard recommendation. In this project, I built two applications, as similar as possible, in React Native and Ionic. I found that there were differences in the goals of these frameworks, lending each of the two better to different use cases. This is important because it is useful to understand the advantages and disadvantages of different tools

Sistem Marketplace Penitipan Hewan Dengan Memanfaatkan Teknologi React Native

Keeping animals is a very fun hobby because pets can be entertainment in itself to relieve fatigue from daily activities. But there are certain times, the owner doesn't have time to take care of the pet, especially if there are tasks out of town for a few days, or other activities. Pet care is a solution to keep pets taken care of while their owners don't have time to take care of them. Animal care provides care facilities for pets that are deposited. Currently, many provide animal care services with the aim of helping facilitate the search for the best animal care services and according to needs. Developed a mobile application system in the form of an animal care marketplace using React Native technology. The purpose of making this system is so that animal owners can find animal care centers according to their wishes. There are two users who play a role in this system, namely animal owners and animal day care workers. The animal owner's user system can determine a message schedule to entrust animals to the care feature and choose the cage to be occupied. The advantage of this feature is that pet owners can also know the condition of their pets, because each officer will send information. Through testing this system, it is known that there are about 73% of users who want to use this system. This system helps people who have pets not to worry about doing care

Sistem Marketplace Penitipan Hewan Dengan Memanfaatkan Teknologi React Native

Keeping animals is a very fun hobby because pets can be entertainment in itself to relieve fatigue from daily activities. But there are certain times, the owner doesn't have time to take care of the pet, especially if there are tasks out of town for a few days, or other activities. Pet care is a solution to keep pets taken care of while their owners don't have time to take care of them. Animal care provides care facilities for pets that are deposited. Currently, many provide animal care services with the aim of helping facilitate the search for the best animal care services and according to needs. Developed a mobile application system in the form of an animal care marketplace using React Native technology. The purpose of making this system is so that animal owners can find animal care centers according to their wishes. There are two users who play a role in this system, namely animal owners and animal day care workers. The animal owner's user system can determine a message schedule to entrust animals to the care feature and choose the cage to be occupied. The advantage of this feature is that pet owners can also know the condition of their pets, because each officer will send information. Through testing this system, it is known that there are about 73% of users who want to use this system. This system helps people who have pets not to worry about doing care

UC-238 SP4-DogEm

The DogEm project\u27s overarching objective is to produce a functional cross-platform mobile app that reliably sends a specific contact a series of calls, emails, and texts until the contact responds. To accomplish this goal, we have compiled preliminary research, produced a series of prototypes, and started the development process. Our preliminary research consists of research pertaining to our tech stack, our user base, our app\u27s requirements, possibilities for messaging and calling features, UX/UI research, reading through React Native documentation, and constraints on the messaging and calling features on iOS vs. Android. Each member produced a DogEm app prototype to familiarize ourselves with the technology that will be employed throughout the project: React Native and Expo CLI. Features implemented throughout the prototypes include, React Native Navigation, expo-sms, expo Linking, Firebase, and various other React Native libraries and APIs. Our development process currently consists of a team effort in which members are assigned an important functionality of the app. Members then actively contribute their changes to a GitHub repository holding our final product. GitHub is an important tool for our development efforts because it allows for code review and effective version control. With regard to version control, we are tracking and maintaining changes made to code on our GitHub. It is an integral part of our software development process. In order to facilitate best practices in our source code management, the DogEm team has been storing and managing our code in GitHub and maintaining a source code directory on our website