Flutter for Web – Un primo test

Ho iniziato ad utilizzare Flutter sin da quando era ancora in versione ‘beta’ e non appena ho saputo dell’esistenza di Flutter For Web, inizialmente in fase “Technical Preview”, ho deciso di testare appieno le sue caratteristiche. Adesso, dopo circa 2 mesi di test, ho deciso di riportare la mia esperienza (che preciso non sarà tecnica, per quello ci sono le mie altre guide Flutter).

Intro – Perché nasce Flutter Web

Flutter è stato creato per offrire agli sviluppatori un framework di sviluppo rapido e, allo stesso tempo, per rendere coinvolgente la User Experience.

Flutter Web permette a Flutter di essere renderizzato, utilizzando tecnologie web basate su standard: HTML, CSS e JavaScript.

In breve, rende possibile compilare codice Flutter esistente, scritto in Dart, per incorporarlo nel browser e poi hostarlo su un server Web. Si possono utilizzare (quasi) tutte le funzionalità di Flutter e non si ha bisogno di alcun plug-in nel browser.

Sebbene il prodotto sia in fase di sviluppo, già presenta delle caratteristiche assolutamente interessanti e degne di nota!

Prima di proseguire, voglio specificare che ho deciso di utilizzare come dimostrazione in Flutter for Web.. un fantastico, unico ed irripetibile… Sito portfolio..! 

Beh.. la risposta è.. perché no? Dov’è scritto che Flutter Web non possa essere usato per questo scopo? Perché non testare al massimo la ‘flessibilità’ e le possibilità che questa tecnologia offre?

Bando alle ciance, iniziamo!

Prime impressioni

Il primo approccio è stato sorprendentemente ‘indolore’. Ero già abituato allo sviluppo mobile con Flutter, ma credevo che con Flutter Web ci fosse almeno qualche differenza nel modo di programmare.. sorprendentemente, non è cosi.

Voglio precisare che non è propriamente vero che non ci sono differenze rispetto al modo in cui sviluppare app Android/iOS con Flutter. Quello a cui mi riferisco è il fatto che è possibile realizzare una Web App, proprio come lo si fa con un’app mobile, e quindi chi è già in grado di sviluppare in Flutter, sarà in grado di realizzare PWA in Flutter Web senza alcuna problematica!

Nei test effettuati, sono riuscito ad utilizzare un buon 90% di codice,(ovviamente riadattando la grafica che tengo esclusa da questa percentuale) per rendere un’app originariamente creata per il mondo mobile, utilizzabile anche sul Web!

Pro e Contro riscontrati finora

Passiamo ad una lista di Pro e Contro che nella mia ‘breve’ esperienza con Flutter Web sono riuscito ad individuare:

Pro:

• Passare dallo sviluppo in Flutter allo sviluppo Flutter Web, è davvero semplice ed indolore;
• Veloce: dai test effettuati con Google page speed, ho riscontrato mediamente punteggi di 60/100 per Mobile e 90/100 per Desktop (testate voi stessi il sito portfolio che ho realizzato);
• Permette di riutilizzare quasi tutto il codice precedentemente scritto per un’app mobile;
• Alcuni pattern (Scoped Model, BloC, .. ) e diverse librerie molto utilizzate funzionano senza problemi;

Contro:

• Alcuni widget ed alcune dipendenze di terze parti non sono ancora supportati;
• Rispetto la versione Flutter mobile, si nota che è un prodotto acerbo;
• SEO: non ho ancora idea di quanto sarà efficiente la SEO in Flutter Web;

Il mio test

Come già anticipato, ho deciso di riportare come test, un esempio base di sito portfolio realizzato con questa nuova tecnologia.

Il risultato ritengo sia abbastanza soddisfacente, sia in versione mobile che desktop, ma giudicate voi stessi seguendo questo LINK.

Per chi volesse avere il codice utilizzato per implementare questo semplice progetto, ecco il link del repository GitHub.

Conclusioni

Sicuramente Flutter Web ha del potenziale incredibile e sono sicuro che nel tempo prenderà largamente piede anche per lo sviluppo di Web App, ma allo stato attuale cosa si può fare?

Beh, al momento credo sia ancora presto utilizzare Flutter Web in produzione, ma credo che ci siano delle cose in cui potrebbe tornare utile.

Per esempio ritengo che sia perfetto per essere utilizzato in un iFrame! Si potrebbe realizzare un iFrame e sfruttare lo stesso codice per implementarlo in un’app. In questo caso, la perfetta applicazione di questa tecnologia l’ho riscontrata incorporando un iFrame che sfruttava l’autocompletamento di un textfield, realizzato interamente in Flutter, ed in seguito ho riutilizzato lo stesso codice nell’applicazione mobile dello stesso progetto!

In futuro senza dubbio sarà possibile sviluppare web app complesse (anche adesso in realtà, ma non lo consiglio) e sfruttare lo stesso codice per implementarlo in app mobile.

Per concludere, dai test effettuati credo che Flutter Web sia una tecnologia incredibile che si trova ad uno stadio iniziale, adottarla ora è una scommessa azzardata, ma in alcuni campi potrebbe già essere una valida opzione.

Per concludere come sempre, ecco nuovamente il LINK del repository github del progetto usato a scopo dimostrativo, vi invito a seguirmi anche lì! Flutter your fantasy! 😉