Cap’n Proto with React and NestJS

In a recent project for a Mayflower client, we used Quarkus Java Microservices with Google Protobuf. In a very abstract sense, our objective was to exchange serialized binary data over a message bus system living in Kubernetes. Therefore I decided to replace the existing tech stack with Typescript, NestJS, and Cap’n Proto IDL (Interactive Data Language).

In this blog post, I will show you how to serialize data using Cap’n Proto in React and send it to a NestJS receiver, which simulates a backend.

Weiterlesen

Containerizing Django and React with Docker

Nowadays, software developers work on multiple projects at the same time. The projects usually present distinct requirements. Nevertheless, they must be reproduced identically in multiple machines, and sometimes they have to live in the same hardware – the developer’s computer. The so-called container technology stands out among the different approaches used to reproduce software projects reliably.

A container is a standard unit of software used to build a virtualized operational system (OS). The container’s OS has control over some components of the host system and can isolate the processes related to the container’s services. This isolation enhances the reproducibility of the containerized application. The container technology has been developed since the 2000s, but in 2013, when Docker was introduced to the community, its popularity has exploded.

Weiterlesen

Open Mayday … mit AWS, React und einem hohen Wetteinsatz

Der nächste Open Mayday bei Mayflower steht an! Open Mayday?! Ja! Wir öffnen unsere Slack-Time an sogenannten Open Maydays immer wieder für Externe, um neue Impulse zu bekommen und an einem coolen Tag mit viel Luft zum Reden voneinander zu lernen und in Kontakt mit der Community zu gehen.

Nach dem großen Erfolg dieses Formats an unserem Berliner Standort (und remote im vergangenen Jahr) wird der kommende Open Mayday am 22. Juli in unserem Würzbürger Office stattfinden. Und was sollen wir sagen …

Wir haben so Bock!

Infos und Anmeldung zum Open Mayday

Weiterlesen

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