Applicazioni React Native per Android, iOS e Web

Transcript

1. Applicazioni React Native per Android, iOS e Web Luigi Maselli - TorinoJS #jsNight 26ott2016 1 / 35
2. 1. Cos'é React / React Native 2. Interoperabilità tra Web e Nativo 3. Considerazioni Esempio pratico 2 / 35
3. bio / contatti Luigi Maselli software developer 10+y / founder corso-javascript.it 3 / 35
4. bio / contatti Luigi Maselli software developer 10+y / founder corso-javascript.it web: https://grigio.org github: grigio twitter: @grigi0 4 / 35
5. Cos'è React? (in breve) Lib permette di strutturare la vs app come componenti 5 / 35
6. 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
7. Cos'è React Native? 7 / 35
8. Cos'è React Native? Come React, ma renderizza i componenti in UI nativa (Android, iOS) 8 / 35
9. Concettualmente simili, ma i componenti non sono interoperabili 9 / 35
10. 10 / 35
11. React / JSX import React from 'react' import {render} from 'react-dom' // My component function MyApp() { return ( <div> <h1 style={{ fontSize:21 }}>Hello World</h1> </div> ) } // attach to the DOM render(<MyApp/>, document.querySelector('#app')); 11 / 35
12. React / JSX import React from 'react' import {render} from 'react-dom' // My component function MyApp() { return ( <div> <h1 style={{ fontSize:21 }}>Hello World</h1> </div> ) } // attach to the DOM render(<MyApp/>, document.querySelector('#app')); React Native / JSX import React from 'react' import { AppRegistry, View, Text } from 'react-native' // My component function MyApp() { return ( <View> <Text style={{ fontSize:21 }}>Hello World</Text> </View> ) } // Mount the app AppRegistry.registerComponent('HAgnosticNews', () => MyApp) 12 / 35
13. React Native vs Cordova / Phonegap / Webview / Ionic 13 / 35
14. React Native vs Cordova / Phonegap / Webview / Ionic Interazioni più fluide 14 / 35
15. React Native vs Cordova / Phonegap / Webview / Ionic Interazioni più fluide Riuso UI nativa 15 / 35
16. React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio 16 / 35
17. React Native vs Nativo: Obj-C/Xcode, Java/XML/Android Studio JavaScript + bridge a UI nativa 17 / 35
18. 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
19. 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
20. 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
21. ..e se il Web fosse una piattaforma React Native? 21 / 35
22. ..e se il Web fosse una piattaforma React Native? React Native Web https://github.com/necolas/react-native-web 22 / 35
23. ..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
24. 24 / 35
25. 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
26. Componenti nativi 26 / 35
27. Componenti nativi Approccio 1: Build time, component.<platform>.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
28. Componenti nativi Approccio 1: Build time, component.<platform>.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' ? ( <StatusBar backgroundColor={'#d25500'} /> ) : <View />} // Platform: web, android, ios 28 / 35
29. Funziona? 29 / 35
30. ..Il miglior modo per saperlo è provare :) 30 / 35
31. Demo: HAgnosticNews https://github.com/grigio/HAgnostic-News 31 / 35
32. 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
33. Considerazioni - No HTML/CSS window, document,.. - Routing diverso, web/nativo, link href - CSS styles, Media queries -> js - SEO 33 / 35
34. Domande? 34 / 35
35. Grazie per l'ascolto 35 / 35