Ionic Cordova vs React Native

Ionic vs React NativeIonic vs React Native
Un confronto pratico tra due mondi diversiUn confronto pratico tra due mondi diversi
Antonio GalloAntonio Gallo
1 . 1

Mi presentoMi presento
Antonio Gallo -
Programmo dai tempi dei computer Commodore
Mi occupo di Linux e Web dal 1996 -
Da qualche anno mi occupo anche di Angular e React
Sviluppo App e Corsi per Aziende
Do una mano a gestire alcuni gruppi FB tra cui "
" e " "
https://www.antoniogallo.it/
https://www.badpenguin.org/
Angular Developer
Italiani React Developer Italiani
1 . 2

Di cosa vi parlo oggiDi cosa vi parlo oggi
Delle di erenze dal punto di vista pratico tra due mondi molto
diversi: Ionic e React Native
Senza scatenare ame o guerre ideologiche
E' mio parere che bisogna conoscerli entrambi
Ciascuno giudica bene ciò che conosce, e solo di
questo è buon giudice. -- Aristotele
1 . 4

Cosa sono Ionic e ReactCosa sono Ionic e React
Native?Native?
Sono “framework” per sviluppare applicazioni mobile usando
JavaScript (TypeScript)
Ionic: realizzato da Drifty Co., utilizza Angular (Google)
React Native: realizzato da Facebook, utilizza React (Facebook)
Angular e React sono due diversi framework JS per sviluppare
WebApp
1 . 5

Come funzionano?Come funzionano?
Ionic usa "Apache Cordova"
Cordova permette far girare una WebApp all'interno di una
WebView
in pratica c'è un index.html che Cordova apre a schermo pieno
al lancio dell'App mobile
Cordova fornisce una serie di plugin per consentire da JS di
accedere a funzioni native
React Native è un unico bundle
all'avvio viene lanciato index.js che consente di usare React per
e ettuare il render() di funzioni native
1 . 6

In parole povereIn parole povere
In Ionic si programma come se fosse un sito web responsive
(HTML5, CSS, etc.) e abbiamo delle funzioni JS che consento
l'accesso all'hardware
In React Native si programma in React ma senza usare HTML
(non esiste il DOM) con componenti nativi già pronti all'uso e
funzioni JS per l'accesso all'hardware
1 . 7

I limiti della WebViewI limiti della WebView
Compatibilità HTML e CSS (Android 4: stock browser senza
exbox; Android 5+: chrome; IOS: Safari)
Feeling della UI: 300ms delay sul click (si ovvia usando "tap")
Flickering durante le transizioni CSS
Performance: utilizza un solo "core" (o almeno era così)
Con Ionic v2 ho avuto spesso problemi di performance quando
l'app era troppo grande con alcuni telefoni di fascia bassa.
Parzialmente risolto con la v3 che implementa il lazy loading e
la compilazione AOT.
1 . 8

I vantaggi della WebViewI vantaggi della WebView
Possibilità di riutilizzare un in nità di codice sviluppato per DOM
Tempi e costi di sviluppo ridotti
Possibilità di creare PWA - Progressive Web Application
In React Native esiste un progetto sperimentale:
https://github.com/necolas/react-native-web
1 . 9

Chi ha già usato questiChi ha già usato questi
framework?framework?
Ionic:
SworKit -
RN:
Instagram, AirBnB, Pinterest, Skype, Uber
https://showcase.ionicframework.com/apps/top
https://play.google.com/store/apps/details?
id=sworkitapp.sworkit.com
https://facebook.github.io/react-native/showcase.html
1 . 10

App di esempioApp di esempio
Per confrontare le performance e il feeling ( uidità, tocco, scroll,
swipe, etc.) dell'interfaccia ho realizzato appositamente due app con
funzionalità identiche che potete installare e comparare
direttamente sul Vs dispositivo.
O in alternativa, trovate i video su
https://goo.gl/4YndQmhttps://goo.gl/4YndQm
https://www.youtube.com/user/antoniogallo73/videos
1 . 11

DOMANDEDOMANDE ??
https://goo.gl/4YndQmhttps://goo.gl/4YndQm
1 . 12

Le differenze tra le due appLe differenze tra le due app
1 . 13

Bundle size & BootstrapBundle size & Bootstrap
Feature Ionic React Native
Bundle Size 2.8 MB 8.8 MB
Bootstrap ~ 5 sec. ~ 2 sec.
1 . 14

Tab "Utenti"Tab "Utenti"
Tema, Grid/List, aspect ratio, Pull to Refresh, Tab Bar, Icone, Font, Colori
1 . 15

Pull to refreshPull to refresh
1 . 16

Load moreLoad more
In RN potrebbe non comparire: è con gurabile per caricare prima che si arrivi in
fondo alla lista
1 . 17

"Out of the box""Out of the box"
Feature Ionic React Native
Tema Material per Android
(SASS/SCSS)
Neutrale (Stylesheet)
Grid/List HTML (UL,LI) Nativa
Aspect Ratio CSS Nativo
Icone Ionicons (wo ) Nessuno
(Fontawesome)
Font Roboto, Noto Sistema (TTF)
Animazioni CSS Transitions Native (Animate)
1 . 18

City BIkesCity BIkes
In Ionic la gestione dei marker è più lenta.
1 . 19

FotoFoto
Dashed border. Stilying del bottone. In R.N. ho usato la griglia, in Ionic le colonne.
1 . 20

FormForm
Ionic React Native
1 . 21

Ionic Form HTML5Ionic Form HTML5
1 . 22

About MeAbout Me
Ionic React Native
1 . 23

Temi e UI kit già pronti per RNTemi e UI kit già pronti per RN
Per ovviare al gap iniziale con Ionic:
Native Base
demo:
Elements
Material Design
https://docs.nativebase.io/Components.html#Form
https://play.google.com/store/apps/details?
id=io.market.nativebase.geekyants.nativebasekitchensink
https://react-native-training.github.io/react-native-elements/
https://github.com/react-native-material-design/react-native-
material-design
1 . 24

Sporchiamoci le maniSporchiamoci le mani
Vediamo velocemente le principali di erenze a riguardo di:
1. installazione
2. struttura del sorgente
3. programmazione e debugging
4. compilazione
5. aggiunta di componenti nativi aggiuntivi
1 . 27

1. Installazione e creazione di1. Installazione e creazione di
un progettoun progetto
Ovviamente dovete avere una serie di pre-requisiti (per Android
ovviamente l'SDK, Java, etc.; npm)
IonicIonic
React NativeReact Native
npm install -g ionic cordova
ionic start helloWorld blank
ionic cordova platform add android
ionic cordova platform add ios
npm install -g react-native-cli
react-native init helloWorld2
1 . 28

Stuttura del progetto (root)Stuttura del progetto (root)
1 . 29

Stuttura del progetto (src)Stuttura del progetto (src)
1 . 30

Ionic: index.htmlIonic: index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>

<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script>
</body>
</html>
1 . 31

Ionic: bootstrap e ion-appIonic: bootstrap e ion-app
Directory: src/app/
main.ts e app.module.ts sono i le principali di Angular
app.component.ts, app.html e app.scss è il componente MyApp
-rw-r--r-- 1 681 giu 1 13:54 app.component.ts
-rw-r--r-- 1 38 mag 8 23:52 app.html
-rw-r--r-- 1 1335 mag 28 14:48 app.module.ts
-rw-r--r-- 1 677 mag 21 21:41 app.scss
-rw-r--r-- 1 169 mag 12 22:28 main.ts
1 . 32

Ionic: MyAppIonic: MyApp
app.component.ts
platform.ready() promise
seleziona pagina principale TabsPage
import {TabsPage} from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleBlackOpaque();
splashScreen.hide();
});
}
}
1 . 33

Ionic: MyApp - NavControllerIonic: MyApp - NavController
app.html
contiene solo il navigatore
Il valore della proprietà root è TabsPage per cui viene caricato il
componente da src/pages/tabs/
tabs.html
Ogni tab ha un suo stack di navigazione separato
<ion-nav [root]="rootPage"></ion-nav>
<ion-tabs>
<ion-tab [root]="tabUsers" tabTitle="Utenti" tabIcon="logo-octocat"></ion-tab>
<ion-tab [root]="tabBike" tabTitle="Bike" tabIcon="bicycle"></ion-tab>
<ion-tab [root]="tabPhoto" tabTitle="Foto" tabIcon="camera"></ion-tab>
<ion-tab [root]="tabForm" tabTitle="Form" tabIcon="clipboard"></ion-tab>
<ion-tab [root]="tabAbourMe" tabTitle="About" tabIcon="person"></ion-tab>
</ion-tabs>
1 . 34

Ionic: tab - AboutMePageIonic: tab - AboutMePage
src/pages/about-me/about-me.html
<ion-content>
<div id="header"></div>
<div id="subheader">
<img src="assets/imgs/tokyo-hanami.jpg"/>
<h1>Antonio Gallo (AGX)</h1>
</div>
<ion-list no-lines>
<ion-item text-wrap>
<p class="bio">
Web & Mobile Full Stack Dev. | Managed Hosting | Wordpress Customiz
</p>
</ion-item>
<ion-item>
<ion-icon name="ios-ionic"></ion-icon>
<a target="_blank" href="http://www.antoniogallo.it">I miei corsi Ionic</a>
</ion-item>
<! OMISSIS >
1 . 35

Ionic: tab - AboutMePageIonic: tab - AboutMePage
src/pages/about-me/about-me.scss
page-about-me {
#header {
width: 100%;
height: 200px;
background: url('../assets/imgs/sfondo.jpg') top center;
background-size: cover;
}
#subheader {
width: 100%;
height: 100px;
position: relative;
img {
position: absolute;
width: 140px;
top: -70px;
left: 50%;
transform: translate(-50%);
border-radius: 100%;
border: solid 2px white;
1 . 36

React Native: index.jsReact Native: index.js
src/App.js:
import {AppRegistry} from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('appCorsoReact', () => App);
export default class App extends Component {
componentDidMount() {
SplashScreen.close({
animationType: SplashScreen.animationType.fade,
duration: 500, delay: 500,
});
}
render() {
return (
<Provider store={this.store}>
<View style={{flex: 1}}>
<StatusBar barStyle='dark-content' />
<TopStackNavigation/>
</View>
</Provider>
);
}
}
1 . 37

React Native: TopStackNavigationReact Native: TopStackNavigation
/* Equivale a ion-tabs (padre) */
export const TopStackNavigation = createBottomTabNavigator({
usersTab: {screen: userNavigation, navigationOptions: {tabBarLabel: 'Utenti'} },
bikesTab: {screen: bikesNavigation, navigationOptions: {tabBarLabel: 'Bike'} },
photosTab: {screen: photosNavigation, navigationOptions: {tabBarLabel: 'Foto'} },
formTab: {screen: formNavigation, navigationOptions: {tabBarLabel: 'Form'} },
aboutMeTab: {screen: aboutMeNavigation, navigationOptions: {tabBarLabel: 'About'} }
}, {
headerMode: 'float',
initialRouteName: 'usersTab',
animationEnabled: true,
backBehavior: 'none',
tabBarOptions: {
activeTintColor: '#488aff',
inactiveTintColor: '#777',
activeBackgroundColor: '#eee',
},
navigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, tintColor}) => {
const {routeName} = navigation.state;
let iconName = Icons globe;
1 . 38

React Native: aboutMePageReact Native: aboutMePage
src/pages/aboutMePage.js
import React from "react";
import {Image, ImageBackground, Linking, ScrollView, Text, TouchableOpacity, View} from
import FontAwesome, {Icons} from 'react-native-fontawesome';
export default class aboutMePage extends React.Component {
static navigationOptions = ({navigation}) => ({
header: null
});
render() {
return (
<ScrollView style={{flex: 1, backgroundColor: '#fff',}}>
<ImageBackground
source={require('../assets/imgs/sfondo.jpg')}
style={{
width: '100%',
height: 200
}}
resizeMode='cover'
>
<View style={{
1 . 39

React Native: Row componentReact Native: Row component
const Row = (props) =>
<TouchableOpacity onPress={()=>{
Linking.openURL(props.url).catch(err => console.error('An error occurred', err)
}} >
<View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 8}}>
<FontAwesome style={{width: 20, textAlign:'center'}} color='#222'>{props.ic
<Text style={{marginLeft: 8, color: '#222'}}>{props.text}</Text>
</View>
</TouchableOpacity>;
1 . 40

Temi e stiliTemi e stili
Ionic: src/theme/variable.scssIonic: src/theme/variable.scss
// Aggiungete valori personalizzati da:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
$toolbar-background: blue;
// Named Color Variables
// --------------------------------------------------
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
// App Theme
// --------------------------------------------------
@import "ionic.theme.default";
//@import "ionic.theme.dark";
1 . 41

React Native: theme.js - de nizioneReact Native: theme.js - de nizione
export const Theme = StyleSheet.create({
H1: {
fontSize: 24,
textAlign: 'center',
fontFamily: 'Ubuntu-C',
color: '#333',
marginTop: 0,
marginBottom: 20
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
fontFamily: 'RobotoCondensed-Regular',
fontSize: 16,
},
gMap: {
...StyleSheet.absoluteFillObject,
}
1 . 42

React Native: theme.js - utilizzoReact Native: theme.js - utilizzo
import {Theme} from '../theme';
export default class LandingPage extends React.Component {
render() {
return (
<View>
<Text style={Theme.H1}>Esempio H1</Text>
<Text style={Theme.instructions}>Istruzioni...</Text>
<MapView style={Theme.gMap} />
</View>
);
}
}
1 . 43

React Native: unione di StyleSheetReact Native: unione di StyleSheet
export const FullScreenContainer = (props) => <View style={
{
...StyleSheet.absoluteFillObject,
justifyContent: 'center',
alignItems: 'center',
...props.style
}
}>{props.children}</View>;
1 . 44

Icona e SplashScreenIcona e SplashScreen
IonicIonic
Creare icon.png e splash.png in resources/ e lanciare:
icona: da impostare manualmente nel progetto Android
splash: installare plugin di terze parti e creare immagini
manualmente
ionic cordova resources
1 . 45

3. programmazione e debugging3. programmazione e debugging
Ionic: nel browserIonic: nel browser
lancia automaticamente una nestra Chrome
ad ogni salvataggio ci sarà il live-reload automatico
si debugga HTML, JS e CSS come una normale SPA per browser
i plugin Cordova non saranno utilizzabili (warning)
ionic serve
1 . 47

Ionic: su emulatore/device ma con livereloadIonic: su emulatore/device ma con livereload
ad ogni salvataggio ci sarà il live-reload automatico
i plugin Cordova non saranno utilizzabili (warning)
i console.log compariranno anche sulla command line (-c)
si usa chrome://inspect per connettersi all'app per il debugging
remoto
Per rendere funzionanti i plugin, togliere i parametri -l e -c
si debugga come una app nativa Android
ionic emulate -l -c
1 . 48

3.2. sviluppo e debugging con React3.2. sviluppo e debugging con React
NativeNative
l'app parte in modalità debug e sarà dipendente dal PC di sviluppo
metro bundler
ovviamente non c'è il DOM per cui dobbiamo usare altri tool!
react-native run-android
1 . 49

Il menù di debuggingIl menù di debugging
Emulatore: CTRL + M
Shake del telefono

Il menù - le opzioni di reload automaticoIl menù - le opzioni di reload automatico
live reload aggiorna l'intera app quando c'è una modi ca e
riparte dalla route principale
hot reload prova a mantenere lo stato inalterato e ad aggiornare
solo i le modi cati
stili
reload manuale occorre premere CTRL+R (o R) sull'emulatore
1 . 51

Il menù - la funzione "inspect"Il menù - la funzione "inspect"
read-only 1 . 52

Il menù - la funzione "network"Il menù - la funzione "network"
1 . 53

Il menù - l'opzione di debug remotoIl menù - l'opzione di debug remoto
Attivando l'opzione Debug JS Remotely:
aprire in Chrome l'URL
console logs
breakpoint nel sorgente ( ag "Pause on caught exception")
il tab network purtroppo non si può utilizzare senza applicare
degli Hack
ovviamente non è possibile vedere gli elementi nativi
react-devtools
si può installare react-devtools per ispezionare e modi care gli
elementi nativi
http://localhost:8081/debugger-ui/
1 . 54

React Native DebuggerReact Native Debugger
Installare da:
debug JS, breakpoint
inspect componenti
network
Nel dev menu oltre a "Enable Debug JS Remotely"
cliccare "Dev Settings"
disabilitare "Use JS Deltas" per far funzionare i breakpoint
https://github.com/jhen0409/react-native-
debugger/releases
1 . 55

react-debugger: chrome, react-devtools, reduxreact-debugger: chrome, react-devtools, redux

react-debugger: breakpoint in chromereact-debugger: breakpoint in chrome

react-debugger: networkreact-debugger: network

react-debugger: inspect e modi careact-debugger: inspect e modi ca
cliccando inspect nel dev-menu si evidenzia in automatico il componente

4. compilazione (per deploy)4. compilazione (per deploy)
IonicIonic
la rma si applica con gurando build.json o rmando con
jarsigner+zipalign l'apk
procedura un pò lunga, da automatizzare/con gurare
manualmente la prima volta
ionic cordova build android --prod --release
ionic cordova run android --prod --release
https://facebook.github.io/react-native/docs/signed-apk-
android.html
1 . 60

Deploy con IonicDeploy con Ionic
copiare il keystore in android/app
patchare android/gradle.properties
patchare android/app/build.gradle
build
testing
cd android && ./gradlew assembleRelease
react-native run-android --variant=release
1 . 61

5. aggiunta di componenti nativi5. aggiunta di componenti nativi
aggiuntiviaggiuntivi
Ionic: aggiuntaIonic: aggiunta
Ionic Native - wrapper ES6 sui plugin Cordova (JS) disponibili su
patch con g.xml
Ionic: rimozioneIonic: rimozione
https://cordova.apache.org/plugins/
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
npm uninstall --save @ionic-native/camera
ionic cordova plugin remove cordova-plugin-camera
1 . 62

5.2. plugin per React Native5.2. plugin per React Native
R.N. è più giovane e questa parte e ancora non completamente
matura
non c'è un repository centrale
AggiuntaAggiunta
patchare android/app/src/main/AndroidManifest.xml
RimozioneRimozione
npm install react-native-camera --save
react-native link react-native-camera
react-native unlink react-native-camera
npm uninstall react-native-camera --save
1 . 63

Se qualcosa va storto ...Se qualcosa va storto ...
... bisogna capirci del nativo ...... bisogna capirci del nativo ...
android/settings.gradle
android/app/build.gradle
android/app/src/main/AndroidManifest.xml
android/app/src/main/java/[...]/MainApplication.java
1 . 64

Personalizzazione AppPersonalizzazione App
Ionic: 99% tramite con g.xml
React Native: modi cando manualmente i le in android/
1 . 65

ConclusioniConclusioni
Ionic R.N.
Velocità di sviluppo e prototipizzazione
Costi di sviluppo
Performance
Feeling UI
Breaking Changes Riuso componenti
(personale)
Semplice accesso alle funzioni native
principali
1 . 67

GRAZIE!GRAZIE!
Per ulteriori domande:
Angular Developer Italiani:
React Developer Italiani:
https://www.facebook.com/groups/angularjs.developer.italiani/
https://www.facebook.com/groups/react.developer.italiani/
1 . 68

Ionic Cordova vs React Native

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Ionic Cordova vs React Native

Ähnlich wie Ionic Cordova vs React Native (20)

Ionic Cordova vs React Native