React, Vue.js, Angular & Co. – was wann wofür? // deutsch

00:00 – Einleitung
01:17 – React und Angular sind keine De-Facto-Standards
03:18 – Wie vergleicht man Frameworks?
04:52 – Technische Kriterien
06:51 – Frameworks vs Web-Components
09:09 – Reifegrad und Verbreitung von Web-Components
11:09 – HTML- vs JavaScript-zentrierter Ansatz
12:57 – Vor- und Nachteile von HTML-zentrierten Frameworks
14:13 – Vor- und Nachteile von JavaScript-zentrierten Frameworks
16:53 – Funktional oder objektorientiert?
18:41 – JavaScript vs WebAssembly
20:21 – Ausblick

────────────────────

Über the native web 🦄

Wir sind ein Beratungs-, Schulungs- und Entwicklungsunternehmen, das sich auf Web- und Cloud-Technologien spezialisiert hat. Wir streben nach intelligenten und eleganten Lösungen für komplexe Probleme, und wir glauben, dass Softwareentwicklung kein Selbstzweck ist. Stattdessen sollte Software tatsächliche Probleme der realen Welt lösen.

Wir glauben, dass native Web- und Cloud-Technologien das Fundament sind, auf dem die Zukunft aufbaut. Unsere Kernkompetenz ist der Entwurf und die Entwicklung verteilter Web- und Cloud-Anwendungen unter Verwendung dieser Technologien in interdisziplinären Teams. Wir entwickeln auch unser eigenes Open-Source-Framework namens wolkenkit. Und wir lieben es, unser Wissen in Schulungen und Workshops, auf Konferenzen und bei Usergroups zu teilen.

────────────────────

Weiterführende Links 🌍

[marcelnoack]

17:10 Niemals wurden treffendere Worte gesprochen. Wirklich perfekt auf den Punkt an der Stelle.

[_andi_.]

genial, Tolle Arbeit an der Recherche ;), wirklich fein, " die goldenen Mitte aufgegriffen " Liebe Grüsse aus Österreich

[xTheWinchesterx]

Sehr interessantes und gutes Video. Ich habe in der Uni Objektorientierte Programmierung gelernt und komme damit auch am besten klar. Jetzt habe ich mich entschieden, das ich mich in der Webentwicklung weiterbilden möchte. Aus diesem Grund beschäftige ich mich aktuell mit Angular (und scheine damit die richtige Entscheidung getroffen zu haben). Mit HTML, CSS und Javascript habe ich mich schon etwas befasst, bin aber bei weitem noch kein Meister. Alles was UI Entwicklung und Design angeht ist leider in meinem Studium nur sehr rudimentär behandelt worden. In den meisten Fällen ist es da auf Konsolen Anwendungen hinausgelaufen (und das kann ich mittlerweile ganz gut ...).

[yt]

Da hast du alles wieder gut auf einen bzw. 4 Nenner gebracht. Man könnte natürlich auch eine Entscheidungsmatrix mit noch mehr Kriterien erstellen. Für mich persönlich ist aber schon entscheidend wer hinter einem Framework steht und wie sich die Community entwickelt. Das schlimmste ist doch auf einen Zug aufzuspringen, der früher oder später auf einem Abstellgleich landet.

[MichiOnline]

Also wir hatten ein Design System auf Basis von LitElement und WebComponents zusammen mit einem Designer erstellt, dokumentiert/visualisiert in Storybook, Gepackt mit Webpack. Das Ziel war, dass wir die Komponents weiterhin sowohl für die legacy Sharepoint Aspx Seiten verwenden konnten als auch für neue Blazor Apps, oder falls Blazor Probleme gemacht hätte, wir auch auf andere Frameworks switchen hätten können. Vorteile: Designer konnte Js/CSS/Hmtl und Entwicker und Designer haben am selben Code gearbeitet auch da Lit extrem lightweight ist. Nachteile: Zwar war die integration Problemlos, aber wir haben trotzdem oft wrapper um die komponents gebraucht um z. B. in Blazor Two-Way bindings zu realisieren. Nicht schreibende Komponents konnte man direkt verwenden. Auch hatte man nur mit diesen Wrappern instellisense. Durch Wrapper/Verschiedene Technologien gab es dann doch einen Gewissen Overhead. Würde es aber grade für ein Designsystem mit Basiskomponenten immer wieder machen, da Webcomponents ja nicht abgekündigt werden und jede technologie mehr oder weniger Support hat! Für eine Komplette Anwendung würde ich aber NOCH immer noch zu einem Big Player Framework greifen

[martinhovekamp]

Ist euch ein Licht aufgegangen?
Dies Video erscheint in einem neuen Licht. Irgendwie wirkt es alles etwas überstrahlt und wenig kontrastreich.
Die Beleuchtung ist schon überall ausreichend - oder mehr als ausreichend. Dadurch verblassen einige Farben im Hintergrund und Golo erscheint "erleuchtet" - was hier allerdings auch zum Inhalt und zum Frontend-Thema passt. :)

[norasagmeister]

Lieber Golo, ist es möglich mit React.js im selben Projekt sowohl react-bootstrap als auch scss zu verwenden? (alles Node.js Basis versteht sich)

[hansschenker]

In Angular kann auch im funktionalen Stil programmiert werden.
Voraussetzung dafür ist dass man die Zustandsverwaltung (State management) mit RxJs realisiert.
RxJs Observables sind im Grunde "pure functions" und mit den RxJs Operatoren wird eine Zustands-Aenderung Pipeline erstellt die ausgehend von einer Datenquelle das gewünschte Result über die Pipeline transformiert (mehrere Funktionsaufrufe hintereinander - Result von F1 wird zum Input für F2).
In Angular wird die ChangeDetection Strategy einer Komponente auf PushStrategy gestellt und die Async Pipe im Template eingesetzt, die die Zustands-Aenderung Pipeline startet und auch wieder beendet wenn die Komponente entladen wird.

[ps]

Sehr gutes, informatives Video, wie so viele Videos auf diesem Channel.
Aber aus meiner Sicht ist Angular kein JS-zentriertes sondern mehr wie Vue ein HTML-zentriertes Framework, da auch hier eigene HTML-Attribute verwendet werden, um beispielsweise Schleifen oder Bedingungen aufzubauen.
Für alle JSX-Fans empfehle ich mal ein Blick auf SolidJS. Ich finde, dass es viele sinnvolle Konzepte verfolgt und dazu auch noch einen immensen Performance-Vorteil gegenüber den "alteingesessen" Frameworks bietet.
Im Endeffekt ist es aber eh meist eine Präferenzentscheidung. Ein Vue-Fan wird sich vermutlich meist für Vue entscheiden, während ein React-Fan sich für React entscheiden wird. Wichtig ist, dass man mit beiden Frameworks bzw. Libs zum Ziel kommt.

[lars]

Sehr informatives Video. Danke dir!

Polymer wäre eigentlich nicht mehr zu erwähnen. Es war nur ein Testschritt und ist dann in Lit übergegangen.

Ich arbeite mit WebComponenten, bzw. Lit, und bin happy. Als jemand der mit OOP aufgewachsen ist, ist die Isolation des Inneren natürlich wunderbar (besonders natürlich im Falle von CSS). Sonst kann ich mich auch nicht beklagen. Die Unterstützung der IDE (vs code) ist auch ok. (Ich glaube ich bräuchte da mal ein konkretes Bsp um dein Argument nachzuvollziehen)

Das mit der Auswahl aufgrund der Verbreitung ist immer so eine Sache. Niemand weis was morgen ist und wohin es sich entwickeln wird. Auch vue, angualar und react fingen mal klein an.

Ich denke nach den vielen Jahren die diese Frameworks bereits auf dem Buckel haben ist eine Neuentwicklung, wo die gemachten Erfahrungen einfließen, mal angebracht.
Lit ist ja auch von google und macht das recht schön. Es ist zB nicht mehr zwangsläufig in TS, eher minimalistisch, keine erzwungene "File-Hell" oder eigenen HTML Attribute und als Ökosystem bedient es sich für Erweiterungen auch gern bei den Großen.

Ich kann leider nur wenig im näheren Vergleich zu den Großen sagen, da mir da einfach die Erfahrung fehlt. Aber nachdem ich nun bald 2 Jahre mit Lit gearbeitet habe (allerdings allein) bin ich immernoch sehr zufrieden und bereue die Entscheidung nicht.

[olafgronemann]

HTML oder JS-zentriert: Manchmal denke ich, wir kommen eigentlich nicht voran in der Software-Entwicklung: Schon zu Zeiten von Servlets, dann JSPs und schließlich JSF hat man entweder HTML vor Augen und kann kaum Code erkennen, oder man hat Code vor Augen und hat kein Gefühl mehr für HTML.

[teckyify]

Ja, also ich würde mir wünschen, wenn allgemein deutlicher herausgestellt würde, dass es letztendlich persönliche Präferenzen sind, welche den Ausschlag dafür geben, welches Framework man verwendet. Die grundlegenden Möglichkeiten sind nämlich überall gleichermaßen gegeben.

[lars]

Du hast in dem Video "Warum Vue.js?" gesagt: "Wenn man daran glaubt das WebComponenten die Zukunft darstellen."

Ich finde der Ansatz ist falsch. "Mit welcher Technologie möchtest du in Zukunft entwickeln?" muss die Frage lauten. Immerhin generieren wir als Entwickler, also als Konsumenten von Technologien, die Nachfrage für Diese. Eine gute Technologie oder Idee wird nicht weiterentwickelt, wenn sie niemand nutzt, und Feedback, Verbesserungen, Erweiterungen usw. generiert.

Schlechte Technologien konnten sich nur halten weil die Leute daran festgehalten haben. Ich weis schon wie das mit der Gewöhnung ist. Besser man gewöhnt sich an Veränderung. ;)

Und ja, als (introvertierte) Entwickler ist es oft schwer sich da durchzusetzen. Gerade wenn man dann die (extrovertierten) PM's hat, die zwar seit über 10 Jahren nicht mehr mit Technologien gearbeitet haben, dann aber doch entscheiden... Entwickler sind die Technologieexperten und müssen so auftreten!

[hansschenker]

- React: für Javascript Einsteiger und für kleinere bis mittlere JS Apps.
- Angular: für grosse JS Projekte und Projekte in Unternehmen
- Blazor: das neue Silverlight von Microsoft?
- Webplatform: ist und bleibt Html, CSS und Js. Daran ändert auch ein Webassebly nichts
- Web Komponenten: Neben dem UI ist das State management zentral bei der App Entwicklung
- State management gehört in ein Framework
- Angular: ist nicht nur Objektorientiert. RxJS und Typescript sind die Grundlagen für moderne funktionale Programmierung. Grosse Teile einer Angular App werden funktional programmiert.

[robotframework]

Hammer erklärt. Hätte gerne noch mehr zu svelte gehört.

[codr]

Der Vergleich React vs. Angular konzentriert sich ganz auf den Aspekt FP vs. OOP. Das ist zwar interessant, aber imho nebensächlich. Der wesentliche Punkt ist, dass Angular eben anders als React ein *Framework* ist. Eine der Konsequenzen daraus ist, dass es sehr klare Leitplanken vorgibt. Mein Team hat eine strategische Entscheidung für Angular getroffen, nicht weil wir OOP für uneingeschränkt super und besser als FP halten, sondern weil wir eben ein echtes Framework wollten. Unsere Ansicht nach macht es das leichter, den richtigen Weg ans Ziel zu finden, und skaliert so besser nach oben. Zugegebenermaßen ein Nachteil ist, dass es umgekehrt nicht gut nach unten skaliert und sich für kleinere Projekte oft zu schwerfällig anfühlt.

[martapfahl]

Das React kein Framework ist, ist richtig, aber in 99% der Fälle wird React als Framework verwendet. Bestes Beispiel Next.JS. Selbst Vite oder CRA bietet eine Menge an Framework Funktionen (abgesehen vom Routing in dem Fall)

[irocode]

Ich entwickle seit 25 Jahren. Viele Firmen bevorzugen Angular.

[_andi_.]

" Wie ist das genau mit grösse der libraries? " minimierte frameworks?
Lightwieght also, bleibt wohl der eigenen Recherche übrig :D
Bzw, wo deiner Meinung nach geht ma hin mit WebGl?
Node? ... Angular? React?

[xdevs]

Was gerade so richtig rauskommt ist Compose for Web. Statt JavaScript, Kotlin.