React und TypeScript Schulungen, Workshops und Beratung

Seit 2016 führe ich regelmäßig Schulungen und Workshops rund um das Thema Single-Page-Anwendungen mit React durch. Die Schwerpunkte liegen neben React selbst unter anderem auf TypeScript, Redux, GraphQL und der Strukturierung und Architektur von großen React-Anwendungen.

Online bzw. Remote-Angebote

Da in der derzeitigen (Corona-)Situation vielfach keine Arbeit Vor-Ort möglich oder empfehlenswert ist, biete ich meine Workshops, Schulungen und Beratungen auch online bzw. remote an.

Bei Interesse sendet mir eine Mail oder ruft mich an, dann klären wir neben den inhaltlichen auch die besonderen rganisatorischen und technischen Voraussetzungen. Natürlich tragen wir dabei den erschwerten Bedingungen Rechnung, die sich durch das remote arbeiten und damit verbundene Probleme möglicherweise ergeben. Da remote arbeiten häufig anstregender ist, als Vor-Ort gemeinsam zu lernen, können wir auch die Workshops auch halbtags durchführen. Auf diese Weise seid ihr auch zeitlich flexibler.

Dabei kommen die "gewohnten" Bausteine eines Workshops natürlich nicht zu kurz. Wir besprechen im Vorweg eure gewünschten Inhalte, so dass ihr ein passgenaues Training bekommt. Während der Schulung gibt es eine Mischung aus Slides, viel Live Coding und arbeiten am Whiteboard, ganz so, wie im Schulungsraum oder Büro. Natürlich könnt ihr jederzeit Eure Fragen stellen, wir diskutieren gemeinsam über Problem- und Fragestellungen und machen natürlich auch Übungen, die ihr einzeln oder in Gruppen bearbeiten könnt und bei denen ich euch jederzeit per Screensharing unterstützen kann.

Das alles gilt übrigens nicht nur für Schulungen sondern auch für andere Arten von Workshops oder Beratung, zum Beispiel Code Reviews oder Unterstützung bei Fragen der Anwendungsarchitektur.

Individuelle In-House-Schulungen

Ich biete Schulungen für dich und dein Team zur Entwicklung von Frontends und Single-Page-Applications (SPAs) mit React, TypeScript, und GraphQL an (weitere Themen auf Anfrage). Im Vorwege legen wir gemeinsam eine für Euch individuelle Agenda fest. Dabei berücksichtigen wir, welche Vorkenntnisse vorhanden und welche Schwerpunkte gewünscht sind. Beispielhafte Inhalte einer React Schulung findest Du unten, aber natürlich helfe ich Euch bei der Erstellung der Agenda und Auswahl der Themen.

Workshops und Beratungen

Neben den Schulungen biete ich auch Workshops und Beratung rund um die Entwicklung von React-basierten Single-Page-Anwendungen an. Dabei können wir zum Beispiel über mögliche Architekturen für Eure Anwendungen sprechen, Code-Reviews durchführen oder uns einen Überblick über das JavaScript-/React-Ökosystem verschaffen, um du diskutieren, wie ein passender Technologie-Stack für aussehen kann.

Unterstützung beim Einstieg in die Entwicklung von Single-Page-Anwendungen

Ihr habt ein bestehende Anwendung, zum Beispiel auf Java/JEE/Spring MVC-Basis oder als Fat-Client (Swing, JavaFX) und wollt nun dafür ein Frontend als Single-Page-Anwendung bauen? Da ich ursprünglich auch aus der Java-Entwicklung komme, habe ich Erfahrung darin, welche Bedenken hinsichtlich der JavaScript-Entwicklung bestehen und welche Schmerzen ein Umstieg bereiten kann. Ich kann euch aber dabei helfen, die Umstellung so reibungslos wie möglich zu machen:

  • Was sind Single-Page-Anwendungen, welche Features lassen sich damit umsetzen und wo sind ihre Grenzen?
  • Wie kann eine schrittweise Migration von Eurer bestehenden Anwendung aussehen und welche Schrite sind dafür notwendig?
  • Wie könnte eine tragfähige und zukunftssichere Architektur für Eure konkreten Anforderungen aussehen?
  • Was muss beim Deployment beachtet werden? Wie können Build- und CI-Prozess aussehen?
All das sind Themen, die wir besprechen und dafür gemeinsam praxisnahe Lösungen für Euer Produkt erarbeiten können. Bei Bedarf meldet euch gerne.

Mehr zum Thema Frontend-Entwicklung

Cover React Buch (dpunkt-Verlag)

Neben den Schulungen habe ich ein Buch sowie mehrere Artikel rund um die Entwicklung moderner Frontends mit React geschrieben.

React - Grundlagen, fortgeschrittene Techniken und Praxistipps – mit TypeScript und Redux
2., überarbeitete und erweiterte Auflage, dpunkt-Verlag, 2019
Weitere Informationen

Mögliche Inhalte einer React Schulung

Hier findest Du beispielhaft mögliche Inhalte einer React Schulung.
Die genauen Schwerpunkte und die Agenda lege ich mit euch gemeinsam im Vorweg fest, um auf eure individuellen Bedürfnisse einzugehen.

JavaScript Grundlagen und Vertiefung: ES6+

Je nach Vorkenntnissen können wir in die Sprache JavaScript beschäftigen und Kenntnisse vertiefen bzw. auf den neusten Stand bringen.

  • Was ist ES5, ES6, ES.next?
  • "Moderne" JavaScript-Sprachfeatures, die häufig in React-Anwendungen eingesetzt werden, wie z.B. const/let, Arrow Functions, Destructuring und Spread-Operator
  • Module und Klassen
  • Asynchrones Arbeiten mit Promises und async/await
  • Grundlagen der Web-Entwicklung mit "pure" JavaScript, die DOM API

Das Herzstück jeder React Anwendung sind Komponenten. Angefangen wird mit kleinen, isolierten Komponenten, die sich gut wiederverwenden lassen. Diese Komponenten werden dann zu kompletten Anwendungen zusammengesteckt.

Wiederverwendbare Komponenten mit React entwickeln

Das Herzstück jeder React Anwendung sind Komponenten. Angefangen wird mit kleinen, isolierten Komponenten, die sich gut wiederverwenden lassen. Diese Komponenten werden dann zu kompletten Anwendungen zusammengesteckt.

  • Deklarativ Komponenten beschreiben
  • Komponenten als Funktionen mit der Hooks API
  • Interaktionen mit dem Benutzer
  • Zustand und Eigenschaften von Komponenten
  • Was ist der Virtual DOM?
  • Lebenszyklus von Komponenten
  • Komponenten als ES6 Klassen

Die JavaScript Spracherweiterung JSX

Komponenten werden in React ohne Templatesprache programmiert! Stattdessen kommt React mit einer JavaScript Spracherweiterung mit dem Namen JSX her, die es erlaubt, HTML-artigen Code direkt in deinen JavaScript-Code zu schreiben. Im Workshop sehen wir uns an, wie die JSX Syntax aussieht und wie du deine in JSX geschriebenen Anwendungen in gültiges, für den Browser verständliches, JavaScript compilieren kannst.

Typsichere React Anwendungen mit TypeScript

TypeScript bietet die Möglichkeit, getyptes JavaScript zu entwickeln. Viele potentielle Programmierfehler können dadurch bereits während der Entwicklung in der IDE oder dem Build-Prozess erkannt und vermieden werden. Gerade in Anwendungen, die von mehreren Personen gebaut und über einen längeren Zeitraum weiterentwickelt und gepflegt werden sollen, empfehle ich den Einsatz von TypeScript. In der Schulung gebe ich Euch eine Einführung in die Sprache TypeScript, wie ihr sie in Euren React-Anwendungen einsetzt und wie ihr von der Typ-Sicherheit profitieren könnt.

Arbeiten mit Hooks

Die Hooks API wurde in React 16.8 eingeführt. Mit Hooks kannst Du Zustand in deiner Anwendung verwalten, mit dem DOM interagieren und einiges mehr. Außerdem kannst Du eigene Hooks definieren, um häufig verwendeten Code nicht doppelt schreiben zu müssen. An Hand praktischer Beispiele sehen wir uns die wichtigsten Hooks vor, diskutieren wo und wann deren Einsatz sinnvoll ist und schauen uns an, wie Du eigene Hooks für deine Anwendung bauen kannst.

Externes Statemangement mit Redux

Wenn deine React Anwendung größer wird, benötigst du eine solide Architektur um deine Anwendung verständlich und wartbar zu halten; das betrifft insbesondere die Verwaltung des Zustands.

In der Schulung diskutieren wir typische Probleme, die bei der Entwicklung von React-Anwendungen entstehen können und gucken uns mögliche Lösungen an.

Dazu gehört der React Context, der useReducer-Hook und die Bibliotheken wie Redux und MobX, die alle Ansätze bieten, um den Zustand einer React-Anwendung zu verwalten. Wir diskutieren die Vorteile (und Nachteile) der jeweiligen Ansätze, sehen uns an was sie jeweils für deinen Code und die Entwicklung sowie das Testen bedeuten.

Serverzugriffe

In der Regel müssen Anwendungen Daten von einem Server lesen oder schreiben. React macht keine Aussage dazu, wie die Kommunikation mit einem Backend, z.B. über eine REST-Schnittstelle, aussehen muss.

Wir sehen uns an, wo und wie du die Serverzugriffe am Besten in deinen React Komponenten machst und welche Auswirkungen sich dadurch auf die Architektur der Anwendung ergeben. Auch schauen wir uns an, wie mit dem Suspense-Feature von React die Behandlung von asynchronem Code aussehen kann und wie die Anwendung mit Hilfe des React Caches optimiert werden kann.

Eine mittlerweile populäre Alternative zu REST ist die Abfragesprache GraphQL, die sich sehr gut mit React verwenden lässt. Auch den Einsatz von GraphQL, etwa am Beispiel von Apollo GraphQL, kann ich bei Interesse vorstellen.

React Anwendungen testen (mit und ohne Browser)

React Anwendungen lassen sich sehr gut testen, und zwar auch ohne, dass du dafür einen Browser benötigst. Populäre Bibliotheken sind zum Beispiel Enzyme oder React Testing Library, die ich Euch zeigen kann.

Arbeiten mit dem React Router und der History

Ein häufige Anforderung an Single Page Anwendungen ist es, dass man darin über URLs bzw die History-Funktion des Browsers genauso gut navigieren kann, wie "klassische" Webanwendungen was natürlich auch bedeutet, dass der Back-Button zuverlässig funktioniert und dass man Links auf einzelne Seiten oder Bereiche der Anwendung verschicken oder speichern kann.

Dazu gibt es mit dem React Router Projekt eine de-facto-Standard Lösung für React-basierte Anwendungen. Du lernst, wie du URLs auf Komponenten mappen kannst, wie du auf URL-Parameter zugreifen und über die History navigieren kannst.

Mögliche weitere Themen

  • Fortgeschrittene Techniken wie die Context API oder Patterns wie Higher-Order-Components (HOCs) oder Render Properties
  • Ausblick auf kommende React-Features, wie z.B. konkurrierendes Rendering oder Suspense
  • Möglichkeiten zur Analyse und Optimierung der Performance (React Profiler, Code-Splitting mit React.lazy, useMemo-Hook etc)
  • Tooling und Entwicklungsumgebung für React (welche Editoren und Tools bieten sich an, welche Browser-Erweiterungen? Wie kann der Browser oder die IDE für das Debuggen benutzt werden?)
  • Ansätze zum Komponenten-basierten, modularen Styling (CSS Modules, Styled Components, ggf. mit SASS/LESS)
  • Universal Webanwendungen mit React entwickeln - Webanwendungen, die auf dem Server gerendert werden
  • Einbinden von Dritt-Bibliotheken, z.B. jQuery oder d3.js

Kontakt

Nils Hartmann

Buckhorn 41b

22359 Hamburg

Tel: 0173 / 286 30 76