Was unterscheidet React von Frameworks wie Angular und Vue.js?
React ist eine JavaScriptbibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt. Unser Trainer Simon Skoczylas von der Karakun AG ist begeisterter React-Entwickler und wird bald die erste React Schulung bei Eppleton abhalten. Im Interview erklärt er, was ihn an React so überzeugt hat.
Hi Simon, wir freuen uns Dich als Trainer bei Eppleton begrüßen zu dürfen. Du hältst am 6. Mai Dein erstes Training bei uns zum Thema React. Warum hat Dich React so begeistert und wo liegen die Unterschiede im Vergleich zu anderen Frameworks wie Angular oder Vue.js?
Hallo Toni, ich freue mich demnächst Trainings zu React auch bei Euch halten zu dürfen. Eins vorweg, React ist kein Framework. Es ist eigentlich nur eine Bibliothek. Das neue JQuery. ☺
Als ich mit React angefangen habe, gab es nur AngularJS (nicht Angular) und noch kein Vue.js. AngularJS kam mir viel schwerfälliger vor als React und ich hatte das Gefühl React viel schneller verstanden zu haben. Begeistert bin ich vor allem vor der Einfachheit und der Freiheit in der Umsetzung. Dies kann natürlich auf der anderen Seite zu Problemen und Missverständnissen führen: „With great power comes great responsibility“.
Man kann sich die Werkzeuge und den Prozess aussuchen. Man kann, muss aber nicht TypeScript, Flow oder PropTypes verwenden. Ich kann also Punk sein und hacken, aber auch vernünftig und strukturiert mit größeren Teams arbeiten. Es eignet sich also für kleine private Projekte genauso, wie für Enterprise Anwendungen.
Die Trennung zwischen React und dem Renderer, die meisten werden wohl ReactDOM kennen, finde ich sehr spannend. React ermöglich so ein „learn once, write anywhere“ Ansatz. Beste Beispiele sind ReactNative und ReactVR.
Des Weiteren finde ich die Dokumentation und die Community wirklich sehr gut. Es existiert, meinem Gefühl nach, schon für jedes Problem eine Lösung in React.
AngularJS hat mit dem Schritt zu Angular viel richtig gemacht, aus eigenen Fehlern gelernt und etwas bei React abgeschaut, ähnlich wie Vue.js. Angular, Vue.js und React sind valide Optionen, wenn ich eine Web-Anwendung erstellen möchte. Es hängt wie immer von den gegebenen Randbedingungen ab, welchen Framework bzw. Bibliothek ich den Vorzug geben würde. Meine persönliche Reihenfolge wäre React, Vue.js und Angular.
React setzt auf einen unidirektionalen Datenfluss und ein Virtual DOM um auch komplexe Anwendungen performant umsetzen zu können. Wo liegt der Vorteil dieses Ansatzes?
Beim unidirektionalen Datenfluss (one-way) ist es meiner Meinung nach einfacher zu verstehen woher die Daten kommen und welchen Weg sie nehmen, vor allem ist die Fehlersuche einfacher. Beim bidirektionalen Datenfluss (two-way) habe ich eine Bindung an das Datenmodel, es entsteht eine Art magische Beziehung. Beide Ansätze haben ihren Reiz. Als bester Ansatz gilt meist der unidirektionalen Datenfluss, vor allem in der Kombination mit der Unveränderlichkeit der Daten.
Beim VirtualDOM gehen die Meinungen weit auseinander. Die eine Seite ist der Meinung, dass Operationen auf dem DOM nicht ressourcenintensiv sind und Änderungen direkt in den DOM geschrieben werden können, andere schwören auf den VirtualDOM Ansatz. Grundsätzlich finde ich die Idee, dass nur relevante Änderungen in den DOM übernommen werden, sehr gut. Hier können Entwickler noch an der Performance-Schraube drehen, in dem sie in den Lebenszyklus von React eingreifen und React helfen zu erkennen welche Änderungen relevant sind. Seit der Überarbeitung in React 16, unter dem Titel „Fiber“, handelt es sich vor allem um inkrementelle Änderungen. Die Geschwindigkeitsunterschiede kann man gut in dieser Demo sehen.
Von einigen Entwicklern wird die Mischung von HTML und JavaScript in JSX kritisch gesehen. Einige fühlen sich sogar an die Art erinnert, wie mit PHP Webseiten generiert werden. Widerspricht die Vermischung von Code und Markup nicht dem deklarativen Ansatz, den React ansonsten verfolgt?
Sollte ich jetzt erwähnen, dass ich mal PHP Anwendungen geschrieben habe? ☺ Ich habe auch schon mit JSP Scriptlets gearbeitet die eine Mischung von HTML und Code ermöglichen. React versucht Markup und Logik nicht künstlich zu trennen, sondern kapselt den Inhalt für die View in Komponenten. Alles für eine Komponente KANN in einer Datei abgelegt werden. Man geht sogar so weit, auch CSS in die JavaScript Dateien aufzunehmen. Somit hab man Definition, Funktionalität und Aussehen in einer Datei. Eine Komponente ist für sich abgeschlossen. Auch wenn ich eine Komponente lösche, bleiben keine „Reste“ in anderen Dateien übrig. Aber auch hier gilt, ich muss JSX nicht verwenden.
In Deinem Nighthacking bei Eppleton hast Du erklärt, dass es sich bei React um eine Bibliothek und nicht um ein Framework handelt. Das gibt dem Benutzer viele Freiheiten beim Einsatz von React in einem Projekts. Im Unterschied dazu nehmen Frameworks wie Angular dem Entwickler sehr viele Entscheidungen ab, wie die Anwendung aufzubauen ist. Gibt es empfehlenswerte Frameworks, die React nutzen und beim Aufbau von React Anwendungen helfen?
Ein vergleichbares Framework wie Angular, welches React als View einsetzt, gibt meines Wissens nach nicht. Man kann ein beliebiges Framework einsetzen und die View dann mit React umsetzen. Das Tool „create-react-app“ hilft einem dabei ein React Projekt zu erstellen und zu strukturieren.
Für was für eine Art von Projekten eignet sich React Deiner Meinung nach am besten und wann setzt man besser auf eine andere Technologie?
React (mit ReactDOM) kann für jede Web-Anwendung verwendet werden. Zum Beispiel SPAs mit einem REST oder GraphQL Backend. Das zeigt auch die Liste der Unternehmen die React verwenden. Darunter sind Facebook, Netflix, eBay, Airbnb und die DHL. Durch die vielseitigen Renderer kann es auch für Mobile-Apps oder VR verwendet werden. Es kommt auf den Anwendungsfall und das Team an. Ähnliche Fragen stellen sich bei JavaEE und Spring Boot. Was mich bei React besonders beeindruckt ist, dass es seit Jahren ohne gravierende Breaking Changes auskommt und abwärtskompatibel ist. Auch die Hooks in React 16.8.4 bringen Neuerungen mit, ändern aber nicht die Umsetzung von bestehenden Anwendungen.
Vielen Dank für Deine Einschätzung; wir freuen uns schon auf Dein Training bei uns!
Gerne. Bis dann. ☺