November 2022
Chart.js ist eine simple, aber auch flexible Javascript-Bibliothek, die dir ermöglicht, verschiedene Arten an Diagrammen...
JavaScript ist die Sprache, die das Web beherrscht! Aber beim Entwickeln einer Webseite musst du dich nicht allein auf eine einzige Sprache verlassen. Frameworks können dir beim Programmieren einer Seite helfen. JavaScript bietet mittlerweile eine Vielzahl an Frameworks an.
In diesem Blogpost werde ich dir Tipps geben, wie du herausfindest, welches JavaScript Framework für dein Projekt am geeignetsten ist und ob es immer gleich sinnvoll ist ein Framework zu verwenden.
Was ist ein JavaScript Framework?
Es kann viel Arbeit sein von Grund auf eine Webseite nur mit JavaScript zu entwickeln. Frameworks helfen dir dabei, indem sie eine Art Grundgerüst anbieten. Dieses Grundgerüst besteht aus einzelnen Bausteinen aus vorgefertigtem Code, der verschiedene Verwendungszwecke unterstützt. Im Fall von JavaScript umfasst dieses Grundgerüst eine Ansammlung an Codebibliotheken. Jedes Framework unterstützt unterschiedliche Features und Funktionen, weshalb die Wahl des passenden Frameworks für deine Webseite sehr wichtig ist!
Warum solltest du ein JavaScript Framework nutzen?
Wann solltest du KEIN JavaScript Framework nutzen?
Wenn du mehr über CMS erfahren möchtest, kannst du gerne unseren Blogbeitrag dazu lesen:
Welche Frameworks gibt es?
Wie bereits erwähnt, gibt es zwischen den Funktionalitäten der einzelnen Frameworks teilweise sehr große Unterschiede. Es gibt zum Beispiel Frameworks, die werden nur für das Frontend genutzt. Auf der anderen Seite gibt es welche, die können nur für das Backend oder zum Testen verwendet werden.
Deswegen wird es im Folgenden eine Übersicht über die meistgenutzten Frameworks und ihre grundlegenden Funktionalitätsunterschiede geben.
Erstmal vorweg, die wohl drei bekanntesten JavaScript Frameworks sind React, Angular und Vue. Deswegen wird es zu diesen zuerst eine etwas ausführlichere Übersicht geben.
React JS
React ist eines der populärsten JavaScript Frameworks. Es wurde von Facebook im Jahr 2013 als Open-Source-Lösung zur Verfügung gestellt. React ist ein Framework, das zum Erstellen von responsiven und interaktiven Benutzeroberflächen (UIs) genutzt werden kann.
Grund Features:
JSX:
JSX steht für JavaScript XML und ermöglicht es dem Entwickler HTML Elemente mittels JavaScript zu schreiben und im DOM zu platzieren, ohne zusätzliche Methoden nutzen zu müssen.
JSX steht für JavaScript XML und ermöglicht es dem Entwickler HTML Elemente mittels JavaScript zu schreiben und im DOM zu platzieren, ohne zusätzliche Methoden nutzen zu müssen.
DOM:
DOM bedeutet Document Object Model und ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es definiert die logische Struktur eines Dokumentes und wie auf diese zugegriffen werden und manipuliert werden kann.
DOM bedeutet Document Object Model und ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es definiert die logische Struktur eines Dokumentes und wie auf diese zugegriffen werden und manipuliert werden kann.
Datenbindung:
Es gibt verschiedene Arten von Datenbindung bei der Webprogrammierung. Unidirektionale oder Ein-Wege-Datenbindung bedeutet, dass Daten immer nur in eine Richtung weitergegeben und verarbeitet werden. Um Daten in beide Richtungen weitergeben zu können, verwendet man die bidirektionale oder Zwei-Wege-Datenbindung.
Es gibt verschiedene Arten von Datenbindung bei der Webprogrammierung. Unidirektionale oder Ein-Wege-Datenbindung bedeutet, dass Daten immer nur in eine Richtung weitergegeben und verarbeitet werden. Um Daten in beide Richtungen weitergeben zu können, verwendet man die bidirektionale oder Zwei-Wege-Datenbindung.
Callback-Funktionen:
Wenn man einer Funktion als Parameter eine weitere Funktion zuweist, nennt man das Callback-Funktion. Sie dienen dazu Funktionen erweiterbar zu machen, um dann bei bestimmten Ereignissen aufgerufen zu werden. Callbacks werden zuerst nur definiert und nur aufgerufen und ausgeführt, wenn ein bestimmtes Ereignis eintritt.
Wenn man einer Funktion als Parameter eine weitere Funktion zuweist, nennt man das Callback-Funktion. Sie dienen dazu Funktionen erweiterbar zu machen, um dann bei bestimmten Ereignissen aufgerufen zu werden. Callbacks werden zuerst nur definiert und nur aufgerufen und ausgeführt, wenn ein bestimmtes Ereignis eintritt.
Gründe für React:
Wenn du mehr über SEO erfahren willst, kannst du unseren Beitrag dazu lesen:
Nachteile von React:
Wann ist es am sinnvollsten React zu nutzen?
SPA:
Unter Single-Page Anwendungen versteht man Webanwendungen, die nur aus einem einzigen HTML-Dokument bestehen und dynamisch nachgeladen werden.
Beispiele:
PayPal, Uber, Instagram, Airbnb, Facebook, Netflix, Printerst, Asana, Reddit
Angular JS / Angular
Angular dominiert ebenfalls wie React und Vue die Listen der Webframeworks heutzutage. Es ist ein auf TypeScript basierendes Open-Source Frontend-Framework, das von Google 2010 entwickelt wurde. 2016 wurde der Vorgänger Angular JS in Angular 2 (oder auch Angular genannt) umbenannt. Mit dem Nachfolger kamen viele radikale Änderungen dazu. Eine der Neuerungen ist, dass statt JavaScript jetzt TypeScript verwendet wird. Code aus der alten Version kann aber noch immer auf der neuen laufen. Es kann also noch weiterhin mit JavaScript programmiert werden.
Angular wurde entwickelt, um die Entwicklung und das Testen von Webanwendungen mit einem Framework für MVC zu vereinfachen.
Grund Features:
Zu MVC wird demnächst auch ein Beitrag auf unserem Blog erscheinen.
MVC:
Model View Controller oder kurz MVC ist ein Designpattern, um Webanwendungen zu entwickeln. Dabei gibt es drei Teile: Model, View und Controller. Das Model enthält die grundlegenden Daten der Anwendung. Die View präsentiert die Daten des Models dem Benutzer. Und der Controller ist das Bindeglied zwischen Model und View. Er fängt Aktionen ab und liefert eine entsprechende Antwort zurück.
Gründe für Angular:
Nachteile von Angular:
Wann ist es am sinnvollsten Angular zu nutzen?
Beispiele:
Google Services, Forbes, LEGO, Autodesk, BMW, Xbox
Vue JS
Vue JS wurde 2014 von Evan You und seinem Team, während er bei Google arbeitete, als Open-Source Framework entwickelt. Es wird hauptsächlich für kleine responsive Frontend-Anwendungen verwendet.
Das progressive Framework vereinigt die besten Features aus Angular (View Layer, Deklaratives Rendering) und React (Virtuelles DOM).
Zu Vue wird demnächst auch noch ein etwas genauerer Blogbeitrag kommen.
Grund Features:
Gründe für Vue:
Nachteile von Vue:
Wann ist es am sinnvollsten Vue zu nutzen?
Beispiele:
Alibaba, 9gag, Xiaomi, Grammarly, Laracasts
Welche weiteren Frameworks gibt es noch?
Natürlich sind React, Angular und Vue nicht die einzigen Frameworks, die es wert sind zu nutzen. Auch andere Frameworks können Funktionalitäten anbieten, die vielleicht besser zu deinem Projekt passen als die drei bisher genannten.
Frontend-Frameworks:
Ember JS
Ember JS wurde 2011 veröffentlicht und ist ein oft genutztes Frontend-Framework, das besonders beim Erstellen von skalierbaren SPAs helfen kann. Es unterstützt sowohl MVC als auch MVVM-Architektur. Embers Fokus liegt auf webbasierten Anwendungen, bietet aber auch mittlerweile mobil-basierte Anwendungen an.
Das Framework kann für Beginner recht kompliziert sein und ist eher für größere Projekte geeignet. Außerdem können sowohl JavaScript als auch TypeScript genutzt werden.
Beispiele:
Apple Music, LinkedIn, Twitch
BackBone JS
BackBone JS wurde 2010 von Jeremy Ashkenas entwickelt und ist ein leichtgewichtiges Open-Source Framework, das besonders für die Entwicklung von einfachen SPAs und client-seitigen Anwendungen geeignet ist. Es basiert auf der Model View Presenter (MVP) Architektur.
Das Framework ist beginnerfreundlich und extrem portabel. Leider ist die Architektur manchmal etwas komplex und nicht ganz übersichtlich.
Beispiele:
Trello, Tumblr, Uber
Gatsby JS
Gatsby ist ein schnelles und performantes Open-Source Frontend-Framework, das dir hilft, Anwendungen mit React zu entwickeln. Es kann in JavaScript, SCSS oder LESS gecodet werden und serverseitig gerendert werden. Gatsby hat eine hohe Webzugänglichkeit und bietet eine Vielzahl an Plugins und Themen an.
Beispiele:
Airbnb, Nike
Svelte
Svelte ist im Gegensatz zu den anderen Frameworks in dieser Liste ein Open-Source Frontend-Compiler, der 2016 entwickelt wurde. Weil es nur ein Compiler ist, ist das Framework sehr leichtgewichtig. Es wird eine MVC-Architektur genutzt und es kann sowohl TypeScript als auch JavaScript verwendet werden. Leider gibt es auf dem Markt nicht viele Svelte Tools.
Svelte ist ideal für kleine Projekte und Anfänger geeignet wegen seiner simplen Syntax.
Beispiele:
New York Times, GoDaddy, Razorpay
jQuery
Bevor es die anderen modernen JavaScript Frameworks und Bibliotheken gab, regierte jQuery den IT-Markt. Es wurde 2006 von John Resign entwickelt und ist eines der ältesten Open-Source JavaScript Frameworks.
jQuery ist beginnerfreundlich und gut in Event Handling. Leider sind manche DOM APIs schon etwas veraltet.
jQuery ist am geeignetsten wegen seines Cross-Browser-Support, um Web- und Desktop-basierte JavaScript Anwendungen auszuliefern.
Beispiele:
Twitter, Microsoft, Uber
Fullstack-Frameworks:
Meteor JS
Meteor ist ein Open-Source-Framework, das 2012 veröffentlicht wurde. Meteor bietet eine Fullstack-Lösung an um Anwendungen für Mobile, Desktop und Web zu erstellen. Gerade für Beginner ist dies praktisch. Zusätzlich werden integrierte Tools und Frameworks wie MongoDB, React und Cordova angeboten.
Beispiele:
Pathable, Maestro, Chatra
Backend-Frameworks:
Node.js
Node.js ist ein serverseitiges Open-Source Framework, das bereits 2009 entwickelt wurde. Es ist nicht direkt ein Framework, sondern eine Laufzeitumgebung, die JavaScript Code außerhalb eines Browsers ausführt. Node.js wurde entwickelt, um dir bei der Entwicklung von skalierbaren, schnellen und zuverlässigen netzwerkbasierten serverseitigen Anwendungen zu helfen. Die Anwendung lässt sich durch Packages mit Hilfe des Node Package Managers (npm) erweitern.
Beispiele:
Linkedin, Netflix, PayPal, AWS, IBM
Express JS
Express wurde 2010 entwickelt und ist eines der leichtgewichtigsten, minimalistischsten und schnellsten Backend-Frameworks. Express erlaubt es weitere Features zu Node.js hinzuzufügen. Es bietet ein sehr schnelles serverseitiges Coden an und arbeitet als Middleware. Express ist sehr leichtgewichtig, was leider zur Folge hat, dass es große Aufgaben nicht gut managen kann.
Express ist am besten geeignet um Echtzeit-Streaming-Apps, eCommerce Apps, onDemand Apps oder REST-basierte APIs zu entwickeln.
Beispiele:
PayPal, Flickr, Walmart
Wie wähle ich das passende JavaScript Framework aus?
JavaScript Frameworks sind effizient, um den Entwicklungsprozess deiner Anwendung zu beschleunigen. Deswegen ist es wichtig, das richtige Framework für dein Projekt auszuwählen. Eine falsche Entscheidung kann unnötige Entwicklungsressourcen kosten.
Keines der Frameworks ist gleich. Jedes besitzt verschiedene Eigenschaften, Funktionen, Vor- und Nachteile, die du bei deiner Wahl miteinbeziehen musst. Außerdem sind deine individuellen Anforderungen und Ziele auch ein wichtiger Punkt beim Abwägen, welches Framework du verwenden möchtest.
Eine gute Entscheidung lässt sich zum Beispiel anhand des Bekanntheitsgrades treffen. Es gibt dafür mehrere verschiedene Quellen, die alle etwas anders die populärsten Frameworks berechnen. Eine davon wäre Google Trends.
Des Weiteren gibt es vier Punkte, anhand denen du testen kannst, ob ein Framework deinen Ansprüchen entspricht:
Ich hoffe, der Beitrag wird dir dabei helfen das passende Framework für dich und dein Projekt zu finden.
