Lightning-Talks: moderne Frontend Entwicklung

Lightning WEB @night im Würzburger Office

Am 24. April fand in unserem Würzburger Office das erste Event aus unserer neuen Vortragsreihe statt. In deren Rahmen gibt es jeweils an einem Abend vier Kurzvorträge – so genannte Lighning-Talks – zu einem gemeinsamen Thema. Am 24.04. war das die „moderne Frontend-Entwicklung“, die in den vier folgenden Lightning-Talks behandelt wurde:

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

Eine Einführung in ThreeJS (WebGL)

Auf PCs und Macs haben anspruchsvolle 3D-Grafiken schon vor einer ganzen Weile Einzug gehalten. In Form von Fotogalerien, Produktkonfiguratoren und -ansichten und natürlich in Form von Spielen. Auch der mobile Bereich ist technisch mittlerweile auf dem Stand, aufwendige 3D-Grafiken berechnen zu können.

Nun stellt sich bei der Planung einer entsprechenden Anwendung oder eines Spieles aber die Frage, auf welche Programmiersprachen und Frameworks gesetzt werden sollte. Insbesondere, wenn das Produkt dann auf mehreren Plattformen erscheinen soll.

Mit diesem Artikel möchte ich eine Einführung in das JavaScript-Framework ThreeJS geben und zeigen, wie einfach es sein kann, mit vertrauten Web-Werkzeugen und dem richtigen Framework durchaus auch anspruchsvollere 3D-Anwendungen zu schreiben. Am Beispiel von CocoonJS werde ich kurz erklären, wie diese dann nicht nur auf Desktop-Browsern, sondern auch auf mobilen Endgeräten genutzt und in die Stores gestellt werden können.

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

Erstellen einer flexiblen Projektstruktur für Symfony2 und AngularJS

Symfony2 im Backend und AngularJS im Frontend, das war die Wahl für ein internes Projekt zur Teamplanung bei meinem Praktikum im September/Oktober 2013.

Eine besondere Herausforderung von Zusammenfügen der beiden Frameworks, sodass sie angenehm miteinander harmonieren, da beide ihr eigenes Routing mitbringen.
Soll hier Symfony das Routing übernehmen oder soll AngularJS das alles regeln? Brauche ich eine spezielle Webserverkonfiguration?

In diesem Artikel möchte ich beschrieben, wie die Projektstruktur aussehen muss, damit Symfony2 und AngularJS bequem zusammen spielen und es keine Kompilkationen mit Updates und dem Deployment gibt. Weiterlesen