Der Unterschied zwischen JavaScript-Bibliotheken und Frameworks

Umar Hansa
Umar Hansa

In diesem Artikel erfahren Sie mehr über die Unterschiede zwischen Frameworks und Bibliotheken im Kontext einer clientseitigen JavaScript-Umgebung, also des Codes, der in Ihrem Webbrowser ausgeführt wird. Einige der in diesem Artikel genannten Punkte gelten jedoch auch für andere Umgebungen, da Bibliotheken und Frameworks in vielen Bereichen des Softwareentwicklungs, z. B. bei der Entwicklung nativer mobiler Apps, zum Einsatz kommen.

In diesem Beitrag liegt der Schwerpunkt auf den qualitativen Unterschieden zwischen Bibliotheken und Frameworks. Beispiel:

  • Quantitativ: Frameworks folgen in der Regel dem Prinzip der Inversion of Control.
  • Qualitative: Die Erfahrung mit dem Framework kann für zukünftige Arbeitgeber bei der Jobsuche attraktiver sein.

Warum sollten Sie sich mit Bibliotheken und Frameworks vertraut machen?

JavaScript-Bibliotheken und ‑Frameworks werden im Web häufig verwendet. Jede zweite Website verwendet anscheinend Drittanbietercode als Teil ihrer JavaScript-Ressourcen. Das Gewicht der Webseite wird mit der Zeit schlechter, was sich auf die Nutzer auswirkt. JavaScript trägt wesentlich zum Gesamtgewicht der Seite bei. Dieses JavaScript enthält häufig Bibliotheken und Frameworks von Drittanbietern.

Es reicht nicht aus, zu sagen: „Verwenden Sie keine JavaScript-Frameworks mehr“, da Frameworks für Entwickler einen großen Vorteil bieten. Frameworks können Ihnen unter anderem dabei helfen, effizient zu programmieren und schnell Funktionen bereitzustellen. Stattdessen sollten Sie sich informieren, damit Sie eine fundierte Entscheidung treffen können, wenn es soweit ist.

Die Frage „Sollte ich heute eine Bibliothek oder ein Framework verwenden?“ ist nicht alltäglich. Bibliotheken und Frameworks sind zwei sehr unterschiedliche Dinge. Allerdings werden Bibliotheken und Frameworks oft verwechselt. Je mehr Sie über die beiden wissen, desto wahrscheinlicher ist es, dass Sie fundierte Entscheidungen über ihre Verwendung treffen.

Beispiele für Bibliotheken und Frameworks

Drittanbietercode wird möglicherweise auch unter anderen Namen wie Widgets, Plug-ins, Polyfills oder Pakete bezeichnet. Sie fallen jedoch in der Regel in die Kategorie „Bibliothek“ oder „Framework“. Im Grunde genommen lässt sich der Unterschied zwischen den beiden so zusammenfassen:

Bibliothek

Bibliotheken sind in der Regel einfacher als Frameworks und bieten einen begrenzten Funktionsumfang. Wenn Sie eine Eingabe an eine Methode übergeben und eine Ausgabe erhalten, haben Sie wahrscheinlich eine Bibliothek verwendet.

Sehen Sie sich dieses Beispiel für die Bibliothek lodash an:

import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello

Wie bei vielen Bibliotheken ist es praktisch, diesen Code zu lesen und zu verstehen, was er bewirkt. Es ist gar nicht so magisch:

  1. Mit einer import-Anweisung wird die lodash-Bibliothek in das JavaScript-Programm importiert.
  2. Die Methode capitalize() wird aufgerufen.
  3. Es wird ein einzelnes Argument an die Methode übergeben.
  4. Der Rückgabewert wird in einer Variablen erfasst.

Framework

Frameworks sind in der Regel größer als Bibliotheken und tragen mehr zum Gesamtgewicht der Seite bei. Tatsächlich kann ein Framework eine Bibliothek enthalten.

Dieses Beispiel zeigt ein einfaches Framework ohne Bibliothek und verwendet Vue, ein beliebtes JavaScript-Framework:

<!-- index.html -->
<div id="main">
  {{ message }}
</div>

<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';

new Vue({
  el: '#main',
  data: {
    message: 'Hello, world'
  }
});
</script>

Wenn Sie dieses Framework-Beispiel mit dem vorherigen Bibliotheksbeispiel vergleichen, fallen Ihnen möglicherweise folgende Unterschiede auf:

  • Der Framework-Code umfasst mehrere Techniken und abstrahiert sie in einer eigenen API.
  • Entwickler haben keine vollständige Kontrolle darüber, wie und wann Vorgänge ausgeführt werden. Wie und wann Vue den 'Hello, world'-String auf die Seite schreibt, wird beispielsweise nicht angezeigt.
  • Die Instanziierung der Klasse Vue hat einige Nebeneffekte, die bei der Verwendung von Frameworks üblich sind. Eine Bibliothek kann hingegen reine Funktionen bieten.
  • Das Framework schreibt ein bestimmtes HTML-Vorlagensystem vor, anstatt Ihr eigenes zu verwenden.
  • Wenn Sie sich die Dokumentation des Vue-Frameworks oder der meisten anderen Frameworks genauer ansehen, sehen Sie, wie Frameworks Architekturmuster vorschreiben, die Sie verwenden können. JavaScript-Frameworks nehmen Ihnen etwas Arbeit ab, da Sie sich nicht selbst darum kümmern müssen.

Wann sollte eine Bibliothek und wann ein Framework verwendet werden?

Nachdem Sie die Vergleiche zwischen Bibliotheken und Frameworks gelesen haben, können Sie vielleicht besser nachvollziehen, wann Sie das eine oder das andere verwenden sollten:

  • Ein Framework kann die Komplexität für Sie als Entwickler reduzieren. Wie bereits erwähnt, kann ein Framework Logik, Verhalten und sogar Architekturmuster abstrahieren. Das ist besonders hilfreich, wenn Sie ein neues Projekt beginnen. Eine Bibliothek kann bei der Komplexität helfen, konzentriert sich aber in der Regel auf die Codewiederverwendung.
  • Die Entwickler von Frameworks möchten, dass Sie produktiv sind, und entwickeln daher oft zusätzliche Tools, Debugging-Software und umfassende Anleitungen, um Ihnen die effektive Nutzung eines Frameworks zu erleichtern. Die Autoren von Bibliotheken möchten auch, dass Sie produktiv sind, aber spezielle Tools sind in Bibliotheken selten.
  • Die meisten Frameworks bieten einen funktionalen Ausgangspunkt, z. B. ein Skelett oder eine Vorlage, mit dem Sie schnell Web-Apps erstellen können. Eine Bibliothek wird Teil Ihrer bereits vorhandenen Codebasis.
  • Im Allgemeinen führen Frameworks zu einer gewissen Komplexität Ihrer Codebasis. Die Komplexität ist nicht immer von Anfang an offensichtlich, sondern kann sich im Laufe der Zeit zeigen.

Zur Erinnerung: Eine Bibliothek wird in der Regel nicht mit einem Framework verglichen, da es sich um unterschiedliche Dinge handelt, die unterschiedliche Aufgaben erfüllen. Je mehr Sie jedoch über die beiden Optionen wissen, desto besser können Sie entscheiden, welche für Sie am besten geeignet ist. Die Entscheidung, ob ein Framework oder eine Bibliothek verwendet werden soll, hängt letztendlich von Ihren Anforderungen ab.

Austauschbarkeit

Sie werden Ihre Bibliothek oder Ihr Framework nicht jede Woche ändern. Es empfiehlt sich jedoch, die Nachteile eines Pakets zu kennen, das Sie an sein Ökosystem bindet. Außerdem sollten Sie wissen, dass der Entwickler, der sich für die Verwendung eines Drittanbieterpakets entscheidet, in gewissem Maße für die Erstellung einer losen Kopplung zwischen dem Paket und dem App-Quellcode verantwortlich ist.

Ein Paket, das mit dem Quellcode verknüpft ist, lässt sich nur schwer entfernen und durch ein anderes Paket ersetzen. In folgenden Fällen müssen Sie möglicherweise ein Paket austauschen:

  • Sie müssen ein Paket aktualisieren, das nicht mehr gepflegt wird.
  • Sie stellen fest, dass das Paket zu viele Fehler enthält, um damit zu arbeiten.
  • Sie erfahren von einem neuen Paket, das Ihren Anforderungen besser entspricht.
  • Ihre Produktanforderungen ändern sich und das Paket ist nicht mehr erforderlich.

Betrachten Sie dieses Beispiel:

// header.js file
import color from '@package/set-color';
color('header', 'dark');

// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');

// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');

Im vorherigen Beispiel wird das @package/set-color-Paket eines Drittanbieters in drei separaten Dateien verwendet. Wenn Sie an diesem Code arbeiten und das Drittanbieterpaket ersetzen müssen, müssen Sie den Code an drei Stellen aktualisieren.

Alternativ können Sie die Wartung vereinfachen und die Bibliotheksnutzung an einem Ort abstrahieren, wie in diesem Beispiel zu sehen:

// lib/set-color.js file
import color from '@package/set-color';

export default function color(element, theme = 'dark') {
  color(element, theme);
}

// header.js file
import color from './lib/set-color.js';
color('header');

// article.js file
import color from './lib/set-color.js';
color('.article-post');

// footer.js file
import color from './lib/set-color.js';
color('.footer-container');

Im vorherigen Beispiel wird die direkte Bibliotheksnutzung abstrahiert. Wenn Sie also das Drittanbieterpaket austauschen müssen, aktualisieren Sie nur eine Datei. Außerdem ist die Arbeit mit dem Code jetzt einfacher, da in der internen set-color.js-Datei ein Standardfarbschema festgelegt wird.

Nutzerfreundlichkeit

Ein Framework kann eine komplexe API haben, aber Entwicklertools bieten, die die allgemeine Verwendung erleichtern. Die Nutzerfreundlichkeit hängt von vielen Faktoren ab und kann sehr subjektiv sein. Ein Framework kann schwierig zu verwenden sein, weil:

  • Das Framework hat eine inhärent komplexe API.
  • Das Framework ist schlecht dokumentiert und erfordert viel „Versuch und Irrtum“, um Probleme zu lösen.
  • Das Framework verwendet Methoden, die Ihnen und Ihrem Team nicht vertraut sind.

Mithilfe von Frameworks können Sie diese Herausforderungen mithilfe gängiger Best Practices minimieren, z. B.:

  • Das Framework bietet Entwickler- und Diagnosetools, die die Fehlerbehebung erleichtern.
  • Das Framework hat eine aktive Entwickler-Community, die gemeinsam an kostenloser Dokumentation, Anleitungen, Tutorials und Videos arbeitet. Nachdem Sie sich diese Inhalte angesehen haben, können Sie das Framework produktiv nutzen.
  • Das Framework bietet eine API, die gängigen Programmierkonventionen folgt. Sie arbeiten produktiv mit dem Framework, weil Sie solche Konventionen bereits kennen und mit Programmierstilen vertraut sind.

Diese Punkte werden zwar häufig Frameworks zugeordnet, sie können aber auch Bibliotheken zugeschrieben werden. Die JavaScript-Bibliothek D3.js ist beispielsweise leistungsstark und bietet unter anderem Workshops, Anleitungen und Dokumentationen, die sich alle auf die Nutzerfreundlichkeit auswirken.

Außerdem schreibt ein Framework in der Regel eine Architektur für Ihre Webanwendung vor, während eine Bibliothek in der Regel mit Ihrer vorhandenen Architektur kompatibel ist.

Leistung

Im Allgemeinen können sich Frameworks stärker auf die Leistung auswirken als Bibliotheken, es gibt jedoch Ausnahmen. Die Webleistung ist ein riesiges Gebiet mit vielen Themen. Daher werden in diesen Abschnitten zwei wichtige Themen behandelt: Tree Shaking und Softwareupdates.

Tree-Shaking

Das Bündeln ist nur eine Facette der Webleistung, hat aber einen großen Leistungseffekt, insbesondere bei größeren Bibliotheken. Die Verwendung von Tree Shaking beim Importieren und Exportieren verbessert die Leistung, da Code gefunden und entfernt wird, der für die App nicht erforderlich ist.

Beim Bündeln von JavaScript-Code gibt es einen nützlichen Schritt namens Tree Shaking, mit dem Sie Ihren Code leistungsoptimieren können. Dieser Schritt ist jedoch einfacher mit Bibliotheken als mit Frameworks durchzuführen.

Wenn Sie Code von Drittanbietern in Ihren Quellcode importieren, bündeln Sie den Code in der Regel in einer oder wenigen Ausgabedateien. Beispielsweise werden die Dateien header.js, footer.js und sidebar.js in der Datei output.js kombiniert. Das ist die Ausgabedatei, die Sie in Ihre Webanwendung laden.

Um das Tree Shaking besser zu verstehen, sehen Sie sich die folgenden Codebeispiele an:

// library.js file
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js file
import {add} from './library.js';

console.log(add(7, 10));

Das library.js-Codebeispiel ist zu Demonstrationszwecken bewusst klein gehalten, im Vergleich zu dem, was Sie in der Praxis finden könnten, wo die Bibliothek Tausende von Zeilen lang sein kann.

Ein naiver Bündelungsprozess kann den Code mit dieser Ausgabe exportieren:

// output.js file
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(add(7, 10));

Auch wenn die Funktion subtract() in dieser App nicht benötigt wird, ist sie im finalen Bundle enthalten. Unnötiger Code wie dieser erhöht die Downloadgröße, die Parse- und Kompilierungszeiten sowie die Ausführungskosten, die Ihre Nutzer zahlen müssen. Ein einfacher Tree-Shaking-Ansatz entfernt den nicht mehr benötigten Code und führt zu dieser Ausgabe:

// output.js file
function add(a, b) {
  return a + b;
}

console.log(add(7, 10));

Der Code ist kürzer und prägnanter. In diesem Beispiel ist die Leistungssteigerung vernachlässigbar, aber in einer echten App, in der die Bibliothek Tausende von Zeilen lang ist, kann der Leistungseffekt viel größer sein. Interessanterweise gehen moderne Bündelungstools wie Parcel, Webpack und Rollup noch einen Schritt weiter, da sie Minimierung und Tree Shaking kombinieren, um ein hochoptimiertes Bundle zu erstellen. Um die Effektivität von Bundle-Tools zu demonstrieren, haben wir mit Parcel eine Bundle-Datei mit den vorherigen Codebeispielen erstellt. Parcel hat den gesamten nicht verwendeten Code entfernt und dieses einzelne Modul exportiert:

console.log(7+10);

Parcel ist intelligent genug, um unter anderem Importanweisungen, Funktionsdefinitionen und Verhalten zu entfernen, um einen hoch optimierten Code zu erstellen.

Das Bündeln ist nur eine Facette der Webleistung, hat aber einen großen Leistungseffekt, insbesondere bei größeren Bibliotheken. Tree Shaking ist in der Regel einfacher mit Bibliotheken als mit Frameworks.

Softwareupdates

Bei vielen Bibliotheken und Frameworks werden durch Softwareupdates Funktionen hinzugefügt, Fehler behoben und die Größe der Bibliothek nimmt im Laufe der Zeit zu. Es ist nicht immer notwendig, Updates herunterzuladen. Wenn die Updates jedoch Fehlerkorrekturen, gewünschte Funktionsverbesserungen oder Sicherheitskorrekturen enthalten, sollten Sie sie installieren. Je mehr Daten Sie jedoch über die Verbindung senden, desto weniger leistungsfähig ist Ihre App und desto größer ist der Leistungseffekt auf die Nutzerfreundlichkeit.

Wenn eine Bibliothek immer größer wird, können Sie das Wachstum mit Tree Shaking begrenzen. Alternativ können Sie eine kleinere Alternative zur JavaScript-Bibliothek verwenden. Weitere Informationen finden Sie unter Austauschbarkeit.

Wenn ein Framework größer wird, ist das Tree Shaking nicht nur schwieriger, sondern es kann auch schwieriger sein, ein Framework durch ein anderes zu ersetzen. Weitere Informationen finden Sie unter Austauschbarkeit.

Beschäftigungsfähigkeit

Es ist ein offenes Geheimnis, dass viele Unternehmen strenge Anforderungen an Entwickler stellen, die ein bestimmtes Framework kennen. Möglicherweise wird Ihr Wissen über die Grundlagen des Webs ignoriert und nur Ihr spezifisches Wissen über ein bestimmtes JavaScript-Framework berücksichtigt. Ob das richtig oder falsch ist, ist für viele Jobs Realität.

Kenntnisse über einige JavaScript-Bibliotheken schaden Ihrer Bewerbung nicht, aber es gibt keine Garantie dafür, dass Sie sich dadurch von der Masse abheben. Wenn Sie einige beliebte JavaScript-Frameworks sehr gut kennen, besteht eine gute Chance, dass Arbeitgeber dieses Wissen auf dem aktuellen Arbeitsmarkt für Webentwickler als vorteilhaft ansehen. Einige große Unternehmen sind noch mit sehr alten JavaScript-Frameworks gefangen und suchen möglicherweise verzweifelt nach Kandidaten, die mit solchen Frameworks vertraut sind.

Sie können dieses offene Geheimnis zu Ihrem Vorteil nutzen. Gehen Sie jedoch mit Vorsicht an den Arbeitsmarkt heran und beachten Sie Folgendes:

  • Wenn Sie in Ihrer Karriere viel Zeit mit nur einem Framework verbringen, entgehen Ihnen möglicherweise Lernerfahrungen mit anderen, moderneren Frameworks.
  • Stellen Sie sich einen Entwickler vor, der die Grundlagen der Softwareentwicklung oder Webentwicklung nicht gut kennt, aber als Framework-Entwickler eingestellt wird. Dieser Entwickler schreibt keinen effektiven Code und es kann entmutigend oder überwältigend sein, an einer solchen Codebasis zu arbeiten. In einigen Fällen kann dies zu einem Burn-out führen. Beispielsweise müssen Sie möglicherweise Code refaktorisieren oder die Leistung optimieren, weil er zu langsam ist.
  • Wenn Sie Webentwicklung lernen, sollten Sie sich zuerst mit den Grundlagen der Webentwicklung, der Softwareentwicklung und des Software Engineerings vertraut machen. Mit einer solchen soliden Grundlage können Sie jedes JavaScript-Framework schnell und effektiv erlernen.

Fazit

Sie haben sich wirklich Mühe gegeben, die Unterschiede zwischen JavaScript-Frameworks und ‑Bibliotheken zu verstehen. Sie werden nur selten Frameworks oder Bibliotheken auswählen, es sei denn, Sie arbeiten an Greenfield-Projekten oder als Berater. Wenn solche Entscheidungen jedoch anstehen, ist es umso besser, je mehr Sie über das Thema wissen.

Wie Sie wissen, kann die Wahl des Frameworks und in einigen Fällen auch der Bibliothek sich erheblich auf die Entwicklung und die Endnutzer auswirken, z. B. auf die Leistung.