Lo sviluppo mobile è relativamente giovane se pensiamo alla programmazione informatica come disciplina iniziata a inizio ‘900.
Sia Google che Apple mettono a disposizione la completa documentazione per permettere letteralmente a chiunque di imparare lo sviluppo per le rispettive piattaforme, ma non è tutto oro quel che luccica.
Lo sviluppo nativo ha sicuramente un buon numero di vantaggi: gira velocemente sugli smartphone, è altamente ottimizzato, ha ottima e abbondante documentazione, agevola la creazione di un look-and-feel contestualizzato alla piattaforma per cui lo si sviluppa, ecc. Tuttavia, percorrere questa strada, significa anche avere a che fare con le ovvie conseguenze più scomode annesse:
- Altamente time-consuming
- Specifico (naturalmente) per la piattaforma di destinazione
Questo significa inoltre che se un brand necessita un’app, deve cercare una figura specializzata per ciascuna piattaforma, e quindi avere un duplice costo.
Il mondo dell’informatica ha risposto a questo problema sviluppando framework di vario genere e tecnologia nel tentativo di avere del codice “universale” per evitare grosse spese o lunghi tempi di sviluppo; stiamo parlando quindi di tecnologie come Cordova (di Apache), React (di Facebook), e altri.
Non è però questo l’articolo per un confronto, tuttavia, si tratta della presentazione di un nuovo concorrente al gioco del cross-platform, ed il suo nome è “Flutter”.
Google si intromette, come sempre
I problemi sopra citati sono stati evidentemente colti anche da Google, che ha pubblicato a Maggio 2017 la prima release di Flutter.
Si tratta di un SDK scritto in Dart (di cui parlerò sotto) che promette tempi di sviluppo rapidi, altissime prestazioni e massima compatibilità.
Flutter è diverso dalla maggior parte delle tecnologie attualmente presenti, non ha assolutamente nulla a che vedere con il paradigma MVC (e lo specifico, prima che voi vi gettiate nella cartella del progetto cercando i files delle viste), e la cosa che gli si avvicina di più è React Native (ma è decisamente meno complicato).
Widget-ception
La prima cosa da sapere su Flutter, è che non esistono (o perlomeno, non sono il principale strumento di funzionamento) le callback.
In Flutter infatti il paradigma è il seguente: Tutto è un “widget”, e un widget può avere uno stato, che ne può determinare contenuto o forma.
Cosa significa? Significa che l’app è un widget, che contiene un’app bar che è a sua volta un widget, che confina inferiormente con il contenuto dell’app (widget), che a sua volta conterrà delle righe (widget), che a loro volta conterranno dei bottoni (widget), consistenti di testo (widget) e immagine (widget).
Una volta compreso che letteralmente tutto in Flutter è un “widget”, possiamo fare un’ulteriore distinzione:
- Widget privi di stato (statelesswidget): sono immutabili. Un bottone che non cambia mai colore può essere definito come uno widget statico.
- Widget dotati di stato (statefulwidget): una (o più) proprietà ad ad essi afferente, cambiando, può mutare le sembianze o le funzionalità del widget.
Una schermata dell’app che cambia in base al contenuto in una risposta http è un widget dotato di stato (proprio perchè il contenuto della schermata varia in base alla risposta http).
State-ception
Oltre agli widget, è fondamentale la nozione di “stato” (state).
Uno stato in Flutter è un’istantanea di tutti gli widget e i valori che essi contengono.
Supponiamo di avere una casella di testo (tf1) ed un bottone (btn1), che sappiamo dal precedente paragrafo essere due widget.
Se desidero che al click di btn1, tf1 incrementi il suo valore di 1 intero, dovrò dichiarare una variabile che tenga in memoria il valore mostrato di tf1, e al click del bottone dovrò semplicemente incrementare la variabile di prima, e dire a Flutter di aggiornare lo stato.
L’aggiornamento di stato corrisponde ad una ri-costruzione parziale della schermata in cui vengono rigenerati solo gli widget influenzati dalla modifica.
No viste, no party
Non ci sono files per le viste. Non c’è un editor grafico dove trascinate gli elementi su un rettangolo verticale. Non c’è nulla di neanche lontanamente simile. E’ il linguaggio di programmazione, Dart, che definisce cosa, dove e come appare nella schermata.
Questo è più o meno il punto dove la maggior parte delle persone poco coraggiose fuggono, perché al giorno d’oggi si pensa che un’interfaccia grafica per gestire l’estetica è comoda, alcuni dicono sia addirittura “fondamentale”.
Io stesso ammetto che mi diverto quando devo iniziare ad occuparmi della grafica delle mie app, e quindi trascino gli elementi dalla toolbox sul finto telefono in Android Studio.
Tuttavia, ho provato a fidarmi di Google e dopo qualche migliaia di righe di codice scritte in Dart, posso con sicurezza affermare che non tornerei mai indietro.
Scrivere l’interfaccia grafica in Dart ha i suoi contro:
- Non sai come sta uscendo la tua app finché non la carichi su un simulatore (o su un telefono collegato).
- Non puoi trascinare gli elementi, e c’è una curva di apprendimento per capire come stilizzare i vari widget.
Tuttavia, la saggezza del team di Google ha anche partorito soluzioni egregiamente efficaci a questi problemi:
- Esiste l’instant run che permette di aggiornare in tempo reale il codice sul simulatore (o sul telefono). E per tempo reale intendo dire che in meno di mezzo secondo avete la vostra ultima modifica già funzionante sotto i vostri occhi (spiegherò qui sotto con che magia è possibile ciò).
- Il risparmio di tempo che ottieni evitando di saltellare in giro per vari files è semplicemente incredibile; inoltre dopo le pochissime nozioni sui widget di vario tipo che hai a disposizione, scrivere un’interfaccia con Dart è molto più veloce rispetto alla gestione di un’interfaccia “clicca e trascina”.
dart & Instant-run-magic
Come citato sopra, una delle migliori feature di Flutter è la possibilità di vedere le modifiche del codice in tempo reale su un simulatore (o device collegato).
Questo è merito di Dart, perché il team di Google che lo ha creato (per chi non lo sapesse, anche Dart, è stato creato da Google) ha fatto in modo che lo stesso codice di programmazione possa essere sia interpretato, che compilato.
Durante lo sviluppo di un’app infatti questa verrà eseguita interpretando il codice man mano, viene chiamata quindi “slow mode”.
Nel momento in cui l’app è pronta e si buildano i files finali da distribuire negli store, ed il codice viene invece compilato (con tutti i benefici in termini di velocità, fluidità, ecc. che ciò comporta).
La dinamicità di Dart permette da un lato di avere un ambiente di sviluppo completamente mirato alle esigenze degli sviluppatori, e successivamente una modalità di esecuzione finale basata sulle esigenze di un’app in produzione.
Per il resto, Dart non è troppo distante da Java, la sintassi è molto simile, ma ci sono delle chicche studiate per rendere la vita degli sviluppatori meno complicata (le vedremo in un articolo futuro sull’argomento, nel mentre vi mando al sito ufficiale qui).
Build-magic
Come fa però Flutter ad essere compatibile con entrambi i famosi sistemi operativi mobile?
Per quanto riguarda Android, il motore (scritto in C/C++) viene compilato con le NDK Android, e tutto il codice Dart è compilato AOT in codice nativo.
Su iOS il discorso è simile, ma il motore viene compilato con LLVM.
In entrambi i casi l’app viene eseguita nativamente (quindi senza interpreter).
Capite facilmente come questo processo porti ad avere delle app cross-platform senza però rinunciare alle prestazioni che il codice nativo ha sullo smartphone.
la carta vincente
Flutter è differente dalle diverse soluzioni sul mercato per sviluppare mobile app perché non usa WebView o OEM widget, ma sfrutta il suo motore di rendering ad altissime performance per il rendering di widget. Inoltre Flutter è diverso perché ha solo un sottile strato di codice C/C++ il quale gli garantisce prestazioni nettamente superiori ai suoi concorrenti. L’approccio cross-platform di Flutter è unico:
- Flutter non è come Cordova o PhoneGap, le quali sono essenzialmente app JavaScript/HTML/CSS mascherate come app native mobile. Le app cordova e PhoneGap vengono eseguite in un browser mobile racchiuso nel componente nativo WebView. Queste sono lanciate come app native, ma in fondo sono web-app con la chiara conseguenza di avere prestazioni nettamente inferiori ad una app nativa e una scarsa user experience.
- Flutter non è come React Native (o NativeScript). React Native usa i widget nativi. Ciò significa che è necessario creare app separate per Android e iOS. Significa anche che l’app ha un aspetto e un comportamento più nativo di, ad esempio, una Cordova o PhoneGap.
Flutter è totalmente differente anche dall’approccio utilizzato da React Native. Questo fantastico framework reinventa la propria libreria di componenti dell’interfaccia utente da zero. Questi componenti sono disegnati utilizzando le primitive grafiche di basso livello delle piattaforme. Pertanto, i componenti della GUI di Flutter non sono elementi HTML, né sono widget nativi Android/iOS. Sono widget di Flutter. Hanno un look and feel pluggable. Così possono apparire come widget nativi iOS o widget nativi di Android. Utilizzando lo stesso framework di rendering e set di widget, è drasticamente più facile sviluppare e pubblicare contemporaneamente sia per iOS che Android, senza dover fare una pianificazione attenta e costosa per allineare due codebase e set di funzionalità separati. Utilizzando un unico linguaggio, un singolo framework e un singolo set di librerie per tutta la tua interfaccia utente (indipendentemente dal fatto che l’interfaccia utente sia diversa per ogni piattaforma mobile o sostanzialmente coerente) il risultato è una netta riduzione dei costi di sviluppo e manutenzione delle app. Il set di widget che mette a disposizione Flutter è fantastico: date un occhio a questo LINK.
Sviluppo e supporto
Flutter è attualmente in alpha, ma:
- La community è spaventosamente attiva, c’è infatti un canale creato appositamente per far dialogare i programmatori interessati con il team di sviluppo Google qui: https://gitter.im/flutter/flutter.
- Ci sono già app sugli store che usano Flutter, alcune molto famose (in America) come ad esempio “Hamilton — The Official App” che ha più di 100.000 download per ogni piattaforma.
- Flutter è nuovo, ma Dart esiste dal 2011, quindi la maggior parte delle vostre esigenze saranno già coperte su Stack Overflow da qualche anno.
- Dart (in versione web) è attualmente usato da Google Adwords, ovvero la principale fonte di guadagno di Google, quindi credetemi, è solido.
- Sembra che Flutter sia protagonista all’interno dell’ormai famoso Google Fuchsia. Anche Armadillo UI (l’interfaccia di Google Fuchsia) è scritta completamente utilizzando Flutter.
E ora?
Se ciò che avete letto qui sopra vi è piaciuto, vi consiglio di spulciare il sito di Flutter, che trovate qui, ed in seguito seguire le istruzioni per installare l’ambiente di sviluppo, che trovate invece nella pagina setup scegliendo il vostro sistema operativo.
Vi consiglio poi di scaricare la versione gratuita di “Intelli J Idea” che grazie alla collaborazione con Google ha già plugin per Flutter e per Dart.
Flutter è nuovo, ma il team sta lavorando a ritmi sostenuti per mettere a disposizione plugin per ogni esigenza, trovate la lista qui: https://github.com/flutter/plugins
Questo invece è un elenco di plugin che contiene anche quelli mantenuti dalla community: https://pub.dartlang.org/flutter/packages/
Hello world
Non sarebbe una vera introduzione al framework senza un HelloWorld.
Le righe sottostanti bastano a creare un’app, eseguibile su Android o iOS. Tutto qui. Un file.
Per provare però questa magia dell’informatica moderna dovrete aver già impostato l’ambiente di sviluppo del sito illustrato sopra (pagina setup). Se lo avete già fatto, da terminale basterà posizionarsi nella cartella del progetto, e digitare il comando flutter run
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Hello World',
home: new Scaffold(
appBar: new AppBar(
title: new Text("Home view"),
),
body: new Center(
child: new Text("Hello World!"),
),
),
);
}
}
Link al progetto di Hello World su GitHub.
riferimenti e approfondimenti
- https://flutter.io/faq/
- https://codeburst.io/googles-flutter-react-java-swing-8174c8d9d402
