Archiv der Kategorie: JavaScript

React gets Context & Suspense. Quo vadis, Redux?

Veröffentlicht am von
10

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 →

React-Workshop für Einsteiger

Veröffentlicht am von
3

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 →

Of races and mutexes: synchronizing async operations in JavaScript

Veröffentlicht am von
5

While JavaScript is a strictly single-threaded language, the asynchronous nature of its execution model can easily lead to situations in which two or more async operations run at the same time and compete with the program flow depending on which operation succeeds first. The result is a specimen of the dreaded species of race conditions.

Issues of this type can be arbitrarily hard to reproduce, debug and fix, and I guess that every seasoned JavaScript developer can relate one or two horror stories where they literally spent days before finally fixing such an issue for good.

Race conditions are a well-known problem from any language that supports for concurrency, and often a mutex is used as a tool to synchronize such operations. This article shows how to apply the concept of mutexes to JavaScript in order to avoid race conditions.

Weiterlesen →

TypeScript für Java-Entwickler

Veröffentlicht am von
4

Java-Entwickler die einen Job als Webentwickler annehmen, werden früher oder später mit der Programmiersprache JavaScript konfrontiert. Obwohl die Namen der beiden Sprachen sehr ähnlich klingen und auch deren Syntax recht ähnlich ist, handelt es sich dabei um zwei grundverschiedene Programmiersprachen.

TypeScript für Java-Entwickler

Für Webentwickler mit Java-Hintergrund stellt TypeScript eine attraktive Alternative für die Entwicklung von JavaScript-Anwendungen dar. Mit dieser Transpilersprache lässt sich JavaScript-Quellcode sehr gut strukturieren und effektiv verwalten.

Weiterlesen →

TypeScript-Tooling mit npm und Webpack

Veröffentlicht am von
3

In diesem Beitrag beschäftige ich mich mit dem TypeScript-Tooling. Ich werde zeigen, wie einfach und komfortabel man ein Webprojekt mit TypeScript als Compiler und Webpack als Bundler unter Verwendung des Node Package Managers npm installieren und betreiben kann.

Darüber hinaus zeige ich an einem praktischen Beispiel, wie sich externe JavaScript-Bibliotheken mit den dazugehörigen TypeScript-Definitionsdateien via npm importieren und typisiert einsetzen lassen.

Weiterlesen →

TypeScript-Workshop

Veröffentlicht am von
2

Im ersten Teil dieser Serie habe ich mich mit der JavaScript-Alternative TypeScript im Allgemeinen beschäftigt. Im zweiten Teil, dem TypeScript-Workshop, möchte ich Euch einen praktischen Einstieg in die Programmiersprache bieten.

Hierfür erstellen wir zusammen eine HTML5-Webseite und zeigen verschiedene Rechtecke animiert auf einem Canvas-Element an.

Was ist TypeScript?

TypeScript Logo

TypeScript ist eine Programmiersprache von Microsoft, deren Compiler nach JavaScript kompiliert. Diese Sonderform eines Compilers bezeichnet man auch als Transpiler.

Die Sprache bietet Sprachkonstrukte, die in allen modernen Programmiersprachen zu finden sind und die über den Standard der Sprache JavaScript hinausgehen, wie beispielsweise Klassen, Interfaces, Vererbung, Module, anonyme Funktionen, Generics und eine statische Typisierung.

Mehr über die Vorteile der Sprache TypeScript könnt Ihr in meinem vorhergehenden Blog-Artikel „TypeScript als JavaScript-Alternative“ nachlesen.

Weiterlesen →

Angular von 0 auf 100

Veröffentlicht am von
3

Durch die Regeln unseres Kanban-Boards bin ich im aktuellen Projekt an die Aufgabe gelangt, einen Ablauf prototypisch in einer Frontend-Application darzustellen. Es galt, sich nur einmal vorzustellen, ob und wie wir eine komplexe Funktion abbilden können. Der definierte Timeslot lag bei zwei Tagen.

Angular als Framework der Wahl

Da ich schon vor Jahren eine Affinität für AngularJS entwickelt habe und dazu auch noch den Release-Prozess zu Angular 2 mit schmerzlichen Migrationen mitgemacht habe, lag es nahe, auch hier schnell eine Angular-App aufzusetzen. Da Angular 4 inzwischen erschienen ist, welches der Version 2 sehr stark ähnelt, fiel die Wahl darauf. Angular 4 ist eine wirkliche Weiterentwicklung von der Version 2 (3 wurde ausgelassen). Angular 2 war ein kompletter Rewrite von AngularJS.

Gesagt, getan – innerhalb von zwei Tagen entstand eine App, die im folgenden Review einige Personen begeistert hat. Sowohl im Team, als auch beim Kunden war die Begeisterung so groß, dass wir die Applikation jetzt vervollständigen und zugänglich machen sollen.

Weiterlesen →

TypeScript als JavaScript-Alternative

Veröffentlicht am von
11

Ich möchte in diesem Beitrag die Programmiersprache TypeScript vorstellen und Gründe aufzeigen, warum sie der Verwendung von JavaScript als Programmiersprache für die Entwicklung dynamischer Webapplikationen vorzuziehen ist.

Der JavaScript-Albtraum

Im Laufe der letzten zehn Jahre beobachte ich die Entwicklung im Web-Development-Bereich zunehmend mit Sorge: Immer mehr namhafte und zukunftsweisende Frameworks und Systeme wurden veröffentlicht, die allesamt auf der Programmiersprache JavaScript aufbauten.

Weiterlesen →

Optimierung der Produktivität mit PHPStorm

Veröffentlicht am von
4

Ich möchte Dir in diesem Beitrag die Entwicklungsumgebung PHPStorm vorstellen und Dir Möglichkeiten aufzeigen, wie Du Deine Produktivität damit verbessern kannst.

PHPStorm bietet Entwicklern eine hervorragende Unterstützung um PHP-Quellcode effizient und pragmatisch zu verwalten. Es hat mich immer wieder überrascht, wie gut sich gleichbleibende Arbeitsabläufe damit optimieren und somit effektiver gestalten lassen.

In den folgenden fünf Kapiteln möchte ich Dir ein paar Tipps aufzeigen, wie Du Deine tägliche Arbeit mit PHPStorm optimieren kannst. Weiterlesen →

Ich bau mir eine Stakeholder Map App mit Ionic 2 und Firebase

Veröffentlicht am von
3

Stakeholder Maps helfen, den Überblick auf einem Projekt zu halten. Ionic 2 hilft, schnell einen Prototyp für eine App zu erstellen. Firebase hilft, schnell ein Backend für Anmeldung und Datenhaltung aufzubauen. Wie man mit soviel Hilfe eine Stakeholder-Map-App baut, beschreiben wir im Folgenden. Wir, das sind Steffen Ritter und Micha Trieba von Mayflower. Weiterlesen →