INTRODUZIONE A REACT NATIVE

22 FEBBRAIO 2017

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

DOVE?

SI MA DOVE?

Android >= 4.1 iOS >= 8

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…

REACT-NATIVE

REACT-NATIVE MODE 1APP

REACT-NATIVE MODE 2CHROME APP

PACKAGER AND BUNDLE

CODE

PACKAGER

BUNDLE

REACT-NATIVE MODE 2

DEVICE

PACKAGER

CHROME

CODE

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)

RNPLAY.ORG

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/

BANDO ALLE CIANCE

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)

• 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