JavaScript Animationen und Interaktivität
In den letzten Wochen habe ich mich näher damit beschäftigt wie man mit JavaScript Animationen und Interaktivität in Webseiten einbaut. Neben statischen Informationen braucht eine professionelle Präsentation heute auch bewegliche und interaktive Elemente.
JavaScript Animationen und Interaktivität
JavaScript verwendet man seit Ende der 90er Jahre (ursprünglich LiveScript genannt) um dem statischen DOM Effekte hinzuzufügen. Im Laufe der Zeit gab es immer wieder andere Technologien, die mal mehr oder weniger erfolgreich waren. Beispiele dafür sind Silverlight oder Flash, beide sind heute obsolet! Ein moderner Ansatz ist WASM, im letzten Artikel zu Blazor Web Assembly habe ich gezeigt, dass dies derzeit nur mit Unterstützung von JavaScript läuft. JavaScript ist und bleibt die führende Technologie für interaktive und animierte Objekte im Browser.
Anforderung
Die Anforderung an die Software ist eine Animation für eine Webseite. Beispiele dafür sind zum Beispiel ein Imagefilm für die Präsentation der Firma oder des Produkts oder ein interaktives Tutorial (beispielsweise eine Aufbau-Anleitung). Man könnte nun den Ansatz eines statischen Website Contents wählen. Dafür wird ein GIF oder ein Video erstellt. Dieses lässt sich schnell und einfach einbauen, ist aber nicht veränderbar, müsste im schlimmsten Fall komplett neu produziert werden. Außerdem gibt es keine Möglichkeit einer Interaktion.
Lösungsansatz
JavaScript ist der Lösungsansatz von Webentwicklern. Ob nun Vanilla JS oder mit einem speziellen Framework oder Bibliotheken. JavaScript hat in den letzten 10 Jahren einen wahren Boom erlebt. Die Sprache wurde durch Standards professionalisiert und wird von Browsern so gut unterstützt, dass sogar Spiele damit entwickelt werden. Aus dem Gamingbereich sind zahlreiche Bibliotheken und Frameworks entstanden die den Aufwand für die Umsetzung stark reduzieren.
Beispiele
Je nach Art der Visualisierung gibt es fertige JS Bibliotheken mit denen man wegstarten kann:
Soll es doch eher in Richtung 3D Darstellung gehen, dann ist Three.js die Bibliothek der Wahl. JS Applikationen können auch ohne großen Aufwand in native mobile Apps verwandeln. Mit ein Grund warum Frontend-Entwickler auf JS bzw. JS mit einem beliebigen Framework setzen. Bei interaktiven Oberflächen punkten die großen UI Frameworks React.js, Angular oder VUE.js. Wenn es dann noch professioneller sein soll, dann setzt der Entwickler auf TypeScript um auch die Typsicherheit zu gewährleisten.
Fazit
JavaScript ist die erste Wahl für Frontend-Entwickler bei der Umsetzung von dynamischen Content. Je nach Anforderung stehen zahlreiche spezialisierte Frameworks und Bibliotheken zur Verfügung. Andere Alternativen kommen und gehen. Große Hoffnung wird derzeit in Web Assembly gesetzt.
