cordova - react - redux · utilizzando le tecnologie web come html, css e javascript e viene ......
TRANSCRIPT
cordova - react - redux
the mobile application
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 2
Cordova
● Web ViewMotore di rendering HTML.
● Web AppL’applicazione viene implementata utilizzando le tecnologie web come HTML, CSS e JavaScript e viene eseguita in una WebView “wrappata” da un’applicazione nativa.
● PluginsForniscono un’interfaccia per la comunicazione tra Cordova e i componenti nativi, permettendoti di invocare codice nativo da JavaScript.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 3
React
● React è una libreria JS per creare interfacce utente, creata ed utilizzata da Facebook ed Instagram.
● Solitamente si pensa a React come la V in MVC.
●
● React è stato creato con lo scopo di risolvere un problema: sviluppare applicazioni di grandi dimensioni il cui stato cambia nel tempo.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 4
React
● Gestisce l’aggiornamento dell’ UI appena lo stato dell’app cambia (Virtual DOM).
● Sviluppo di componenti riutilizzabili, favorendo il riutilizzo del codice, il testing ed il debugging.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 5
Flux● Flux è un pattern architetturale utilizzato da Facebook nello
sviluppo client-side delle web-app.
● Utilizzato in complemento a React, fornisce un data-flow unidirezionale.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 6
Redux●
● Redux è una delle implementazioni del pattern Flux.
●
●
● Cerca di rendere i cambiamenti dello stato prevedibili imponendo delle restrizioni su come essi possono verificarsi, seguendo tre principi fondamentali:
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 7
Single source of truth
–
–
– Lo stato dell’intera applicazione è conservato in un singolo oggetto “store”.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 8
State is read-only
–
– L’unico modo per modificare lo stato è quello di emettere una “action”, un oggetto che descrive l’azione da eseguire.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 9
Pure Functions
– Il modo in cui lo stato viene modificato in risposta ad una action deve essere espresso mediante funzioni pure.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 10
SviluppoPartiamo da uno scheletro di applicazione che abbiamo sviluppato e rilasciato su GitLab.
#> npm install g cordova
– #> git clone https://gitlab.com/wishop/skeleton_react_mobile_application.git
– #> cd skeleton_react_mobile_application
– #> npm install
– #> cordova platform add android
– #> npm run prepare
– #> npm start
– #> npm run android
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 11
La struttura
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 12
Unidirectional Flow
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 13
Container
Componente React connesso allo store
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 14
Component
● Componente React che riceve delle props e renderizza l’UI
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 15
Action
● State is read-only● Modifiche dello stato
in maniera indiretta tramite le action.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 16
Reducer
● Pure Functions
● Cambiamento dello stato espresso mediante funzioni pure
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 17
Store
● Single source of Truth● Store unico modellato dai Reducer ad albero
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 18
Middleware
● “Potenziare” le capacità dello store.
●
● Redux Thunk● Per gestire le action asincrone.
●
● Redux Logger● Per loggare tutte le action inviate allo
store.
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 19
Web Service
● Action pure
● Action asincrone
ThunkMiddleware
FunctionAction creatorStore
Action
Action creator
Reducer
StoreReducer
Action
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 20
TIPS & TRICKS
● UTF-8 esplicito●
● in d3.js → var λ00, φ00, λ0, cosφ0, sinφ0;●
● <script src="myscripts.js" charset="UTF-8"></script>
●
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 21
TIPS & TRICKS● Intel Crosswalk● #> cordova plugin add cordovaplugincrosswalkwebview
● Output
- android-x86-debug.apk & android-armv7-debug.apk
- apk combinato
#> cd platforms/android
#> echo “ext.cdvBuildMultipleApks=false” >> buildextras.gradle
● PRO
● compatibilità CSS mantenuta anche con vecchie versioni di webkit
● CONTRO
● apk ~40MB in più
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 22
Diffusione
● ANDROID● Fonte:
https://developer.android.com/about/dashboards/index.html
● IOS
https://david-smith.org/iosversionstats/
https://developer.android.com/about/dashboards/index.html
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 23
Link Utili● Cordova: https://cordova.apache.org/docs/en/latest/
● Node/Npm: https://docs.npmjs.com/
● React: https://facebook.github.io/react/docs/getting-started.html
● Flux: https://facebook.github.io/flux/docs/overview.html#content
● Redux: http://redux.js.org/
● WebPack: https://webpack.github.io/docs/
● GitLab Repo: https://gitlab.com/wish-op/skeleton_react_mobile_application.git
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 24
Industria Italiana del Software Libero
Novembre 2016
Emilio Frusciante / Francesco Chiusolo 25
WISH-OP
● “Go and spread the free software.● HAPPY HACKING!”● RMS
●
● 347 76 99 240 - 0824 33 02 04