Javascript Libraries jQuery bis Angular.js

Javascript Libraries: jQuery, AngularJS, React

Javascript bot anfangs nicht so viele eingebauten Objekte und Methoden wie altgediente Programmiersprachen, darum haben unzählige Entwickler Sammlungen von nützlichen Code-Fragmenten zu Libraries oder Framesworks wie jQuery, ReactJS, 3D.js, Velocity.js und Google Closure gebündelt.

Früher haben erst Libraries und Frameworks die Entwicklung von komplexen Anwendungen mit Javascript effizient gemacht. Heute gibt es mehr Javascript Libraries wie Ritter Sport-Schokoladen im Supermarkt-Regal.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Javascript ist eine junge Programmiersprache und wurde nicht für aufwändige Anwendungen entworfen, sondern war anfangs für einfache Effekte und als Hilfe bei Formularen gedacht.

Inzwischen es gibt unzählige Code-Bibliotheken für Effekte wie Lightboxen, für Animationen und Präsentationen. Andere sind mächtige Frameworks und für wiederkehrende Aufgaben – von der Navigation durch das DOM bis zum Zugriff auf Server-Anwendungen (XMLHttp-Request, Fetch). Die meisten Javascript-Frameworks / 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.

Vanilla JavaScript oder jQuery &Co?

Mit dem seligen Ende von IE9 und IE10 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).

Vanilla JS bezeichnet Javascript ohne den Einsatz von Libraries oder Frameworks. Die immergrünen Browser unterstützen ECMAScript 6 auf breiter Basis. Es lohnt sich, den Einsatz von Javascript Libraries wie jQuery, Frameworks wie Angular und Vue zu überdenken und Vanilla Javascript – einfach Javascript – einzusetzen.

jQuery
$('#mein .super selector');
Javascript (IE8+)
document.querySelectorAll('#mein .super selector');

Beispiel von YOU MIGHT NOT NEED JQUERY

https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javascript-framework/

Javascript Libraries einbinden

Libraries und Frameworks eliminieren die Browser-Unterschiede, alle bieten einen einfachen Zugriff auf Ajax-Funktionen. Wer professionelles Webdesign mit Effekten und Hilfestellungen für den Benutzer einsetzen wollte, kam über ein Jahrzehnt lang nicht um jQuery herum. Wenn heute Performance gefragt ist, jede Millisekunde zählt oder nur ein kleiner Teil von jQuery genutzt wird, ist Vanilla Javascript effizienter.

jQuery

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

jquery-mobile

Javascript Library für Web-Anwendungen auf den mobilen Geräten – speziell Touch-Devices.

Angularjs

angular

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

React ist ein Javascript-Framework (eine 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

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

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-Frameworks 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 und Frameworks 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

Tweeted by Google Developers

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.

Javascript Libraries: jQuery, Closure, Moo-Tools jQuery CSS JS Angularjs