CSS, HTML und Javascript mit {stil}

Javascript Libraries – Frameworks von jQuery bis Angular.js

Javascript Libraries: jQuery, AngularJS, React

Javascript bietet 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, jQueryMobile, Zepto, Velocity.js, dojo und Google Closure gebündelt.

Erst Libraries haben die Entwicklung von komplexen Anwendungen mit Javascript effizient gemacht.

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 kleine Code-Bibliotheken für beliebte Effekte wie Lightboxen, für Animationen und Präsentationen. Andere Libraries sind mächtige Frameworks und für wiederkehrende Aufgaben in Javascript gedacht – Navigation durch das DOM, Effekte, Animationen. Die meisten Javascript Libraries sind Open Source und können direkt heruntergeladen und für die Programmierung von webbasierten Anwendungen oder Apps benutzt werden.

Libraries bügeln die Unterschiede zwischen den Browsern glatt, so dass auch ältere Browser (vor allem ältere IE-Versionen) mitgezogen werden.

Vanilla JavaScript oder jQuery &Co?

Mit dem seligen Ende von IE8 hat ECMAScript 5 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 Scripts ohne den Einsatz von Libraries oder Frameworks.

Web Tooling is like Game of Thrones, fall in love w/a tool & hope it doesn’t get killed off

Tweeted by Google Developers

Die neuen Browser unterstützen Javascript 5 auf breiter Basis. Es lohnt sich, den Einsatz von Javascript Libraries wie jQuery zu überdenken und für einfache Aufgaben »Vanilla Javascript« – einfach Javascript – einzusetzen.

jQuery
$('.my #awesome selector');
Javascript (IE8+)
document.querySelectorAll('.my #awesome selector');

Beispiel von YOU MIGHT NOT NEED JQUERY

Javascript Libraries einbinden

Alle Libraries und Frameworks eliminieren die Browser-Unterschiede, alle bieten einen einfachen Zugriff auf Ajax-Funktionen.

jQuery ist mit Abstand und noch mehr Abstand die populärste Javascript-Library. Wer professionelles Webdesign mit Effekten und Hilfestellungen für den Benutzer einsetzen will, kommt nicht um jQuery kaum herum.

Wenn höchste Performance gefragt ist, jede Millisekunde zählt oder nur ein kleiner Teil der Funktionen von jQuery genutzt werden, bleibt jQuery besser außen vor.

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

Angularjs

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.

AngularJS kann mit drei Sprachen programmiert werden: ES5 (ECMAScript – reguläres Javascript), Dart oder TypeScript.

Dart ist eine Obermenge von ECMAScript5 und enthält bereits ECMAScript6-Elemente: Templates, Classes.

React

Javascript Library React auf Facebook
React ist eine Javascript-Library für die Benutzerschnittstelle, wird aber eher in Apps eingesetzt als für Webseiten. Sehr gut dokumentiert, mit einer Schnittstelle für Erweiterungen und Plugins. React nutzt bereits Teile aus ECMAScript 6 wie arrow functions, Klassen, let und const-Anweisungen

Zepto

Zepto ist ein jQuery-Konkurrent, aber kleiner mit kürzerer Ladezeit als jQuery (wohl aber einen Tick weniger performant). Die kürzere Ladezeit dank geringer Dateigröße geht auf Kosten der Kompatibilität, denn Zepto unterstützt nur moderne Browser (IE ab Version 10).

CreateJS

Modulare Javascript Library für Animationen mit HTML5: EaseLJS (HTML5 canvas-Programmierung, TweenJS, SoundJS, PreloadJS und Zoe)

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.

Aber 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.

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