Ho iniziato come sviluppatore web front-end e poi sono diventato un Flutter sviluppatore. Penso che ci fossero alcuni concetti che mi hanno aiutato ad adottare Flutter più facilmente. C'erano anche alcuni nuovi concetti che erano diversi.
In questo articolo, voglio condividere la mia esperienza e ispirare chiunque si senta paralizzato dalla scelta di un ecosistema rispetto all'altro, mostrando come i concetti si trasferiscono e tutti i nuovi concetti possono essere appresi.
Concetti trasferiti
Questa sezione mostra i luoghi in cui si avvicinano lo sviluppo Web front-end e Flutter. Spiega le abilità che già possiedi che sono un vantaggio per te se avvii Flutter.
1. Implementazione delle interfacce utente (UI)
Per implementare una determinata interfaccia utente nel Web front-end, componi elementi HTML e li stili con CSS. Per implementare le interfacce utente in Flutter, componi widget e modellali con proprietà.
Come i CSS, il Color la classe in Dart funziona con "rgba" e "hex". Anche come CSS, Flutter usa i pixel per le unità di spazio e dimensione.
In Flutter, abbiamo classi ed enumerazioni Dart per quasi tutte le proprietà CSS e i loro valori. Per esempio:
Ha anche Flutter Column ed Row widget. Questi sono gli equivalenti di Flutter display: flex nei CSS. Per configurare justify-content ed align-items stili, tu usi MainAxisAlignment ed CrossAxisAlignment proprietà. Per regolare il flex-grow style, avvolgere i widget dei bambini interessati del file Column/Row, in un Expanded or Flexible.
Per le interfacce utente avanzate, Flutter ha il CustomPaint classe - è Flutter che cosa Canvas API è per lo sviluppo web. CustomPaint ti dà un pittore per disegnare qualsiasi interfaccia utente come desideri. Di solito userai CustomPaint quando vuoi qualcosa di veramente complesso. Anche, CustomPaint è la soluzione ideale quando una combinazione di widget non funziona.
2. Sviluppare per multipli Risoluzioni dello schermo
I siti Web vengono eseguiti su browser e le app mobili vengono eseguite sui dispositivi. Pertanto, durante lo sviluppo per entrambe le piattaforme, devi tenere a mente la piattaforma. Ogni piattaforma implementa le stesse funzionalità (fotocamera, posizione, notifiche, ecc.) in modi diversi.
Come sviluppatore web, pensi alla reattività del tuo sito web. Utilizzi le media query per gestire l'aspetto del tuo sito Web su schermi sempre più piccoli.
Passando dallo sviluppo web mobile a Flutter, hai il MediaQuery classe di aiuto. Il MediaQuery la classe ti fornisce il dispositivo corrente orientation (paesaggio o ritratto). Ti dà anche la vista corrente size, le devicePixelRatio, tra le altre informazioni sul dispositivo. Insieme, questi valori forniscono informazioni dettagliate sulla configurazione del dispositivo mobile. Puoi usarli per cambiare l'aspetto della tua app mobile su varie dimensioni dello schermo.
3. Utilizzo di debugger, editor e strumenti della riga di comando
I browser desktop dispongono di strumenti per sviluppatori. Questi strumenti includono un ispettore, una console, un monitor di rete, ecc. Questi strumenti migliorano il processo di sviluppo web. Anche il flutter ha il suo DevTools. Ha il suo ispettore widget, debugger, monitor di rete, tra le altre funzionalità.
Anche il supporto IDE è simile. Visual Studio Code è uno degli IDE più popolari per lo sviluppo web. Esistono molte estensioni relative al Web per VS Code. Anche Flutter supporta VS Code. Quindi, durante la transizione, non è necessario modificare l'IDE. Ci sono estensioni Dart e Flutter per VS Code. Flutter funziona bene anche con Android Studio. Sia Android Studio che VS Code supportano Flutter DevTools. Queste integrazioni IDE completano gli strumenti Flutter.
La maggior parte dei framework JavaScript front-end viene fornita con il loro interfaccia della riga di comando (CLI). Per esempio: CLI angolare, Crea l'app React, Vedi CLI, ecc. Flutter include anche un'esclusiva CLI. Flutter CLI ti consente di costruire, creare e sviluppare progetti Angular. Dispone di comandi per analizzare e testare i progetti Flutter.
Concetti che erano nuovi
Questa sezione parla di concetti specifici di Flutter che sono più semplici o inesistenti nello sviluppo web. Spiega le idee che dovresti tenere a mente quando entri in Flutter.
Come gestire lo scorrimento
Durante lo sviluppo per il Web, il comportamento di scorrimento predefinito viene gestito dai browser Web. Tuttavia, sei libero di personalizzare lo scorrimento con i CSS (usando overflow).
Questo non è il caso di Flutter. I gruppi di widget non scorrono per impostazione predefinita. Quando senti che i gruppi di widget potrebbero traboccare, devi configurare in modo proattivo lo scorrimento.
In Flutter, configuri lo scorrimento utilizzando widget peculiari che consentono lo scorrimento. Per esempio: ListView, SingleChildScrollView, CustomScrollView, ecc. Questi widget scorrevoli ti offrono un ottimo controllo sullo scorrimento. Insieme a CustomScrollView, è possibile configurare meccanismi di scorrimento esperti e complessi all'interno dell'applicazione.
Dalla parte di Flutter, usando ScrollViews è inevitabile. Android e iOS hanno ScrollView ed UIScrollView per gestire lo scorrimento. Flutter ha bisogno di un modo per unificare il rendering e l'esperienza dello sviluppatore usando il suo ScrollViews, anche.
Può essere utile smettere di pensare al flusso della struttura del documento e considerare invece l'applicazione come una tela aperta per i meccanismi di pittura nativi di un dispositivo.
2. Configurare il tuo ambiente di sviluppo
Per creare il sito web più semplice, puoi creare un file con a .html estensione e aprirlo in un browser. Flutter non è così semplice. Per utilizzare Flutter, è necessario aver installato Flutter SDK ed hanno configurato Flutter per un dispositivo di test. Quindi, se vuoi codificare Flutter per Android, devi farlo configurare l'SDK Android. Dovrai anche configurare almeno un dispositivo Android (un emulatore Android o un dispositivo fisico).
Questo è lo stesso caso per i dispositivi Apple (iOS e macOS). Dopo aver installato Flutter su un Mac, devi comunque configurare Xcode prima di andare oltre. Avrai anche bisogno almeno di un simulatore iOS o di un iPhone per testare Flutter su iOS. Anche Flutter per desktop è una configurazione considerevole. In Windows, devi configurare Windows Development SDK con Visual Studio (non VS Code). Su Linux, installerai più pacchetti.
Senza configurazione aggiuntiva, Flutter funziona sui browser. Di conseguenza, potresti trascurare la configurazione aggiuntiva per i dispositivi di destinazione. Nella maggior parte dei casi, utilizzeresti Flutter per lo sviluppo di app mobili. Quindi, vorresti configurare almeno Android o iOS. Flutter viene fornito con il flutter doctor comando. Questo comando segnala lo stato della configurazione di sviluppo. In questo modo, sai su cosa lavorare, nella configurazione, se necessario.
Ciò non significa che lo sviluppo in Flutter sia lento. Flutter è dotato di un motore potente. Il flutter run il comando consente il ricaricamento a caldo sul dispositivo di test durante la codifica. Ma poi dovrai premere R per ricaricare effettivamente a caldo. Questo non è un problema. Estensione del codice VS di Flutter consente il ricaricamento automatico delle modifiche ai file.
3. Imballaggio e distribuzione
La distribuzione di siti Web è più economica e semplice rispetto alla distribuzione di applicazioni mobili. Quando distribuisci siti Web, accedi ad essi tramite nomi di dominio. Questi nomi di dominio vengono generalmente rinnovati ogni anno. Tuttavia, sono facoltativi.
Oggi, molte piattaforme offrono hosting gratuito.
Per esempio: DigitalOcean ti dà un sottodominio gratuito su .ondigitalocean.com.
Puoi utilizzare questi domini se stai creando un sito Web di documentazione. Puoi anche usarli quando non sei preoccupato per il marchio.
Nel mondo di Flutter con le applicazioni mobili, di solito nella maggior parte dei casi distribuisci la tua app in due posizioni.
Devi registrare un account sviluppatore su ciascuna di queste piattaforme. La registrazione di un account sviluppatore richiede una quota o un abbonamento e la verifica dell'identità.
Per App Store, devi iscriverti al programma Apple Developer. Hai bisogno di mantenere un abbonamento annuale di $ 99. Per Google Play, devi creare un pagamento una tantum di $ 25 per conto.
Questi negozi esaminano ogni app recensita prima che venga pubblicata.
Tieni inoltre presente che gli utenti non utilizzano facilmente gli aggiornamenti delle app. Gli utenti devono aggiornare in modo esplicito le applicazioni installate. Ciò è in contrasto con il Web in cui tutti possono semplicemente vedere l'ultima versione distribuita di un sito Web.
La gestione delle applicazioni distribuite è relativamente più impegnativa rispetto alla gestione dei siti Web distribuiti. Tuttavia, questo non dovrebbe spaventarti. Dopotutto, ci sono milioni di app distribuite su entrambi gli store, quindi puoi aggiungere anche le tue.
Ulteriori pensieri sul flutter
Flutter è uno strumento multipiattaforma per creare applicazioni desktop, mobili o web. Le app Flutter sono perfette per i pixel. Flutter dipinge la stessa interfaccia utente su ciascuna app indipendentemente dalla piattaforma di destinazione. Questo perché ogni app Flutter contiene il motore Flutter. Questo motore esegue il rendering del codice dell'interfaccia utente di Flutter. Flutter fornisce una tela per ogni dispositivo e ti consente di dipingere come vuoi. Il motore comunica con la piattaforma di destinazione per gestire eventi e interazioni.
Flutter è efficiente. Ha livelli di prestazioni elevate. Questo perché è costruito con Dart e sfrutta le funzionalità di Dart.
Con questi numerosi vantaggi, Flutter è una buona scelta per molte applicazioni. Le app multipiattaforma consentono di risparmiare tempo e denaro durante la produzione e la manutenzione. Tuttavia, Flutter (e le soluzioni multipiattaforma) potrebbero non essere la scelta ottimale in alcuni casi.
Non utilizzare Flutter se desideri che gli utenti utilizzino gli strumenti di sviluppo della piattaforma con la tua applicazione. Gli strumenti per sviluppatori di piattaforme qui significano strumenti specifici del dispositivo come le opzioni per sviluppatori Android. Include anche strumenti per sviluppatori di browser.
Non utilizzare Flutter per il Web se prevedi che le estensioni del browser interagiscano con il sito Web.
Inoltre, non utilizzare Flutter per siti Web ricchi di contenuti.
Conclusione
Questa è stata una revisione delle competenze che vengono trasferite dallo sviluppo Web front-end al lavoro con Flutter. Abbiamo anche discusso dei concetti di sviluppo di app che devi imparare come sviluppatore web.
Flutter è più semplice per gli sviluppatori Web perché entrambi implicano l'implementazione di interfacce utente. Se avvii Flutter, scoprirai che ti offre una buona esperienza di sviluppo. Prova Flutter! Usalo per creare app mobili e, naturalmente, mostrare ciò che crei.
Saluti!
