Veb dizajn i programiranje

Seminarski

rad: React

Native
 1. Sadržaj

1. Sadržaj........................................................................................................................2
2. Uvod...........................................................................................................................3
3. Prednosti react-nativ-a................................................................................................4
4. Iskustvo programera...................................................................................................5
5. Ponovna upotreba koda i razmena znanja..................................................................6
6. Rizici i nedosaci.........................................................................................................6
7. Primer u web dizajnu..................................................................................................7
8. Zaključak..................................................................................................................10
9. Literatura..................................................................................................................11

2. Uvod

2
 Stvaranje mobilne aplikacije često je težak posao za programera jer programmer mora da
napravi jednu aplikaciju za android platformu I jednu za iOS platformu koja zahteva znanje iz
dva različita domena. Za android mobilnu aplikaciju znanje “IDE” (Android studio,
programski jezik: Kotlin ili java) i za iOS mobilnu aplikaciju (programski jezik: swift ili
objektivan C i IDE: xcode). Pored toga neki popularni hibridni frejmvorkovi za mobilne
aplikacije koje su napravili programeri nisu bili mnogo uspešni u stvaranju potpuno istog
iskustva na više izvornih platformi.
Shvatajući rešenje problema, ovaj rad koristi prednost React Native-a koji je frejmvork
sposoban za generisanje hibridnih mobilnih aplikacija za više platformi. React Native, koji je
razvio Facebook 2015. Godine, nastoji da ima jedno mesto za pisanje koda u javascripti ES6
kao programskom jeziku i istovremeno izradu mobilne aplikacije za iOS I android sa
jedinstvenim kodom napisanim za obe platforme. Da bi primenio složene aplikacije, koristi
drugu zavisnost sa imenom Redux ili Mobix sposobnu da upravlja stanjem u react native.
Štaviše, ovaj istaživački rad opisuje zavisnost razvijene od strane drugih reagovanih
domaćih programera koji su korišćeni u ovom isrživačkom radu, poput baze podataka I
korisničkog interfejsa. Istraživački rad teži postizanju sledećih ciljeva:
• Da se korisničko iskustvo mobilne aplikacije napravljene od react native frejmvorkova
prilagodi zadovoljavajućim.
• Da se proveri da li je formiranje korisničkog interfejsa jednostavno u poređenju sa drugim
izvornim platformama.
• Da bi se napravila razlika između stvaranja jednostavnih I složenih aplikacija pomoću react-
native-a

3. Prednosti react-nativ-a

Činjenica da se React Native zapravo prikazuje pomoću standardnih aplikacija za

prikazivanje svoje platforme domaćina omogućava mu da se izdvoji od većine postojećih
metoda razvoja višeplatformnih aplikacija, poput Cordove ili Lonic-a. Postojeće metode

3
pisanja mobilnih aplikacija pomoću kombinacija JavaScript, HTML i CSS obično se
prikazuju pomoću veb pregleda. Iako ovaj pristup može da funkcioniše, on takođe ima i
nedostatke, posebno oko performansi. Pored toga, obično nemaju pristup skupu matičnih
elemenata korisničkog interfejsa na platformi hosta. Kada ovi okviri pokušaju da oponašaju
nativne elemente korisničkog interfejsa, rezultati se obično „osećaju“ pomalo malo; obrnuti
inženjering svih finih detalja stvari poput animacija iziskuje ogroman napor i oni brzo mogu
zastareti.
Nasuprot tome, React Native aktuelno prevodi vaše oznake u stvarne, izvorne elemente
korisničkog interfejsa, koristeći postojeće načine prikazivanja pogleda na bilo kojoj platformi
sa kojom radite. Pored toga, React radi odvojeno od glavne niti korisničkog interfejsa, tako da
vaša aplikacija može održavati visoke performanse bez odricanja od sposobnosti. Ciklus
ažuriranja u React Native-u je isti kao i u React-u: kada se rekviziti ili promena stanja
reaguju, React Native prikazuje prikaze. Glavna razlika između React Native i React u
pregledaču je ta što React Native to radi tako što koristi UI biblioteke svoje hostovne
platforme, umesto da koristi HTML i CSS oznake.
Za programere koji su navikli da rade na Internetu sa React-om, to znači da mobilne
aplikacije mogu da napišu performanse i izgled i osećaj izvorne aplikacije, dok koristite
poznate alate. React Native takođe predstavlja poboljšanje u odnosu na normalan mobilni
razvoj u dve druge oblasti: iskustvo programera i razvojni potencijal za više platformi

4. Iskustvo programera

Ako ste ikada ranije programirali za mobilne uređaje, možda ćete biti iznenađeni koliko je
lako raditi na React Native. Tim React Native je u okvir ugradio jake alate za programere i
značajne poruke o greškama, tako da je rad s robusnim alatima prirodni deo vašeg
programerskog iskustva.
Na primer, zato što je React Native „samo“ JavaScript, ne morate ponovo da pravite
aplikaciju da biste videli da se vaše promene odražavaju; umesto toga, možete pritisnuti

4
Command + R da biste osvežili svoju aplikaciju baš kao i bilo koju drugu veb stranicu. Svi
oni minuti provedeni u čekanju da vaša aplikacija bude napravljena mogu se zaista zbrajati, i
za razliku od toga, brzi iterativni ciklus React Native-a deluje kao božji dar.
Pored toga, React Native vam omogućava da iskoristite prednosti inteligentnih alata za
otklanjanje grešaka i izveštavanja o greškama. Ako su vam prijatni Chrome ili Safari-ovi alati
za programere, biće vam drago da znate da ih možete koristiti i za mobilni razvoj. Isto tako,
možete koristiti bilo koji uređivač teksta koji želite za uređivanje JavaScript-a: React Native
vas ne prisiljava da radite u Xcode-u za razvoj za iOS ili Android Studio za razvoj Android-a.
Pored svakodnevnih poboljšanja vašeg razvojnog iskustva, React Native takođe ima
potencijal da pozitivno utiče na vaš ciklus izdanja proizvoda. Na primer, Apple dozvoljava
bežično učitavanje promena ponašanja aplikacije zasnovanih na JavaScript-u bez dodatnog
ciklusa pregleda.
Sve ove male pogodnosti štede vreme i energiju vama i kolegama programerima,
omogućavajući vam da se usredsredite na zanimljivije delove svog rada i budete u celini
produktivniji.

5. Ponovna upotreba koda i razmena znanja

Rad sa React Native-om može dramatično smanjiti resurse potrebne za izgradnju mobilnih
aplikacija. Bilo koji programer koji zna kako da napiše React kod, sada može ciljati Veb, iOS
i Android, svi sa istim skupom veština. Pored zajedničkog znanja, može se deliti i veći deo
vašeg koda. Neće sav kod koji napišete biti višestruko platforma i u zavisnosti od toga koja
vam je funkcija potrebna na određenoj platformi, možda ćete povremeno morati da uronite u
Objective-C ili Java. Ali ponovna upotreba koda na različitim platformama je iznenađujuće
laka sa React Native-om. Na primer, aplikacija Facebook Ads Manager za Android deli 87%
svoje baze kodova sa iOS verzijom.

5
 6. Rizici i nedosaci

Kao i kod bilo čega drugog, upotreba React Native-a nema svojih loših strana, a da li
je React Native pogodan za vaš tim zaista zavisi od vaše individualne situacije.
Najveći rizik je verovatno zrelost React Native-a, jer je projekat još uvek relativno
mlad. Podrška za iOS je objavljena u martu 2015. godine, a podrška za Android u septembru
2015. Dokumentacija sigurno ima prostora za poboljšanje i nastavlja da se razvija. Neke
funkcije na iOS-u i Android-u još uvek nisu podržane, a zajednica i dalje otkriva najbolje
prakse. Dobra vest je da u velikoj većini slučajeva možete sami da primenite podršku za
nedostajuće aplikacije. Budući da React Native uvodi još jedan sloj u vaš projekat, to takođe
može učiniti ispravak grešaka dlakavijim, posebno na preseku React-a i host platforme. React
Native je još uvek mlad i ovde se primenjuju uobičajena upozorenja koja idu uz rad sa novim
tehnologijama. Ipak, u celini, mislim da ćete videti da su koristi veće od rizika.

7. Primer u web dizajnu

Ovo je “kostur” na koji ćemo priložiti našu React aplikaciju:

<!DOCTYPE html>
<html>
<head>
<title>React Native Web</title>
<meta charSet="utf-8" />
<meta content="initial-scale=1,width=device-width" name="viewport" />
</head>
<body>
<div id="react-app"></div>
<script type="text/javascript" src="/bundle.js"></script>
6
 </body>
</html>

Sada moramo da napravimo indeksnu “ javascript datoteku” za veb. On može biti isti kao
index.ios.js ili index.android.js ali sa jednom dodatnom linijom, koja ce omogućiti DOM
pričvršćenijim.

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

class ReactNativeWeb extends Component

{ render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.web.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload
</Text>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
7
 instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('ReactNativeWeb', () => ReactNativeWeb);

AppRegistry.runApplication('ReactNativeWeb',
{rootTag:document.getElementById('react-app') });

8
 8. Zaključak

Stvaranje mobilnih aplikacija kompatibilnih na više platformi je dosadan zadatak i

postavlja značajne izazove pred programera jer mora biti upoznat sa poznavanjem dve ili više
izvornih platformi. Pored toga, određeni hibridni okviri mobilnih aplikacija koji postoje na
tržištu nisu mogli pružiti slično iskustvo istom korisniku na svim matičnim platformama.
React Native je uzbudljiv okvir koji omogućava veb programerima da kreiraju robusne
mobilne aplikacije koristeći svoje postojeće JavaScript znanje. Nudi brži mobilni razvoj i
efikasnije deljenje koda na iOS-u, Android-u i na Internetu, bez žrtvovanja iskustva krajnjeg
korisnika ili kvaliteta aplikacije. Kompromis je to što je novo i još uvek je u toku.

9
 9. Literatura

• https://medium.com/@aureliomerenda/create-a-native-web-app-with-react-native-web-
419acac86b82
• https://github.com/necolas/react-native-web
• https://reactnative.dev/
• https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-
web/
• https://en.wikipedia.org/wiki/React_Native
• https://www.netguru.com/what-is-react-native
• https://www.dotcominfoway.com/blog/react-native-leading-development-for-mobile-apps/
• https://nordit.hr/blog/react-native-prednosti

10