In diesem Artikel erfahren Sie mehr über die Unterschiede zwischen Frameworks und Bibliotheken im Kontext einer clientseitigen JavaScript-Umgebung. Dabei handelt es sich um den Code, 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 Teil vieler Bereiche der Softwareentwicklung sind, wie etwa die Entwicklung nativer mobiler Apps.
Die Diskussionen in diesem Beitrag konzentrieren sich auf die qualitativen Unterschiede und nicht auf die quantitativen Unterschiede zwischen Bibliotheken und Frameworks. Beispiel:
- Quantitativ:Frameworks entsprechen in der Regel dem Prinzip der Umkehrung der Kontrolle.
- Qualitativ:Wenn Sie nach einer Stelle suchen, kann das Framework für zukünftige Arbeitgeber interessanter sein.
Warum sollte ich mich über Bibliotheken und Frameworks informieren?
Die Verwendung von JavaScript-Bibliotheken und -Frameworks findet im Web immer mehr Verbreitung. Jede andere Website scheint Drittanbieter-Code als Teil ihrer JavaScript-Ressourcen zu verwenden. Die Gewichtung von Webseiten nimmt mit der Zeit zu, was sich auf die Nutzer auswirkt. JavaScript trägt wesentlich zur Gewichtung der gesamten Seite bei. Es ist dasselbe JavaScript, das häufig auch Drittanbieterbibliotheken und ‐Frameworks umfasst.
Es reicht nicht aus, „Keine JavaScript-Frameworks mehr verwenden“ zu sagen, da Frameworks für Entwickler einen großen Vorteil bieten. Frameworks unterstützen Sie unter anderem dabei, effizient zu programmieren und Funktionen schnell bereitzustellen. Stattdessen sollten Sie sich informieren, damit Sie zu gegebener Zeit eine fundierte Entscheidung treffen können.
„Sollte ich heute eine Bibliothek oder ein Framework verwenden?“ ist eine ungewöhnliche Frage, die Sie sich stellen sollten. Bibliotheken und Frameworks sind zwei völlig unterschiedliche Dinge. Bibliotheken und Frameworks werden jedoch häufig zusammengeführt und je mehr Wissen Sie über die beiden haben, desto wahrscheinlicher ist es, dass Sie fundierte Entscheidungen über ihre Verwendung treffen.
Beispiele für Bibliotheken und Frameworks
Möglicherweise finden Sie Drittanbietercode auch durch andere Namen, z. B. Widgets, Plug-ins, Polyfills oder Pakete. Normalerweise fallen sie jedoch alle in die Kategorie einer Bibliothek oder eines Frameworks. Grundsätzlich kann der Unterschied zwischen den beiden so zusammengefasst werden:
- Bei einer Bibliothek ruft Ihr App-Code den Bibliothekscode auf.
- Bei einem Framework wird Ihr App-Code vom Framework aufgerufen.
Mediathek
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 lodash-Bibliothek 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 tut. Es ist fast unmöglich:
- Eine
import-Anweisung importiert die Lodash-Bibliothek in das JavaScript-Programm. - Die Methode
capitalize()wird aufgerufen. - Ein einzelnes Argument wird an die Methode übergeben.
- Der Rückgabewert wird in einer Variablen erfasst.
Framework
Frameworks sind tendenziell größer als Bibliotheken und tragen stärker zur Seitengröße 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 eine eigene spezielle API.
- Entwickler haben nicht die volle Kontrolle darüber, wie und wann Vorgänge ausgeführt werden. Beispielsweise wird abgeleitet, wie und wann Vue den String
'Hello, world'auf der Seite abstrahiert. - Die Instanziierung der
Vue-Klasse bringt einige Nebeneffekte mit sich, die bei der Verwendung von Frameworks häufig vorkommen, während eine Bibliothek reine Funktionen bietet. - Das Framework schreibt ein bestimmtes HTML-Vorlagensystem vor, anstatt Ihr eigenes zu verwenden.
- Wenn Sie sich die Dokumentation zum Vue-Framework oder die meisten anderen Frameworks-Dokumentationen näher ansehen, werden Sie feststellen, wie Frameworks Architekturmuster vorschreiben, die Sie verwenden können. JavaScript-Frameworks nehmen Ihnen eine gewisse kognitive Belastung ab, da Sie das nicht selbst herausfinden müssen.
Wann sollte ich eine Bibliothek und wann ein Framework verwenden?
Nachdem Sie die Vergleiche zwischen Bibliotheken und Frameworks gelesen haben, wissen Sie vielleicht, 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. Dies ist besonders hilfreich, wenn Sie ein neues Projekt beginnen. Eine Bibliothek kann die Komplexität verringern, konzentriert sich aber in der Regel auf die Wiederverwendung von Code.
- Framework-Autoren möchten, dass Sie produktiv arbeiten und häufig zusätzliche Tools, Debugging-Software und umfassende Leitfäden sowie andere Ressourcen entwickeln, die Ihnen dabei helfen, ein Framework effektiv zu verwenden. Bibliotheksautoren möchten auch, dass Sie produktiv arbeiten. Spezialisierte Werkzeuge sind in Bibliotheken jedoch eher selten.
- Die meisten Frameworks bieten einen funktionalen Ausgangspunkt, z. B. ein Skeleton oder einen Standardtext, mit dem Sie Webanwendungen schnell erstellen können. Eine Bibliothek wird Teil Ihrer bereits vorhandenen Codebasis.
- Im Allgemeinen machen Frameworks Ihre Codebasis etwas komplexer. Die Komplexität ist nicht immer von Anfang an offensichtlich, kann sich aber mit der Zeit enthüllen.
Zur Erinnerung: Normalerweise vergleichen Sie eine Bibliothek nicht mit einem Framework, da es sich um unterschiedliche Dinge handelt, die unterschiedliche Aufgaben erfüllen. Je mehr Wissen Sie jedoch über die beiden Tools haben, desto besser können Sie entscheiden, welche für Sie am besten geeignet ist. Die Entscheidung, ein Framework oder eine Bibliothek zu verwenden, hängt letztendlich von Ihren Anforderungen ab.
Anpassbarkeit
Du musst also nicht jede Woche deine Mediathek oder dein Gerüst ändern. Es ist jedoch empfehlenswert, die Nachteile eines Pakets zu kennen, mit dem man an sein Ökosystem gebunden ist. Sie sollten sich auch darüber im Klaren sein, dass der Entwickler, der sich für das Paket eines Drittanbieters entscheidet, für die Erstellung einer lose Kopplung zwischen dem Paket und dem Quellcode der App verantwortlich ist.
Ein an den Quellcode gebundenes Paket lässt sich schwerer entfernen und durch ein anderes Paket ersetzen. In folgenden Fällen müssen Sie ein Paket möglicherweise austauschen:
- Sie müssen Aktualisierungen an einem Paket vornehmen, das nicht mehr gewartet wird.
- Sie stellen fest, dass das Paket zu fehlerhaft ist.
- Sie erfahren mehr über ein neues Paket, das Ihren Bedürfnissen besser entspricht.
- Ihre Produktanforderungen ändern sich und das Paket wird nicht mehr benötigt.
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 Drittanbieter-@package/set-color-Paket für drei separate 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 Nutzung der Bibliothek an einem Ort abstrahieren, wie Sie in diesem Beispiel sehen können:
// 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 der Code jetzt einfacher zu handhaben, da die interne Datei set-color.js ein Standardfarbdesign festlegt.
Nutzerfreundlichkeit
Ein Framework kann eine komplexe API haben, aber das Framework könnte Entwicklertools bieten, die die Nutzung insgesamt vereinfachen. Nutzerfreundlichkeit basiert auf vielen Faktoren und kann sehr subjektiv sein. Ein Framework kann aus folgenden Gründen schwierig zu verwenden sein:
- 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 Techniken, die Ihnen und Ihrem Team nicht bekannt sind.
Mithilfe von Frameworks können diese Herausforderungen durch gängige Best Practices bewältigt werden, zum Beispiel:
- Das Framework bietet Entwickler- und Diagnosetools, die das Debugging vereinfachen.
- Das Framework verfügt über eine aktive Entwickler-Community, die zusammen an kostenloser Dokumentation, Leitfäden, Tutorials und Videos zusammenarbeiten. Nachdem Sie diese Inhalte aufgenommen haben, sind Sie mit dem Framework produktiv.
- Das Framework bietet eine API, die den üblichen Codierungskonventionen entspricht. Sie sind mit dem Framework produktiv, da Sie solche Konventionen bereits kennengelernt haben und mit Programmierstilen besser vertraut sind.
Diese Punkte werden zwar üblicherweise Frameworks zugeschrieben, sie können aber auch auf Bibliotheken zugeschrieben werden. Die JavaScript-Bibliothek D3.js ist beispielsweise leistungsstark und verfügt über ein großes System, das neben anderen Ressourcen auch Workshops, Leitfäden und Dokumentationen anbietet, die sich 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 Frameworks sich stärker auf die Leistung auswirken als Bibliotheken, obwohl es in diesem Fall Ausnahmen gibt. Die Leistung im Web ist ein riesiges Gebiet mit vielen Themen. In diesen Abschnitten geht es um zwei wichtige Themen: Baumwolken und Softwareupdates.
Baumschütteln
Das Erstellen von Sets ist nur ein Aspekt der Webleistung, hat aber insbesondere bei größeren Bibliotheken große Auswirkungen auf die Leistung. Die Verwendung der Baumwacklerfunktion beim Import und Export verbessert die Leistung, da Code gefunden und bereinigt wird, der für die Anwendung nicht benötigt wird.
Wenn Sie JavaScript-Code bündeln, gibt es einen nützlichen Schritt, der sogenannte Baumschüttung. Damit können Sie Ihren Code auf wertvolle Leistung optimieren, obwohl dies einfacher mit Bibliotheken als mit Frameworks möglich ist.
Wenn Sie Drittanbietercode in Ihren Quellcode importieren, bündeln Sie den Code in der Regel in einer oder mehreren Ausgabedateien. Beispielsweise werden die Dateien header.js, footer.js und sidebar.js in der Datei output.js zusammengefasst. Dies ist die Ausgabedatei, die Sie in Ihre Webanwendung laden.
Sehen Sie sich diese Codebeispiele an, um Baumwackeln 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));
Zu Demonstrationszwecken ist das Codebeispiel library.js absichtlich klein gehalten, im Vergleich zu dem, was man in der realen Welt finden könnte, wo die Bibliothek Tausende von Zeilen lang sein kann.
Ein einfacher Bundle-Prozess könnte 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));
Die Funktion subtract() wird in dieser App zwar nicht benötigt, ist aber im endgültigen Bundle enthalten. Durch diesen unnötigen Code werden Downloadgröße, Analyse- und Kompilierungszeit sowie Ausführungskosten erhöht. Bei einem einfachen Ansatz für das Baumschütteln wird der tote Code entfernt und Sie erhalten die folgende Ausgabe:
// output.js file
function add(a, b) {
return a + b;
}
console.log(add(7, 10));
Beachten Sie, dass der Code kürzer und prägnanter ist. In diesem Beispiel ist die Leistungsverbesserung vernachlässigbar, aber in einer realen App, in der die Bibliothek Tausende von Zeilen lang ist, kann der Leistungseffekt viel stärker sein. Interessanterweise gehen moderne Bundle-Tools wie Parcel, Webpack und Rollup noch einen Schritt weiter, da sie Minification und Tree Shaking kombinieren und so ein hochoptimiertes Bundle erstellen. Um die Effektivität der Pakettools zu demonstrieren, haben wir mit Parcel eine Gruppierungsdatei mit den vorherigen Codebeispielen erstellt. Das Paket hat sämtlichen nicht verwendeten Code entfernt und dieses einzelne Modul exportiert:
console.log(7+10);
Parcel ist intelligent genug, um Importanweisungen, Funktionsdefinitionen und Verhaltensweisen unter anderen Elementen zu entfernen, um hochgradig optimierten Code zu erstellen.
Das Erstellen von Sets ist nur ein Aspekt der Webleistung, hat aber insbesondere bei größeren Bibliotheken große Auswirkungen auf die Leistung. Baumwackeln lässt sich in der Regel mit Bibliotheken einfacher durchführen als mit Frameworks.
Softwareupdates
Bei vielen Bibliotheken und Frameworks werden durch Softwareupdates zusätzliche Funktionen hinzugefügt, Fehler behoben und im Laufe der Zeit immer größer. Updates müssen nicht immer heruntergeladen werden. Wenn die Updates jedoch Fehlerbehebungen, gewünschte Funktionserweiterungen oder Sicherheitskorrekturen enthalten, sollten Sie ein Update durchführen. Je mehr Daten Sie jedoch übertragen, desto schlechter ist die Leistung Ihrer App und desto stärker wirkt sich die Leistung auf die Nutzererfahrung aus.
Wenn eine Bibliothek wächst, können Sie das Baumwackeln reduzieren, um das Wachstum abzumildern. Alternativ können Sie eine kleinere Alternative zur JavaScript-Bibliothek verwenden. Weitere Informationen finden Sie unter Anpassbarkeit.
Wenn ein Framework größer wird, ist das Baum-Shating eine größere Herausforderung, es kann auch schwieriger sein, ein Framework gegen ein anderes auszutauschen. Weitere Informationen finden Sie unter Anpassbarkeit.
Beschäftigungsmöglichkeiten
Es ist ein offenes Geheimnis, dass viele Unternehmen strenge Anforderungen an Entwickler haben, die ein bestimmtes Framework kennen. Sie ignorieren möglicherweise Ihr Wissen über die Webgrundlagen und konzentrieren sich nur auf Ihr spezifisches Wissen über ein bestimmtes JavaScript-Framework! Ob richtig oder falsch – das ist in vielen Jobs üblich.
Das Wissen über einige JavaScript-Bibliotheken schadet Ihrer Bewerbung zwar nicht, aber es gibt wenig Garantie, dass Sie sich davon abheben. Wenn Sie einige beliebte JavaScript-Frameworks sehr gut kennen, ist es sehr wahrscheinlich, dass Arbeitgebende dieses Wissen auf dem aktuellen Arbeitsmarkt für Webentwickler als positiv empfinden. Einige große Unternehmen sind mit sehr alten JavaScript-Frameworks stecken geblieben und sind möglicherweise sogar verzweifelt nach Kandidaten, die mit solchen Frameworks vertraut sind.
Sie können dieses offene Secret zu Ihrem Vorteil nutzen. Sie sollten jedoch mit Bedacht und unter Berücksichtigung der folgenden Überlegungen an den Arbeitsmarkt herangehen:
- Denken Sie daran: Wenn Sie in Ihrer Karriere viel Zeit mit nur einem Framework verbringen, entgehen Ihnen möglicherweise Lernerfahrungen mit anderen, moderneren Konzepten.
- Denken Sie an eine Entwicklerin, die sich mit den Grundlagen der Software- oder Webentwicklung nicht gut auskennt, aber als Framework-Entwickler eingestellt wird. Dieser Entwickler schreibt keinen effektiven Code, und Sie finden es vielleicht einschüchternd oder überwältigend, mit einer solchen Codebasis zu arbeiten. In einigen Fällen kann dieses Szenario zu Burnout führen. Sie müssen beispielsweise den Code refaktorieren oder die Leistung optimieren, da er langsam ist.
- Wenn Sie sich mit Webentwicklung beschäftigen, beginnen Sie am besten mit einem starken Fokus auf die Grundlagen der Webentwicklung, Softwareentwicklung und Softwareentwicklung. Eine solch starke Grundlage hilft Ihnen, jedes JavaScript-Framework schnell und effektiv aufzunehmen.
Fazit
Sie haben hart gearbeitet, um den Vergleich von JavaScript-Frameworks und -Bibliotheken zu verstehen. Sie wählen nur selten Frameworks oder Bibliotheken aus, wenn Sie nicht an Greenfield-Projekten oder als Berater arbeiten. Sollte es jedoch zu einer solchen Entscheidung kommen, gilt: je mehr Wissen Sie über das Thema haben, desto besser kann Ihre Entscheidung treffen.
Wie Sie bereits wissen, kann sich die Wahl des Frameworks – und in einigen Fällen – die Wahl der Bibliothek erheblich auf Ihre Entwicklungsumgebung und Endnutzer auswirken, z. B. auf die Leistung.