Vanilla Javascript
Die Bezeichnung Vanilla Javascript bezieht sich auf das reine Javascript ohne Libraries und ohne Frameworks. Mit Vanilla Javascript wird nur das eigene Script geladen und sonst nichts.
Javascript ist eine relativ junge Programmiersprache und wurde nicht für aufwändige Anwendungen entworfen, sondern war anfangs für einfache Effekte und als Hilfe bei Formularen gedacht.
JS Libraries: Fertige Methoden, Klassen und Objekte
Inzwischen es gibt unzählige Code-Bibliotheken für Effekte wie Lightboxen, für Animationen und Präsentationen. Libraries sind Funktionen für wiederkehrende Aufgaben – von der Navigation durch das DOM bis zum Zugriff auf Server-Anwendungen (XMLHttp-Request, Fetch). Die meisten Javascript-Libraries sind Open Source und für die Interaktion des Benutzers mit Anwendungen oder Apps gedacht.
Sie bügeln die Unterschiede zwischen den Browsern aus, so dass auch ältere Browser (vor allem ältere IE-Versionen) mitgezogen werden. Andere widmen sich speziellen Themen wie z.B. THREEjs um WEBGL für 3D-Animationen auf der Basis des Canvas-Elements.
Framework oder Library?
Eine Javascript-Library importieren wir einfach und nutzen ihre Methoden. Mit einem Javascript-Framework hingegen nutzen wir die Strukturen des Frameworks und integrieren unsere eigenen Anweisungen und Methoden. Kurz gesagt: Mit einer Library ruft der Script-Code Methoden der Library auf, während ein Framework unsere Objekte, Klassen und Methoden aufruft.
Ein Framework läßt sich nicht so einfach ersetzen. Das bedeutet immer eine Überarbeitung der App von Grund auf.
Vanilla JavaScript oder jQuery &Co?
Mit dem seligen Ende von IE hat ECMAScript 2018 als einsetzbare Version für Javascript einen großen Schritt nach vorn gemacht (ECMAScript ist der Standard für Scriptsprachen wie Javascript und ActionScript).
Die immergrünen Browser unterstützen ECMAScript 2021 auf breiter Basis. Es lohnt sich, den Einsatz von Javascript Libraries wie jQuery zu überdenken und Vanilla Javascript – einfach Javascript – einzusetzen.
$('#mein .super selector');
document.querySelectorAll('#mein .super selector');
Beispiel von YOU MIGHT NOT NEED JQUERY
https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javascript-framework/
jQuery
Mit Abstand die meistgenutzte und modernste Code-Bibliothek für Javascript. jQuery ist spezialisiert auf die Darstellung der HTML-Seite als DOM und Ajax. Wir nutzen jQuery vor allem, um Elemente des DOM (nodes) zu selektieren. jQuery füllte lange Zeit die Lücken der Programmiersprache Javascript und sorgt heute für die Kompatibilität in älteren Browser.
jQuery Mobile
Javascript Library für Web-Anwendungen auf den mobilen Geräten – speziell Touch-Devices.
Angularjs
AngularJS 2 ist ein umfangreiches Framework. Nach dem Redesign von Google stellt AngularJS die modernsten Objekte und Services für Anwendungen und Webseiten mit Javascript zur Verfügung. Ein Upgrade von Version 1 auf Version 2 ist nicht möglich.
AngularJS ist rund um Components aufgebaut – eigene Tags, für die spezielle Funktionen entwickelt werden. Die Direktiven aus der ersten Version gibt es nicht mehr.
React
React ist eine Javascript-Library (keine vollständige Entwicklungsumgebung) für die Programmierung der Benutzerschnittstelle und wird in erster Linie für Anwendungen wie Content Management Systeme und Shops eingesetzt – für einfache Webseiten eher selten. Neben Facebook verwendet z.B. der Gutenberg-Editor in WordPress / Drupal React.
React ist gut dokumentiert und nutzt bereits Elemente aus ECMAScript 6.
D3.js
D3.js ist eine Library für die Datenvisualisierung, kann z.B. ohne große Schreibarbeit Tabellen aus Array-Werten aufbauen und hat seine Stärke in der Animation von Grafiken. Dabei setzt D3.js ähnlich wie jQuery auf der Selektor-Schnittstelle des W3C auf.
Mit rund 250 KB Eigengewicht qualifiziert sich D3.js für umfangreiche Anwendungen und beim Einsatz von Progressive Web Apps.
CreateJS
Modulare Javascript Library für Animationen mit HTML5: EaseLJS (HTML Canvas-Programmierung, TweenJS, SoundJS, PreloadJS und Zoe)
Vue.js habe ich ausgelassen. Müsste wohl auch hier rein.
Alternativ zum Herunterladen der großen Libraries stehen die Javascript-Libraries per CDN (Content Delivery Network) zur Verfügung. Wenn der Besucher einer Webseite zuvor eine andere Webseite besucht hat, in der dieselbe Library benutzt wird, liegt die Library noch im Cache des Besuchers liegt und muss nicht erneut geladen werden. Zudem entlastet das CDN den eigenen Server.
Optional lassen sich Libraries mit einem Github-Account verwalten. Dann wird stets die aktuelle stabile Version der Library eingebunden.
Während der Entwicklung macht es Sinn, mit einer lokalen Kopie der Library zu arbeiten – dann kann das Programm auch ohne Verbindung zum Internet getestet werden.
Wann lohnt der Einsatz von Libraries?
Mit Hilfe von Libraries kann ein mäßig erfahrener Programmierer komplexe Anwendungen mit einer steilen Lernkurve erstellen. Selbst erfahrene Programmierer gewinnen durch die Einsicht in die Funktionen.
Libraries haben auch ihre Schattenseiten: Sie kommen und gehen. Wer sich als Einsteiger zu einseitig auf den Einsatz von Libraries verlässt, verpasst eines Tages den Anschluss. Das Update von AngularJS auf AngularJS 2 ist ein Beispiel für einen drastischen Umbruch von einer Version zur nächsten.
Web Tooling is like Game of Thrones, fall in love w/a tool & hope it doesn’t get killed off
Und im Hintergrund sollte immer die Frage stehen: Lohnt es sich, für die Menge der relevanten Informationen und das Erscheinungsbild der Benutzeroberfläche 100 KB, 200 KB und mehr an Scriptcode zu übertragen? Gerade bei den mobilen Geräte nagen die Datenmengen am Datenvolumen und wir dürfen die Nachhaltigkeit nicht hinter den letzten Button der Seite anstellen.