React und Redux – Ein moderner Web-Stack

Einleitung

React ist eine moderne JavaScript Library für die Erstellung von User Interfaces. Der Fokus liegt dabei bei der Erstellung von komplexen Single Page Applikationen. In nur 4 Jahren hat sich React zu einem der populärsten Web-Frameworks entwickelt und wir von unzähligen Firmen verwendet (Facebook, Apple, Microsoft, Netflix …) und viele Produkte setzen React ein (Jenkins, Firefox, WhatsApp, Office UI Fabric …).

React findet nicht nur in der Web-Entwicklung, sondern auch bei der Entwicklung von nativen Mobile-Apps (React Native) eine grosse Verbreitung. In seinem Kern bietet React ein sehr einfaches, aber mächtiges Komponenten-Model. React bricht dabei mit der traditionellen Separierung von Layout (HTML) und Verhalten (JavaScript): Mittels JSX können Templates im JavaScript Code deklariert werden. Dieser neue Ansatz erlaubt eine effiziente und produktive Programmierung. Bei der Programmierung von React Komponenten kommen Konzepte aus der funktionalen reaktiven Programmierung zum Einsatz. Muster aus der funktionalen reaktiven Programmierung können auch als Architektur-Pattern eingesetzt werden.
Eine Ausprägung davon ist die „Flux“-Architektur, welche die im React-Ökosystem verbreitet ist. Flux stellte eine Alternative zu dem traditionellen MVC Pattern dar um den State einer Web-Applikation zu verwalten.

Redux ist eine besonders innovative Implementation des Flux Pattern und findet vor allem im Zusammenspiel mit React grossen Anklang. Redux kann aber auch mit anderen Frameworks (z.B. Angular) eingesetzt werden. React und Redux brechen mit dem traditionellen „De-Facto Standard“ in der Webentwicklung. Mit neuen innovativen Ansätzen wird die Frontend-Entwicklung vereinfacht. Selbst wenn React nicht direkt in einem aktuellen Projekt eingesetzt wird, lohnt es sich daher die Ansätze von React und Redux zu studieren

Programm

• Einführung in die Konzepte von React: Komponenten & Data-Flow
• Aufbau eines Kompletten Frontend-Stacks mit React (Routing, Backend-Zugriff, Komponenten-Bibliotheken …)
• Konzepte der Flux-Architektur und Funktional-Reaktiven Programmierung
• Verwendung von Redux als State-Container
• React & Redux Ökosystem: Libraries, Komponenten, Add-Ons und Middleware React & Redux Development Tools

Kursziel

Sie verstehen die Konzepte und das Programmier-Modell von React und Redux. Sie erlernen einen neuen, innovativen Ansatz für die Architektur und Implementation von Single Page Applikationen.

Adressaten

Der Workshop ist für alle Entwickler und Architekten interessant, welche React kennen lernen wollen und Interesse an innovative Alternativen zur traditionellen Frontend-Programmierung haben.

Voraussetzungen

• Kenntnisse der modernen Web-Programmierung mit JavaScript.
• Erfahrung mit ECMAScript 2015 oder TypeScript und Webpack von Vorteil.
• Workshop 4: „Entwicklung von State of the Art Web Apps mit JavaScript“ am Montag ist eine optimale Vorbereitung für diesen Workshop.

Infrastruktur

Bitte bringen Sie Ihren Laptop mit.