Potenza ibrida: vantaggi e vantaggi di Flutter

Flutter è una piattaforma ibrida per lo sviluppo di applicazioni mobili di Google che ha raggiunto la 1.0 alla fine del 2018. Sebbene sia un nuovo concorrente nell'elenco dei framework di sviluppo ibridi, le grandi idee alla base hanno fatto sì che si diffondesse rapidamente tra gli sviluppatori.

Il mio obiettivo in questo articolo è esplorare queste idee e scrivere delle mie esperienze con Flutter e del motivo per cui ritengo che sia il futuro dello sviluppo di applicazioni mobili ibride.

Anche se sul mercato sono presenti framework di app ibride più vecchi, c'è un elenco crescente di aziende di grandi nomi che scelgono Flutter per le loro applicazioni mobili. Mentre la pagina della vetrina di Flutter ne elenca molti, ecco alcune app degne di nota che utilizzano Flutter per l'intera app o per una funzionalità significativa:

• L'app Google Ads
• GrabMerchant app di GrabFood
• L'app Xianyu di Alibaba Group, che ha oltre 50 milioni di download
• Nubank
• L'app eBay Motors

Sebbene il framework Flutter sia abbastanza capace, è ancora relativamente nuovo. Per motivi di equilibrio, discuterò anche alcune limitazioni di cui dovresti essere a conoscenza prima di impegnarti in Flutter.

La mia speranza è che dopo aver letto questo articolo, tu abbia una buona idea dei pro e dei contro di Flutter e abbia abbastanza informazioni per decidere se dovresti usare Flutter nel tuo prossimo progetto di applicazione mobile.

Vantaggi di Flutter (dal punto di vista dello sviluppo)

Come sviluppatore, questo è il punto di vista con cui ho più familiarità e su cui posso condividere la maggior parte delle informazioni.

Curva di apprendimento rapido

La prima piacevole sorpresa che Flutter riserva agli sviluppatori è la rapidità con cui iniziare. Sono necessari meno di 30 minuti per completare il processo di installazione e configurare un ambiente di sviluppo funzionante. Da lì, sei pronto per creare la tua prima app Flutter.

Integrazione dell'editor popolare

Flutter ha anche ottime integrazioni con l'editor. Personalmente utilizzo Android Studio, ma sono disponibili istruzioni per configurare IntelliJ, VSCode o Emacs.

Processo di sviluppo pulito

Rispetto alla mia precedente esperienza con framework di app ibride, anche il processo di sviluppo sembra più pulito . Ad esempio, quando ho utilizzato WebViews per visualizzare elenchi con molti elementi (circa 100 circa), ho dovuto fare i conti con un utilizzo elevato della CPU, specialmente quando l'utente scorreva l'elenco. Li ho risolti utilizzando elementi del framework Ionic creati appositamente per questo. In Flutter, esiste un modo accettato di visualizzare gli elenchi, ListView , che offre prestazioni straordinarie fuori dagli schemi.

Ricarica dal vivo

Un'altra cosa che mi ha piacevolmente sorpreso è stata la funzionalità di ricarica in tempo reale. Come sviluppatore full-stack, ero abituato a framework come BrowserWatch che fornivano la ricarica in tempo reale nel browser.

Lo sviluppo nativo non lo ha (ma penso che SwiftUI di Apple stia facendo alcuni progressi su questo fronte per lo sviluppo di iOS). Gli sviluppatori Android e iOS in genere devono scrivere codice e quindi attendere che venga compilato e caricato sul dispositivo o sul simulatore prima di poter vedere le modifiche.

Flutter fornisce (a la React Native) un meccanismo di ricarica in tempo reale, in cui il codice dell'app viene ricaricato sul dispositivo non appena gli sviluppatori fanno clic su "salva". Questo fornisce un feedback immediato, rendendo lo sviluppo molto più veloce.

Prestazione

Le prestazioni dell'applicazione sono un altro parametro in cui Flutter sta lentamente emergendo come vincitore.

Poiché il framework Flutter è in fase di sviluppo attivo, ci sono molti posti in cui è possibile apportare ottimizzazioni delle prestazioni. Ciò è evidente, ad esempio, in Flutter 1.17, che ha aumentato le prestazioni di rendering fino al 50% sui dispositivi iOS più recenti e ha ridotto il consumo di memoria fino al 70% per determinati tipi di carichi di lavoro.

Coerenza multipiattaforma

Un'altra caratteristica notevole di Flutter è rappresentata da interfacce utente veramente coerenti su entrambe le piattaforme mobili. Poiché Flutter utilizza il proprio motore di rendering, ne parleremo più avanti, l'interfaccia utente è esattamente la stessa su iOS e Android. Gli sviluppatori non devono più confrontarsi con problemi di stile specifici della piattaforma per ottenere che tutto assomigli esattamente al design: questa garanzia fa parte del framework.

Linguaggio, strumenti ed estensione

Altri tre aspetti più piccoli, ma comunque importanti, che ritengo debbano essere menzionati qui sono:

• Dart, il linguaggio in cui sono programmate le applicazioni Flutter, è molto semplice da usare. Ma è anche un linguaggio piuttosto potente, originariamente concepito da Google per sostituire JavaScript. Se gli sviluppatori hanno esperienza con JavaScript o altri linguaggi simili a C, non avranno problemi a raccogliere Dart entro un giorno o due.
• C'è un robusto gestore di plug-in (pub) incluso nella catena di strumenti predefinita e un'enorme libreria di plug-in disponibile tramite il repository di plug-in pub.dev.
• La creazione di plug-in per sfruttare le funzionalità della piattaforma nativa è abbastanza semplice, quindi se gli sviluppatori hanno bisogno di accedere a una funzionalità della piattaforma per la quale non esiste già alcun plug-in, codificarne uno non è troppo difficile.

Vantaggi di Flutter (dal punto di vista aziendale)

Il più grande vantaggio di Flutter a cui la maggior parte delle aziende pensa è di dover assumere solo un team per entrambe le piattaforme iOS e Android. Tuttavia, un vantaggio più importante che molte aziende trascurano è il time-to-market più rapido . Sfruttando i vantaggi di sviluppo nella sezione precedente, un team di sviluppo più piccolo può creare una bellissima applicazione con prestazioni native che fornisce la stessa esperienza utente su entrambe le piattaforme molto più rapidamente utilizzando Flutter.

Flutter consente agli sviluppatori di creare delle interfacce utente davvero belle . Dai un'occhiata a una recente sfida di Google e Lenovo per creare una bellissima interfaccia utente per il quadrante orologio per Lenovo Smart Clock. Il vincitore, Particle Clock di Mickel Andersson, non è solo straordinariamente elegante, ma mostra anche le prestazioni delle animazioni in Flutter.

Per le aziende che considerano Flutter ma non sono sicure che sia la strada giusta da percorrere, Flutter può essere sfruttato in modo incrementale: le app mobili preesistenti possono integrare Flutter una singola parte alla volta. In effetti, è così che la maggior parte delle grandi aziende inizia con Flutter, costruendo una piccola parte della propria applicazione esistente in Flutter e quindi sostituendo lentamente altre parti una volta che ne vedono i vantaggi.

Limitazioni da considerare prima di utilizzare Flutter

In tutta onestà, Flutter, essendo più recente, non è così testato come altri framework di applicazioni mobili ibride come React Native: dopotutto, la portata dell'utente finale di React Native copre le app mobili di Facebook, Instagram, Skype e Discord.

La risposta predefinita a "dovrei usare Flutter?" è, per ora, un prudente sì . Questo perché i project manager devono ancora considerare quali, se presenti, funzionalità avanzate di cui avranno bisogno e assicurarsi che tali funzionalità siano disponibili in Flutter prima di impegnarsi a utilizzarlo. In particolare, vale la pena chiedere di quali librerie e plugin potrebbe essere necessario un team per creare una particolare applicazione. Essendo una voce più recente nei framework delle app mobili, Flutter non ha l'ampia portata di librerie e plug-in di React Native.

Ad esempio, il supporto della fotocamera in Flutter non è ancora completo, con lo zoom e il controllo del flash che non fanno ancora parte del plug-in ufficiale della fotocamera. Per me, non è stato un problema, poiché sono stato in grado di trovare un plug-in di terze parti quando avevo bisogno di integrare la funzionalità di foto/video in un'app che stavo creando.

Un altro importante plug-in che potresti perdere è Google Maps. Non ci sono plug-in di Google Maps nativi di Dart e, sebbene esista un plug-in per consentire l'integrazione di Google Maps nel codice Flutter, utilizza le funzionalità di Flutter (visualizzazioni della piattaforma) che sono ancora nello stato di anteprima degli sviluppatori.

Un'altra cosa che non influenzerà molti progetti, ma di cui dovresti essere consapevole, è che per ora Flutter non supporta alcuna funzionalità 3D. Il team si sta concentrando solo sul 2D per ora. Ma la maggior parte delle applicazioni non utilizza alcuna funzionalità 3D, quindi questo non dovrebbe essere un problema per la maggior parte degli sviluppatori.

Alcuni consigli dalla mia esperienza con Flutter

Avendo rilasciato tre app Flutter negli ultimi due anni, ho imparato una serie di cose che vorrei mi fossero state raccontate quando stavo iniziando. Li elencherò qui nella speranza che ti aiutino nel tuo viaggio di sviluppo di Flutter.

È molto facile iniziare con Flutter. Ho iniziato con un meraviglioso corso su App Brewery. Tuttavia, dopo aver completato i primi moduli, ho pensato di aver imparato abbastanza e ho iniziato a creare la prima app che ho lanciato.

A causa della mia impazienza, ho saltato un certo numero di moduli in quel corso che si sono rivelati importanti e ho dovuto imparare le lezioni di quei moduli nel modo più duro commettendo errori. In particolare, avrei svolto un lavoro molto migliore al mio primo utilizzo di Flutter per lo sviluppo di app se avessi appreso alcune best practice di Flutter:

• Come modularizzare e strutturare il codice dell'applicazione Flutter.
• Come funziona la gestione dello stato.
• Come autenticare gli utenti e tenere traccia dello stato di autenticazione nelle diverse pagine della mia app Flutter.
• Come integrare le notifiche utilizzando il pacchetto di messaggistica Firebase.

Ho finito per imparare tutte queste cose, ma prima ho dovuto fare molti errori. Ho riscritto porzioni significative della prima app che ho creato. Con la mia seconda app Flutter, invece, ho imparato dai miei errori e ho finito per fare un lavoro migliore e più veloce.

Ci sono molte risorse che puoi facilmente trovare cercando su Google per conoscere i concetti che ho elencato sopra. Puoi iniziare guardando i collegamenti nella pagina Ulteriori informazioni sul sito Flutter.

Un'altra cosa che ho scoperto è che, a causa della novità di Flutter, non esiste uno schema per strutturare la tua app. Venendo da una carriera di sviluppo principalmente basata su Django, sono abituato a sapere che MVC è il modello da utilizzare nelle mie app Django. iOS ha anche un chiaro vincitore nel modello MVVM che segue. Android ha la sua serie di linee guida su come progettare al meglio un'app.

Flutter non ha un tale modello architettonico che abbia "vinto" sulle molte possibilità. Questo è stato qualcosa che inizialmente mi ha dato un momento difficile. Alla fine, dopo aver sviluppato una serie di app Flutter, penso che sia meglio scegliere semplicemente un'architettura e attenersi ad essa.

Personalmente utilizzo il pacchetto del provider sia come inserimento delle dipendenze che come framework di gestione delle modifiche. Anche le mie app Flutter sono suddivise approssimativamente su tre righe:

1. Viste , che sono i widget che compongono l'applicazione, comprese le schermate. Inietto servizi e modelli utilizzando il widget Consumer dal pacchetto Provider nelle mie viste in modo da poter creare l'interfaccia utente in base ai dati disponibili. Il widget Consumer ricostruisce anche la vista quando cambia lo stato, ed è così che le mie app reagiscono ai cambiamenti di stato.
2. Models , che sono semplici vecchi oggetti che uso per contenere dati strutturati.
3. Servizi/controller , dove va la maggior parte della logica aziendale. Qui sono codificate anche le interfacce API, che possono recuperare e inviare dati all'API. Queste interfacce API forniscono e accettano modelli per trasferire i dati.

Vale anche la pena considerare la libreria a blocchi come alternativa al pacchetto del provider . Ha un'architettura leggermente diversa e utilizza flussi di eventi e stati per collegare viste e modelli.

È un modo leggermente più complesso di gestire lo stato rispetto all'utilizzo della libreria del provider , ma è utile se si dispone di un'applicazione complessa in cui si apportano modifiche agli stessi dati da più origini e si deve rispondere a tali modifiche da più posizioni.

Se finisci per non utilizzare BLoC o provider , dovrai trovare un metodo per gestire lo stato nell'applicazione, soprattutto per quanto riguarda le notifiche.

Come Flutter si confronta con altri framework ibridi

Reagire nativo

React Native è di gran lunga il framework di applicazioni mobili ibride più popolare e di successo fino ad oggi, e con buone ragioni. Ci è voluto un framework web front-end popolare e ben fatto, React, e ha permesso a milioni di sviluppatori front-end di iniziare a scrivere anche applicazioni mobili. Sono fiducioso che molte delle fantastiche app mobili che abbiamo oggi non sarebbero mai state realizzate se gli sviluppatori avessero dovuto trovare il tempo e la motivazione per apprendere gli SDK di sviluppo iOS e Android nativi.

In questo contesto, sono fiducioso nel dire che Flutter alla fine vincerà come il principale framework di applicazioni mobili ibride. Ci sono un paio di ragioni per questo.

I componenti React Native sono descritti nel codice JavaScript e tradotti in controlli nativi. Ciò significa che gli utenti ottengono un'interfaccia utente diversa nelle versioni iOS e Android dell'app. Se gli sviluppatori stanno cercando di ottenere un'esperienza nativa per i loro utenti, questo è fantastico.

Tuttavia, significa anche che se gli sviluppatori vogliono avere la stessa interfaccia utente coerente su entrambe le piattaforme mobili, devono lavorare sodo per modellare i componenti nativi in ​​modo che abbiano lo stesso aspetto, o utilizzare componenti completamente diversi che forniscano lo stesso aspetto su entrambe piattaforme.

Confrontalo con Flutter, dove il framework fornisce i propri widget su tutte le piattaforme supportate. Non è in corso alcuna traduzione, perché Flutter non si basa sui controlli nativi per disegnare l'interfaccia utente. Al contrario, utilizza la propria libreria di controlli. La libreria di widget di Flutter fornisce widget che sembrano controlli nativi, ma sono completamente opzionali.

Questo approccio ha i suoi pro e contro. Il più grande vantaggio è che ora hai la stessa identica app su entrambe le piattaforme. Ma rinunci ad alcune cose per ottenerlo.

Poiché Flutter utilizza i propri widget invece di utilizzare quelli nativi, non è possibile utilizzare la pletora di librerie esistenti che forniscono controlli personalizzati come è possibile con un lavoro minimo su React Native. In React Native, è piuttosto semplice scrivere un piccolo wrapper attorno a qualsiasi controllo nativo esistente e farlo funzionare. Questo è anche il motivo per cui in questo momento non esiste un'implementazione stabile di Google Maps per Flutter.

Tuttavia, la possibilità di incorporare i controlli nativi è in lavorazione in questo momento ed è in anteprima per gli sviluppatori, il che significa che puoi usarla ma potresti dover fare i conti con dei bug. Una volta rilasciato, chiuderà questo buco di funzionalità piuttosto ampio in Flutter rispetto a React Native.

Questa stessa funzione di Flutter, che utilizza la propria libreria di widget anziché quelli nativi, offre anche un enorme vantaggio quando si desidera creare un componente completamente nuovo. In React Native, dovresti creare un componente nativo della piattaforma e importarlo nella tua applicazione tramite i binding.

Con Flutter, puoi creare componenti personalizzati direttamente nel tuo codice Dart. Hai il controllo completo dell'interfaccia utente con widget come CustomPainter che ti consentono di disegnare tutto ciò di cui hai bisogno e hai una libreria di widget disponibile che ti consente di implementare animazioni personalizzate. Non è mai necessario uscire dalla codebase di Dart per creare questi widget personalizzati.

E questo penso sia uno dei maggiori vantaggi di Flutter. Hai il controllo completo della tua interfaccia utente dal codice Dart e non devi più preoccuparti di apprendere l'SDK nativo delle piattaforme per cui stai sviluppando.

Apache Cordova

Apache Cordova non è tanto un framework quanto un browser wrapper. Con Cordova crei la tua applicazione utilizzando le tecnologie web: HTML, CSS e JavaScript. Cordova fornisce un modo per eseguire questa applicazione Web su piattaforme mobili ed espone le API della piattaforma nativa in JavaScript in modo che la tua applicazione possa interagire con la piattaforma.

Esistono diversi framework costruiti per Cordova. Uno dei famosi che ho usato in passato è il framework ionico. Fornisce un insieme di componenti dell'interfaccia utente che sembrano e agiscono in modo simile ai componenti della piattaforma nativa. Tuttavia, questi componenti sono implementati utilizzando HTML/CSS/JavaScript.

L'esperienza di sviluppo con Cordova e Ionic è davvero piacevole e iniziare è molto veloce se sei già uno sviluppatore web. Poiché stai creando applicazioni utilizzando tecnologie web, hai a disposizione l'intero ecosistema web. Pensa alle centinaia di migliaia di piccoli componenti e librerie basate su HTML/CSS/JavaScript e puoi usarne la maggior parte, se non tutti. Ciò significa che la maggior parte dei "widget" di cui hai bisogno sono già disponibili online.

Questo è anche un aspetto negativo, però. Poiché utilizzi le tecnologie Web per creare le tue applicazioni, è necessaria una grande attenzione per assicurarsi che l'app abbia l'aspetto e l'aspetto di un'app mobile e non solo un sito Web ridimensionato per funzionare su dispositivi mobili.

Mentre Cordova è un ottimo modo per sviluppare un MVP o anche le prime versioni della tua app, la prima app che ho creato in Flutter era un port di un'app Ionic. I miglioramenti delle prestazioni che abbiamo ottenuto, specialmente nelle visualizzazioni che avevano molti contenuti da scorrere, sono stati evidenti sin dalla prima interazione.

Xamarin

Non ho alcuna esperienza con Xamarian, quindi non posso confrontare equamente i due. Tuttavia, durante la mia ricerca, mi sono imbattuto in un ottimo articolo che fa un confronto equo.

Mentre l'articolo finisce con un pareggio tra Flutter e Xamarian, posso dire con sicurezza che se lo avessi letto e avessi dovuto fare una scelta tra i due framework, sarei andato con Flutter perché le cose in cui brilla sono le cose che apprezzo di più.

Una panoramica tecnica di Flutter

Flutter: il "motore di gioco" dei framework di app ibridi

Tra i framework di applicazioni mobili ibridi, Flutter ha un approccio unico. Non delega l'interfaccia utente alla piattaforma nativa né usa una visualizzazione Web. Invece, Flutter utilizza il proprio motore di rendering per dipingere l'interfaccia utente. Questo è simile al modo in cui i giochi utilizzano un motore di gioco che genera tutte le parti delle loro interfacce utente, invece di utilizzare i controlli nativi.

Flutter utilizza il motore grafico Skia ad alte prestazioni e testato in battaglia per disegnare tutto nella tua applicazione mobile. L'utilizzo di Skia offre due vantaggi principali a cui mi viene in mente, anche se sono sicuro che gli ingegneri di Google dietro Flutter avevano in mente molto di più:

1. La tua app avrà lo stesso aspetto su tutte le piattaforme senza bisogno di essere personalizzata per ognuna.
2. La tua app otterrà prestazioni eccezionali, simili alle applicazioni native, perché non esiste un livello intermedio che deve tradurre il tuo codice in codice della piattaforma nativa per disegnare i widget.

Tutto è un widget

I documenti di Flutter parlano di Flutter come di una "struttura in stile React". Questo è evidente nel modo in cui le app vengono create componendo insieme widget più piccoli ( componenti nella terminologia di React).

Tuttavia, Flutter porta l'approccio tutto è un widget un passo avanti rispetto a qualsiasi altro framework con cui ho lavorato.

Un semplice esempio è il riempimento. Con la maggior parte dei framework, il riempimento è un attributo degli elementi dell'interfaccia utente. In Flutter, Padding è un widget che può avvolgere altri widget al suo interno e aggiungere padding attorno al widget figlio.

Più in modo univoco, InheritedWidget non ha interfaccia utente e non fornisce alcuna interazione con l'utente. Il suo unico compito è aggiungere informazioni all'albero dei widget in modo che ad un certo punto in profondità nell'albero, tu possa estrarre tali informazioni.

Ad esempio, la radice della tua applicazione, il widget MaterialApp , può inserire un servizio di autenticazione nell'albero dei widget utilizzando un InheritedWidget . Ora, in profondità nell'albero su qualche altra pagina, come la pagina del tuo profilo utente, puoi utilizzare un metodo per estrarre quel servizio di autenticazione e usarlo.

Questo tutto è un approccio widget a cui ci vuole un po' per abituarsi. Ma una volta che lo conosci, diventa un potente modo per creare funzionalità nelle tue applicazioni.

Flutter, Dart e scavare nella fonte

Flutter è intimamente legato a Dart. Sebbene il motore di rendering di base sia costruito in C/C++, questa è solo una piccola parte di Flutter.

La maggior parte del codice di Flutter è scritto in Dart e ci sono ottime ragioni per cui il team di Flutter lo ha scelto. Ma il vantaggio più grande per me è stato che potevo facilmente guardare il codice sorgente del framework e tutti i diversi widget che fornisce e imparare da essi.

Questo è un vantaggio più potente di quanto molti sviluppatori realizzino. Raccomando alla maggior parte degli sviluppatori di cercare di trovare risposte nel codice dei propri framework/librerie, in quanto ciò non solo li aiuta a capire cosa sta succedendo sotto le coperte, ma li espone anche a codice di alta qualità e ben progettato, il che è un modo sicuro di crescere come sviluppatore.

Interoperabilità della piattaforma nativa

Sebbene Flutter fornisca il livello dell'interfaccia utente e la logica aziendale sia facilmente gestita tramite pacchetti Dart puri, per accedere alle funzionalità della piattaforma nativa come la geolocalizzazione e il controllo della telecamera, l'utilizzo dei pacchetti di terze parti di pub.dev è la strategia più semplice.

Tuttavia, se c'è qualche funzionalità di cui hai bisogno che non è disponibile tramite un pacchetto esistente, scriverne una tu stesso non è troppo difficile. Non ho creato personalmente alcun pacchetto nativo della piattaforma, ma ho esaminato il codice sorgente per molti per curiosità.

Anche se non sono uno sviluppatore di applicazioni native, sono stato in grado di comprendere principalmente le parti native di quei plug-in e vedere come si collegavano al runtime Dart tramite il passaggio di messaggi. Per gli sviluppatori esperti di piattaforme native, la creazione di un nuovo pacchetto per sfruttare una capacità nativa sarà molto semplice.

Dovresti usare Flutter nel tuo prossimo progetto?

Si spera che questo articolo ti abbia fornito informazioni sufficienti per decidere se puoi utilizzare Flutter nel tuo progetto di applicazione mobile. Ho cercato di dare un'immagine equilibrata di Flutter, elencando sia i pro che i contro.

Anche se nessuno può prendere la decisione per te, posso darti alcuni consigli di addio su come potrei affrontare la questione dell'utilizzo di Flutter nella mia prossima applicazione mobile. Se i vantaggi di Flutter possono fornire tutte le funzionalità di cui un'applicazione ha bisogno, la sceglierei in un batter d'occhio.

Questo perché, a parte le poche aree in cui Flutter è attualmente carente, tutti gli altri aspetti sono quelli che ho imparato ad ammirare e su cui fare affidamento nello sviluppo e nel lancio delle cinque diverse applicazioni Flutter nell'ultimo anno:

• La facilità di avvio di Flutter
• I guadagni di velocità che si possono ottenere utilizzando un framework progettato da zero per concentrarsi sulla velocità di sviluppo
• Il ricco ecosistema di librerie Dart prontamente disponibili e pacchetti di terze parti
• Il modo diverso ma estremamente produttivo di Flutter di sviluppare applicazioni utilizzando tutto è un approccio widget

Coloro che offrono servizi di sviluppo di app mobili farebbero bene a dare un'occhiata seria a Flutter, se non l'hanno già fatto.

Concluderò notando un ultimo vantaggio di Flutter: ha alcuni dei migliori documenti di qualsiasi libreria o framework con cui ho lavorato. È raro che cerco su Google una domanda di Flutter e non riceva risposta da una pagina dal sito di Flutter.

In qualità di Google Cloud Partner, gli esperti certificati da Google di Toptal sono a disposizione delle aziende on demand per i loro progetti più importanti.