Unterschied zwischen einem Framework und einer Library

Bei der Entwicklung von Webseiten und Anwendungen spielen wiederverwendbare Codeteile in Form von Frameworks (dt. Rahmenwerk) und Libraries (dt. Bibliothek) eine wichtige Rolle.

Beide haben das Ziel, den Funktionsumfang einer Anwendung / eines Programms zu erweitern bzw. sind dazu da komplizierte Probleme zu lösen – trotzdem sind beide Begriffe nicht identisch und weisen einige Unterschiede in ihrer Anwendung auf. Welche genau das sind, erläutern wir in diesem Blogbeitrag.

Was ist eine Library (Bibliothek)?

Eine Library ist keine eigenständig ausführbare Einheit, sondern eine Sammlung von vorgefertigtem Code bzw. Codemodulen, der zur Vereinfachung von Aufgaben eingebunden, genutzt und wiederholt wiederverwendet werden kann.

Es handelt sich im Wesentlichen um eine Reihe vordefinierter Funktionalitäten, die Programmierern zu Verfügung stehen, um ihre Arbeit zu vereinfachen und den Entwicklungsprozess zu beschleunigen. Programmierer müssen also weniger Code schreiben, um bestimmte Funktionen auszuführen, da die Library den Code für diese Funktionen bzw. Lösungen für häufig auftretende Probleme enthält und dieser dann nur aufgerufen anstatt selbst geschrieben werden muss. Libraries sind für die meisten Programmiersprachen verfügbar, der Zugriff ist dabei jedoch nur auf die „öffentlichen“ Funktionen begrenzt, Libraries verfügen auch über „private“ Funktionen, die im Hintergrund arbeiten jedoch nach außen verborgen bleiben. Programmierer können auch ihre eigenen, benutzerdefinierten, Libraries erstellen und dann in anderen Projekten wiederverwenden.

Das Ergebnis ist mehr Effizienz und weniger Zeitaufwand für das Coding. Da es sehr wahrscheinlich ist, dass andere Leute diese (öffentliche) Library auch verwenden, profitieren Programmierer davon, dass Fehler gefunden und behoben werden.

Wie wird eine Library verwendet?

Der Code, der durch die Library zur Verfügung gestellt wird, wird vom Programmierer in seinen bereits bestehenden Code eingefügt und der Programmierer kann somit den Ablauf der Verwendung selbst steuern.

Beispiel: jQuery

jQuery ist eine JavaScript-Library, die Programmierern die Arbeit mit JavaScript erleichtern soll. Sie überbrückt technische Unterschiede zwischen verschiedenen Browsern und ermöglicht komfortablen und kompakten Code, der im direkten Vergleich zu JavaScript häufig sehr viel kürzer ist.

JavaScript war in der Vergangenheit insofern problematisch in der Webentwicklung, als dass verschiedene Browser teils sehr unterschiedliche Ergebnisse mit ein und demselben Code lieferten. Bestimmte native JavaScript-Funktionen funktionierten in älteren Browsern zum Beispiel schlicht nicht. Wer mit einer Webanwendung alle Browser unterstützen will, muss demzufolge häufig spezielle Weichen in seinen Skripten vorsehen, die je nach Browser und Version auf unterschiedlichen Wegen zum gewünschten Ergebnis führen – oder riskieren, dass bestimmte Nutzer die Webseite eventuell nicht verwenden können. Eine Library wie jQuery ist ein Ansatz, dem Programmierer diese mühsame und fehleranfällige Mehrarbeit abzunehmen. Die Unterschiede zwischen verschiedenen Browsern werden intern behandelt, während Programmierer nur noch ein einziges, allgemeingültiges Skript schreiben.

jQuery bietet nicht nur Browserunabhängigkeit, es vereinfacht viele JavaScript-Funktionen, die im Web besonders häufig benötigt werden. Die Arbeit wird komfortabler und der Code kürzer und somit deutlich leichter zu warten.

Eine Besonderheit von jQuery ist beispielsweise, dass es den Zugriff auf DOM-Elemente sehr simpel und bequem macht. Programmierer können trotzdem Elemente aus dem DOM (HTML im Browser) gezielt ansprechen und auf verschiedenste Weise manipulieren. So lassen sich Elemente zum Beispiel nachträglich neuen CSS-Klassen zuordnen, um Veränderungen visuell zu unterstreichen. Heute sind DOM-Manipulationen auch im nativen JavaScript komfortabler geworden und daher in modernen Browsern auch ohne diese Library bequem zu realisieren, trotzdem wird jQuery immer noch sehr gern verwendet.

Was ist ein Framework (Rahmenwerk)?

Ein Framework ist eine besondere Art von Library, die keine „fertigen“ Funktionen wie eine normale Library enthält. Frameworks sind vielmehr Programmgerüste, die den Bauplan und das Grundgerüst für eine Anwendung liefern und zeigen auch, was der Programmierer noch an Anpassungen vornehmen muss. Das Framework liefert den Ablauf einer Anwendung und teilt dem Programmierer mit, was er benötigt, wobei der vom Programmierer bereitgestellte Code bei Bedarf aufgerufen wird (Wenn eine Library verwendet wird, ruft die Anwendung den Code aus der Library auf).

Ein Framework bietet eine Kernarchitektur, die das Potenzial für grundlegende Fehler oder Ineffizienzen weitgehend neutralisiert – das Rad muss nicht neu erfunden werden. Aber es lässt auch viel Spielraum für individuelle Anpassungen. Die Vorteile eines Frameworks liegen auf der Hand: Nicht nur die erhöhte Effizienz, sondern auch die Bereitstellung einer organisatorischen Basis wird von vielen Programmierern als großer Vorteil hervorgehoben. Der Code ist zudem gut strukturiert, was aber auch bedeutet, dass die Programmierer weniger Flexibilität haben. Die möglichen Erweiterungen der Programmierung bestimmen daher die Möglichkeiten des Frameworks. Programmierer müssen nicht bei Null anfangen, wenn sie Tools wie Frameworks haben, die sie unterstützen.

Ein Framework ist wie die Grundlage, auf der Programmierer Anwendungen erstellen. Es enthält wiederverwendbare Codeteile, die zur Ausführung allgemeiner Aufgaben geschrieben wurden, und es verwendet zusätzlich den Code, der von einem Programmierer für benutzerdefinierte Funktionen bereitgestellt wird. Das Framework kann definierte und undefinierte Objekte und Funktionen enthalten, die Programmierer verwenden können, um Anwendungen zu erstellen. Es ist daher möglich, dieses Paket an spezifische Projektanforderungen anzupassen. Mit einem Framework können Programmierer neue Funktionen in bestehenden Code integrieren und ihm somit neue Fähigkeiten verleihen. Das spart bei der Entwicklung erheblich Zeit.

Wie wird ein Framework verwendet?

Der vom Programmierer bereitgestellte Code wird in das Framework integriert und das Framework steuert (im Gegensatz zur Library) den Ablauf der Verwendung.

Beispiel: Vue.js

Vue.js ist ein unter MIT-Lizenz veröffentlichtes Open-Source-Framework für JavaScript, das sich auf die Entwicklung von Webanwendungen fokussiert. Dafür baut es auf Technologien wie HTML, CSS und JavaScript auf, die bereits seit langem Standards in der Webentwicklung sind.

Vue.js dient dazu, grafische Oberflächen (Frontends) für Webanwendungen zu erstellen. Es stellt verschiedene Hilfsmittel zur Verfügung, die den Programmierer in seiner Arbeit unterstützen. Dabei geht es nicht nur um die einzelnen grafischen Elemente, sondern darum, was im Hintergrund passiert. Es gibt auch spezielle Bibliotheken (in Vue.js verwendbar), welche vorgefertigte Komponenten oder grafische Elemente zur Verfügung stellen. Vue.js ist für User mit Erfahrung in HTML, CSS und JavaScript einfach zu erlernen. Mit geringem Aufwand und rasch kann eine Webseite oder Webanwendung mit Vue.js erweitert und zusätzliche Funktionen hinzugefügt werden.

Der Programmierer konzentriert sich auf das Implementieren der, wie man sagen könnte «echten» Logik, statt auf repetitive und mühsame Art den Zustand des HTML im Browser (DOM) z.B. mit jQuery zu manipulieren und auf dem aktuellen Stand zu halten sowie Benutzereingaben abzufangen. Die Datenbindung ist eine der elegantesten Funktionen von Vue.js. Der HTML-Code wird mit Vue.js Tags erweitert (Template-Syntax). Es ist kein spezieller, weiterer JavaScript Code notwendig. Stattdessen wird der HTML-Code über die entsprechenden Tags an den richtigen Stellen markiert. Den Rest erledigt dann Vue.js von selbst. Schön ist auch, dass man nur Teile des Framework verwenden kann und weglassen kann, was man nicht verwenden möchte.

Framework vs. Library

Frameworks und Libraries haben dasselbe Ziel: Sie erweitern die Palette der Funktionen, die den Programmierern zur Verfügung stehen, optimieren ihren Arbeitsaufwand und reduzieren den Rahmen für Fehler und ineffizienten Code.

Ein Hauptunterschied zwischen einem Framework und einer Library ist die Verwendung von Abfragen. Bei der Verwendung einer Bibliothek entscheidet der Programmierer, wann und wo er sie aufruft. Bei der Verwendung eines Frameworks gibt das Framework dies vor. Es stellt das Grundgerüst zur Verfügung und sagt dem Programmierer, was benötigt wird. Dementsprechend wird der notwendige Code vom Programmierer eingefügt und das Framework entsprechend der gewünschten Funktion ergänzt. Letztendlich ist es aber das Framework, das den Code bei Bedarf aufruft und auch für den Ablauf des Programms verantwortlich ist.

Somit ist der wesentlichste Unterschied zwischen den beiden die Umkehrung der Kontrolle: Diese Art der Kontrollumkehr wird „Inversion of Control“ genannt.

Beispiele: jQuery vs. Vue.js

jQuery ist eine Library welche gegen Ende der 2000er sehr Populär wurde. Damals waren die Möglichkeiten mit purem JavaScript die DOM zu manipulieren doch eher mühselig und unschön. jQuery sollte die Lösung dafür sein und hat eine neue Ära für die Web-Sprache eingeleitet.

Viele Probleme wurden mit neueren JavaScript-Normen behoben und machen jQuery bis auf seine Bequemlichkeit redundant. Neuere Lösungen, z.B. in Form von Frameworks (Vue.js), liefern viel mehr Komfort mit dem Vorteil auch mehr an Fähigkeiten zu liefern. Jedoch ist die Nutzung stark vom Umfang und den gewünschten Funktionen der Webanwendung abhängig.

Ein Beispiel über eine elementare Funktion des Framework Vue.js: Two-Way-Databinding

Two-Way-Databinding heißt nichts anderes, als dass eine Variable sowohl abgerufen wird, wie auch übernommen wird. Das klingt etwas abstrakt, ist aber im Grunde sehr einfach. Wenn man z.B. mehrere Text-Input Felder hat, welche alle die selbe Variable verändern, will man auch, dass die anderen Felder diese Variable aktualisieren oder dass irgendwo dieser Text in Echtzeit mitverändert wird. Two-Way-Databinding macht das auf sehr einfache Art und Weise möglich. In unserem Beispiel haben wir jeweils ein Element mit einem Text-Input. Wenn man etwas eingibt, wird der Text in Echtzeit über dem Input angezeigt.

jQuery gibt die Möglichkeit, einen Eventlistener („Lauscher / Zuhörer“) zu erstellen, der dauerhaft prüft, ob im Input eine Taste gedrückt wurde. Wenn das zutrifft, dann wird der Inhalt des Inputs zwischengespeichert und dem Paragraph-Element übergeben.

Bei Vue.js gibt man im HTML dem Input ganz einfach das Attribut v-model und schreibt im Paragraph-Element mit doppelten geschweiften Klammern den Variablenname und den Rest übernimmt das Framework.

Von der Codelänge unterscheidet sich das in diesem Fall nicht, aber bei größeren Projekten kann das schon viel ausmachen. Vue.js ist sehr modular und lässt viel wiederverwenden. Im Grunde war der effektive Code für dieses Beispiel nur eine Zeile lang. Die Initialisierung von Vue.js muss nur einmal geschehen, danach können im Inneren alle Funktionen geschrieben werden. Bei jQuery müsste man sich das Setup jedes mal von neuem aufbauen oder selber eine Art modulares System erschaffen.

Vue.js protzt vor allem mit seinen Komponenten. Eine Vue-Komponente ist wie ein eigener HTML-Tag, den man selbst definiert und eigene Funktionalität gibt. z.b. wenn man eine kleine Todo-Liste erstellt. In Vue.js kann man die komplette Liste als eine eigene Komponente schreiben, da so eine Liste durch das Rahmenwerk wiederverwendbar ist. Man würde dem Todo-Element zwei Attribute gegeben, die es einfach machen dieses Element dynamisch für andere Zwecke verwenden zu können. Man kann z.B. einen Titel vergeben, der dann als Überschrift verwendet wird und man kann ein Array an zu erledigenden Aufgaben vergeben.

jQuery hingegen ist sehr statisch. Man könnte die jQuery-Liste nur einmal verwenden und wenn man sie ein zweites mal haben wollen würde, müsste man den gesamten Code kopieren, abermals benutzen und anpassen. Trotzdem bringt es durch seine vereinfachenden Funktionen eine große Erleichterung mit sich. Vue.js als Framework bringt alles mit, was jQuery kann und noch viel mehr. jQuery bietet zwar nicht mehr die Notwendigkeit, die es in den 2000er Jahren noch hatte, für kleinere Projekte kann es aber immer noch sehr sinnvoll sein, vor Allem wenn man nicht auf die Komplexität und Verwendung eines Framework zurückgreifen möchte.

Überblick

	Library	Framework
Definition	Stellt Programmierern vordefinierte Funktionalitäten zur Verfügung um Ihre Arbeit zu erleichtern und den Entwicklungsprozess zu beschleunigen.	Ist wie eine Grundlage, auf der Programmierer Anwendungen erstellen.
Umkehrung der Kontrolle	Durch die Verwendung einer Library können Programmierer den Ablauf der Anwendung steuern und die Library aufrufen.	Wird ein Framework verwendet, wird die Steuerung invertiert. D.h. das Framework steuert den Fluß und ruft zusätzlichen Code auf.
Sammlung	Sind im Allgemeinen Sammlungen von funktionellem, vorgefertigten Code.	Bestehen aus einem Grundkonstrukt, auf dem der Programmierer aufbaut. Libraries lassen sich hierin integrieren.
Code-Änderung	Libraries sind auf die Lösung eines bestimmten Entwicklungsproblems ausgerichtet. Programmierer müssen den Code an ihre Bedürfnisse anpassen.	Vorgefertigte Framework-Codes können später nicht geändert oder modifiziert werden.
Verwendung	Es ist möglich, eine Library ausserhalb des Kontexts aufzurufen. Sie können überall dort verwendet werden, wo Sie es in ihrem Code für richtig halten.	Andererseits können Sie nur innerhalb desselben Frameworks aufrufen und verwenden, was zu einem Framework gehört.
Erweiterbarkeit	Im allgemeinen sind Libraries nicht auf Erweiterbarkeit ausgelegt. Sie dienen dazu, einen bestimmten Zweck zu erfüllen.	Frameworks bieten allgemeine Funktionalität. Sie sind erweiterbar, was es Programmierern ermöglicht, Anwendungsspezifische Funktionen zu integrieren, ohne den Quellcode des Frameworks zu ändern.
Austauschbarkeit	Es ist einfach, eine Library durch eine andere zu ersetzen.	Frameworks sind schwer zu ersetzen. Wenn z.B. Vue.js zum Erstellen des Projekts verwendet wurde, kann es nicht einfach gegen ein anderes Framework ausgetauscht werden. So ein Tausch erfordert das Umschreiben der gesamten Codebasis.
Leistung	Zum Erstellen von Libraries ist weniger Code erforderlich, was zu schnelleren Ladezeiten und einer besseren Leistung führt.	Die Entwicklung eines Framework erfordert viel Codierung, was die Ladezeiten erhöht und die Leistung verringern kann.
Verwendungszweck	Der Zweck von Libraries besteht darin, eine definierte und spezifische Aufgabe zu erfüllen. z.B. Bildmanipulation, Netzwerkkontrolle, mathematische Operationen	Frameworks können für die Durchführung einer Vielzahl von Aufgaben verwendet werden.
Bestehende Projekte	Libraries können nahtlos in bestehende Projekte integriert werden, um eine bestimmte Funktionalität hinzuzufügen.	Frameworks nahtlos in ein bestehendes Projekt einzubinden ist unmöglich. Stattdessen sollten Frameworks verwendet werden, wenn ein neues Projekt gestartet wird.
Vorteile	Gute Codequaliät, Wiederverwendbarkeit und Kontrolle, verbesserte Geschwindigkeit und Leistung der Anwendung, usw.	Schnellere Programmierung, Unterstützung durch die Community, großartige Unterstützung für MVC-Muster (Model View Controller), usw.