React-Workshop für Einsteiger

Veröffentlicht am 24. Oktober 2017 von Christopher Stock

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?

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 2. Oktober 2017 von Christian Speckner

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 6. September 2017 von Christopher Stock

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-Workshop

Veröffentlicht am 8. Juni 2017 von Christopher Stock

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 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 →

TypeScript als JavaScript-Alternative

Veröffentlicht am 2. Mai 2017 von Christopher Stock

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 →

FrOSCons Eleven

Veröffentlicht am 18. August 2016 von Maximilian Berghoff

Wir sind zwar nicht ganz 11, aber mit zumindest 4 Mayflowers geht es am Wochenende auf zur FrOSCon an die Hochschule Siegburg/Bonn. Dieses Jahr steht bereits die elfte Auflage der Konferenz an. In Zeiten, in denen mir Artikel weismachen wollen, dass Barcamps die besseren Konferenzen seien, stellen hier einige Ehrenamtliche eine beachtliche Konferenz auf die Beine. Sie sollte fest im Terminplan eines jeden Entwicklers stehen. Für mich persönlich ist es immer das Highlight des Jahres. Weiterlesen →

Reactive Javascript mit RxJs

Veröffentlicht am 20. Mai 2016 von Maximilian Berghoff

Auf Listen oder einfachen Array ist man es inzwischen schon gewohnt: Anstelle von einfachen Schleifen, bedient man sich hier lieber einem Iterator, oder verfällt ganz und gar dem Funktionalen Ansatz. Aber warum eigentlich? Gerade der funktionale Ansatz liefert eine einheitliches Interface wie man mit Collections umgeht. Den selben Effekt erreiche ich aber auch mit Iteratoren. Eine Liste von Cocktails

var cocktails = [
    {id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 },
    {id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 },
    {id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 },
];

var cocktails = [

{id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 },

{id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 },

{id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 },

];

lässt sich beispielsweise so nach dem id/name Paar für Cocktails mit mehr als 6% durchsuchen:

var newList = [];
for(var i = 0; i &lt;= cocktails.length; i++) {
    if (cocktails[i].prozent &gt; 6.0) {
        newList.push({id: cocktails[i].id, title: cocktails[i].title})
    }
}

var newList = [];

for(var i = 0; i <= cocktails.length; i++) {

if (cocktails[i].prozent > 6.0) {

newList.push({id: cocktails[i].id, title: cocktails[i].title})

}

Das erfüllt völlig seinen Zweck, aber schön ist das nicht. Mit einer foreach-Funktion könnte das dann so ausshen:

var newList = [];
cocktails.forEach(function (cocktail) {
    if (cocktails[i].prozent &gt; 6.0) {
        newList.push({id: cocktail.id, title: cocktail.title})
    }
});

var newList = [];

cocktails.forEach(function (cocktail) {

if (cocktails[i].prozent > 6.0) {

newList.push({id: cocktail.id, title: cocktail.title})

}

});

aber noch besser wäre:

var godOnes = cocktails
    .filter(function (cocktail) {
        return cocktail.prozent &gt; 6.0;
    })
    .map(function (cocktail) {
        return {id: cocktail.id, name: cocktail.name};
    });

var godOnes = cocktails

.filter(function (cocktail) {

return cocktail.prozent > 6.0;

})

.map(function (cocktail) {

return {id: cocktail.id, name: cocktail.name};

});

Weiterlesen →

Excel-Dateien mit Javascript im Frontend erstellen

Veröffentlicht am 6. Dezember 2015 von Florian Eibeck

Für viele Anwendungen ist der Export nach Excel ein wichtiges Feature. Zum Erstellen von Excel-Dateien mit PHP auf Serverseite gibt es Lösungen wie libxl oder PHPExcel, doch geht das auch per Javascript nur im Frontend? Ja, wie im Artikel gezeigt wird. Weiterlesen →

Wie man in Ext JS 5 ein Grid mit eigener Funktionalität erweitert

Veröffentlicht am 20. August 2015 von Steffen Ritter

Kommentar

Eine der Standardkomponenten in Ext JS ist das Grid. Es stellt Daten in einer Tabellenform dar und bietet von Haus aus schon viele Funktionen, wie z.B. Filtern, Sortieren und Inline Editing. Manchmal sind diese Funktionen aber nicht genug und man möchte sein Grid um spezielle Features erweitern. Weiterlesen →

Automatisierung der Frontend-Entwicklung mit Grunt

Veröffentlicht am 26. Mai 2014 von Norbert Schmidt

Die Automatisierung von bestimmten Workflows, d.h. von fundamentalen und immer wiederkehrenden Arbeitsschritten, ist in der Softwareentwicklung ein alter Hut. Testläufe und komplette Buildprozesse wiederholt manuell durchzuführen würde nicht nur viel Zeit in Anspruch nehmen, sondern wäre vor allem auch viel fehleranfälliger als automatisierte Verfahren. Auch in der Webentwicklung werden mittlerweile Workflows wie das Kompilieren von CSS, das Minifizieren des Source-Codes, statische Code-Analysen (Linting) und das Ausführen von Unit- und Selenuim-Tests als automatische Prozesse gestaltet.

Ich stelle im Folgenden den JavaScript-Task-Runner Grunt als adäquates Tool für die Automatisierung von Arbeitsschritten im Rahmen der Frontend-Entwicklung vor.

Weiterlesen →

BLOG /// Development, E-Commerce, Mobile & IT

Schlagwort-Archive: javascript

React-Workshop für Einsteiger

Was ist React?

Of races and mutexes: synchronizing async operations in JavaScript

TypeScript für Java-Entwickler

TypeScript für Java-Entwickler

TypeScript-Workshop

Was ist TypeScript?

TypeScript als JavaScript-Alternative

Der JavaScript-Albtraum

FrOSCons Eleven

Reactive Javascript mit RxJs

Excel-Dateien mit Javascript im Frontend erstellen

Wie man in Ext JS 5 ein Grid mit eigener Funktionalität erweitert

Automatisierung der Frontend-Entwicklung mit Grunt