Am început ca dezvoltator web front-end și apoi am devenit un fluturare dezvoltator. Cred că au existat câteva concepte care m-au ajutat să adopt Flutter mai ușor. Au existat și câteva concepte noi care erau diferite.
În acest articol, vreau să împărtășesc experiența mea și să inspir pe oricine care se simte paralizat în alegerea unui ecosistem în detrimentul celuilalt, arătând modul în care conceptele se transferă și orice concepte noi pot fi învățate.
Concepte care s-au transferat
Această secțiune arată locurile în care dezvoltarea web front-end și Flutter seamănă. Acesta explică abilitățile pe care le aveți deja și care sunt un avantaj pentru dvs. dacă începeți Flutter.
1. Implementarea interfețelor cu utilizatorul (UI)
Pentru a implementa o anumită interfață de utilizare în web front-end, compuneți elemente HTML și le stilați cu CSS. Pentru a implementa interfețe de utilizare în Flutter, compuneți widget-uri și coafează-le cu proprietăţi.
La fel ca CSS, Color clasa în Dart funcționează cu „rgba” și „hex”. De asemenea, ca și CSS, Flutter folosește pixeli pentru unități de spațiu și dimensiune.
În Flutter, avem clase și enumerari Dart pentru aproape toate proprietățile CSS și valorile acestora. De exemplu:
Flutter are și el Column și Row widget-uri. Acestea sunt echivalentul Flutter pentru display: flex în CSS. Pentru a configura justify-content și align-items stiluri pe care le folosești MainAxisAlignment și CrossAxisAlignment proprietăți. Pentru a regla flex-grow stil, înfășurați widgetul (copilele) afectat(i) al Column/Row, într-un an Expanded or Flexible.
Pentru interfețele de utilizator avansate, Flutter are CustomPaint clasa – este să Flutter ceea ce Canvas API este la dezvoltarea web. CustomPaint vă oferă un pictor care să deseneze orice interfață de utilizare după cum doriți. Veți folosi de obicei CustomPaint când vrei ceva cu adevărat complex. De asemenea, CustomPaint este modalitatea de utilizare atunci când o combinație de widget-uri nu funcționează.
2. Dezvoltarea pentru Multiple Rezoluții ecran
Site-urile web rulează pe browsere, iar aplicațiile mobile rulează pe dispozitive. Ca atare, în timp ce dezvoltați pentru oricare dintre platforme, trebuie să aveți în vedere platforma. Fiecare platformă implementează aceleași caracteristici (camera, locație, notificări etc.) în moduri diferite.
În calitate de dezvoltator web, te gândești la capacitatea de răspuns a site-ului tău. Utilizați interogări media pentru a gestiona cum arată site-ul dvs. pe ecrane mai mici și mai largi.
Trecând de la dezvoltarea web mobilă la Flutter, aveți MediaQuery clasa de ajutor. The MediaQuery clasa vă oferă dispozitivul curent orientation (peisaj sau portret). De asemenea, vă oferă fereastra curentă size, devicePixelRatio, printre alte informații despre dispozitiv. Împreună, aceste valori vă oferă informații despre configurația dispozitivului mobil. Le puteți folosi pentru a schimba cum arată aplicația dvs. mobilă la diferite dimensiuni de ecran.
3. Lucrul cu instrumente de depanare, editori și linie de comandă
Browserele desktop au instrumente de dezvoltare. Aceste instrumente includ un inspector, o consolă, un monitor de rețea etc. Aceste instrumente îmbunătățesc procesul de dezvoltare web. Flutter are și el al lui DevTools. Are inspector widget, depanator, monitor de rețea, printre alte caracteristici.
Suportul IDE este, de asemenea, similar. Visual Studio Code este unul dintre cele mai populare IDE pentru dezvoltarea web. Există multe extensii legate de web pentru VS Code. Flutter acceptă și VS Code. Deci, în timpul tranziției, nu trebuie să schimbați IDE. Există extensii Dart și Flutter pentru VS Code. Flutter funcționează bine și cu Android Studio. Atât Android Studio, cât și VS Code acceptă Flutter DevTools. Aceste integrări IDE fac instrumentele Flutter complete.
Cele mai multe cadre JavaScript front-end vin cu acestea interfață de linie de comandă (CLI). De exemplu: CLI unghiular, Creați aplicația React, Vizualizare CLI, etc. Flutter vine și cu o exclusivitate CLI. Flutter CLI vă permite să construiți, să creați și să dezvoltați proiecte Angular. Are comenzi pentru analiza și testarea proiectelor Flutter.
Concepte care au fost noi
Această secțiune vorbește despre concepte specifice Flutter care sunt mai ușor sau inexistente în dezvoltarea web. Acesta explică ideile pe care ar trebui să le ții cont atunci când intri în Flutter.
Cum să gestionați derularea
Când se dezvoltă pentru web, comportamentul implicit de defilare este gestionat de browserele web. Cu toate acestea, sunteți liber să personalizați derularea cu CSS (folosind overflow).
Acesta nu este cazul în Flutter. Grupurile de widget-uri nu derulează în mod prestabilit. Când simțiți că grupurile de widget-uri s-ar putea depăși, trebuie să configurați în mod proactiv derularea.
În Flutter, configurați defilarea utilizând widget-uri speciale care permit defilarea. De exemplu: ListView, SingleChildScrollView, CustomScrollView, etc. Aceste widget-uri care pot fi derulate vă oferă un control excelent asupra derulării. Cu CustomScrollView, puteți configura mecanisme de derulare experte și complexe în cadrul aplicației.
De partea lui Flutter, folosind ScrollViews este inevitabil. Android și iOS au ScrollView și UIScrollView pentru a gestiona derularea. Flutter are nevoie de o modalitate de a unifica experiența de redare și de dezvoltator prin utilizarea acesteia ScrollViews, de asemenea.
Poate ajuta să nu ne mai gândim la fluxul structurii documentului și, în schimb, să considerați aplicația ca o pânză deschisă pentru mecanismele native de pictare ale unui dispozitiv.
2. Configurarea mediului de dezvoltare
Pentru a crea cel mai simplu site web, puteți crea un fișier cu a .html extensia și deschideți-o într-un browser. Flutter nu este atât de simplu. Pentru a utiliza Flutter, trebuie să aveți instalat Flutter SDK și au configurat Flutter pentru un dispozitiv de testare. Deci, dacă doriți să codificați Flutter pentru Android, trebuie configurați SDK-ul Android. De asemenea, va trebui să configurați cel puțin un dispozitiv Android (un emulator Android sau un dispozitiv fizic).
Acesta este același caz pentru dispozitivele Apple (iOS și macOS). După instalarea Flutter pe un Mac, mai trebuie să configurați Xcode înainte de a merge mai departe. De asemenea, veți avea nevoie de cel puțin un simulator iOS sau un iPhone pentru a testa Flutter pe iOS. Flutter pentru desktop este, de asemenea, o configurație considerabilă. Pe Windows, trebuie să configurați Windows Development SDK cu Visual Studio (nu VS Code). Pe Linux, veți instala mai multe pachete.
Fără o configurare suplimentară, Flutter funcționează pe browsere. Ca rezultat, puteți trece cu vederea configurarea suplimentară pentru dispozitivele țintă. În cele mai multe cazuri, ați folosi Flutter pentru dezvoltarea de aplicații mobile. Prin urmare, ați dori să configurați cel puțin Android sau iOS. Flutter vine cu flutter doctor comanda. Această comandă raportează starea configurației dvs. de dezvoltare. În acest fel, știți la ce să lucrați, în configurație, dacă este necesar.
Acest lucru nu înseamnă că dezvoltarea în Flutter este lentă. Flutter vine cu un motor puternic. The flutter run comanda permite reîncărcarea la cald pe dispozitivul de testare în timpul codificării. Dar apoi va trebui să apăsați R pentru a reîncărca efectiv la cald. Aceasta nu este o problemă. Extensia lui Flutter VS Code permite reîncărcarea automată la cald la modificările fișierelor.
3. Ambalare și implementare
Implementarea site-urilor web este mai ieftină și mai ușoară în comparație cu implementarea aplicațiilor mobile. Când implementați site-uri web, le accesați prin nume de domenii. Aceste nume de domenii sunt de obicei reînnoite anual. Cu toate acestea, acestea sunt opționale.
Astăzi, multe platforme oferă găzduire gratuită.
De exemplu: DigitalOcean vă oferă un subdomeniu gratuit pe .ondigitalocean.com.
Puteți utiliza aceste domenii dacă construiți un site web de documentare. Le poți folosi și atunci când nu ești îngrijorat de branding.
În lumea Flutter cu aplicații mobile, de obicei, în cele mai multe cazuri, implementați aplicația în două locuri.
Trebuie să înregistrați un cont de dezvoltator pe fiecare dintre aceste platforme. Înregistrarea unui cont de dezvoltator necesită o taxă sau un abonament și verificarea identității.
Pentru App Store, trebuie să vă înscrieți în programul Apple Developer. Trebuie să te întreții un abonament anual de 99 USD. Pentru Google Play, trebuie să faceți o plată unică de 25 USD pentru cont.
Aceste magazine examinează fiecare aplicație revizuită înainte de a fi difuzată.
De asemenea, rețineți că utilizatorii nu consumă cu ușurință actualizările aplicațiilor. Utilizatorii trebuie să actualizeze în mod explicit aplicațiile instalate. Acest lucru este în contrast cu web-ul în care toată lumea poate vedea cea mai recentă versiune implementată a unui site web.
Gestionarea aplicațiilor implementate este relativ mai solicitantă decât gestionarea site-urilor web implementate. Cu toate acestea, acest lucru nu ar trebui să vă sperie. La urma urmei, există milioane de aplicații implementate în oricare dintre magazine, astfel încât să le puteți adăuga și pe ale dvs.
Gânduri suplimentare despre flutter
Flutter este un instrument multiplatform pentru a construi aplicații desktop, mobile sau web. Aplicațiile Flutter sunt perfecte pentru pixeli. Flutter pictează aceeași interfață de utilizare pe fiecare aplicație, indiferent de platforma țintă. Acest lucru se datorează faptului că fiecare aplicație Flutter conține motorul Flutter. Acest motor redă codul Flutter UI. Flutter oferă o pânză pentru fiecare dispozitiv și vă permite să pictați după cum doriți. Motorul comunică cu platforma țintă pentru a gestiona evenimente și interacțiuni.
Flutter este eficient. Are niveluri de înaltă performanță. Acest lucru se datorează faptului că este construit cu Dart și folosește caracteristicile lui Dart.
Cu aceste multe beneficii, Flutter este o alegere bună pentru multe aplicații. Aplicațiile multiplatforme economisesc bani și timp în timpul producției și întreținerii. Cu toate acestea, Flutter (și soluțiile multiplatforme) ar putea să nu fie o alegere optimă în unele cazuri.
Nu utilizați Flutter dacă doriți ca utilizatorii să folosească instrumente de dezvoltare a platformei cu aplicația dvs. Instrumentele pentru dezvoltatori de platformă aici înseamnă instrumente specifice dispozitivului, cum ar fi opțiunile pentru dezvoltatori Android. Include, de asemenea, instrumente pentru dezvoltatori de browser.
Nu utilizați Flutter pentru web dacă vă așteptați ca extensiile de browser să interacționeze cu site-ul web.
De asemenea, nu utilizați Flutter pentru site-uri web cu conținut ridicat.
Concluzie
Aceasta a fost o trecere în revistă a abilităților care se transferă de la dezvoltarea web front-end la lucrul cu Flutter. Am discutat, de asemenea, despre conceptele de dezvoltare a aplicațiilor pe care trebuie să le înveți ca dezvoltator web.
Flutter este mai simplu pentru dezvoltatorii web, deoarece ambele implică implementarea interfețelor de utilizare. Dacă porniți Flutter, veți afla că vă oferă o experiență bună de dezvoltator. Încearcă Flutter! Folosiți-l pentru a crea aplicații mobile și, desigur, pentru a prezenta ceea ce creați.
Noroc!
