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.
Die Diskussionen in diesem Beitrag konzentrieren sich auf die qualitativen Unterschiede und nicht auf die quantitativen Unterschiede zwischen Bibliotheken und Frameworks. Beispiel:
- Quantitativ:Frameworks folgen in der Regel dem Prinzip der Kontrollinversion.
- Qualitative: Die Erfahrung mit dem Framework kann für zukünftige Arbeitgeber attraktiver sein, wenn Sie auf Jobsuche sind.
Warum sollten Sie sich mit Bibliotheken und Frameworks vertraut machen?
JavaScript-Bibliotheken und ‑Frameworks werden im Web häufig verwendet. Jede zweite Website verwendet offenbar 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: „Keine JavaScript-Frameworks verwenden“, da Frameworks einen großen Vorteil für Entwickler bieten. Frameworks können Ihnen unter anderem dabei helfen, effizient zu programmieren und Funktionen schnell bereitzustellen. Stattdessen sollten Sie sich informieren, damit Sie eine fundierte Entscheidung treffen können, wenn es soweit ist.
„Sollte ich heute eine Bibliothek oder ein Framework verwenden?“ ist eine ungewöhnliche Frage. 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. In der Regel fallen sie jedoch alle in die Kategorie einer Bibliothek oder eines Frameworks. Im Grunde genommen lässt sich der Unterschied zwischen den beiden so zusammenfassen:
- Bei einer Bibliothek ruft der App-Code den Bibliothekcode auf.
- Bei einem Framework wird Ihr App-Code vom Framework aufgerufen.
Bibliothek
Bibliotheken sind in der Regel einfacher als Frameworks und bieten nur 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 praktikabel, diesen Code zu lesen und seine Funktion zu verstehen. Es ist gar nicht so magisch:
- Mit einer
import-Anweisung wird die lodash-Bibliothek in das JavaScript-Programm importiert. - Die Methode
capitalize()wird aufgerufen. - Ein einzelnes Argument wird an die Methode übergeben.
- 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
Vue-Klasse hat einige Nebeneffekte, die bei der Verwendung von Frameworks häufig auftreten, während eine Bibliothek möglicherweise reine Funktionen bietet. - Das Framework schreibt ein bestimmtes HTML-Vorlagensystem vor, anstatt Ihr eigenes zu verwenden.
- Wenn Sie sich die Dokumentation des Vue-Frameworks oder die meisten anderen Framework-Dokumentationen genauer ansehen, können Sie sehen, 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 für Sie als Entwickler die Komplexität verringern. 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 zwar bei der Komplexität helfen, konzentriert sich aber in der Regel auf die Wiederverwendung von Code.
- Framework-Autoren möchten, dass Sie produktiv arbeiten, und entwickeln häufig zusätzliche Tools, Debugging-Software und umfassende Leitfäden, die Ihnen dabei helfen, ein Framework effektiv zu nutzen. 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 Wissen Sie über diese beiden Methoden haben, desto besser können Sie entscheiden, welches 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.
austauschbar
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 mehr über ein neues 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 wurde 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, könnte aber Entwicklertools bieten, die die Nutzung insgesamt vereinfachen. Die Nutzerfreundlichkeit hängt von vielen Faktoren ab und kann sehr subjektiv sein. Ein Framework kann aus folgenden Gründen schwierig zu nutzen sein:
- Das Framework verfügt über eine inhärent komplexe API.
- Das Framework ist schlecht dokumentiert und erfordert eine Menge 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 diese Herausforderungen durch gängige Best Practices gemindert werden, 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 sind mit dem Framework produktiv, weil Sie bereits mit solchen Konventionen vertraut sind und sich besser mit Programmierstilen auskennen.
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.
Baumzittern
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.
Die folgenden Codebeispiele helfen Ihnen, das Erschüttern von Bäumen besser zu verstehen:
// 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 Bundle-Prozess könnte den Code mit der folgenden 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. Das Paket 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. Baumschüttungen sind in der Regel mit Bibliotheken einfacher 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 sie 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 dies nicht nur eine Herausforderung, sondern es kann auch schwieriger sein, ein Framework gegen ein anderes auszutauschen. 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 Webgrundlagen 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 anderen abheben. Wenn Sie einige beliebte JavaScript-Frameworks gut kennen, ist es sehr wahrscheinlich, dass Arbeitgebende dieses Wissen auf dem aktuellen Arbeitsmarkt für Webentwickler als vorteilhaft betrachten. Einige große Unternehmen sind an sehr alten JavaScript-Frameworks gebunden 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 die folgenden Überlegungen:
- 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 wählen Frameworks oder Bibliotheken nur selten aus, 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 die der Bibliothek sich erheblich auf die Entwicklung und die Endnutzer auswirken, z. B. auf die Leistung.