Hummingbird vs Angular Dart

A Hummingbird bejelentésre került a december 4-i flutter launch eseményen. Egy projekt, amely lehetővé teszi, hogy a flutter alkalmazásainkat teljes értékű Progressive Web Apps-okká állítsuk össze. Szóval… megéri-e még az Angular Dart?

Megpróbálom megosztani, hogy mennyi mindent gyűjtöttem eddig, remélve, hogy a megállapításaim másoknak is segítenek.

Az első kérdés az, hogy valóban tudjuk-e használni a kettőt vagy sem.

Angular Dart
Az AngularDart jelenlegi verziója az 5.2.0. Stabil(már pár éve az), a Google nagy hatású projektjeiben és a világ különböző projektjeiben használják.

Hummingbird
Mások azt állítják, hogy a hummingbird jelenleg alfa állapotban van. Azonban csak egy technikai áttekintés áll rendelkezésünkre. Inkább egy javaslat, mint bármi más, ahol a csapat alaposan megvitatta az általuk fontolgatott technikai irányokat. (ITT: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

Mit csinálnak valójában?

Örülök, hogy megkérdezted! Megpróbáljuk megérteni, hogy mik azok az egyoldalas alkalmazások, mik azok a progresszív webes alkalmazások, és megnézzük az Angular és a Hummingbird várható kimeneteit. Ez segít megérteni, hogy milyen problémákat kívánnak megoldani.

SPA-k vs. PWA-k

Egyoldalas alkalmazások

Az egyoldalas alkalmazás (SPA) olyan webes alkalmazás vagy weboldal, amely úgy lép interakcióba a felhasználóval, hogy dinamikusan átírja az aktuális oldalt, nem pedig teljes új oldalakat tölt be a szerverről. – Wikipedia

A # karakter, ha az URL-ekben szerepel, ahelyett, hogy az oldal újratöltését okozná, az oldalon belül valamilyen interakciót vált ki. Az SPA-k kihasználják ezt a böngészőfunkciót.

A Wikipédiában például, ha az indexben egy címszóra kattintunk, az oldal újratöltése helyett a böngésző az oldal adott részébe visz minket.

• Menjünk a https://www.wikiwand.com/en/Single-page_application#/Ajax
• Változtassuk a Ajax-t Websockets-ra, és nyomjuk meg az Entert.
• Újratöltődik az oldal? Nem. Egyszerűen megváltoztatja a konfigurációt

Az SPÁ-k ezt a következő szintre emelik. Az egész alkalmazás és minden képernyője egyetlen oldalról működik, a #alapú URL-eket használva minden funkciójukhoz.

PWA-k

A progresszív webes alkalmazások olyan felhasználói élmények, amelyek a web hatósugarával rendelkeznek, és megbízhatóak, gyorsak és vonzóak

– developers.google.com

A PWA-k olyan weboldalak (lehetnek hagyományos weboldalak vagy egyoldalas alkalmazások), amelyeket bizonyos módon úgy optimalizáltak, hogy

• megbízhatóan működjenek offline és megbízhatatlan internet mellett is (Lie-Fi)
• gyorsak, nagy érzékelhető teljesítményre optimalizáltak
• Megnyerő – Olyan érzés, mint egy natív alkalmazás, és nem kevesebb.

Mire képes az AngularDart?
AngularDart vagy általában az Angular egy keretrendszer SPA-k írására. Olyan funkciókkal látja el a fejlesztőket az SPA-k írásához, mint:

• Bidirekcionális adatkötés
• Routing
• Templating
• Directives

És még sok más. A tényleges felhasználói felület továbbra is HTML + CSS segítségével íródik. Az Angular csupán minden mást biztosít, ami lehetővé teszi a webfejlesztők számára az SPA-k fejlesztését. A lényeg:

• Angular Dart nem egy UI keretrendszer
• Angular Dart alkalmazások lehetnek vagy nem lehetnek PWA-k

Mi is az Angular Web Components akkor?
Ez egy csomó material design komponens, amit a angular_components csomag biztosít, amelyek sablonként működnek, hogy alkalmazásokat építsünk belőlük.

• Az Internet Explorer nem támogatja őket
• Még mindig HTML + CSS + Dart nyelven íródnak

Mit fog csinálni a Hummingbird?
Egyelőre csak találgatások. A célja az lesz, hogy bármilyen flutter alkalmazást PWA-vá alakítson át. Lehet vagy nem lehet SPA(nagy valószínűséggel az lesz). Mégis megpróbál majd mindent csinálni, amit a flutter csinál.

Megpróbálhatjuk vele a Flutter UI Framework-et, használhatjuk az összes flutter SDK funkciót, mint például az állapotkezelő widgetek és minden… és egy kattintással készíthetünk egy PWA-t a már meglévő Android és iOS alkalmazások mellé!

Még sok kihívás van az úton, de ha a Google ezt megvalósítja, akkor ez lesz az SDK-k mindene.

Az All-Dart alkalmazások állapota

Próbáljuk megérteni a Flutter + AngularDart és Flutter + Hummingbird kombinációk közötti különbséget, ha egy all-dart alkalmazáskészletet webes és natív alkalmazásokhoz.

A JELENBEN: Flutter + Angular Dart
Egy ilyen alkalmazás megírásához szükségünk lesz a következőkre:

• Az összes üzleti logikát tartalmazó core csomag megírása, biztosítva, hogy ne legyenek angular vagy flutter függőségek, és minden ilyen függőséget kívülről injektáljunk bele
• A magra feliratkozó Angular PWA megírása minden funkcionalitáshoz
  * UI HTML + CSS-el vagy angular komponensek összeállítása
  * Routing, állapotkezelés az Angular módszerével
• Flutter alkalmazást írni, amely minden funkcionalitás tekintetében ugyanarra a magra iratkozik fel
  * UI a flutter UI keretrendszerrel
  * Routing, állapotkezelés stb. a flutter módszerével
• Flutter projektből iOS-re és Androidra fordítani
• Angular projektből webre fordítani

A kódmegosztás csökkenti a munka mennyiségét?
Míg a kódmegosztás határozottan csökkenti a “kód mennyiségét”, az én tapasztalatom szerint nem igazán csökkentette az elvégzendő munka mennyiségét. Sokkal több átgondoltságot igényel tőlem a folyamat során.

Mi az előnye akkor?

• Tisztább a kód és jobb az architektúra
• Kénytelen vagyok, és most már könnyebben tudom fenntartani a funkcióparitást a különböző platformokon.

A JÖVŐ: Flutter + Hummingbird
Egy ilyen alkalmazás megírásához szükségünk lesz:

• Flutter alkalmazást írni
  * UI a flutter keretrendszerrel
  * Routing, State Management stb. flutter módon
• Három különböző platformon fordítani
• Kész.

Kevesebb munka?
Hell yeah!

Következtetés

Ez az. Egy bontás arról, amit a flutterről, angular dartról, hummingbirdről és az egymással való kódmegosztásról tudunk.

Ha most fejlesztesz valamit…
Válaszd a fluttert + angular dartot. Nem olyan egyszerű, mint a hummingbird álma, de még mindig ez a legjobb út.

A hummingbird jelenleg egy távoli álom. Egy projekt, aminek egy napon valóra válásában mindenképpen reménykednünk kell, és minden erőnkkel támogatnunk kell, de Dilli abhi door hai (ez a jövő távoli).