React gets Context & Suspense. Quo vadis, Redux?

Disclaimer: this article targets developers that are using Redux with React. If you are using Redux with another Framework, this article might not be important for you.

Last thursday, Dan Abramov gave a talk on JSConf Iceland called „Beyond React 16“. A few hours later, react-etc.net featured an article titled RIP Redux: Dan Abramov announces future fetcher API. While I agree with almost nothing that article has to say about Redux, the article got one thing right: Somewhere between 6 or 12 months from now, the way we are using Redux (at least when starting a new project) will be drastically different from the way we are using it today.

But before we take a gaze into the crystal ball, let’s take a step back and see what happened.

Weiterlesen

Redux-Workshop für Einsteiger

In diesem Workshop gebe ich eine schnelle und praktische Einführung in das State-Handling-System Redux. Hierfür wollen wir unser bestehendes React-Projekt aus dem React-Workshop für Einsteiger so umschreiben und erweitern, dass das State-Handling unserer Task-Listen-Applikation komplett vom Redux-System übernommen wird und dessen Vorteile in der Praxis sichtbar werden.

Weiterlesen

React-Workshop für Einsteiger

In diesem React-Workshop möchte ich einen schnellen und praktischen Einstieg in die Entwicklung mit dem JavaScript-Framework bieten und alle Bestandteile vorstellen, die man benötigt, um eigene Anwendungen mit dem erfolgreichen und weit verbreiteten System zu entwickeln.

Hierfür erstellen wir zusammen eine kleine Web-Applikation, die den Benutzer eine ToDo-Liste verwalten lässt, in der er neue Tasks anlegen sowie bestehende Tasks löschen und umpriorisieren kann. Im Laufe der Umsetzung werden alle wichtigen Grundprinzipien von React Schritt für Schritt vorgestellt und in die Praxis umgesetzt.

Was ist React?

React-Logo

Bei React handelt es sich um ein von Facebook ins Leben gerufenes Web-Framework für die Entwicklung von Single-Page-Webanwendungen. Die einzelnen Bestandteile unserer Anwendung werden unter React konsequent durch die Realisierung unabhängiger und modularer Komponenten konzeptioniert.

Der Benutzer erfährt hierdurch eine sehr responsive und gesamtheitliche User-Experience, die mit Hilfe des Frameworks sehr einfach und gut strukturiert umgesetzt werden kann.

Weiterlesen

Pimp my Backbone.View (by replacing it with React)

I’ve been using Backbone.js in a couple of projects now and my feelings about it are quite diverse. On the one hand, I like how it provides you with guidelines on how to structure your frontend code. Although splitting model and view is a very basic idea in software development, it also is very powerful. Backbone.js is of great help by providing collections which aggregate model instances and by being able to sync these models with a server via RESTful APIs. On the other hand, it always (and I hope that it’s not just me) seems to be a pain in the b*** to figure out the best way to implement a proper view lifecycle and to keep track of all registered event handlers. If you aren’t careful when removing or even just re-rendering views, you can seriously mess up event handling and prevent proper garbage collection. If you are just a little sloppy, this leads to a slow frontend with an always increasing memory footprint.
I’m not saying that Backbone.js is bad in handling UI events, just that you have to care about too many things that are common to most web applications. This article describes an alternative to the Backbone.View component.

Weiterlesen