• ~4 miliardi di utenti internet (~50% in Asia)
• ~1 miliardo di siti
• Nel 2015 è avvenuto il sorpasso del mobile su desktop
• Volume di dollari globale e-commerce stimato per il 2017: ~2 triliardi e mezzo
• ~50% generato da mobile
• ~90% del tempo mobile si spende sulle app
• Il trend si è consolidato
PERCHE’?
COME?
• App nativa (ovviamente Android e iOS)
• App nativa Android (Java)
• App nativa iOS (Swift / Objective-C)
• App ibride
• Si utilizza un framework
• Una parte nativa (esposta dal framework alla parte cross-platform)
• Un pezzo scritto in un linguaggio comune alle piattaforme target
QUALE IBRIDO?
• HTML5 Hybrid
• Web view che esegue una web app
• Accesso alle API native
• PhoneGap, Cordova, Ionic
• Native Hybrid
• UI nativa
• Logica cross-platform
• Xamarin, Native Script, React Native
REACT-NATIVE
• Mobile framework per la realizzazione di app Android e iOS
• Sviluppato da Facebook e reso opensource su Github nel 2015
• Basato sul paradigma di React (vedremo le basi velocemente)
• OS supportati: Android >= 4.1 e iOS >= 8
• Linguaggio comune: Javascript/JSX
• Parte di Facebook, Facebook ADS, Instagram, Airbnb…
COMPONENTI• Un’applicazione React Native è strutturata a componenti (grafici)
• Nel caso generale, un’app è un albero di componenti
• Parliamo di componenti React Native
• Ogni componente deve definire un metodo “render” in cui “si disegna”
import React, { Component } from 'react'; import { View, Text } from 'react-native';
export default HomePage extends Component { render() { return ( <View> <Text>Hello Home!</Text> </View> ); } }
FLEXBOX
• Layout mode introdotto in CSS3 (specifica finale del 2012)
• Supportato in tutti i browser (http://caniuse.com/#feat=flexbox)
• Usato in React Native dal giorno zero (con qualche default diverso)
• https://facebook.github.io/react-native/docs/flexbox.html
• https://css-tricks.com/snippets/css/a-guide-to-flexbox
• http://flexboxfroggy.com
STYLESHEET
• Definisce lo stile in modo simile al CSS
• Si usa nello “style” di un componenteconst styles = StyleSheet.create({ container: { flex: 1, marginTop: 22, backgroundColor: 'white', }, titleView: { padding: 20, backgroundColor: '#F59C00', }, ... });
render() { const composedStyle = [ styles.titleView, styles.debug, ];
return ( <View style={styles.container}> <View style={composedStyle}> ... </View> </View> ); }
Si possono definire stili inline
REACT-NATIVE E REACT
• I componenti React Native sono componenti React
• Un’app React Native è basata su React
• E’ necessario conoscere a grandi linee come funziona React
• Virtual DOM
• State
• Props
VIRTUAL DOM
• Il DOM è la struttura dati alla base delle web app
• Manipolare dinamicamente il DOM è un’operazione dispendiosa
• Il re-rendering del DOM ha impatto sulle performance
• Idea: calcoliamo il “delta” dei cambiamenti rispetto al DOM attuale in modo da:
• Minimizzare le operazioni sull’albero
• Massimizzare le prestazioni
• Serve un “Virtual DOM” in base al quale calcolare il “delta”
VIRTUAL DOM
• Il Virtual DOM è alla base di React
• Il metodo “render” di un componente produce un elemento del Virtual DOM
• Semplificando, la radice dell’albero dei componenti produce il Virtual DOM
State Change Diff DOM Update
STATE E PROPS
• Oltre alla “render” ogni componente ha:
• Un set di proprietà read-only, passate dall’esterno: le props
• Uno stato interno read/write: lo state
• La “render” disegna il componente leggendo lo state e le props correnti
• Ogni cambiamento (esterno) di una prop causa il re-rendering del componente
• Ogni cambiamento (interno) dello state causa il re-rendering del componente
STATE E PROPS
import React, { Component } from 'react'; import { View, Text } from 'react-native';
export default HomePage extends Component { constructor(props) { super(props); this.state = { counter: 0 }; }
render() { const { counter } = this.state; return ( <View> <Text onPress={() => this.setState({ counter: counter + 1})}> Hello {counter}! </Text> </View> ); } }
RENDER TARGET
• React:
• Input: Virtual DOM
• Render target: Browser DOM
• Rendering: HTML/CSS
• React-Native:
• Input: Virtual DOM
• Render target: UI nativa (device o simulatore)
• Rendering: Android Java SDK o iOS Objective-C/Swift SDK
ESTENSIONI
• Wrapping di API native non ancora supportate
• Wrapping di componenti nativi
• In generale si può comunicare con lo strato nativo tramite un API custom
• Possibilità di avere parte dell’app nativa e parte in React Native
• Migrazione incrementale di un’app da nativo a React Native (es. Facebook)
IN SHORT
• Approccio Native Hybrid che supporta gli OS mobile di interesse: vittoria
• App Android e iOS con stessa grafica e interazione: vittoria
• App Android e iOS con grafica e interazione nativa: vittoria o sconfitta?
• Conoscenza richiesta (best case): poca
• Conoscenza richiesta (worst case): tutto
• Javascript, React e componenti RN
• Android SDK, iOS SDK
• Ecosistema delle piattaforme di interesse
DOVE CERCARE
https://facebook.github.io/react-native/docs
https://github.com/react-native-community
https://github.com/jondot/awesome-react-native
COME SVILUPPARE
• Nessun vincolo sull’ambiente di sviluppo
• vim + terminale
• Visual Studio Code offre un ambiente integrato (con plugin)
• Atom
• Nuclide
• Deco (https://github.com/decosoftware/deco-ide)
LINK
• https://github.com/facebook/react-native
• https://github.com/jondot/awesome-react-native
• https://facebook.github.io/react-native/blog/
• https://github.com/develersrl/lilt
• https://www.develer.com/blog/
SESSIONE PRATICA
• Semplice lista contatti in React Native per Android e iOS
• https://github.com/develersrl/workshop-introduction-to-react-native
• La sessione sarà divisa in vari step
• Ogni step dovrebbe richiedere più o meno 20 minuti
• Finito il tempo passiamo allo step successivo
• Chi rimane indietro può allinearsi:
• facendo “fast-forward” con git checkout seguito dal nome del branch
• andando a vedere la “soluzione” dello step corrente su github
PER PARTIRE
• Tutti sulla Wifi develer (laptop e device) (password: cammellino987)
• [email protected]:develersrl/workshop-introduction-to-react-native.git
• Sicuramente avrete tutti un cavo per collegare il portatile al cellulare/tablet
• Sicuramente avrete seguito tutti la guida e quindi avete l’hello world di
React Native perfettamente funzionante
• Lanciate il comando:
• react-native run-ios oppure
• react-native run-android