video 01 - Introduzione - perche' fuse
video 02 - preview app e architettura del codice
Abbiamo scelto di usare Fuse tools che e' uno strumento open source con licenza MIT per lo sviluppo di app native multipiattaforma ios e android.
Oggigiorno ci sono molti framework per la creazione di app mobile native cross-platform e allora perché un nuovo framework? Fuse porta con se nuovi concetti tecnici e nuovi flussi di lavoro al fine di garantire una visualizzazione regolare di 60 fotogrammi al secondo e migliorare l’efficienza di sviluppo e la collaborazione tra designer e developer.
La filosofia di Fuse, rispetto ad altri framework competitor, è quella di focalizzare e semplificare il processo di sviluppo dell'User Experience nelle proprie app, mettendo in stretto contatto Designer e Sviluppatori. Il designer può quindi far parte del processo di sviluppo occupandosi di sviluppare le UI tramite un potente ma semplice linguaggio UI dichiarativo like XML, adatto anche a non sviluppatori e lo sviluppatore può invece focalizzare l'attenzione su tutte quelle che sono le logiche di business da realizzare dietro la parte ui tramite javascript.
Infine, la vera potenza è che il linguaggio UI è compilato in codice puro nativo (Objective-C in iOS e C++ per android) ottenendo un'interfaccia fluida di 60 framerate al secondo, priva di 'blocchi' inattesi e garatendo un approccio “write once, run everywhere” .
Per maggiori approfondimenti sul framework si lasciano alcune riferimenti utili:
Per facilitare il testing dell'app abbiamo creato una cartella dist con all'interno la distruzione per Android e per iOS:
APK ANDROID E' sufficiente installare l'apk sul proprio dispositivo android.
/dist/android/app18.apkPROGETTO XCODE Avrai bisogno di un MacOS, dell'IDE Xcode e un account developer per testare l'app IOS sul proprio dispositivo Apple.
/dist/ios/app18.xcodeprojE' possibile avere una preview dell'app anche sul proprio desktop installando il framework Fuse e lanciando i seguenti comandi:
cd src
fuse previewcd src
fuse install android
fuse build --target=android --runcd src
fuse build --target=ios --runSi rimanda alla documentazione per maggiori dettagli
Il codice e' stato scritto per risultare di facile estendibilita' e modificabilita'
StaticResources.ux contiene la definizione di tutti i colori, font, dimensioni, stili e icone seguendo il principo di SINGLE SOURCE OF TRUTH. In questo modo e' semplice cambiare in un colpo solo colori, icone, font e dimensioni.
Modules/Backend.js e' il modulo responsabile della comunicazione con le RESTful API. Non essendo disponibile un'implementazione definita delle API, in questo momento il modulo backend simula le chiamate ad API. Restituisce dei dati di test in formato json, che sono definiti in strutture dati all'inizio del modulo.
Modules/Context.js e' il modulo che descrive lo stato generale dell'applicazione, usa il modulo backend per recuperare i dati e trasforma i dati nel formato riconosciuto da tutta l'applicazione. In pratica Context e' il ponte tra l'applicazione e il backend.
Entities contine le strutture dati che sono riconosciute dall'applicazione, vengono fornite dal Context che eventualmente rimappa i dati ricevuti dal Backend.
Pages nella cartella pages ci sono le pagine dell'app. Ogni pagina ha il suo corrispondente file js con la sua business logic.
Components contiene le componenti UI riutilizzate in tutta l'applicazione. Le componenti sono descritte in un linguaggio dichiarativo XML che include anche la definizione dei comportamenti, animazioni e transizioni.
Libraries contiene librerie JS esterne. Nel dettaglio fuse.js la utilizziamo per le ricerche con logica fuzzy.
Assets contiene tutte le risorse statiche come immagini, icone e font.