CSS, HTML und Javascript mit {stil}

Javascript Libraries – Frameworks von jQuery bis Angular.js

Javascript Libraries wie jQuery und Angular

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 glatter, 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 gebracht (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 Frameworks wie jQuery, Closure und YUI 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üllt viele der Lücken der Programmiersprache Javascript und sorgt 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.

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 die ganz modernen Browser (IE ab Version 10).

Closure Library (Google Developers)

Im Vordergrund stehen Performance, Speicherverbrauch und die Kompatibiliät zu den Browserversionen. Die Closure Library ist für Entwickler-Teams gedacht und weniger für die Darstellung der HTML-Seite.

mootools

MooTools ist ein Framework, das sich wie Javascript anfühlt und vor allem erfahrene Programmierer anspricht, die striktes objekt-orientiertes Programmieren gewohnt sind.

YUI Library (Yahoo)

Wie MooTools eher ein Framework als eine Library. Frameworks bauen eine Architektur auf und bieten Tools, während Libraries eher eine Sammlung von Werkzeugen sind.

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.

AngularJS 2

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.

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