Hummingbird vs Angular Dart

Hummingbird blev annonceret ved flutter-lanceringseventet den 4. december. Et projekt, der vil give os mulighed for at kompilere vores flutter-applikationer til fuldgyldige Progressive Web Apps. Så… er Angular Dart stadig det værd?

Jeg vil forsøge at dele, hvor meget jeg har samlet op indtil videre, i håb om at mine resultater også hjælper andre.

Det første spørgsmål er, om vi rent faktisk kan bruge de to.

Angular Dart
Den nuværende version af AngularDart er 5.2.0. Den er stabil(har været det i et par år nu), bruges i Googles projekter med stor gennemslagskraft og i projekter rundt om i verden.

Hummingbird
Nogle vil påstå, at hummingbird i øjeblikket er i sin alfafase. Vi har dog kun et teknisk overblik. Mere et forslag end noget andet, hvor holdet grundigt har diskuteret de tekniske retninger, som de overvejer. (HER: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

Hvad gør de egentlig?

Glad du spørger! Vi vil forsøge at forstå, hvad Single Page Applications er, hvad Progressive Web Applications er, og se på de forventede resultater af Angular og Hummingbird. Dette vil hjælpe os med at forstå de problemer, de har til hensigt at løse.

SPA’er vs PWA’er

Single Page Applications

En single page application (SPA) er en webapplikation eller et websted, der interagerer med brugeren ved dynamisk at omskrive den aktuelle side i stedet for at indlæse hele nye sider fra en server. – Wikipedia

Tegnet # vil, når det indgår i URL’er, i stedet for at få siden til at blive genindlæst, medføre en vis interaktion på siden. SPA’er gør brug af denne browserfunktion.

For eksempel, hvis vi i Wikipedia klikker på en overskrift i indekset, fører browseren os i stedet for at siden genindlæses til det pågældende afsnit af siden.

• Gå til https://www.wikiwand.com/en/Single-page_application#/Ajax
• Ændre Ajax til Websockets og trykke på enter.
• Vil siden genindlæses? Nej. Den vil blot ændre konfigurationen

SPA’er tager dette til det næste niveau. Hele applikationen og alle dens skærme fungerer fra en enkelt side ved hjælp af #baserede URL’er til alle deres funktionaliteter.

PWA’er

Progressive Web Apps er brugeroplevelser, der har samme rækkevidde som internettet, og som er pålidelige, hurtige og engagerende

– developers.google.com

PWA’er er websteder (kan være almindelige websteder eller apps med en enkelt side), der er optimeret på en bestemt måde, så de

• Funktionerer pålideligt både offline og med upålideligt internet (Lie-Fi)
• Er hurtige, optimeret til høj opfattet ydeevne
• Engagerende – føles som en native applikation og ikke mindre.

Hvad gør AngularDart?
AngularDart eller Angular generelt er en ramme til at skrive SPA’er. Det giver udviklere en måde at skrive SPA’er på med funktioner som:

• Bidirectional Data Binding
• Routing
• Templating
• Directives

Og meget mere. Den egentlige brugergrænseflade er stadig skrevet med HTML + CSS. Angular leverer blot alt det andet, der gør det muligt for webudviklere at udvikle deres SPA’er. Hovedpointen er:

• Angular Dart er ikke en UI Framework
• Angular Dart-apps kan eller kan ikke være PWA’er

Hvad er Angular Web Components så?
De er en masse material design-komponenter, der leveres af angular_components-pakken, der fungerer som skabeloner til at bygge applikationer med.

• De understøttes ikke i Internet Explorer
• De er stadig skrevet i HTML + CSS + Dart

Hvad vil Hummingbird gøre?
Så vidt vides er det kun spekulationer. Det vil sigte mod at konvertere enhver flutter-applikation til en PWA. Det kunne eller kunne ikke være en SPA(det bliver det højst sandsynligt). Men det vil forsøge at gøre alt det, som Flutter gør.

Med det kan vi bruge Flutter UI Framework, bruge alle Flutter SDK-funktionerne, f.eks. state management widgets og det hele … og med et enkelt klik producere en PWA ved siden af de Android- og iOS-apps, som vi allerede har!

Der er mange udfordringer undervejs, men hvis Google indser dette, vil det være SDK’ernes alfa og omega.

Status for All-Dart Apps

Lad os prøve at forstå forskellen mellem Flutter + AngularDart og Flutter + Hummingbird kombinationer, hvis vi skulle skrive en all-dart sæt af applikationer til web og native.

NUTIDEN: Flutter + AngularDart
For at skrive en sådan applikation vil vi være nødt til at:

• Skriv en kernepakke, der indeholder al forretningslogikken, og sørg for, at den ikke har angular- eller flutter-afhængigheder, og at alle sådanne afhængigheder injiceres til den udefra
• Skriv Angular PWA’en, der abonnerer på kernen for alle funktionaliteter
  * UI med HTML + CSS eller sammensætning af angular-komponenter
  * Routing, tilstandsstyring med Angular-metoden
• Skriv en Flutter-applikation, der abonnerer på den samme kerne for alle funktionaliteter
  * UI med flutter UI-rammen
  * Routing, tilstandsstyring osv. med flutter-metoden
• Kompilér til iOS og Android fra flutter-projektet
• Kompilér til web fra Angular-projektet

Får man mindre arbejde ved at dele kode?
Mens kodedeling helt klart reducerer “mængden af kode”, har det efter min erfaring ikke rigtig reduceret mængden af arbejde, der skal udføres. Det kræver, at jeg er meget mere gennemtænkt gennem processen.

Hvad er fordelene så?

• Koden er renere, og arkitekturen er bedre
• Jeg er tvunget til det, og det er lettere for mig at opretholde funktionsparitet på tværs af platforme nu.

Fremtiden: Flutter + Hummingbird
For at skrive en sådan applikation skal vi:

• Skriv en flutter-applikation
  * UI med flutter-rammen
  * Routing, State Management osv. på den flutte måde
• Kompilere på tre forskellige platforme
• Gjort.

Er det mindre arbejde?
Hell yeah!

Konklusion

Der er den. En opgørelse over, hvad vi ved om flutter, angular dart, hummingbird og deling af kode med hinanden.

Hvis du er i gang med at udvikle noget lige nu…
Gå efter flutter + angular dart. Det er ikke så nemt som hummingbird-drømmen, men er stadig den bedste vej at gå.

Hummingbird er fra nu af en fjern drøm. Et projekt, som vi bestemt bør håbe på at få gennemført en dag og støtte med alle vores kræfter, men Dilli abhi door hai (den fremtid er fjern).