Die Flutter Entwickler haben Anfang März in der Flutter Engage Keynote angekündigt, dass ab sofort Flutter Web production-ready ist. Was heißt das und wie funktioniert Flutter Web genau?
Flutter reiht sich selbst neben React und Angluar als weiteres Web-Framework ein und sieht sich dabei direkt mit in der ersten Reihe der aktuellen großen Frameworks.
Wie funktioniert Flutter Web?
Flutter Web kann in mehreren Wegen ausgeliefert werden. Der wichtigste Schritt ist aber, dass Dart nicht mehr in eine Maschinensprache übersetzt wird sondern in Javascript. Dabei wird nicht alles in HTML, CSS und Javascript übersetzt sondern eine Mischung aus DOM, Canvas und WebAssembly verwendet. Kompiliert man seine Flutter Dart Anwendung für das Web sind am Ende optimierte Javascript Dateien und eine index.html zu finden. Diese können auf einen beliebigen Web-Server kopiert und die Anwendung direkt angesehen werden. In diesem Punkt unterscheidet Flutter Web sich erst einmal nicht von allen anderen Frameworks.
Flutter Web Renderer
Mit Flutter Web kann man zwischen zwei unterschiedlichen Web Renderer wählen:
HTML Renderer
CanvasKit Renderer
HTML Renderer
Der HTML Renderer ist eine Kombination aus HTML Elementen, CSS und SVG Canvas Teilen. Der initiale Download um die Web-Anwendung zu starten ist hier geringer und die Anwendung wird dadurch schneller geladen.
CanvasKitRenderer
Dieser Renderer entspricht den bisher gewohnten Renderern für Mobile und Desktop. Hier wird ausschließlich der Canvas ohne DOM und HTML Elementen verwendet. Einmal geladen verspricht es extrem schnelle Performance und pixelgenaues positionieren der UI-Elemente. Allerdings muss man dafür erst einmal 2MB herunterladen.
Vor allem der CanvasKitRenderer ist beeindruckend wie man auch sehr schön in der Flutterplasma Demo sehen kann (https://flutterplasma.dev/showroom)
Mit den Kommandozeilen Parameter --web-renderer html und --web-renderer canvaskitwird entschieden welcher Renderer verwendet werden soll. Mehr dazu auch in der Web Renderer Doku.
Spezifische Web-Unterstützung
Im Web ist man gewohnt, dass man auf verschiedene Seite direkt mit einer URL springen. Hier unterstützt Flutter Web die schon von Single Page Apps gewohnte Hash Notation. Mehr dazu auch in der URL Strategie Doku.
Auch kann man innerhalb der App mit kopierbaren Links auf andere Seiten und Komponenten verweisen aber auch auf externe andere Webseiten.
Textblöcke markieren und Formular Autofill sind auch direkt verfügbar um einer gewohnten Web-Anwendung näher zu kommen.
Flutter Web ausprobieren
Den schnellsten Eindruck erhält man indem man die Beispiele live im Browser ausprobiert. Dazu lohnt es sich als erstes die offizielle Flutter Gallery anzusehen. Neben den Standard-Widgets kann man hier auch einen Eindruck einer kompletten Anwendung erhalten.
Eine noch viel größere Auswahl an Beispielen findet man auf den Flutter Samples.
Wo kann oder sollte man Flutter einsetzen?
Die interessanteste Frage ist aber wo genau sich Flutter Web lohnt und wo man lieber auf die bisherigen Frameworks setzen sollte.
Flutter Web eignet sich besonders für interaktive Enterprise Anwendungen. Vor allem der Ansatz des CanvasKit lässt der Vorstellung keine Grenzen.
Ein Beispiel für so eine Anwendung wurde auf der Flutter Engage vorgestellt und kann man live auf code.irobot.com ansehen:
Für Text-basierte Webseiten auf das gesamte Internet und sämtliche Verlinkungen basieren sollte man lieber noch eine ganze Weile auf die bisherigen Frameworks oder Technologien mit Standard HTML und CSS setzen. Allerdings hat man das gleiche vor 5 Jahren von AngularJS gesagt…