Welches ist das ideale JS Framework für mein Projekt?

Was ist ein JavaScript Framework?

Warum solltest du ein JavaScript Framework nutzen?

• Zeitersparnis: Verschiedene Funktionen und Elemente sind in einem Framework schon enthalten. Dadurch muss insgesamt weniger Code selbst geschrieben werden. Dies spart jede Menge Zeit und Programmierarbeit, die anderswertig eingesetzt werden kann.
• Wiederverwendung: Immer wiederkehrende Aufgaben müssen auch nicht jedes Mal neu implementiert werden, sondern können beliebig oft wiederverwendet werden.
• Anfängerfreundlich: Gerade für Programmieranfänger kann ein Framework den Einstieg erleichtern. So muss nicht jedes Feature selbst programmiert werden, sondern man kann sich an den vorgegebenen Codeblöcken orientieren.
• Inspiration: Die große Auswahl an JavaScript Bibliotheken kann auch bei der Ideenfindung und Inspiration zur Lösung neuer Problemansätze helfen.
• Pflege: Ein wichtiger Punkt ist auch die Pflege der Software, diese wird durch ein Framework ebenfalls erleichtert. Eine strikte Struktur kann dabei helfen mit komplexem Code im Team umzugehen.

Wann solltest du KEIN JavaScript Framework nutzen?

• Spezielle Probleme: Frameworks müssen für die große Masse funktionieren, sehr seltene oder spezielle Probleme werden also nicht behandelt. Im Gegenteil, es wird sogar eine recht schwierige Angelegenheit, wenn du ein Problem entgegen den Framework-Grundlagen lösen musst.
• Sehr simples Problem: Der andere extreme Fall wäre, wenn dein Problem sehr simpel ist. Wenn du nur einen persönlichen Blog, eine simple Landingpage oder ein Portfolio hast, brauchst du dafür kein komplettes Framework zu nutzen! Bei solchen kleinen Projekten ist es vollkommen möglich eine Webseite von Grund auf zubauen, anstatt im Endeffekt nur 5% der Funktionalitäten des Frameworks zu nutzen. Du wirst im Fall einer sehr kleinen Webseite keine Vorteile damit haben ein Framework zu nutzen.
• Nutzung eines CMS: Ein weiterer Grund gegen die Nutzung eines Frameworks wäre, wenn du bereits ein Content Management System nutzt, dass die Funktionalitäten deines Frameworks beinhaltet. In diesem Fall wäre es einfach unnötig die Funktionalitäten doppelt vorhanden zu haben.

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:

• Wiederverwendbare und deklarative Komponenten: Entwickler können das komplexe UI in Komponenten unterteilen, die in anderen Teilen der App wiederverwendet werden können
• Dynamisch entwickeln: React reagiert direkt auf veränderte Variablen und präsentiert dem Nutzer die Änderungen in Echtzeit in der Web-App.
• Visuelle Hilfe mithilfe von JSX: JSX ist eines der signifikantesten Features von React, das dabei hilft neue UI-Features mithilfe von JavaScript zu entwerfen. 

• Virtuelles DOM: Die App-Perfomance kann durch ein virtuelles DOM geboostet werden. Die Dauer von Update-Prozessen auf der Webseite können verringert werden, indem nur notwendige Änderungen am DOM ausgeführt werden
• Unidirektionale Datenbindung: Es ist für den Entwickler intuitiver mit einseitigem Datenfluss zu arbeiten, weil der Datenfluss leichter nachvollzogen werden kann als bei der bidirektionalen Datenbindung. Außerdem ist es effizienter, da es weniger anfällig für Fehler und leichter zu debuggen ist. Um bei Bedarf Komponenten zurückgeben zu können, wird auf Callbacks zurückgegriffen.

 

Gründe für React:

• Starker Community Support: React hat dadurch, dass es von Facebook entwickelt wurde, weltweit eine sehr große Community. Außerdem verwendet es immer die neusten JavaScript-Features.
• SEO-freundlich: React bietet das beste serverseitige Rendern an, wodurch die Ladezeit der Seiten reduziert werden kann.

Wenn du mehr über SEO erfahren willst, kannst du unseren Beitrag dazu lesen:

• Flexibilität und Kompatibilität: Das Framework kann sowohl für die Entwicklung von Web als auch für mobile Plattformen genutzt werden.
• Leicht zu lernen: React ist leicht zu erlernen, was es sehr attraktiv für Einsteiger des Frameworks macht.

Nachteile von React:

• Neuster Stand: Dadurch, dass React immer die neusten JavaScript-Features hat, sind die Nutzer aber auch gezwungen immer auf dem neusten Stand zu bleiben.
• JSX-Syntax erlernen: Es kann etwas kompliziert sein die JSX-Syntax zu erlernen.

 Wann ist es am sinnvollsten React zu nutzen?

• Wenn du Single-Page Anwendungen (SPAs) entwickeln willst, ist React sehr geeignet wegen seines Virtuellen DOM.

• Auf der anderen Seite ist es sinnvoll React bei großen Apps für dein Unternehmen zu nutzen, die einen riesigen Community Support haben.

 

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:

• MVC-Framework: Angular ist ein vollwertiges MVC-Framework. Die MVC-Architektur hilft dabei gut strukturierte Applikationen zu entwickeln.

Zu MVC wird demnächst auch ein Beitrag auf unserem Blog erscheinen.

• Bidirektionaler Datenfluss: Das Framework benutzt außerdem einen bidirektionalen Datenfluss. Das Feature ermöglicht es Angular die View mit den Daten des Models durch den Controller in Echtzeit zu synchronisieren. So muss nicht ständig zusätzlicher Code geschrieben werden, um Model und View zu synchronisieren.
• Gutes Ökosystem: Angular hat ein gutes Ökosystem, das viele außergewöhnliche Lösungsansätze anbietet, um simple und effiziente Anwendungen zu bauen. Beispielsweise muss, um serverseitig gerenderte Apps bauen zu können, nicht vorinstalliert und vorkonfiguriert werden.
• Templates: Es können in Angular Templates in HTML-Tags definiert werden, wodurch die Lesbarkeit des Codes verbessert wird und die Entwicklung schneller vorangehen kann. Außerdem können ebenfalls, wie bei React, ganze Komponenten an einer anderen Stelle im Code wiederverwendet werden.
• Open-Source-Bibliotheken Support: Angular bietet verschiedene Bibliotheken an, diese dabei helfen können das User Interface schnell responsiv zu machen.
• Angular CLI: Angular CLI ist eine der besten Kommandozeilen, um Anwendungen zu bauen, ein Gerüst aufzubauen und diese zu warten.
• Browser Tools: Angular unterstützt Chrome und Firefox Development Tools und Erweiterungen, um die Apps zu debuggen. 

Gründe für Angular:

• Cross-Plattform Kompatibilität: Angular kann auf mehreren verschiedenen Geräten gut genutzt werden.
• Cleaner Code: Der Code des Frameworks ist clean, einfach zu verstehen und es entstehen sehr selten Fehler wegen der MVC-Architektur.
• Einfaches Debugging: Angular bietet eine Möglichkeit zur unmittelbaren Fehlererkennung und verschiedene Optionen Feedback zu geben
• Starke Community: Da Angular im Hintergrund von Google unterstützt wird, hat es eine starke Entwickler-Community zu bieten.
• Direktiven: Direktiven sind eine HTML-Erweiterung, die es dem Entwickler erlauben, dem DOM spezielles Verhalten zuzuweisen und dynamischen Content mit HTML zu erzeugen.
• Dependency Injection: Angular bietet ein Dependency Injection Feature an, das bezweckt, dass die Komponenten gut testbar und wiederverwendbar sind.
• Sehr sicher: Angular bietet einen eingebauten Support gegen Schwachstellen wie Cross-Site Request Forgery (XSRF) und Cross-Site Script Inclusion (XSSI) an.
• Schnelle Entwicklung: Code kann in Angular sehr schnell generiert werden und kann mit verschiedenen server-seitigen Scriptsprachen ausgeführt werden wie Node.js, PHP oder .NET.
• Hohe Performance: Das Routing in Angular macht das Framework ideal, um hoch performante Anwendungen zu entwickeln. Dies ist, weil der Router den Code effizient splittet.

Nachteile von Angular:

• Nicht anfängerfreundlich: Angular ist leider überhaupt nicht anfängerfreundlich. Bevor du das Framework nutzen kannst, musst du erstmal lernen, wie MVC funktioniert.
• Nicht SEO-geeignet: Die SEO-Kapazitäten sind ebenfalls sehr eingeschränkt.
• Viel Platz: Angular hat relativ große Dateien, dies hat Einbußen, wenn es um Performance geht. Dynamische Anwendungen performen oft nicht besonders gut und SPAs können aufgrund ihrer Größe unpraktisch sein.

Wann ist es am sinnvollsten Angular zu nutzen?

• Angular ist wegen der Nutzung von TypeScript besonders geeignet, um große Anwendungen für Unternehmen zu entwickeln. Wegen der Nutzung der MVC-Architektur erlaubt es zudem nahtlose Integrationen von weiteren Features.
• Es ist ebenfalls für hoch performante Cross-Plattform und native Apps geeignet.
• Des Weiteren ist Angular sehr gut geeignet, um Echtzeit-Daten-Apps zu entwickeln.

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:

• Virtuelles DOM: Ebenfalls wie React bietet Vue die Nutzung eines virtuellen DOM an. Die Dauer von Update-Prozessen auf der Webseite können verringert werden, indem nur notwendige Änderungen am DOM ausgeführt werden. Dadurch ist Vue auch besonders schnell
• Reaktive bidirektionale Datenbindung: Vue unterstützt sowohl unidirektionale als auch bidirektionale Datenbindung. Dieses Feature ist auch als reaktive Zwei-Wege-Datenbindung bekannt. Das heißt, dass alle Änderungen im UI und an den Daten gegenseitig Einfluss aufeinander haben.
• Vue CLI: das Vue CLI (= Command Line Interface) kann für das Entwickeln und das Installieren von Bibliotheken und Plugins genutzt werden. Es vereinfacht das Erstellen des Grundgerüstes und das Prototyping von Anwendungen. Es macht Vue zu einem flexiblen Framework.
• Singlefile Komponenten: alle benötigten Komponenten von Vue können, unabhängig davon, ob sie in HTML, CSS oder JavaScript sind, in einer Komponente geschrieben werden. Den Code aufzuteilen, nennt man Component Based Architecture (CBA) und wird beispielsweise bei Angular und React genutzt.
• Deklaratives Rendering: In Vue wird das DOM deklarativ gerendert, das bedeutet, dass der Entwickler nur die Daten angeben muss und das Framework entscheidet selbst, was es tun muss, um die Daten korrekt anzeigen zu lassen.
• MVVM-Architektur: Vue nutzt die Model-View-Viewmodel-Architektur. Diese ist ähnlich der MVC-Architektur, nur dass der Controller durch ein Viewmodel ersetzt wird. MVVM besitzt ein Bindeglied, das führt dazu, dass die Kommunikation zwischen der View und den Bindungseigenschaften der View automatisiert abläuft.
• JSX: Vue kann auch JSX benutzen. Wenn JSX benutzt wird, können eigene Komponenten einfacher hinzugefügt und gemanagt werden.
• Effekt-Komponenten: Vue besitzt eine eingebaute Komponente, die bei CSS-Transitionen und Animationen hilft. Es werden zahlreiche Effekte angeboten.

Gründe für Vue:

• Einfach: Vue ist einfach zu verstehen und zu lernen. Es wird kein tiefgehendes Verständnis von verschiedenen Bibliotheken und Tools vorausgesetzt, um Vue nutzen zu können. Ein Grundwissen von HTML, CSS und JavaScript reichen aus, um problemlos mit Vue programmieren zu können. Die Dokumentation von Vue ist zudem auch sehr vollständig und gut beschrieben.
• Leicht und schnell: Ein Vorteil ist die geringe Größe des Frameworks, weshalb es sehr schnell geht es herunterzuladen. Zudem launchen Apps in Vue auch schnell wegen der Nutzung eines virtuellen DOM.
• Flexibel: Vue kann auf viele verschieden Möglichkeiten flexibel genutzt werden. Es kann entweder als interaktives Modul oder Bibliothek bei einem bereits existierenden Projekt genutzt werden, aber auch genutzt werden, um eine ganze eigenständige Anwendung zu entwickeln.
• Einfach zu integrieren: Deine App kann einfach individualisiert werden, indem du mit Vue verschiedene Elemente des Frameworks in deinen Code oder in deine bereits existierende App hinzufügst.
• Community Support: Vue existiert hauptsächlich dank seiner Community. Deshalb ist diese auch in den Foren sehr aktiv und bei Problemen bekommt man schnell weitergeholfen. 

Nachteile von Vue:

• Limitierte Ressourcen: Vue ist mit Abstand noch nicht so groß wie React oder Angular. Es gibt in anderen Frameworks beispielsweise um einige mehr Plugins. Sogar essenzielle Plugins sind teilweise nicht vorhanden.
• Fehlender finanzieller Support: Das Framework wird nicht im Hintergrund von einem Tech-Giganten unterstützt und hat deswegen nicht den notwendigen finanziellen Support.
• Fehlender Support für große Projekte: Vue wird unteranderem wegen den finanziellen Aspekten und dem Fakt, dass es noch relativ neu ist, eher für kleinere Projekte genutzt, während größere Projekte nicht so unterstützt werden.
• Zu flexibel: Es wurde ja bereites beschrieben, dass Vue sehr flexibel ist. Leider gibt es dadurch das Risiko zu flexibel zu sein. Wenn es zu viele Optionen gibt, kann das in komplett verschiedenen Programmierstilen in einem Team resultieren.

Wann ist es am sinnvollsten Vue zu nutzen?

• Wenn du ein kleines Projekt oder eine Singlepage Anwendung anfertigen willst, die aber trotzdem hoch performant ist, ist Vue gut geeignet
• Außerdem ist es sehr gut für die Erstellung von Prototypen geeignet

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:

• Team kompatibel: Es ist wichtig ein Framework zu nutzen, dass dein Team gerne benutzen möchte. Wenn dein Team bereits Erfahrung in einem bestimmten Framework hat, ist es sinnvoll darauf aufzusetzen und auch dieses zu verwenden.
• Backend- Frontend Kompatibilität: Wenn du bereits dein Backend entwickelt hast und ein Frontend-Framework suchst, ist es sinnvoll, dass du darauf achtest, dass diese auch kompatibel sind.
• Komplexität: Wenn du eine komplexe Webseite entwickeln willst mit hunderten von Unterseiten ist es sinnvoll ein Framework zu verwenden, dass auf der MVC-Architektur basiert. Ein leichtgewichtigeres Framework für eine so komplexe Webseite zu verwenden, wäre katastrophal.
• Größe und Performance: Es ist sinnvoll, Größe und Performance immer in einer Balance zu sehen, um das beste aus deinem Framework herauszuholen. Es bringt nichts, wenn du ein superfortschrittliches Framework nutzt, um eine recht simple App zu programmieren.

Ich hoffe, der Beitrag wird dir dabei helfen das passende Framework für dich und dein Projekt zu finden.