Stranger Than Usual

Flutter Web: Schlechte Idee

In meinem vorherigen Projekt auf der Arbeit war das Frontend eine Flutter-Web-App. Der Grund dafür war, dass der Kunde für alle Frontends Flutter verwendet, also auch für unsere App. Das war übrigens derselbe Kunde, der überall C# verwendet (ugh).

Flutter fing an als ein Framework für Mobile-Apps. Und zwar eins, in dem man Apps nur ein Mal schreiben musste, um sie dann sowohl fürAndroid als auch für iOS verwenden zu können. Den Wunsch danach kann ich verstehen. Um das zu erreichen, verwendet Flutter auch nicht die nativen Bibliotheken der beiden Betriebssysteme, sondern re-implementiert die komplette UI-Bibliothek (passt sich aber vom Aussehen her an das jeweilige System an). Man kann hier geteilter Meinung zu Flutter sein (ich finde es grundsätzlich nicht so schlimm, aber vermutlich hätte man denselben Effekt auch mit einer PWA haben können), aber immerhin erfüllt es seine Aufgabe recht brauchbar.

Aber dann ist jemand auf die Idee gekommen, Flutter auch zur Entwicklung von Web-Anwendungen einzusetzen. Und hier beginnen für mich die Schmerzen. Flutter Web verfolgt nämlich denselben Ansatz wie auf Android und iOS: Alles wird neu gemacht, es werden keine nativen Elemente verwendet. Und im Web bedeutet das: Kein HTML (bzw. das HTML nur als Rahmen), alle UI-Inhalte werden in ein <canvas>-Element gezeichnet.

Mit anderen Worten: Man wirft alle native Browser-Funktionalität weg (mehr noch als bei anderen One-Page-Apps) und muss jede Kleinigkeit mit in den ausgelieferten Code packen. Und das ist nicht wenig. Eine einfache „Hello World“-App ist schon gut 9 MiB groß, wenn sie optimiert wurde. Im Developer-Modus sind es eher 100 MiB. Und damit sind einige Sachen noch nicht enthalten. Zum Beispiel:

  • SVG-Rendering: Dafür muss man eine gesonderte Abhängigkeit einziehen
  • relative Stylegrößen wie em in CSS
  • Hyperlinks. Ja, Hyperlinks. Das Rückrat des Webs. Geht nicht ohne halbwegs komplizierten Code.

Andere Funktionen, die sonst nativ mit dem Browser kommen, wurden auch re-implementiert (irgendwie muss man ja auf die neun Megabyte kommen):

  • Navigation
  • UI-Rendering (wie schon erwähnt im Canvas)
  • responsiveness
  • Layout
  • Barrierefreiheit (auf dem Canvas ein großes Problem, man muss eine Menge manuellen Aufwand betreiben, um nur grundlegende Barrierefreiheitsfunktionen zu bekommen)
  • Form handling
  • Textauswahl (zum Kopieren)
  • Scrolling (!)
  • je nach Betriebssystemeinstellungen ist sogar das Rendern von Schriftarten ein Problem

Alles in Allem erinnert das an die Flash-Apps der späten 2000er. Wo Leute aus irgendeinem Grund die ganze Website in Flash geschrieben haben, anstatt in HTML. Groß, langsam, Kernfunktionen des Browser werden ignoriert. Und alles, damit man eine App nur ein Mal schreiben muss. Wisst ihr was? Genau dafür gibt es Progressive Web Apps (PWAs). Aber nein, hier muss das Rad unbedingt neu erfunden werden, es erzeugt gewaltige Mengen an JS-Code um ein schlechteres Ergebnis zu bekommn.

Ich bin froh, dass ich damit nicht mehr arbeiten muss (das Projekt selber war allerdings ganz interessant, da wäre ich auch geblieben). Ich kann nur empfehlen: Nutzt Flutter nicht für Web-Apps. Und grundsätzlich: Wenn ihr eine App wollte, die auf verschiedensten (insbesondere Android und iOS) Systemen läuft, überlegt euch, ob eine PWA vielleicht eine Option wäre.