Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic Cordova vs React Native

361 views

Published on

Due modi diversi di realizzare applicazioni a confronto: ibride vs native e Angular vs react.

Published in: Software
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ●●● https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Ionic Cordova vs React Native

  1. 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. 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
  3. 3. 1 . 3
  4. 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. 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. 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. 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. 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. 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. 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. 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
  12. 12. DOMANDEDOMANDE ?? https://goo.gl/4YndQmhttps://goo.gl/4YndQm 1 . 12
  13. 13. Le differenze tra le due appLe differenze tra le due app 1 . 13
  14. 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. 15. Tab "Utenti"Tab "Utenti" Tema, Grid/List, aspect ratio, Pull to Refresh, Tab Bar, Icone, Font, Colori 1 . 15
  16. 16. Pull to refreshPull to refresh 1 . 16
  17. 17. Load moreLoad more In RN potrebbe non comparire: è con gurabile per caricare prima che si arrivi in fondo alla lista 1 . 17
  18. 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. 19. City BIkesCity BIkes In Ionic la gestione dei marker è più lenta. 1 . 19
  20. 20. FotoFoto Dashed border. Stilying del bottone. In R.N. ho usato la griglia, in Ionic le colonne. 1 . 20
  21. 21. FormForm Ionic React Native 1 . 21
  22. 22. Ionic Form HTML5Ionic Form HTML5 1 . 22
  23. 23. About MeAbout Me Ionic React Native 1 . 23
  24. 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
  25. 25. NativeBaseNativeBase 1 . 25
  26. 26. Domande?Domande? 1 . 26
  27. 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. 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. 29. Stuttura del progetto (root)Stuttura del progetto (root) 1 . 29
  30. 30. Stuttura del progetto (src)Stuttura del progetto (src) 1 . 30
  31. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  46. 46. Domande ?Domande ? 1 . 46
  47. 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. 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. 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. 50. Il menù di debuggingIl menù di debugging Emulatore: CTRL + M Shake del telefono
  51. 51. 1 . 50
  52. 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. 53. Il menù - la funzione "inspect"Il menù - la funzione "inspect" read-only 1 . 52
  54. 54. Il menù - la funzione "network"Il menù - la funzione "network" 1 . 53
  55. 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. 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. 57. react-debugger: chrome, react-devtools, reduxreact-debugger: chrome, react-devtools, redux
  58. 58. 1 . 56
  59. 59. react-debugger: breakpoint in chromereact-debugger: breakpoint in chrome
  60. 60. 1 . 57
  61. 61. react-debugger: networkreact-debugger: network
  62. 62. 1 . 58
  63. 63. react-debugger: inspect e modi careact-debugger: inspect e modi ca cliccando inspect nel dev-menu si evidenzia in automatico il componente
  64. 64. 1 . 59
  65. 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. 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. 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. 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. 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. 70. Personalizzazione AppPersonalizzazione App Ionic: 99% tramite con g.xml React Native: modi cando manualmente i le in android/ 1 . 65
  71. 71. Domande ?Domande ? 1 . 66
  72. 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. 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

×