cordova - react - redux the mobile application

Transcript

1 cordova - react - redux the mobile application

2 Cordova Web View Motore di rendering HTML. Web App L applicazione viene implementata utilizzando le tecnologie web come HTML, CSS e JavaScript e viene eseguita in una WebView wrappata da un applicazione nativa. Plugins Forniscono un interfaccia per la comunicazione tra Cordova e i componenti nativi, permettendoti di invocare codice nativo da JavaScript. 2

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

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

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

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

7 Single source of truth Lo stato dell intera applicazione è conservato in un singolo oggetto store. 7

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

9 Pure Functions Il modo in cui lo stato viene modificato in risposta ad una action deve essere espresso mediante funzioni pure. 9

10 Sviluppo Partiamo da uno scheletro di applicazione che abbiamo sviluppato e rilasciato su GitLab. #> npm install g cordova #> git clone op/skeleton_react_mobile_application.g it #> cd skeleton_react_mobile_application #> npm install #> cordova platform add android #> npm run prepare #> npm start #> npm run android 10

11 La struttura 11

12 Unidirectional Flow 12

13 Container Componente React connesso allo store 13

14 Component Componente React che riceve delle props e renderizza l UI 14

15 Action State is read-only Modifiche dello stato in maniera indiretta tramite le action. 15

16 Reducer Pure Functions Cambiamento dello stato espresso mediante funzioni pure 16

17 Store Single source of Truth Store unico modellato dai Reducer ad albero 17

18 Middleware Potenziare le capacità dello store. Redux Thunk Per gestire le action asincrone. Redux Logger Per loggare tutte le action inviate allo store. 18

19 Web Service Action Action creator Action creator Action pure Reducer Store Action asincrone Function Thunk Middleware Action Reducer Store 19

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> 20

21 TIPS & TRICKS Intel Crosswalk #> cordova plugin add cordova plugin crosswalk webview Output - android-x86-debug.apk & android-armv7-debug.apk - apk combinato #> cd platforms/android #> echo ext.cdvbuildmultipleapks=false >> build extras.gradle PRO compatibilità CSS mantenuta anche con vecchie versioni di webkit CONTRO apk ~40MB in più 21

22 Diffusione ANDROID IOS Fonte: dex.html

23 Link Utili Cordova: Node/Npm: React: Flux: Redux: WebPack: GitLab Repo: 23

24 Industria Italiana del Software Libero 24

25 WISH-OP Go and spread the free software. HAPPY HACKING! RMS