Hauptinhalt
Kurs: Programmierung > Lerneinheit 6
Lektion 7: JS-Bibliotheken in deiner Webseite benutzenDie Welt der JS-Bibliotheken
Es gibt tausende von JavaScript-Bibliotheken, welche du in deiner Webseite verwenden kannst und diese können dir auf sehr vielfältige Weise bei deiner Webseite helfen wie z.B. zur :
- DOM Manipulation
- DOM Events
- AJAX Datenabruf
- Effekte & Animationen
- HTML-Templates
- Seitenlayout
- UI-Elemente
- Grafiken & Diagramme
- Datenmodellierung
- Routing & Navigation
- Barrierefreiheit
- Multi-Browser-Unterstützung
- Mobile Unterstützung
Eine Webseite kann in drei Komponenten unterteilt werden, dem Benutzer Interface (HTML & CSS), Logik/Interaktion (JS + DOM) und den Daten (welche wir of mit JS vom Server laden). Du kannst deine interaktive, data-driven Benutzeroberfläche selber, ohne Bibliothek, programmieren, oder verschiedene Bibliotheken zur Hilfe nehmen. Einige Bibliotheken machen fast alles, andere wiederum Konzentrieren sich nur auf einen kleinen Aspekt:
Eine der schwierigsten Tätigkeiten der Webentwicklung ist die Entscheidung welche Bibliotheken verwendet werden sollen. Dein Code wird auf diesen Bibliotheken aufbauen und diese Entscheidung kann später nur sehr schwer wieder rückgängig gemacht werden. Es gibt aber keine richtige Antwort. Du weißt was verfügbar ist und musst eine Entscheidung basierend auf deinen Kenntnissen und Erfahrungen treffen.
Web Frameworks
Es gibt einige Bibliotheken, welche "alles tun", alles vom Datenabruf bis zur DOM-Manipulation, und schönen UI-Widgets. Wenn du eines dieser Frameworks verwendest, lädst du normalerweise viel zusätzlichen JavaScript Code in deiner Webseite. Du musst dir daher wirklich sicher sein, dass du die meisten Funktionen des Frameworks wirklich brauchst. Für einige Entwickler machen diese Frameworks einfach zu viel und sie ziehen es vor einige kleinere Bibliotheken welche auf ganze spezifische Dinge spezialisiert sind zu verwenden.
CSS Frameworks
Eine CSS-Bibliothek ist eine Sammlung von CSS Regeln und einer Dokumentation welche erklärt welche HTML Tags und Klassen du verwenden kannst. Es gibt viele beliebte CSS-Bibliotheken welche es dir vereinfache schön gestaltete Webseiten zu erstellen. Machmal enthalten diese sogar optionale JavaScript Widgets. Die Webentwickler verwenden aber of entweder JS Bibliotheken oder eine CSS Bibliothek.
JS Browser-Bibliotheken
Diese Bibliotheken vereinfachen den Einsatz von Funktionen der Webbrowser wie z.b. den Zugriff auf die DOM API, Fenster u.a.. Diese Themen haben wir in diesem Kurs besprochen. Mit ihnen kannst du aber oft die selben Dinge mit weniger Code machen. Vor allem aber kümmern sie sich um all die mühsamen Cross-Browser-Bugs.
Bibliotheken für JS Applikations-Architektur
Diese Bibliotheken helfen dir wenn deine Webapplikationen größer werden. Dein Code wird möglicherweise unüberschaubar sobald er mehr als ein paar Hundert Zeilen lang ist. Wenn dein Code aber ein paar tausend Zeilen lang ist, dann läufst du Gefahr, dass er nicht mehr wartbar und zu "Spaghetti-Code" verkommt. Diese Bibliotheken helfen dir dein ""Modell" (Daten) von deiner "View" (Darstellung) zu trennen. Sie benützen oft Prinzipien der Objektorientierten Programmierung um den Code besser zu organisieren.
Mini-& Mikrobibliotheken
Wie schon erwähnt kannst du aber auch einfach ein paar kleine Bibliotheken, welche Entwickler für ganz spezifische Dinge geschrieben haben, verwenden. Diese sind oft wirklich winzig und werden dann "Mikrobibliotheken"genannt. HIer eine Mikrosammlung davon :
- DOM: tinyDOM
- Events: Events.js
- AJAX: MicroAjax
- Animation: Morpheus, Viper
- Datenmodellierung: Spine, Knockout
- Templates: Handlebars, Mustache
- Routing: PathJS
- Objekt-Orientierung: Classy, Klass
- Grafiken: Processing.JS (Siehe Beispiel auf KA), RaphaelJS (Siehe Beispiel auf KA), D3, Three.JS (Siehe Beispiel auf KA), Paper.js
- Diagramme: gRaphael, High Charts
- Datum/Uhrzeit: moment.js
Mehr kannst du auf microjs.com oder einfach wenn du im Internet nach "javascript library [Funktion]" suchst. Die meisten Ergebnisse erhältst du natürlich wenn du auf englisch suchst.
Hast auf in deinen Webseiten hier auf der Khan Academy schon eine JS Bibliothek ausprobiert? Beschreibe doch deine Erfahrung in einem Kommentar unten.
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.