SlideShare a Scribd company logo
1 of 73
Download to read offline
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
1 . 3
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
NativeBaseNativeBase
1 . 25
Domande?Domande?
1 . 26
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>
<!-- OMISSIS: meta tag per WebApp -->
<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 &amp; 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:
React NativeReact Native
icona: da impostare manualmente nel progetto Android
splash: installare plugin di terze parti e creare immagini
manualmente
ionic cordova resources
1 . 45
Domande ?Domande ?
1 . 46
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
1 . 50
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
1 . 56
react-debugger: breakpoint in chromereact-debugger: breakpoint in chrome
1 . 57
react-debugger: networkreact-debugger: network
1 . 58
react-debugger: inspect e modi careact-debugger: inspect e modi ca
cliccando inspect nel dev-menu si evidenzia in automatico il componente
1 . 59
4. compilazione (per deploy)4. compilazione (per deploy)
IonicIonic
la rma si applica con gurando build.json o rmando con
jarsigner+zipalign l'apk
React NativeReact Native
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
Domande ?Domande ?
1 . 66
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

More Related Content

Similar to Ionic Cordova vs React Native

Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailDotNetMarche
 
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Antonio Gallo
 
01 Android - Introduction
01   Android - Introduction01   Android - Introduction
01 Android - Introductionspawn150
 
Flutter: Google alla conquista del mobile multi piattaforma
Flutter: Google alla conquista del mobile multi piattaformaFlutter: Google alla conquista del mobile multi piattaforma
Flutter: Google alla conquista del mobile multi piattaformaCommit University
 
Node.js – Convincing the boss
Node.js – Convincing the bossNode.js – Convincing the boss
Node.js – Convincing the bossClaudio Cicali
 
Introduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro GianniniIntroduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro GianniniDeveler S.R.L.
 
MobileDevCamp2012 - Android
MobileDevCamp2012 - AndroidMobileDevCamp2012 - Android
MobileDevCamp2012 - Androidmobiledevcamp
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailStefano Ottaviani
 
Flash Platform su dispositivi mobili
Flash Platform su dispositivi mobiliFlash Platform su dispositivi mobili
Flash Platform su dispositivi mobililuca mezzalira
 
Sviluppare applicazioni mobile native in html e java script
Sviluppare applicazioni mobile native in html e java scriptSviluppare applicazioni mobile native in html e java script
Sviluppare applicazioni mobile native in html e java scriptFabio Franzini
 
Mobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web DevelopersMobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web Developerssparkfabrik
 
GWT Development for Handheld Devices
GWT Development for Handheld DevicesGWT Development for Handheld Devices
GWT Development for Handheld DevicesGWTcon
 
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPS
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPSLezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPS
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPSGianluigi Cogo
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
 
Sviluppo Di Applicazioni Su I Os
Sviluppo Di Applicazioni Su I OsSviluppo Di Applicazioni Su I Os
Sviluppo Di Applicazioni Su I OsNoDelay Software
 
Whymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptWhymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptFabio Franzini
 
Mobile platforms development overview
Mobile platforms development overviewMobile platforms development overview
Mobile platforms development overviewAlfredo Morresi
 

Similar to Ionic Cordova vs React Native (20)

Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
 
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...
 
8. Architetture web
8. Architetture web8. Architetture web
8. Architetture web
 
01 Android - Introduction
01   Android - Introduction01   Android - Introduction
01 Android - Introduction
 
Flutter: Google alla conquista del mobile multi piattaforma
Flutter: Google alla conquista del mobile multi piattaformaFlutter: Google alla conquista del mobile multi piattaforma
Flutter: Google alla conquista del mobile multi piattaforma
 
Node.js – Convincing the boss
Node.js – Convincing the bossNode.js – Convincing the boss
Node.js – Convincing the boss
 
Introduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro GianniniIntroduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro Giannini
 
MobileDevCamp2012 - Android
MobileDevCamp2012 - AndroidMobileDevCamp2012 - Android
MobileDevCamp2012 - Android
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
 
Flash Platform su dispositivi mobili
Flash Platform su dispositivi mobiliFlash Platform su dispositivi mobili
Flash Platform su dispositivi mobili
 
Flash vs jQuery
Flash vs jQueryFlash vs jQuery
Flash vs jQuery
 
Sviluppare applicazioni mobile native in html e java script
Sviluppare applicazioni mobile native in html e java scriptSviluppare applicazioni mobile native in html e java script
Sviluppare applicazioni mobile native in html e java script
 
Mobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web DevelopersMobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web Developers
 
GWT Development for Handheld Devices
GWT Development for Handheld DevicesGWT Development for Handheld Devices
GWT Development for Handheld Devices
 
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPS
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPSLezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPS
Lezione 11 del 13 marzo 2012 - L'ECOSISTEMA DELLE APPS
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
 
Sviluppo Di Applicazioni Su I Os
Sviluppo Di Applicazioni Su I OsSviluppo Di Applicazioni Su I Os
Sviluppo Di Applicazioni Su I Os
 
Whymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascriptWhymca - Sviluppare applicazioni mobile native in html e javascript
Whymca - Sviluppare applicazioni mobile native in html e javascript
 
Mobile platforms development overview
Mobile platforms development overviewMobile platforms development overview
Mobile platforms development overview
 
Reportage Delphi Day 2012
Reportage Delphi Day 2012Reportage Delphi Day 2012
Reportage Delphi Day 2012
 

Ionic Cordova vs React Native

  • 1. 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
  • 2. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 13. Le differenze tra le due appLe differenze tra le due app 1 . 13
  • 14. Bundle size & BootstrapBundle size & Bootstrap Feature Ionic React Native Bundle Size 2.8 MB 8.8 MB Bootstrap ~ 5 sec. ~ 2 sec. 1 . 14
  • 15. Tab "Utenti"Tab "Utenti" Tema, Grid/List, aspect ratio, Pull to Refresh, Tab Bar, Icone, Font, Colori 1 . 15
  • 16. Pull to refreshPull to refresh 1 . 16
  • 17. Load moreLoad more In RN potrebbe non comparire: è con gurabile per caricare prima che si arrivi in fondo alla lista 1 . 17
  • 18. "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
  • 19. City BIkesCity BIkes In Ionic la gestione dei marker è più lenta. 1 . 19
  • 20. FotoFoto Dashed border. Stilying del bottone. In R.N. ho usato la griglia, in Ionic le colonne. 1 . 20
  • 22. Ionic Form HTML5Ionic Form HTML5 1 . 22
  • 23. About MeAbout Me Ionic React Native 1 . 23
  • 24. 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
  • 27. 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
  • 28. 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
  • 29. Stuttura del progetto (root)Stuttura del progetto (root) 1 . 29
  • 30. Stuttura del progetto (src)Stuttura del progetto (src) 1 . 30
  • 31. Ionic: index.htmlIonic: index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- OMISSIS: meta tag per WebApp --> <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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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 &amp; 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. Icona e SplashScreenIcona e SplashScreen IonicIonic Creare icon.png e splash.png in resources/ e lanciare: React NativeReact Native icona: da impostare manualmente nel progetto Android splash: installare plugin di terze parti e creare immagini manualmente ionic cordova resources 1 . 45
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. Il menù di debuggingIl menù di debugging Emulatore: CTRL + M Shake del telefono
  • 52. 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
  • 53. Il menù - la funzione "inspect"Il menù - la funzione "inspect" read-only 1 . 52
  • 54. Il menù - la funzione "network"Il menù - la funzione "network" 1 . 53
  • 55. 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
  • 56. 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
  • 57. react-debugger: chrome, react-devtools, reduxreact-debugger: chrome, react-devtools, redux
  • 59. react-debugger: breakpoint in chromereact-debugger: breakpoint in chrome
  • 63. react-debugger: inspect e modi careact-debugger: inspect e modi ca cliccando inspect nel dev-menu si evidenzia in automatico il componente
  • 65. 4. compilazione (per deploy)4. compilazione (per deploy) IonicIonic la rma si applica con gurando build.json o rmando con jarsigner+zipalign l'apk React NativeReact Native 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
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. Personalizzazione AppPersonalizzazione App Ionic: 99% tramite con g.xml React Native: modi cando manualmente i le in android/ 1 . 65
  • 72. 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
  • 73. 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