Flutter, presente e futuro dello sviluppo mobile multipiattaforma #2

Questo è il seconda e ultima parte, di un articolo realizzato per spiegare perché questo fantastico framework potrebbe essere la scelta migliore per lo sviluppo mobile. La decisione di suddividere questa esposizione in due colonne differenti è stata quella di approfondire l'argomento senza confondere o annoiare il lettore. Ricordo che se non sai nemmeno un po 'di Flutter si consiglia di leggere prima il nostro articolo sugli elementi essenziali di Flutter in modo da ottenere il messaggio senza lacune.

Nel primo articolo abbiamo esaminato i due migliori vantaggi di Flutter per lo sviluppo mobile front-end multipiattaforma. Ora andiamo con il terzo.

Il layout di Flutter

Come indica il nome, layout imposta la disposizione, il formato, l'organizzazione degli elementi. Configura le parti e le compone in modo da costruire qualcosa che abbia un senso, come un modello. Tra gli altri, specifica la posizione e la dimensione di ogni pezzo (in questo caso, i widget) rispettando una serie di regole (solitamente vincoli). Se sei coinvolto nel mondo dello sviluppo di app, sia web che mobile, il layout ti sarà familiare.

Normalmente il modo di fare il layout è quello di accontentarsi molte regole rigide e rigorose che coprono tutti i widgete quelle regole implementano alcuni metodi di layout. Questo è ciò che accade con i CSS (nello sviluppo mobile è lo stesso). Le proprietà CSS (regole) vengono applicate ai tag HTML (widget o elementi).

Utilizzando queste proprietà sono inclusi un certo numero di modelli di layout (modelli di box, tabelle, colonne e più recentemente flexbox e griglie in CSS). comunque, il lo sviluppatore non può creare o aggiungere nuovi modelli di layout, devono essere implementati nel linguaggio e per tutti gli utenti e sviluppatori (su tutti i browser in CSS, come realizzati con flexbox e grid).

Inoltre, le regole possono interferire e persino entrare in collisione tra loro e, di conseguenza, gli elementi di solito lo hanno molte regole applicate, cosa rallenta il layout. Inoltre non aiuta il fatto che la prestazione sia spesso o (N ^ 2), il che significa che a seguito di un incremento del numero di elementi, calo delle prestazioni del layout ancora di più.

In Google, hanno scoperto che:

  • La maggior parte delle volte il layout è relativamente semplice e locale a un sottoalbero di elemento, utilizzando un modello di layout (cosa significa regole basse necessarie per catturare il comportamento)
  • Tralasciando il tipico modello di layout puoi ottenere guadagni di prestazioni rilevanti

Quindi hanno concluso che capovolgendo le idee sul layout potrebbe essere più chiaro e semplice:

  • In alternativa ad avere un gran numero di regole di layout applicabili a qualsiasi elemento, ogni elemento specifica il proprio modello di layout semplice.
  • Poiché ogni elemento ha regole di layout molto più basse da considerare, il layout sarebbe ottimizzato.

Ed è quello che hanno realizzato con i widget di Flutter. Infatti, per semplificare ulteriormente il layout, hanno convertito quasi tutto in un widget.

In Flutter tutto è un widget, anche il layout. Puoi controllare il catalogo dei widget sul sito Web della documentazione. Ad esempio, il widget Layout riga dispone orizzontalmente un elenco di widget (i suoi figli). Il widget Allinea allinea il suo figlio al suo interno e opzionalmente si dimensiona in base alle dimensioni del bambino. Così facile.

Riga (bambini: [Align (alignment: Alignment.centerLeft, child: Padding (padding: EdgeInsets.all (8), child: Text ("Hello World", style: TextStyle (fontSize: 30, fontStyle: FontStyle.italic, fontFamily: "Roboto" , color: Colors.blueGrey))),), Align (alignment: Alignment.centerRight, child: Padding (padding: EdgeInsets.all (8), child: FlutterLogo ()),),],);

Il riempimento e la centratura sono widget. I temi sono anche widget, che si applicano ai loro figli. Le proprietà dello stile di testo sono un widget chiamato TextStyle (). E anche le applicazioni e la navigazione sono widget.

Ci sono buoni pochi widget di layout. Centri, colonne e righe, pile, elenchi e griglie ... E un modello di layout per eseguire lo scorrimento, il modello di layout Sliver, perché il layout è così veloce che può essere utilizzato per lo scorrimento. Non è una cosa da poco, dal momento che lo scorrimento deve essere così fluido che l'utente non sa che sta eseguendo il rendering ogni volta. Utilizzando il layout per lo scorrimento, è possibile implementare tipi avanzati di scorrimento in Flutter, come mostrato nelle animazioni GIF di seguito.

History of Everything app animations
Animazioni di History of Everything, la prima app Flutter di 2Dimensions
Flutter Collapsing List
Elenco di compressione svolazzante
Flutter list with SliverAppBar
Elenco con SliverAppBar

Infine, è piuttosto notevole che Flutter possa quasi sempre fare layout in un unico passaggio. Ciò significa tempo lineare o O (n) che implica la possibilità di tenendo molti widget. Comunque Flutter fa anche caching e altre cose per evitare di fare il layout, quando possibile.

Progettazione su misura

Lo spostamento dei widget e il relativo rendering dalla piattaforma all'app risulta in facile personalizzazione e la creazione di nuovi widget e gli sviluppatori possono progettare completamente in base al marchio dell'azienda. È più flessibile, in una parola.

Inoltre, Flutter implementa una vasta gamma di Materiale Design widget personalizzabili per Android e iOS, costruito proprio per la personalizzazione offerta da Flutter. Questi widget emulano perfettamente i widget OEM di più piattaforme native. Gli sviluppatori possono fare lo stesso secondo i loro bisogni e desideri.

Gestione degli alberi

Se sei arrivato qui a leggere, saprai che sia Flutter che React (anche React Native) usano una sorta di albero dei widget. Nelle visualizzazioni Web reattive quell'albero è il file DOM virtuale. DOM (Document Object Model) è l'interfaccia che tratta un documento HTML come una struttura ad albero in cui ogni nodo rappresenta una parte del documento, in modo che JavaScript possa manipolare questi nodi con la sua API. Virtual DOM, invece, è una versione astratta del DOM basata su oggetti direttamente in JavaScript.

Le visualizzazioni Web reattive funzionano in questo modo:

  • Il DOM virtuale, che è immutabile, è rebuilt ogni volta tutto cambia
  • Il DOM virtuale viene contrapposto al DOM reale in modo da ottenere l'estensione modifiche minime necessario, quindi tali modifiche vengono applicate al DOM reale per aggiornarlo
  • Il vero DOM è ri-reso e dipinto in una tela
React tree managing
React tree management

Ora potresti pensare che sembra stupido o un lavoro extra inutile, ma è fatto così perché è molto costoso manipolare l'HTML o il DOM reale. React Native funziona in modo simile, ma invece di DOM e DOM virtuale manipola i widget nativi della piattaforma mobile e costruisce un albero virtuale di widget. Quell'albero virtuale di widget è collegato ai widget nativi tramite il bridge, riducendo al minimo i dati trasmessi.

React Native tree managing
React Native tree management

E Flutter? Come detto nella prima parte di questo articolo, i widget e il renderer sono stati spostati dalla piattaforma all'app dell'utente stesso. Questo procedimento implica che sebbene React Native sia stata una grande innovazione per lo sviluppo mobile (Flutter ne ha tratto ispirazione) Flutter è andato oltre e ha fatto un passo molto più grande.

Flutter tree managing
Gestione degli alberi svolazzanti

Non sono necessari bridge, né albero di widget virtuali, né widget nativi, e questo significa tre strati rimossi in un colpo solo. Flutter esegue semplicemente il rendering del suo albero dei widget e rappresentarlo nella tela della piattaforma, che è piuttosto veloce. Niente più problemi di prestazioni dell'animazione e soluzioni complicate come quelle in React Native, perché si verificano nel regno di Flutter. Inoltre, il suo renderer è più originale e innovativo di quello di React Native (e altri), ridipingendo "per widget" solo quelli che devono essere aggiornati e memorizzazione nella cache di widget non modificati.

Infine, evidenzia che Flutter è open source e il suo repository è su GitHub, in modo da poter cambiare o modificare facilmente ciascuno in base alle esigenze.

Ricarica a caldo

Oltre ai widget, flutter si distingue anche per la ricarica a caldo. Questa è una funzione veloce che consente applicare le modifiche a un'app Flutter mentre è in esecuzione, ricaricando il codice senza alterare lo stato dell'app. È così veloce che di solito durano meno di un secondoe se c'è un errore puoi correggerlo, ricaricare a caldo e andare avanti.

Hot Reload behavior
Comportamento di ricarica a caldo

L'inconveniente qui è che creare un file ricarica completa, mentre è veloce rispetto ad altre tecnologie, lo è più lento delle piattaforme nativee specialmente su iOS può essere un po 'fastidioso. Tuttavia, penso che i vantaggi valgano molto di più di questo problema. Dipingere istantaneamente la tua app dopo quasi ogni piccola modifica è una caratteristica molto preziosa e citata.

Compatibilità

Se sei abituato a codificare app Android native con Java o Kotlin, library problemi di compatibilità, multidex, Android X, ecc.Saranno concetti che capirai e odierai in un certo modo. Con Flutter quella burocrazia fa non esiste. Poiché i widget appartengono alla tua app e non alla piattaforma, eviti queste cose.

Il tuo progetto funzionerà perfettamente su Android da Jelly Bean e iOS da 8.0 in tutte le versioni e dispositivi. Niente più librerie compatibili. Inoltre, le app di test su versioni precedenti verranno ridotte e la tua app funzionerà nelle versioni future del sistema operativo. Tuttavia, se importi librerie realizzate in codice sorgente con codice nativo, puoi ugualmente metterti nei guai.

Aggiornamento quadro

Una possibile domanda potrebbe quindi essere cosa succede quando viene rilasciata una nuova versione di iOS e Android. Sara impiega molto tempo per l'aggiornamento dei widget Flutter se ci sono alcune nuove funzionalità, widget nativi o modifiche in un widget corrente? Beh, potrebbe essere, ma:

  • Google utilizza Flutter internamente, quindi sono incentivati a mantenere aggiornati i set di widget e vicini agli attuali widget della piattaforma.
  • Google non è l'unico utente di Flutter con un incentivo a mantenere aggiornati i widget. Chiunque può aggiornare facilmente i widget, anche tu.
  • Nel caso in cui non desideri che la nuova modifica si rifletta nella tua app, sei a posto. Poiché i widget fanno parte della tua app, lo faranno non cambiare mai da sotto di te e rompere la tua app o renderla brutta.
  • E se ciò non bastasse, puoi scrivere la tua app e utilizzare il nuovo widget anche su versioni precedenti del sistema operativo.

Pacchi

Prima di aggiungere funzionalità nuove e complesse alle tue app, puoi controllare il repository dei pacchetti Flutter. Probabilmente troverai da strumenti e utilità, a implementazioni multimediali e di servizi di terzi qualcosa di utile per la tua app. Ci sono anche plugin per accedere facilmente ai servizi (fotocamera, posizione, accelerazione, autorizzazioni).

Open source

Come menzionato prima, open source e il rendering delle app rendono Flutter personalizzabile per ogni singola app. Quasi tutto è modificabile, concretamente tutto del motore Dart:

Flutter Structure
Struttura svolazzante

Chiusura

Spero che questi due articoli ti chiariscano il motivo Flutter è uno strumento molto potente che può essere lo strumento dominante nello sviluppo mobile e perché lo usiamo su Stratton Apps. In caso contrario, qui lasciamo un riepilogo delle sue caratteristiche uniche:

  • Viste reattive, senza bridge JavaScript
  • Veloce, fluido e prevedibile; code compila AOT in codice nativo (ARM)
  • Viene fornito con bellissimi widget personalizzabili
  • Lo sviluppatore ha il pieno controllo sui widget e sul layout
  • Ottimi strumenti per sviluppatori, con un incredibile ricarica a caldo
  • Pacchetti più performanti, più compatibili
  • Open source e modificabile
  • App veloci e belle per più piattaforme da un unico codice facile

Se vuoi un'app fantastica, originale, veloce e reattiva per più piattaforme, non dubitare contattaci alle app Stratton. Noi costruirà velocemente ed economicamente una soluzione Flutter con supporto di backend, se necessario.

Lascia un commento

Voglio costruire un