Automatisierung der Frontend-Entwicklung mit Grunt

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

AngularJS Tipps: Message-Bus für eine AngularJS-App und das Publish-Subscribe Pattern

Mit diesem Artikel setze ich die Reihe AngularJS Tipps fort und beschäftige mich hier noch einmal mit der Frage, wie in einer AngularJS-App Kommunikation und Datenaustausch stattfinden kann. Allerdings liegt der Schwerpunkt in diesem Fall auf Applikationen mit konsequent modularer Struktur. Teil I der Reihe handelte von der Kommunikation zwischen AngularJS-Controllern und Teil II der Reihe vom grundlegenden Aufbau einer AngularJS-Applikation.

Was ich nun in diesem Artikel konkret vorstellen möchte, ist die Implementierung eines Message-Bus mit AngularJS, der als Notification-Service dienen soll. Das Konzept dahinter ist das Publish-Subscribe Pattern. Damit können Teile einer Applikation miteinander verknüpft werden die nicht in einer unmittelbaren Beziehung stehen sollen (Kapselung, Wiederverwendbarkeit, Testbarkeit).

Der Artikel richtet sich an Leser die bereits Erfahrungen mit AngularJS gesammelt haben und ist darum keine generelle Einführung in die Arbeit mit diesem JavaScript-Application-Framework.

Weiterlesen

AngularJS Tipps: Modularer Aufbau einer AngularJS-Applikation

In diesem zweiten Teil der Reihe AngularJS Tipps geht es um den grundlegenden Aufbau einer AngularJS Web-Applikation. In Abgrenzung zu bekannten Beispielen, zeige ich ein einfaches, aber praxisnahes Muster für eine modulare Struktur einer AngularJS-App. Im vorangegangenen ersten Teil der Reihe beschäftigte ich mich mit der Kommunikation zwischen AngularJS-Controllern.

Der Artikel richtet sich an Leser die bereits Erfahrungen mit AngularJS gesammelt haben und ist darum keine generelle Einführung in die Arbeit mit diesem JavaScript-Application-Framework.

Weiterlesen

AngularJS Tipps: Controller-Kommunikation, Datenaustausch per Routing, AJAX-Error-Handling

Dieser Artikel ist der erste Teil der Reihe „AngularJS Tipps“. Er beschäftigt sich mit drei Problemstellungen zu denen Best-Practise-Tipps gegeben werden sollen: (1) Kommunikation zwischen Controllern via Services, (2) Datenaustausch zwischen Controllern per Routing und AJAX-Errors an einer zentralen Stelle einer Web-App abfangen. Alle diese Themen drehen sich um die Frage, wie sich eher unabhängige Teile einer AngularJS-App miteinander verdrahten lassen, wie sich also ein Autausch von Daten und Informationen herstellen lässt.

Der Artikel richtet sich an Leser die bereits Erfahrungen mit AngularJS gesammelt haben und ist darum keine generelle Einführung in die Arbeit mit diesem JavaScript-Application-Framework.

Weiterlesen

Playing around with fragment shaders in WebGL

WebGL is a graphics library for web browsers, based on a version of OpenGL for embedded devices, OpenGL ES. The library allows for customized real-time 3d graphics rendering in modern browsers, including the use of shaders. There is a variety of scenarios in which you would want to make use of such a library. Consider, for example, browser games, 3D maps and product views. The simple WebGL interface is accessible via JavaScript and even whole frameworks are available, such as three.js (for an introduction, see Johannes Brosi’s great article from earlier this month).

As Christmas holidays are approaching, it is nice to have some toys to play around with. In this tutorial, I will provide a basis for fiddling around and experimenting with WebGL and fragment shaders, since it turned out to be a lot of fun to play around with them, and the basic concept is relatively easy to grasp. This article basically follows my own way of coming to play around with fragment shaders in WebGL. The idea was generated shortly before the Mayflower/Liip Barcamp, where David Sora Parra and I organized a collaborative session in which we wanted to generate some coding fun by discovering the unknown together. Weiterlesen

node.js – Debugging in PHPStorm auf der VM

Bei Mayflower ist es üblich, dass dem Entwicklerteam für jedes Projekt eine virtuelle Maschine zum Entwickeln zur Verfügung steht. Im einem unserer letzten Projekte hatten wir einen größeren Service auf Basis von Node.js zu erstellen. Dabei stellte sich heraus, dass das Debugging von JavaScript unter Node.js eine echte Herausforderung ist. Wie wir dennoch in unserem Setup mit der Entwickler-VM zum Debuggen gekommen sind, beschreibt dieser Artikel. Weiterlesen

JavaScript Coding Patterns: Objekt-Vererbung mit Prototypen

In den vorangegangenen Teilen der Reihe JavaScript Coding Patterns (Teil I, Teil II und Teil III) wurde immer wieder betont, dass JavaScript eine funktionale und zugleich objektorientierte Skriptsprache ist. Funktionen sind hier selbst Objekte die in JavaScript nicht auf Klassen beruhen, sondern ihre Attribute und Methoden von bereits existierenden Objekten erben. Es handelt sich dabei um eine prototypenbasierte Art der Vererbung.

In diesem vierten Teil der Reihe wird es darum gehen sich die Rolle, die Prototypen in JavaScript spielen, etwas genauer anzuschauen.

Weiterlesen

The JavaScript Craftsman

Gestern, 14.12.2013, fand der Global Day of Code Retreat statt. Ein Code Retreat ist eine Veranstaltung der Software Craftmanship Bewegung für Entwickler, um ihre handwerklichen Fähigkeiten zu trainieren. Was ist ein Craftsman? Sucht man im Wörtbuch nach Craftsman findet man die Begriffe Facharbeiter, Handwerker und Handwerksmann und unter dem Wort Craft findet man die Begriffe Kunstfertigkeit, Geschick, Gewerk und Handwerk. Betrachtet man nur die Begriffe aus dem Wörtbuch, könnte man meinen, bei Software Craftmanship handelt es sich einzig und allein um das beherrschen des Handwerks, also um das schreiben von wunderschönen Code. Das stimmt so nicht ganz, klar möchte ein Software Craftsman guten Code produzieren, darüber hinaus aber möchte ein Software Craftsman ein professionelles Bild seiner Zunft abgeben. Was das bedeutet und wie die Prinzipien der Software Craftsman auch im JavaScript Umfeld umgesetzt können, soll in diesem Beitrag gezeigt werden. Weiterlesen

Testing your ExtJS 3.4 components with Jasmine

Developing your own ExtJS components for your application is more fun and results into more resilient code if you write them hand-in-hand with test code. A solid test basis can also facilitate the task of refactoring your software.

Although, test driven development is easy for javascript code, how can ExtJS 3.4 components be tested? Which parts of our components should be tested to accomplish a successful refactoring?
Weiterlesen

Komprimiertes JavaScript unter Kontrolle: Source Maps

Haben Sie schon einmal versucht, den Fehler in Zeile 1 der Datei app.js zu finden, wenn diese Datei aus nur einer Zeile mit einer Zeilenlänge von etlichen tausend Zeichen besteht und weder über vernünftig gesetzte White Spaces noch über Kommentare verfügt? Wartungsfreundlich und gut lesbar ist ein so optimierter Quellcode sicherlich nicht. Zur Hilfe kommt Ihnen hier das Konzept der Source Maps. Weiterlesen