Warum Sie Ihre WebApp vielleicht in Canvas statt HTML bauen sollten
You might want to build your WebApp in Canvas instead of HTML
Große Anwendungen wie Google Docs, Google Sheets, Excel Online, Canva und Miro setzen für ihre Kernfunktionen auf das Canvas-Element statt auf HTML. Der Autor erklärt, warum Canvas für leistungskritische Apps die bessere Wahl sein kann: mehr Geschwindigkeit, Kontrolle und Konsistenz. Er räumt aber auch ein, dass HTML für die meisten Web-Apps die bessere Wahl bleibt und nennt konkrete Anwendungsfälle, in denen Canvas überlegen ist. Zudem gibt er praktische Tipps für die Implementierung, etwa zur Verwaltung des Renderings, zur Skalierung auf verschiedene Bildschirmauflösungen und zur Ereignisbehandlung.
Wählen Sie Canvas nicht nur, weil es sich schnell anhört. Wählen Sie es, wenn Ihre Oberfläche sich nicht mehr wie ein Dokument verhält, sondern eher wie eine Szene.
- josephg
Bitte tut das nicht.
Native Bedienelemente haben dutzende bis hunderte subtile UI-Interaktionen. Betrachten wir ein Texteingabefeld. Auf macOS gibt es Textkürzel – cmd+A zum Alles auswählen. cmd+Pfeil links/rechts zum nächsten oder vorherigen Wort. Bild auf / Bild ab. Pos1 / Ende. Rechtschreibprüfung. Ein Rechtsklick-Menü mit etwa 10 weiteren Optionen, einschließlich OS-basierter Textdienste. Das Tippen auf ein Texteingabefeld auf iOS oder Android öffnet die native Bildschirmtastatur, die in den Systemeinstellungen konfiguriert ist. Mit jeder größeren OS-Version ändert sich die UI auf kleine und subtile Weise.
Man kann diese Funktionalität einfach nicht im Webbrowser neu implementieren. Die Browser-APIs erlauben es nicht, viele der benötigten Tastaturkürzel abzufangen. Man hat keinen Zugriff auf die macOS-Textdienste oder die native iOS-Tastatur-UI.
Manche Leute versuchen, das im Browser nachzubauen, aber es fühlt sich immer schrecklich an. Fast nativ, aber träge. Nichts sieht ganz richtig aus. Man kann Text auf der Seite nicht richtig auswählen. Schriften werden leicht falsch gerendert. Ich habe Muskelgedächtnis für Tastaturkürzel, die nicht funktionieren. Ich hasse es.
- dinkelberg
Die Entwicklerwerkzeuge im Browser werden viel nutzloser, wenn man alles in einem Canvas zeichnet. Es wird traurig sein, wenn alle anfangen, Frameworks zu verwenden, die auf Canvases zeichnen. Womöglich trauriger als bei Webassembly. Man könnte wahrscheinlich neue Entwicklerwerkzeuge für diese Frameworks schreiben.
Ich stelle mir auch vor, dass dies ein großer Rückschlag für die Barrierefreiheit im Web sein wird.
- groomlake
Mich wundert immer, wie Google, Microsoft und Co. ihre Web-Apps bauen – angesichts der Tatsache, dass sie auf jedem Computer gut funktionieren müssen, von einer Top-Maschine bis zu einer lahme Kiste.
Meiner Erfahrung nach sind Microsoft-Web-Apps (zu denen jetzt viele ihrer Desktop-Apps gehören) eher träge. Sogar die Copilot-Chat-Website. Wie schwer kann es sein, eine Chatbox und ein Sitzungsprotokoll nicht träge zu machen?
- efficax
Kein Wort hier über Barrierefreiheit, natürlich. Wenn man blind ist, ist man auch für das Canvas blind, ohne viel Arbeit; es ist viel einfacher, das DOM barrierefrei zu machen.
- lisperforlife
Ich nenne das das Bluebox-Problem. Als ich bei SAP arbeitete, gab es dieses Steuerelement namens Bluebox, das einen Browser (shdocvw) in eine C++/MFC-App einbettete. Fast jeder nervige UI-Bug kam von diesem Steuerelement. Jetzt sehe ich dasselbe in die andere Richtung. Alle fünf Jahre kommen wir auf die glorreiche Idee, den Browser als Verteilungs-Engine für eine UI-Oberfläche zu nutzen, die von einer Box gerendert wird. Das hat historisch noch nie funktioniert. Ich möchte nur an Applets, ActiveX-Steuerelemente, Flash, Flex (auch Flash), Silverlight, Flutter ... und jetzt das erinnern. Das Problem sind Entwicklerwerkzeuge, Screenreader, Browsererweiterungen und all die anderen kleinen Dinge, die schwer zu berücksichtigen sind.