Flutter, presente e futuro dello sviluppo mobile multipiattaforma #1

Per spiegare perché questo quadro innovativo potrebbe essere il migliore soluzione per lo sviluppo mobile separeremo le ragioni in due articoli differenti in modo da approfondire ciascuna ragione senza confondere o annoiare il lettore. Questa è la prima parte e alla fine avrai un collegamento alla seconda parte di questa narrazione.

Se non l'hai già fatto e soprattutto se non ne sai nulla, ti consiglio vivamente di leggere il nostro articolo sugli elementi essenziali di Flutter. Tuttavia, daremo una piccola definizione per entrare nel contesto per coloro che non vogliono leggerlo.

A proposito di Flutter

Flutter è un file SDK innovativo creare principalmente applicazioni per Android e iOS (più piattaforme attualmente in versione beta e alpha). Questo framework consente agli sviluppatori di creare app mobili native multipiattaforma belle e ad alte prestazioni codificando solo una volta, su Flutter.

E quando una nuova tecnologia entra nel mercato dello sviluppo, la prima cosa da guardare è quali sono i suoi vantaggi. Cioè, la prima domanda da porsi è perché usarlo. Nel campo delle prese per lo sviluppo di applicazioni multipiattaforma, inoltre, esistono già molte tecnologie. Cordova, PhoneGap, il nuovo Ionic, ecc.

L'attributo "nativo" di cui sopra, nel caso non lo avessi notato. Ma prima, spiegheremo i problemi esaminando come funzionano tutte le altre tecnologie.

Relazione quadro-dispositivo

Il primo argomento sarà il modo Flutter e dispositivi mobili interagiscono. Esamineremo come il framework o il software interagisce con il dispositivo su tutte le tecnologie per sapere com'è questo legame, come funziona davvero.

Gli SDK della piattaforma (Android e iOS)

Sia Android, il sistema operativo Google rilasciato nel 2009 che iOS, rilasciato nel 2008, funzionano più o meno allo stesso modo. Sono basati su linguaggi diversi (Objective-C e Java) ma il loro funzionamento è lo stesso.

Native platform behavior
Piattaforma nativa

La tua app può ordinare alla piattaforma di eseguire due operazioni diverse: creare widget o accedere ai servizi del dispositivo mobile (fotocamera, posizione, batteria, sensori, ecc.). Questi widget vengono renderizzati su una tela dello schermo e alcuni eventi vengono restituiti ai widget.

Sebbene sia un'architettura semplice, il problema con questo è il fatto che devi creare app separate con due codici diversi perché hanno lingue native e widget differenti.

WebViews

Quando Android e iOS sono cresciuti, e quindi lo sviluppo mobile lo ha fatto, le loro classi a gestire i contenuti web senza uscire dall'app è diventata sempre più versatile, e ha permesso la creazione di framework che ne traggono vantaggio visualizzazioni web per mostrare i contenuti in entrambe le piattaforme attraverso di loro. Ecco come sono nati Phonegap e Apache Cordova.

WebView technologies behavior
Tecnologie WebView

Utilizzando le classi WebView (Android) e UIWebView (iOS, ora deprecato per WKWebView) rendono il codice HTML, CSS e JavaScript, e c'è una comunicazione tra il JavaScript della webview e il codice nativo per accedere ai servizi. Tuttavia, poiché è difficile per linguaggi come JavaScript parlare direttamente con il codice mobile nativo, implementano un "ponte" che crea una connessione tra l'ambito JavaScript e l'ambito nativo.

Visto che i servizi della piattaforma in genere non venivano chiamati così spesso, all'inizio non causavano troppi problemi di prestazioni. Ma quando il mercato delle app è cresciuto sempre di più, questa tecnologia è stata rivelata come abbastanza limitato, specialmente a causa delle prestazioni (ecco perché lo scopo di Flutter era quello di creare un'app fluida per entrambe le piattaforme con rendering a 120 FPS, leggi di più qui).

Viste reattive

Con l'arrivo della programmazione reattiva, i framework web reattivi come ReactJS (e altri) sono diventati popolari principalmente perché semplificano la creazione di visualizzazioni web. Nel 2015, la creazione React Native ha portato i numerosi vantaggi di viste in stile reattivo alle app mobili e ora è popolare.

React Native behavior
React Native

In React Native, il realm JavaScript accede ai widget della piattaforma nel realm nativo, invece di utilizzare WebView. Tuttavia, deve andare attraverso il ponte anche per quelli, e ora non solo per accedere ai servizi nativi, ma anche per il rendering. E poiché in genere si accede ai widget abbastanza frequentemente (fino a 60 volte al secondo) specialmente durante le animazioni, le transizioni, ecc., Questo può causare problemi di prestazioni e di solito sono difficili da risolvere. La parte nativa è veloce, la parte JS è veloce, ma il passaggio da una all'altra causa a collo di bottiglia delle prestazionie devi mantenere il flusso di dati tra di loro al minimo.

svolazzare

Flutter è stato ispirato da React Native e utilizza anche viste in stile reattivo. Tuttavia, i creatori hanno avuto una grande idea evitare il bridge di connessione. Invece di utilizzare JavaScript, hanno utilizzato il linguaggio compilato chiamato Dart, anch'esso sviluppato da Google. Dart viene compilato in anticipo (AOT) direttamente nel codice nativo, ed è così che non solo hanno risolto i problemi di prestazioni, ma anche tempi di avvio delle app migliorati.

Già questa cosa (visioni reattive senza bridge) dovrebbe essere un motivo per parlare di Flutter come di una tecnologia di sviluppo interessante e innovativa che vale la pena provare, ma è solo l'antipasto della rivoluzione Flutter. Il corso principale è la sua implementazione di widget. L'importanza è tale da discutere il funzionamento del flutter nella prossima sezione, la sezione Widget.

Widget di Flutter

I widget sono uno degli elementi più importanti di un'app. Essi creare e modificare la vista e sono il comportamento principale e possono creare o distruggere un'applicazione. I servizi sono funzionalità complementari che servono ai widget per completare un'applicazione e darle funzionalità.

(gif)

Tra l'altro, devono esserlo

  • Di bell'aspetto e sensazione. I widget devono avere un bell'aspetto ed essere flessibili e naturali. Devono comportarsi e adattarsi a varie dimensioni dello schermo.
  • Prestazioni veloci: per costruire l'albero dei widget, gonfiare i widget (istanziando i loro figli), disporli sullo schermo, renderli e (specialmente) animarli.
  • Estensibile e personalizzabile. Le app moderne richiedono personalità e stile, e gli sviluppatori devono essere in grado di aggiungere piacevoli nuovi widget, crearne altri dai primi e personalizzare tutti i widget per ottenere il design e il modello del loro marchio.

Flutter, invece di utilizzare i widget OEM (widget della piattaforma nativa) o DOM WebViews, ha sviluppato un file nuova architettura con widget che rispettano le tre regole sopra menzionate.

Flutter behavior
svolazzare

Questo perché questo framework sposta il file widget e renderer dalla piattaforma nativa nell'app, lasciando nella piattaforma solo una tela all'interno della quale renderizzare quei widget sullo schermo del dispositivo, ma non i widget stessi. Anche i servizi (come la fotocamera) e gli eventi (timer, tocchi, ecc.) Sono accessibili tramite la piattaforma nativa. Ma il problema, come si vede nelle visualizzazioni di reazione, era nel rendering.

La modifica dei widget e del renderer rende il file app pesa un po 'di più. Mettendo i numeri sul tavolo, la dimensione minima di un'app Flutter è di circa 4,6 MB, che è paragonabile a quelle create con strumenti di sviluppo equivalenti. Infatti anche il flutter si avvantaggia di questo perché all'aumentare del volume e del carico dell'applicazione la dimensione non aumenta in modo molto evidente. Spetta agli sviluppatori decidere se farlo vale i benefici del flutter o no.

Infine, commenta che sebbene esista ancora un collegamento tra Dart e il codice nativo per codificare e decodificare i dati, questo è molto più veloce del bridge JavaScript.

È tutto gente. Come avete visto, in relazione al dispositivo Flutter è molto lungimirante è molto vantaggioso rispetto ad altri. Questo è il primo punto per cui Flutter It potrebbe diventare il campione dello sviluppo front-end, soprattutto per le applicazioni mobili. Il secondo sono i suoi potenti widget. Nel prossimo articolo, tratteremo il layout, la progettazione personalizzata, la gestione degli alberi, la ricarica a caldo, la compatibilità e altro ancora. Spero ti sia piaciuto!

Un commento su “Flutter, present and future of cross-platform mobile development #1

Lascia un commento

Voglio costruire un