Slide 1

Slide 1 text

Applicazioni React Native per Android, iOS e Web Luigi Maselli - TorinoJS #jsNight 26ott2016 1 / 35

Slide 2

Slide 2 text

1. Cos'é React / React Native 2. Interoperabilità tra Web e Nativo 3. Considerazioni Esempio pratico 2 / 35

Slide 3

Slide 3 text

bio / contatti Luigi Maselli software developer 10+y / founder corso-javascript.it 3 / 35

Slide 4

Slide 4 text

bio / contatti Luigi Maselli software developer 10+y / founder corso-javascript.it web: https://grigio.org github: grigio twitter: @grigi0 4 / 35

Slide 5

Slide 5 text

Cos'è React? (in breve) Lib permette di strutturare la vs app come componenti 5 / 35

Slide 6

Slide 6 text

Cos'è React? (in breve) Lib permette di strutturare la vs app come componenti Renderizza e aggiorna i componenti al cambiamento dello stato della vs app (nel browser / DOM) 6 / 35

Slide 7

Slide 7 text

Cos'è React Native? 7 / 35

Slide 8

Slide 8 text

Cos'è React Native? Come React, ma renderizza i componenti in UI nativa (Android, iOS) 8 / 35

Slide 9

Slide 9 text

Concettualmente simili, ma i componenti non sono interoperabili 9 / 35

Slide 10

Slide 10 text

10 / 35

Slide 11

Slide 11 text

React / JSX import React from 'react' import {render} from 'react-dom' // My component function MyApp() { return (

Hello World

) } // attach to the DOM render(, document.querySelector('#app')); 11 / 35

Slide 12

Slide 12 text

React / JSX import React from 'react' import {render} from 'react-dom' // My component function MyApp() { return (

Hello World

) } // attach to the DOM render(, document.querySelector('#app')); React Native / JSX import React from 'react' import { AppRegistry, View, Text } from 'react-native' // My component function MyApp() { return ( Hello World ) } // Mount the app AppRegistry.registerComponent('HAgnosticNews', () => MyApp) 12 / 35

Slide 13

Slide 13 text

React Native vs Cordova / Phonegap / Webview / Ionic 13 / 35

Slide 14

Slide 14 text

React Native vs Cordova / Phonegap / Webview / Ionic Interazioni più fluide 14 / 35

Slide 15

Slide 15 text

React Native vs Cordova / Phonegap / Webview / Ionic Interazioni più fluide Riuso UI nativa 15 / 35

Slide 16

Slide 16 text

React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio 16 / 35

Slide 17

Slide 17 text

React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio JavaScript + bridge a UI nativa 17 / 35

Slide 18

Slide 18 text

React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio JavaScript + bridge a UI nativa è quasi il Web, puoi usare i tool e l'editor/IDE che già conosci 18 / 35

Slide 19

Slide 19 text

React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio JavaScript + bridge a UI nativa è quasi il Web, puoi usare i tool e l'editor/IDE che già conosci Open Source by Facebook e usato in produzione 19 / 35

Slide 20

Slide 20 text

React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio JavaScript + bridge a UI nativa è quasi il Web, puoi usare i tool e l'editor/IDE che già conosci Open Source by Facebook e usato in produzione Multipiattaforma + componenti specifici (quando non c'è equivalente) 20 / 35

Slide 21

Slide 21 text

..e se il Web fosse una piattaforma React Native? 21 / 35

Slide 22

Slide 22 text

..e se il Web fosse una piattaforma React Native? React Native Web https://github.com/necolas/react-native-web 22 / 35

Slide 23

Slide 23 text

..e se il Web fosse una piattaforma React Native? React Native Web https://github.com/necolas/react-native-web Non è un progetto Facebook ma è supportato da create-react-app https://github.com/facebookincubator/create-react-app 23 / 35

Slide 24

Slide 24 text

24 / 35

Slide 25

Slide 25 text

Cos'è create-react-app ? La via più veloce per iniziare un progetto React. ES6 Babel, Webpack,.. No boilerplate, 1 dipendenza, 0 configurazioni Mantenuto da Dan Abramov (Facebook) 25 / 35

Slide 26

Slide 26 text

Componenti nativi 26 / 35

Slide 27

Slide 27 text

Componenti nativi Approccio 1: Build time, component..js > component.js import { AppRegistry, View, Text } from 'react-native' // npm run start -> react-native-web via create-react-app/webpack // react-native run-android -> react-native via create-react-app/webpack 27 / 35

Slide 28

Slide 28 text

Componenti nativi Approccio 1: Build time, component..js > component.js import { AppRegistry, View, Text } from 'react-native' // npm run start -> react-native-web via create-react-app/webpack // react-native run-android -> react-native via create-react-app/webpack Approccio 2: Run time, if / operatore ternario ... import { Platform } from 'react-native' {Platform.OS === 'android' ? ( ) : } // Platform: web, android, ios 28 / 35

Slide 29

Slide 29 text

Funziona? 29 / 35

Slide 30

Slide 30 text

..Il miglior modo per saperlo è provare :) 30 / 35

Slide 31

Slide 31 text

Demo: HAgnosticNews https://github.com/grigio/HAgnostic-News 31 / 35

Slide 32

Slide 32 text

Considerazioni + App nativa Android/IOS + app HTML "gratis" + Sviluppo più leggero / no simulatore + Performance native + Componenti nativi + "Rifinisci dopo", componenti generici (e poi eventualmente nativi) 32 / 35

Slide 33

Slide 33 text

Considerazioni - No HTML/CSS window, document,.. - Routing diverso, web/nativo, link href - CSS styles, Media queries -> js - SEO 33 / 35

Slide 34

Slide 34 text

Domande? 34 / 35

Slide 35

Slide 35 text

Grazie per l'ascolto 35 / 35