Slide del Workshop "Introduzione a React Native" tenuto da Alessandro Giannini presso Develer srl.

1. INTRODUZIONE A
REACT NATIVE
22 FEBBRAIO 2017

2. • ~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’?

3. DOVE?

4. SI MA DOVE?
Android >= 4.1 iOS >= 8

5. 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

6. 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

7. 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…

8. REACT-NATIVE

9. REACT-NATIVE MODE 1
APP

10. REACT-NATIVE MODE 2
CHROME APP

11. PACKAGER AND BUNDLE
CODE
PACKAGER
BUNDLE

12. REACT-NATIVE MODE 2
DEVICE
PACKAGER
CHROME
CODE

13. 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>
);
}
}

14. 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

15. STYLESHEET
• Definisce lo stile in modo simile al CSS
• Si usa nello “style” di un componente
const 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

16. 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

17. 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”

18. 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

19. 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

20. 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>
);
}
}

21. 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

22. 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)

23. 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

24. DOVE CERCARE
https://facebook.github.io/react-native/docs
https://github.com/react-native-community
https://github.com/jondot/awesome-react-native

25. 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)

26. RNPLAY.ORG

27. 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/

28. BANDO ALLE CIANCE

29. 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

30. PER PARTIRE
• Tutti sulla Wifi develer (laptop e device) (password: cammellino987)
• git@github.com: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