Hummingbird vs Angular Dart

Hummingbird wurde auf dem Flutter Launch Event am 4. Dezember angekündigt. Ein Projekt, das es uns ermöglichen wird, unsere Flutter-Anwendungen zu vollwertigen Progressive Web Apps zu kompilieren. Also… lohnt sich Angular Dart noch?

Ich werde versuchen, meine bisherigen Erkenntnisse zu teilen, in der Hoffnung, dass meine Erkenntnisse auch anderen helfen.

Die erste Frage ist, ob wir die beiden tatsächlich nutzen können.

Angular Dart
Die aktuelle Version von AngularDart ist 5.2.0. Sie ist stabil (schon seit ein paar Jahren), wird in Googles High-Impact-Projekten und in Projekten auf der ganzen Welt eingesetzt.

Hummingbird
Einige würden behaupten, dass sich Hummingbird derzeit in der Alpha-Phase befindet. Wir haben jedoch nur einen technischen Überblick. Mehr ein Vorschlag als alles andere, in dem das Team die technischen Richtungen, die es in Erwägung zieht, gründlich diskutiert. (HIER: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

Was machen die eigentlich?

Gut, dass Sie fragen! Wir werden versuchen zu verstehen, was Single Page Applications sind, was Progressive Web Applications sind, und uns die erwarteten Ergebnisse von Angular und Hummingbird ansehen. Dies wird uns helfen, die Probleme zu verstehen, die sie zu lösen beabsichtigen.

SPAs vs PWAs

Single Page Applications

Eine Single Page Application (SPA) ist eine Webanwendung oder Website, die mit dem Benutzer interagiert, indem sie die aktuelle Seite dynamisch umschreibt, anstatt ganze neue Seiten von einem Server zu laden. – Wikipedia

Das Zeichen # bewirkt, wenn es in URLs enthalten ist, eine Interaktion innerhalb der Seite, anstatt die Seite neu zu laden. SPAs machen sich diese Browserfunktion zunutze.

Wenn wir zum Beispiel in Wikipedia auf eine Überschrift im Index klicken, wird die Seite nicht neu geladen, sondern der Browser führt uns zu diesem Abschnitt der Seite.

• Gehen Sie zu https://www.wikiwand.com/en/Single-page_application#/Ajax
• Ändern Sie Ajax in Websockets und drücken Sie die Eingabetaste.
• Wird die Seite neu geladen? Nein. Es wird einfach die Konfiguration geändert

SPAs bringen dies auf die nächste Stufe. Die gesamte Anwendung und alle ihre Bildschirme funktionieren von einer einzigen Seite aus, die #basierte URLs für alle ihre Funktionen verwendet.

PWAs

Progressive Web Apps sind Benutzererfahrungen, die die Reichweite des Webs haben und zuverlässig, schnell und ansprechend sind

– developers.google.com

PWAs sind Websites (können normale Websites oder Single-Page-Apps sein), die so optimiert sind, dass sie

• zuverlässig sowohl offline als auch bei unzuverlässigem Internet funktionieren (Lie-Fi)
• schnell sind und für eine hohe wahrgenommene Leistung optimiert sind
• einnehmend – Sie fühlen sich an wie eine native Anwendung, aber nicht weniger.

Was macht AngularDart?
AngularDart oder Angular im Allgemeinen ist ein Framework zum Schreiben von SPAs. Es bietet Entwicklern eine Möglichkeit, SPAs mit Funktionen wie:

• Bidirektionale Datenbindung
• Routing
• Templating
• Direktiven

und vieles mehr zu schreiben. Die eigentliche UI wird immer noch mit HTML + CSS geschrieben. Angular stellt lediglich alles andere zur Verfügung, was es Webentwicklern ermöglicht, ihre SPAs zu entwickeln. Der wichtigste Punkt ist:

• Angular Dart ist kein UI-Framework
• Angular Dart-Apps können PWAs sein oder auch nicht

Was sind dann Angular Web Components?
Sie sind eine Reihe von Material-Design-Komponenten, die vom angular_components-Paket zur Verfügung gestellt werden und als Vorlagen dienen, mit denen man Anwendungen erstellen kann.

• Sie werden im Internet Explorer nicht unterstützt
• Sie sind immer noch in HTML + CSS + Dart geschrieben

Was wird Hummingbird machen?
Bis jetzt sind es nur Spekulationen. Es wird darauf abzielen, jede Flutter-Anwendung in eine PWA zu verwandeln. Es könnte eine SPA sein oder auch nicht (höchstwahrscheinlich wird es eine sein). Dennoch wird es versuchen, alles zu tun, was Flutter tut.

Damit könnten wir das Flutter UI Framework verwenden, alle Flutter SDK-Funktionen wie Zustandsmanagement-Widgets und so weiter… und mit einem Klick eine PWA neben den Android- und iOS-Apps erstellen, die wir bereits haben!

Es gibt viele Herausforderungen auf dem Weg, aber wenn Google dies realisiert, wird es das A und O der SDKs sein.

Der Stand der All-Dart-Apps

Lassen Sie uns versuchen, den Unterschied zwischen Flutter + AngularDart und Flutter + Hummingbird Kombinationen zu verstehen, wenn wir eine AllDart-Set von Anwendungen für Web und Native zu schreiben.

DIE GEGENWART: Flutter + Angular Dart
Für das Schreiben einer solchen Anwendung werden wir brauchen:

• Schreiben Sie ein Kernpaket, das die gesamte Geschäftslogik enthält, und stellen Sie sicher, dass es keine Angular- oder Flutter-Abhängigkeiten hat, und dass alle diese Abhängigkeiten von außen injiziert werden
• Schreiben Sie die Angular-PWA, die den Kern für alle Funktionalitäten abonniert
  * UI mit HTML + CSS oder Komposition von Angular-Komponenten
  * Routing, Zustandsverwaltung mit der Angular-Methode
• Schreiben Sie eine Flutter-Anwendung, die für alle Funktionalitäten denselben Kern abonniert
  * UI mit dem Flutter-UI-Framework
  * Routing, Zustandsverwaltung usw. mit der Flutter-Methode
• Kompilieren Sie aus dem Flutter-Projekt für iOS und Android
• Kompilieren Sie aus dem Angular-Projekt für das Web

Verringert das Code-Sharing den Arbeitsaufwand?
Die gemeinsame Nutzung von Code reduziert zwar definitiv die „Menge an Code“, aber meiner Erfahrung nach nicht wirklich die Menge an Arbeit, die erledigt werden muss. Es verlangt von mir, dass ich den Prozess viel sorgfältiger durchdenke.

Welche Vorteile ergeben sich daraus?

• Der Code ist sauberer und die Architektur besser
• Ich bin dazu gezwungen, und es ist jetzt einfacher für mich, die Funktionsparität zwischen den Plattformen zu erhalten.

DIE ZUKUNFT: Flutter + Hummingbird
Um eine solche Anwendung zu schreiben, müssen wir:

• Eine Flutter-Anwendung schreiben
  * UI mit dem Flutter-Framework
  * Routing, State Management etc. auf die geflutterte Art
• Auf drei verschiedenen Plattformen kompilieren
• Erledigt.

Ist es weniger Arbeit?
Hell yeah!

Abschluss

Das ist es. Eine Aufschlüsselung dessen, was wir über Flutter, Angular Dart, Hummingbird und die gemeinsame Nutzung von Code wissen.

Wenn Sie gerade etwas entwickeln…
Wählen Sie Flutter + Angular Dart. Es ist nicht so einfach wie der Traum von Hummingbird, aber immer noch der beste Weg.

Hummingbird ist im Moment ein ferner Traum. Ein Projekt, von dem wir auf jeden Fall hoffen sollten, dass es eines Tages verwirklicht wird und das wir mit all unseren Kräften unterstützen sollten, aber Dilli abhi door hai (diese Zukunft ist weit entfernt).