Tipps und Tricks

Web-Services als Architektur-Prinzip, z.B. für eine komplette IT-Infrastruktur in vielen Unternehmen, sind schon lange ein Thema unter dem Stichwort SOAP (Simple Object Access Protocol). Am stärksten durchgesetzt hat sich das Prinzip in der Java-Welt, auch wenn selbstverständlich in den beiden anderen großen IT-System-Welten (OpenSource/PHP und Microsoft .NET) ebenfalls Technologien hierfür zur Verfügung standen.

In der einfacheren Version als REST-Service (REpresentational State Transfer) erleben wir zur Zeit geradezu einen Hype dieses Ansatzes, der es ermöglicht, innerhalb einer IT-Infrastruktur, z.B. eines Unternehmens, die Anwendungsebene konsequent von der Daten-Ebene und deren Verwaltung zu trennen (vgl. Abb. 1) und zwar über das HTTP-Protokoll.

Abb. 1: REST-API trennt in einer IT-Infrastruktur die Anwendungen von den Daten

Zu den Unterschieden zwischen SOAP und REST verweise ich auf diesen guten Artikel, ohne selbst näher darauf einzugehen.

In diesem Beitrag wird die Architektur der hybriden App aus dem letzten Beitrag durch den Einsatz des Frameworks RequireJS verbessert. Da wir das Projekt schon auf dem Module-Pattern aufgebaut hatten, sind nur noch wenige Modifikationen notwendig, um dynamisches Laden der Module zu ermöglichen.

Dieses dynamische Laden kann zu erheblichen Performance-Verbesserungen führen. Außerdem lassen sich Abhängigkeiten zwischen den Modulen mit dem Framework require.js leichter verwalten. Auch wird durch den Einsatz von r.js (Ein NodeJS-Modul) eine Optimierung des Source-Codes möglich gemacht (Minification). Dieser Punkt ist aber nicht mehr Gegenstand dieses Artikels.

Wir hatten uns in diesem Artikel eine super-simple App mit einer Zeile Source-Code gebaut, die allerdings nur in wenigen Einsatzfällen professionellen Ansprüchen genügt, vielleicht als ePaper-Reader oder als App für ein einfaches News-Medium - zum Beispiel ein Blog - wobei allerdings Responsive Design vorausgesetzt wurde.

Die Lade-Anzeige der Seite wurde mit einfachen CSS-Bord-Mitteln realisiert, was durchaus schon die Usability beträchtlich erhöhen kann. Aber wahrscheinlich will man sehr schnell etwas mehr Komfort und einige spannende Features implementieren.

Ein Spinner für die Lade-Anzeige sieht schon sehr viel professioneller aus und wie wäre es mit einem Kompass für das Impressum, so dass man mobil auf der Anfahrtskarte auch die Richtung erkennen kann, in die man laufen muss? Ich selbst hätte schon häufiger dafür Bedarf gehabt, vor allem, wenn ein Kunde mitten in der Stadt wohnt und das Navi im Parkhaus zurückgelassen werden musste.

Oder man will seinen Nutzern die Möglichkeit geben, ein Photo hochzuladen? Ein solches Feature ist vielleicht der erste Schritt zu einem erfolgreichen Geschäftsmodell.

Das Modul-Muster für Javascript sollte jeder aus dem effeff kennen. Es ist eines der vielseitigsten Methoden, den eigenen Source-Code in Projekten zu strukturieren. Dieses Pattern spielt eine wichtige Rolle in vielen leistungsfähgien Javascript-Frameworks und Konzepten wie NodeJS, RequireJS, CommonJS, AMD und ECMAScript.

Der oben verlinkte Artikel erklärt das Grundprinzip recht gut. Deshalb soll im Folgenden auch nicht mehr viel Theorie vermittelt werden, sondern dieses Modul-Pattern so beschrieben werden, wie wir es in weiteren Artikeln benötigen.

NetBeans ist eine freie OpenSource-IDE für Java, Javascript, Html, PHP, C++ und andere Programmiersprachen und erfreut sich weltweit wachsender Beliebtheit.

Ich habe früher lange mit Eclipse PHP und dem Aptana-Studio, einer für Javascript optimierten Eclipse-Version, gearbeitet und das sogar parallel. Der Grund war, dass es offensichtlich nicht möglich war, die Vorzüge einer für PHP und einer für Javascript optimierten Version in einer einzigen Eclipse-Konfiguration zu vereinen. Das hatte mich lange sehr gestört, denn wer Backend und Frontend im PHP-Umfeld entwickelt, der braucht beides in einem einzigen System.

Genau diese Erwartung erfüllte dann NetBeans für PHP und Html5 (Download) ganz ausgezeichnet. Das wichtigste Argument für Netbeans für meine Bedürfnisse als Front- und Backend-Entwickler im Umfeld von PHP ist, dass PHP und Javascript von einer einzigen IDE gleich gut unterstützt werden.

In diesem Beitrag wird ein Ansatz anhand eines ausbaubaren Beispiels vorgestellt, wie man mit Grunt und Firefox Automatisierungsaufgaben für eingefleischte Mausschubser ausführbar machen kann. Wir entwickeln eine einfache GUI für ein Grunt-Skript und zwar als Firefox-Add-on.

Unsere kleine Reihe Automatisierung mit Grunt für Windows wäre lückenhaft, wenn wir uns nicht noch mit einigen Techniken beschäftigen würden, unseren Automatisierungscode zu organisieren. Ein minimales Grunt-Projekt besteht aus dem Konfigurationsfile package.json und dem Haupt-Skript Gruntfile.js. Werden die Projekte umfangreicher, möchte man den Sourcecode in mehrere Dateien aufsplitten. Eine Technik dafür haben wir in den vorhergehenden Blogbeiträgen schon kennengelernt, aber nicht kommentiert. Das wollen wir hier nun nachholen und um einige weitere wichtige Techniken ergänzen.

Es gibt viele Möglichkeiten in Grunt, Dateien zu kopieren und das Kopieren von Dateien ist eine der häufigsten Operationen bei der Automatisierung. Deshalb sollte man sich frühzeitig mit einigen grundsätzlich verschiedenen Möglichkeiten vertraut machen. Die folgenden fünf Beispiele wurden so ausgewählt und gestaltet, dass sie ihren typischen Einsatzbereich andeuten und man sie für ihren praktischen Einsatz mit Copy & Paste übernehmen und leicht an die eigenen Bedürfnisse anpassen kann.

Grunt ist ein Tool, welches Aufgaben (Tasks) in erster Linie synchron ausführt und das ist für ein Automatisierungstool die wichtigste Fähigkeit. Es ist es keine triviale Eigenschaft, weil Grunt naturgemäß mit fremden Shells zusammenarbeitet und von gestarteten Anwendungen Informationen darüber benötigt, wann und wie eine Aufgabe tatsächlich fertiggestellt wurde. Nicht immer gelingt dies Grunt mit seinen Bordmitteln, so dass manchmal nachgeholfen werden muss (z.B. bei dem unter Windows sehr interessanten Kopier-Programm Robocopy, für das es deshalb ein eigenes Grunt-Module grunt-robocopy gibt).

Grunt bietet aber auch die Möglichkeit, Aufgaben asynchron zu verarbeiten. Wer diese Möglichkeiten nutzen will, kommt schnell in Schwierigkeiten, wenn er nicht richtig verstanden hat, wie Grunt hierbei vorgeht. Es ist eine gute Übung, sich mit diesen Möglichkeiten zu Beginn der Einarbeitung mit Grunt zu beschäftigen, da man sich hier ein solides Grundverständnis für das Arbeiten mit diesem Automatisierungstool erarbeiten kann.

Wer ein Grunt-Skript für seine Automatisierungsaufgaben erstellt, benötigt schnell einen Debugger mit leistungsfähiger GUI, z.B. den Entwicklertool des Chrome-Browsers. Leider gilt wie immer, dass Grunt auf Linux entwickelt wurde und deswegen die Debugging-Möglichkeiten unter Windows etwas hakeln oder die vorgeschlagenen Lösungen im Netz nicht für Windows funktionieren. Im folgenden wird gezeigt, wie man unter Windows mit dem Chrome-Entwicklerwerkzeug arbeiten kann, um seine Grunt-Skripte zu debuggen.