Hummingbird vs Angular Dart

Hummingbird byl oznámen 4. prosince při příležitosti zahájení akce Flutter. Projekt, který nám umožní kompilovat naše flutterové aplikace do plnohodnotných progresivních webových aplikací. Takže… vyplatí se ještě Angular Dart?“

Pokusím se podělit o to, kolik jsem toho zatím nasbíral, a doufám, že mé poznatky pomohou i ostatním.

První otázkou je, zda je můžeme skutečně použít.

Angular Dart
Současná verze AngularDart je 5.2.0. Je stabilní(už několik let), používá se v projektech Googlu s velkým dopadem a v projektech po celém světě.

Hummingbird
Někteří by tvrdili, že hummingbird je v současné době ve své alfa verzi. Máme však k dispozici pouze technický přehled. Spíše návrh než cokoli jiného, kde tým důkladně probral technické směry, o kterých uvažuje. (ZDE: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

Co vlastně dělají?

Jsem rád, že se ptáte! Pokusíme se pochopit, co jsou to Single Page Applications, co jsou to Progressive Web Applications, a podíváme se na očekávané výstupy Angularu a Hummingbirdu. To nám pomůže pochopit problémy, které chtějí řešit.

SPA vs PWA

Jednostránkové aplikace

Jednostránková aplikace (SPA) je webová aplikace nebo web, který komunikuje s uživatelem tak, že dynamicky přepisuje aktuální stránku, místo aby načítal celé nové stránky ze serveru. – Wikipedie

Znak #, je-li obsažen v adresách URL, místo aby způsobil opětovné načtení stránky, způsobí určitou interakci v rámci stránky. SPA tuto vlastnost prohlížeče využívají.

Příklad ve Wikipedii, pokud klikneme na nadpis v rejstříku, místo aby se stránka znovu načetla, nás prohlížeč přesune na danou část stránky.

• Přejděte na https://www.wikiwand.com/en/Single-page_application#/Ajax
• Změňte Ajax na Websockets a stiskněte enter.
• Načte se stránka znovu? Ne. jednoduše se změní konfigurace

SPA se dostávají na další úroveň. Celá aplikace a všechny její obrazovky fungují z jediné stránky, která pro všechny své funkce používá #založené adresy URL.

PWA

Progresivní webové aplikace jsou uživatelské zážitky, které mají dosah webu a jsou spolehlivé, rychlé a poutavé

– developers.google.com

PWA jsou webové stránky (mohou to být běžné webové stránky nebo jednostránkové aplikace), které jsou optimalizovány určitým způsobem tak, aby

• Fungovaly spolehlivě offline i při nespolehlivém internetu (Lie-Fi)
• Jsou rychlé, optimalizované pro vysoký vnímaný výkon
• Zajímavé – působí jako nativní aplikace a ne méně.

Co umí AngularDart?
AngularDart nebo obecně Angular je framework pro psaní SPA. Vývojářům poskytuje způsob psaní SPA s funkcemi, jako jsou:

• Obousměrná vazba dat
• Routing
• Templování
• Direktivy

A mnoho dalšího. Vlastní uživatelské rozhraní je stále napsáno pomocí HTML + CSS. Angular pouze poskytuje vše ostatní, co umožňuje webovým vývojářům vyvíjet jejich SPA. Hlavním bodem je:

• Angular Dart není UI Framework
• Angular Dart aplikace mohou, ale nemusí být PWA

Co jsou tedy Angular Web Components?
Je to hromada komponent material designu poskytovaných balíkem angular_components, které fungují jako šablony pro vytváření aplikací.

• Nejsou podporovány v Internet Exploreru
• Jsou stále napsány v HTML + CSS + Dart

Co bude dělat Hummingbird?
Zatím jsou to jen spekulace. Jeho cílem bude převést jakoukoli aplikaci Flutter na PWA. Může, ale nemusí to být SPA(nejspíš bude). Přesto se bude snažit dělat všechno, co umí Flutter.

Mohli bychom s ním používat Flutter UI Framework, využívat všechny funkce Flutter SDK, jako jsou widgety pro správu stavu a tak dále… a jedním kliknutím vyrobit PWA vedle aplikací pro Android a iOS, které už máme!

Na cestě je mnoho výzev, ale pokud to Google zrealizuje, bude to be all of SDK.

Stav All-Dart aplikací

Zkusme pochopit rozdíl mezi kombinací Flutter + AngularDart a Flutter + Hummingbird, pokud bychom měli napsat all-dartovou sadu aplikací pro web a nativní prostředí.

SOUČASNOST: Flutter + Angular Dart
Pro napsání takové aplikace budeme potřebovat:

• Napsat balíček jádra obsahující veškerou obchodní logiku a zajistit, aby neměl závislosti na angularu nebo flutteru a všechny takové závislosti do něj byly injektovány zvenčí
• Napsat angulární PWA, které se přihlásí k jádru pro všechny funkce
  * Uživatelské rozhraní s HTML + CSS nebo skládání angulárních komponent
  * Směrování, správa stavu s angulárním způsobem řešení
• Napsat Flutter aplikaci přihlašující se ke stejnému jádru pro všechny funkcionality
  * UI s flutter UI frameworkem
  * Routing, správa stavu atd. s flutter způsobem řešení
• Kompilovat do iOS a Android z flutter projektu
• Kompilovat do webu z angulárního projektu

Snižuje sdílení kódu množství práce?
Ačkoli sdílení kódu rozhodně snižuje „množství kódu“, podle mých zkušeností ve skutečnosti nesnížilo množství práce, kterou je třeba udělat. Vyžaduje to, abych v průběhu procesu mnohem více přemýšlel.

Jaké jsou tedy výhody?

• Kód je čistší a architektura je lepší
• Jsem nucen a je pro mě nyní snazší udržet paritu funkcí napříč platformami.

BUDOUCNOST: Flutter + Hummingbird
Pro napsání takové aplikace budeme muset:

• Napsat flutterovou aplikaci
  * Uživatelské rozhraní s flutterovým frameworkem
  * Směrování, správa stavů atd. flutterovým způsobem
• Kompilovat na třech různých platformách
• Dokončeno.

Je s tím méně práce?“
Ano!“

Závěr

Tady to je. Rozbor toho, co víme o flutteru, angular dart, hummingbirdu a vzájemném sdílení kódu.

Pokud právě něco vyvíjíte…
Vyberte si flutter + angular dart. Není to tak snadné jako sen o hummingbirdu, ale stále je to nejlepší cesta.

Hummingbird je zatím vzdálený sen. Projekt, u kterého bychom rozhodně měli doufat, že se jednou uskuteční, a podporovat ho ze všech sil, ale Dilli abhi door hai(ta budoucnost je vzdálená).