Tag: javascript

201528Jul

JavaScript: Toast-Benachrichtigungen im Web verwenden

Benutzer von Android-Geräten werden sie kennen: Bei Toast-Benachrichtigungen handelt es sich um eine Nachricht, die für eine bestimmte Zeit am unteren Bildschirmrand angezeigt wird und nach einer gewissen Zeit ausgeblendet wird. In einer Webanwendung könnte diese Funktionalität für diverse Zwecke eingesetzt werden — so könnte beispielsweise der Benutzer darüber informiert werden, ob seine Formulardaten erfolgreich gespeichert wurden.
Wer eine Nachbildung der Android-Toast-Nachrichten für HTML sucht, kann einen Blick auf ToastIt.js werfen. Dabei handelt es sich um ein kompaktes Skript (alternativ NPM-Modul), das die entsprechende Benachrichtigung in den Browser bringt.

ToastIt.js - html toast messages

Die Demo zeigt das Skript in Aktion. Die Verwendung ist denkbar einfach:

  • toastit(text, timeout, options)

Bei den Optionen können Attribute gesetzt werden, die anschließend als CSS-Eigenschaft auf die ToastIt-Benachrichtigung übertragen werden.

201527Jul

JavaScript: Mehrzeilige Strings direkt einbetten

In JavaScript ist die Verwendung von mehrzeiligen Zeichenketten direkt im Code nicht ohne Umwege möglich: Entweder müssen die einzelnen Zeilen per "+"-Operator verbunden werden (Concatenation) oder sie müssen in einem Array abgelegt und anschließend per join() zusammengeführt werden. Mit ECMAScript 6 wird sich das ändern, da Template Strings auch das direkte Einbetten von mehrzeiligen Strings ermöglichen.
Wer allerdings noch nicht auf ES6 zurückgreifen möchte, kann auch das kompakte Multiline-Skript von Sindre Sorhus verwenden.

Multiline strings in JavaScript

Das Skript greift auf die toString()-Funktion zurück und eine mehrzeilige Zeichenkette wird in einer anonymen Funktion als Blockkommentar übergeben. Das Artikelbild zeigt eine beispielhafte Verwendung. Es sind sogar dynamische Platzhalter möglich:

  • var str = multiline(function(){/*
  • I love %s
  • */}), "unicorns");
  •  
  • // Ausgabe: I love unicorns

Multiline steht bei GitHub als NPM-Modul und als Browser-Skript zum Download bereit.

201526Jul

JavaScript: Einfache Implementierung von sprintf

Bei der täglichen Arbeit mit JavaScript ist das Zusammensetzen (Concatenation) von Zeichenketten (Strings) eine wiederkehrende Aufgabe. Grundsätzlich lassen sich Strings mit dem "+"-Operator verketten. Wenn es sich um längere oder komplexere Teile handelt, die zu einer großen Zeichenkette zusammengefügt werden müssen, kann die Methode mit dem "+"-Operator schnell unübersichtlich werden.
Etwas eleganter wäre hier die Verwendung einer gängigen Concat-Methode wie sprintf, bekannt aus C++ und PHP. Eine einfache Variante der populären sprintf-Funktion lässt sich beispielsweise mit einer Erweiterung des nativen String-Objekts umsetzen. Diese könnte aussehen wie folgt:

  • String.prototype.sprintf = function() {
  • var counter = 0;
  • var args = arguments;
  •  
  • return this.replace(/%s/g, function() {
  • return args[counter++];
  • });
  • };

Anschließend können Zeichenketten auf diese Weise zusammengesetzt werden:

  • var str1 = "%s Welt".sprintf("Hallo");
  • var str2 = "%s ist ein schöner %s".sprintf("Heute", "Tag");

Dies stellt wie erwähnt eine sehr einfache Implementierung dar. Es sind keine Typspezifizierungen, benannte Argumente oder bestimmte Umrechnungen (wie %d) möglich. Wer derartige Features benötigt, greift beispielsweise zu sprintf.js. Für einfache Zusammensetzen von Textbausteinen genügt diese Variante jedoch aus und liest sich besonders bei komplexeren Verkettungen einfacher als die "+"-Variante.

201519Jul

JavaScript: Weitere nützliche Artikel zu ECMAScript 6

Aktuell tauchen immer wieder interessante Artikel und Anleitungen rund um den kommenden JavaScript-Standard ES6 auf, der längst durch Transpiler wie Babel genutzt werden kann. Zuletzt zeigten namhafte Entwickler auf, wie sich ES6 schon jetzt durch entsprechende Tools in Projekten nutzen lässt. Im vorherigen ES6-Round-Up ging es primär um Maps, Module und Template Strings.

ECMAScript 6 - Harmony

Die folgenden Artikel befassen sich mit Destructuring, Loops, Arrays, Promises und Module im Detail.

Der letzte Link zeigt nur auf einen Teilbereich bei Medium — dort findet sich eine ganze Reihe mit ausführlichen Erklärungen rund um ES6-Themen.

201514Jul

Cola.js: Bibliothek für Constraint-Layout-Diagramme

Graphen und Diagramme, die auf einer kraftgelenkter Anordnung basieren (Force-Directed Graphs), können auch als "Constraint-Based Layout" bezeichnet werden. Für derartige Szenarien bieten sich Skripte wie Arbor.js oder Sigma.js an. Es gibt zudem noch eine weitere Bibliothek, die interessante Features bietet: Cola.js kann mit D3.js, SVG.js, aber auch mit THREE.js kombiniert werden, um kraftgelenkte Graphen zu zeichnen.

Cola.js - Bibliothek für Constraint-Diagramme

Die Graphen zeichnen sich durch eine ästhetische Anordnung aus, da sich möglichst wenige Linien, die eine gemeinsame Schnittstelle aufweisen, überlappen und die verbundenen Elemente immer einen gewissen Abstand zueinander beibehalten. Dieses Cola.js-Beispiel zeigt den Einsatz in Verbindung mit THREE.js. Dadurch werden auch dreidimensionale kraftgelenkte Diagramme möglich, dessen Umsetzung ohne eine spezielle Bibliothek einen gewissen Schwierigkeitsgrad darstellen würde. Auf der Website von Cola.js finden sich noch weitere Beispiele, das Skript selbst steht als NPM-Modul und in einer Web-Variante bei GitHub bereit.

201508Jul

Indicative.js: JavaScript-Validierung mit Promises

Die Validierung von Benutzereingaben gehört bei Webanwendungen mittlerweile zur Grunddisziplin. Dafür bieten sich neben regulären Ausdrücken mittlerweile auch Micro-Frameworks an, wie beispielsweise is.js. Wer nach einer kompakten Bibliothek sucht, die das Definieren von Schemata erlaubt und zudem auf Promises basiert, sollte sich Indicative.js ansehen. Das Skript wurde von dem PHP-Framework Laravel inspiriert und erlaubt das Erzeugen von Validierungsregeln über JSON-Objekte.

Indicative.js - JavaScript-Validierung mit Promises

Auf der Website finden sich diverse Beispiele, die den Einsatz des Skripts demonstrieren. Interessant ist bei dem Ansatz, dass sich mehrere Regeln in einem Durchgang abarbeiten lassen. Mit ".then()" und ".catch()" können dann erfolgreiche Durchläufe und Fehlerbehandlungen integriert werden. Indicative.js integriert unter Anderem die is.js-Bibliothek und bietet zudem vordefinierte Regeln für Arithmetik, Datum/Uhrzeit, Strings, Typen und reguläre Ausdrücke. Die Bibliothek steht als npm-Modul bereit und kann per Browserify auch im Browser genutzt werden.

201507Jul

WebAssembly: Binärcode in zukünftigen Browsern

Mozilla-Entwickler Brendan Eich hat vor kurzem bekannt gegeben, dass zukünftige Webbrowser mit einem Binärformat ausgestattet werden, das die Ausführung von Binärcode auf einer Low-Level-Ebene ermöglicht: Mit WebAssembly können komplexe Webanwendungen entwickelt werden, die eine hohes Maß an Performance erwarten. WebAssembly-Code wird schneller ausführbar sein, da er eine hohe Maschinenlesbarkeit aufweist und somit nicht erst interpretiert werden muss.

WebAssembly wird auf einem asm.js-Polyfill basieren und ist zum Beispiel auch für Portierungen interessant, wie es die Unreal Engine 3 zeigt. Wer sich für das Thema interessiert, findet auf Medium.com einen interessanten Artikel dazu. Bei SitePoint wird das Thema im Bezug auf Reactive Programming behandelt und bei GitHub steht der aktuelle Design-Entwurf der Binärsprache bereit.
Zum Abschluss sei gesagt, dass WebAssembly kein Ersatz zu JavaScript, sondern lediglich eine Ergänzung sein wird.

201507Jun

JavaScript: ECMAScript 6 schon jetzt für Projekte einsetzen

Die Features von ECMAScript 6 (Harmony) können im Prinzip schon jetzt in 2015 für Projekte verwendet werden: Durch Transpiler wie Babel oder Traceur wird geschriebener ES6-Code für Browser in entsprechenden ES5-Fallback-Code umgewandelt, sofern diese ES6-Funktionen noch nicht unterstützen. Weiterhin empfiehlt sich die Verwendung eines Modulsystems (RequireJS, SystemJS), da durch ES6 echte Klassen und Module möglich sind. Zudem sollte ein Package-Manager wie jspm eingesetzt werden, um automatische Abhängigkeiten aufzulösen.

ECMAScript 6 - Harmony

Mit diesen Voraussetzungen lassen sich ohne Probleme schon jetzt moderne Web-Projekte auf ES6-Basis entwickeln. Damit der ganze Prozess etwas leichter verständlich wird, sind hierzu zwei Artikel zu empfehlen:

Die beiden Artikel ergänzen sich gegenseitig und stammen von angesehenen JavaScript-Entwicklern (Dr. Axel Rauschmayer und Cody Lindley von Telerik). Ein Blick auf ES6 lohnt sich in jedem Fall, zumal auch AngularJS 2 darauf basieren wird und Module einsetzt. Wer mit ES6 experimentieren möchte, nutzt dazu am besten den TypeScript Playground oder den Babel-REPL (Read-Eval-Print-Loop).