Blog

WebTech-Trends und React-Tipps: TypeScript und React Hooks im Experten-Check

Aug 19, 2019

WebTech-Trends und React-Tipps

Von JavaScript zu TypeScript und weiter zu React: Unser Experten-Check beginnt bei den Basics der Sprachwahl und gibt Einblick in die unterschiedlichen Sichtweisen darauf. Es kann durchaus Situationen geben, in denen TypeScript nicht die beste Wahl ist, sagt Peter Kröner, während Sebastian Springer im Kontext von React dazu rät, immer auf TypeScript zu setzen. Außerdem sagen unsere Trainer euch, wie ihr in bestehenden Projekten mit React Hooks umgehen solltet. Im Experten-Check zu JavaScript, TypeScript und React bekommt ihr Tipps von gleich vier Trainern: Peter Kröner (Webtechnologie-Erklärbär), Roman Roelofsen (W11K), Golo Roden (the native web) und Sebastian Springer (MaibornWolff).

TypeScript & die WebTech-Welt

 

ECMAScript oder TypeScript: Was bevorzugst du (unter welchen Umständen)?

 

Peter Kröner: Wenn es sich um ein ernsthaftes Projekt und keinen Nachmittags-Hack handelt und ich ausschließlich mit in TypeScript kompetenten Personen zusammenarbeiten darf, nehme ich gerne TypeScript. Wenn hingegen die Kollegen einen Java-Brutalismus 1:1 ins Web transplantieren, sterbe ich lieber durch „undefined is not a function“.

Roman Roelofsen: Da TypeScript auf ECMAScript aufbaut, fällt mir die Antwort leicht: TypeScript! Ohne die Typisierung und statischen Code-Analysen möchte ich keine Software mehr schreiben.

 

JavaScript wird häufig nicht als erste Programmiersprache erlernt. Wo liegt die größte Hürde für Entwickler, die aus anderen Sprache umsteigen wollen?

 

Peter Kröner: Die Probleme liegen meiner Meinung nach nicht so sehr in JavaScript, denn das ist als Programmiersprache mittlerweile für alle denkbaren Zielgruppen recht zugänglich. Knifflig wird es, wenn man heutzutage versucht, mit JavaScript ein Web-Frontend zu bauen und dabei alle Technologien zweckdienlich einzusetzen (semantisches HTML, CSS) und alles nicht-offensichtliche zu bedenken (Responsivität, Zugänglichkeit, Performance). Selbst für hartgesottene Webentwickler der ersten Stunde ist das schon schwer genug und für Umsteiger nahezu unmöglich. Die Schuld dafür suche ich bei den Tools und Frameworks, denn die machen es zu einfach, das Falsche zu tun und zu schwer, das Richtige zu tun.

Roman Roelofsen: JavaScript hat als sehr kleine Sprache angefangen. Erst in den letzten Jahren wurde der Sprachumfang erweitert und Konzepte, die man von anderen Sprachen kennt, wurden nachträglich hinzugefügt. Leider verhalten diese sich im Detail oft anders, als man es von anderen Sprachen gewohnt ist und dies ist nicht sofort offensichtlich. Weiterhin verfügt JavaScript über eine extrem kleine Standardbibliothek. Funktionen, die in anderen Sprachen seit vielen Jahren gängig sind, müssen in JavaScript händisch über externe Bibliotheken hinzugefügt werden. Meine Freunde vom Schlüsseldienst Bremen stimmen mir zu. 

 

Web Components, PWAs, Frameworks, Serverless, WebAssembly, Cross Platform und vieles mehr: Was ist für dich der zukunftsweisende Trend in der WebTech-Welt?

 

Peter Kröner: An aus Entwicklersicht wahrnehmbaren Trends sind sicherlich die zunehmende Dominanz von TypeScript und die heute noch gar nicht absehbaren Möglichkeiten von WebAssemby zu nennen. Dringend nötig fände ich, dass Frontend-Frameworks endlich mal anfangen, Arbeit abseits des Main-Threads zu verrichten, aber das ist eher ein Update unter der Haube.

Roman Roelofsen: Web Components, da sie die Mauern zwischen den Frameworks (Angular, React & Co.) abbauen. Die Zielgruppe für Komponenten, die als Web Components ausgelieferten werden, ist viel größer. Letztlich wird damit das Ökosystem JavaScript deutlich gestärkt, da die Fragmentierung reduziert wird.

 

React: Tipps und Tricks von den Experten

 

Welches Konzept ist für dich besonders wichtig an React – und warum?

 

Sebastian Springer: Für mich besonders wichtig ist die Möglichkeit, schnell und leichtgewichtig zu starten und bei Bedarf zusätzliche Bibliotheken nachzuziehen. Mit seinem komponentenbasierten Ansatz unterstützt React diese Art der Entwicklung sehr gut. Und ja, andere Frameworks arbeiten auch mit Komponenten. In React sind Komponenten allerdings schon sehr leichtgewichtig – das lädt zu vielen kleinen Komponenten ein. Wichtig ist hier nur eine saubere Trennung zwischen Anzeige und Logik.

Golo Roden: React basiert im Kern auf vielen Konzepten aus der funktionalen Programmierung, die zwar nicht neu sind, aber in React alltagstauglich verpackt und miteinander integriert wurden. Dazu zählen unter anderem unveränderliche Datentypen und pure Funktionen, die für eine bessere Vorhersagbarkeit und Wartbarkeit des Codes sorgen. Im Kern ist diese Nähe zur funktionalen Programmierung das, was React für mich auszeichnet, und warum ich es anderen Alternativen gegenüber bevorzuge.

 

Hooks sind derzeit ein wichtiges Thema in der React Community. Worum geht es dabei und wie stehst du dazu: Migrieren, nur in neuem Code einsetzen oder lieber noch abwarten?

 

Sebastian Springer: Hooks sind ein weiterer Schritt in der Entwicklung von React. Sie bringen Funktions- und Klassenkomponenten auf Augenhöhe. Hooks können jedoch noch sehr viel mehr leisten: Mit ihnen wird es möglich, den State einer Komponente in mehrere Fragmente zu unterteilen, diese auszulagern und auch in anderen Komponenten wiederzuverwenden. 

Zum Umgang mit Hooks würde ich mich an die Empfehlung von Facebook halten: in neuem Code mit gutem Gewissen einsetzen, aber keinesfalls jetzt tausende Klassenkomponenten in Panik migrieren. Wir haben kürzlich mit der Entwicklung einer neuen Applikation begonnen und haben noch keine einzige Klassenkomponente integriert.

Golo Roden: Hooks sind ein Ansatz, funktionale Komponenten erweitern zu können, ohne dafür auf Klassen zurückgreifen zu müssen. Sie treiben das Paradigma der funktionalen Programmierung in React also weiter voran, was mir persönlich aus den zuvor genannten Gründen gut gefällt. Das Team hinter React weist darauf hin, dass es keine Pläne gebe (https://reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components), klassenbasierte Komponenten aufzugeben – so gesehen ist eine Migration also nicht zwingend erforderlich. Zugleich heißt es aber auch, dass Hooks in Zukunft wohl der primäre Weg (https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both) seien, React zu verwenden. Da beide Ansätze parallel funktionieren, würde ich dazu raten, Hooks im Kontext von neuen Komponenten zu evaluieren, und anschließend bestehende Komponenten nach und nach zu migrieren.

 

Das Ökosystem rund um React ist riesig. Welchen Geheimtipp hast du für ein Tool oder eine Bibliothek, die jede/r sich mal ansehen sollte?

 

Sebastian Springer: Wenn ich eins gelernt habe, dann, dass es nicht das eine Werkzeug und die eine passende Lösung gibt. Was für mich und meine Applikation passt, kann für andere unnötigen Overhead bedeuten. Natürlich gibt es die Standardpakete, die jeder mal in den Fingern gehabt haben sollte: Redux, React Router, React Intl. Aber viel wichtiger ist: Neues ausprobieren, sich mit Leuten unterhalten, Konferenzen besuchen, Videos ansehen und Blogs lesen. Und zum Schluss noch ein nicht ganz so geheimer Geheimtipp: Nutzt TypeScript, immer!

Golo Roden: Häufig würde ein besseres Verständnis der Grundlagen und Konzepte von React mehr helfen als ein weiteres Werkzeug. Daher wäre mein Rat, sich intensiv mit den Interna von React zu befassen, um zu verstehen, wie und vor allem warum React so funktioniert, wie es funktioniert. Ein hervorragender Startpunkt dafür ist der äußerst lesenswerte Blog Overreacted (https://overreacted.io/) von Dan Abramov.

 

Vielen Dank für eure Antworten!

 

Die Fragen stellte Ann-Cathrin Klose

Ann-Cathrin Klose hat allgemeine Sprachwissenschaft an der Johannes Gutenberg-Universität Mainz studiert. Seit Februar 2015 verstärkt sie das Team von Software & Support Media, seit 2017 ist sie als Redakteurin im Team von entwickler.de und für das Entwickler Magazin tätig und beschäftigt sich im Schwerpunkt mit JavaScript-Themen.

Immer auf dem Laufenden bleiben!
Alle News & Updates: