JavaScript "EE"

Hartmut Schlosser

Drei Tage, drei Themen, das war für mich die JAX 2012: JavaScript-Anwendungen professionell entwickeln, der Umgang mit Integrationslogik in BPM-Projekten und wie agiles Vorgehen und Prozessorientierung sich positiv, über die IT hinaus, auf Unternehmen und die Unternehmenskultur auswirken können.

Hier möchte ich kurz das erste Thema beschreiben: JavaScript-Entwicklung in professionellen Softwareprojekten.

Mobile Revolution

Wir kennen die Fakten: Der Smartphone-Markt wächst, immer mehr Anwender verwenden primär Tablets statt Laptops, und wir können in den kommenden Jahren mit einem enormen Wachstum des Marktes für Mobile Endgeräte rechnen. Wie Mark Little bei seiner Keynote feststellte, sind wir längst im Zeitalter des Ubiquitous Computing angekommen. Für uns als Java-Entwickler ist das, denke ich, hauptsächlich aus zwei Gründen interessant: Erstens müssen wir uns darauf einstellen, dass immer mehr Arbeitgeber bzw. Kunden nach Anwendungen (und ich denke hierbei in erster Linie an Webanwendungen) fragen werden, die auch auf mobilen Endgeräten bedienbar sind.

Und zweitens spielt Erwartungskonformität bei der Frontendentwicklung eine wichtige Rolle. Wenn also mehr und mehr Benutzer sich an den Bedienkomfort von mobilen Apps gewöhnen, beeinflusst das auch die Erwartungshaltung gegenüber geschäftlichen Webapplikationen, Firmenportalen und anderen typischen Einsatzgebieten von Java.

Konkret sollten wir also möglichst hohe Flexibilität bei der Ausführungsumgebung unserer Frontends und möglichst guten Bedienkomfort anstreben.

Nebenbei: Letztes Jahr wurde anlässlich des zehnjährigen Bestehens des Agilen Manifests ein Statement mit der Vision für die nächsten zehn Jahre formuliert. Punkt eins: „Demand Technical Excellence“. Im Frontend-Bereich haben wir da in der Java-Welt denke ich einiges zu tun.

„JavaScript ist die Sprache des Webs – Lernt sie!“

Soviel zum Kontext, aber was bedeutet das technisch? Mittlerweile hat sich in der mobilen Welt und auch bei Desktop-Browsern HTML5 als Standard etabliert. Übrigens: „HTML5 = HTML + JavaScript + CSS3“. Struktur und Layout werden also mit HTML und CSS3 beschrieben, während wir das Verhalten mit JavaScript programmieren. Insofern hat sich mit HTML5 eigentlich nicht viel verändert, man versucht nur mittlerweile die ohnehin etablierten Standards zu formalisieren und so zu festigen.

Übrigens machen die Großen der Branche, allen voran Microsoft und Apple, schon vor, wie man Features aus der Mobilen Welt in Standardprodukte zurückfließen lassen kann. Die Previews von Windows 8 wirken teilweise sogar schon schwer mit Maus und Tastatur bedienbar und Apple stellte schon vor einem Jahr die Präsentation vom damals neuen OS X Lion unter das Mottto „Back to the Mac“ und wollte damit unterstreichen, dass viele der neuen Features (Appstore, Launchpad etc.) von iOS inspiriert waren.

Während im Frontend also JavaScript dominiert, werden Backends über REST angebunden, was ja auch in der Java-Welt verbreitet und sogar durch JAX‐RS standardisiert ist. Wichtig ist dabei, dass das REST API die Serialisierung nach JSON (JavaScript Object Notation) erlaubt. Neben JAX‐RS bieten sich auch Frameworks wie SpringMVC für die Implementierung an. Um im Frontend leichtgewichtig zu bleiben, geht der Trend nun dahin, statt JavaScript zu generieren (wie bei GWT, Vaadin und Co.) die GUI-Logik in JavaScript selbst zu schreiben. Wer aber schon einmal mehr als 20 Zeilen JavaScript geschrieben hat, der weiß, dass die Code-Struktur schnell zur Herausforderung wird. Wie man damit umgehen kann, haben Tobias Bosch, Stefan Scheidt und Stefan Glase von Opitz Consulting in einem Workshop mit dem Titel „Mobile JavaScript-Web‐Apps professionell entwickeln“ am Montag zum Auftakt der Jax 2012 hervorragend vermittelt. Dabei kamen umfassend all die Themen zur Sprache, die bei der professionellen Softwareentwicklung eben eine Rolle spielen. Ein Großteil der Zeit haben die drei darauf verwandt, Testgetriebene Entwicklung mit Jasmine (http://pivotal.github.com/jasmine/) zu vermitteln.

Während testgetriebene Entwicklung bekanntlich ohnehin das Beste seit geschnitten Brot ist, kommt ihr in der JavaScript-Entwicklung durch die nicht vorhandene Typisierung der Sprache eine noch größere Bedeutung zu. Nebenbei wurde anhand der natürlich sprachlich formulierten Testfälle anschaulich gezeigt, wie gut ein solches Vorgehen den Entwickler immer wieder dazu bewegt, sich auf die fachlichen Anforderungen zu konzentrieren. Übrigens lässt sich dieses Vorgehen, denke ich, hervorragend mit agiler Softwareentwicklung, speziell mit Scrum, verbinden. Ein weiteres interessantes Konzept sind die sogenannten Promises, vergleichbar mit Futures in Java. In JQuery (http://www.jquery.com) lassen sie sich mit $.Deferred() erzeugen und bieten dann die Möglichkeit, zum Beispiel bei Backendaufrufen Erfolgs- und Fehler-Callbacks zu definieren.

Ebenso wichtig wie Testing ist die Architektur von JavaScript-Anwendungen. In letzter Zeit sind in der JavaScript Community diverse sogenannte Data Binding oder MVC (Model View Controller) Frameworks entstanden, die ein Programmiermodell für JavaScript-Anwendungen vorgeben. Nebenbei, und das sorgt maßgeblich für einheitlicheren und schlankeren Code, trennen sie konsequent Markup und GUI‐Logik und geben dem Programmierer, wie der Name „Data Binding“ schon ahnen lässt, eine einheitliche Schnittstelle für die notwendigen DOM-Manipulationen. Manche Frameworks liefern sogar Unterstützung für Dependency Injection, wie beispielsweise Angular.js, was auch im Workshop zum Einsatz kam. Angular (http://www.angularjs.org) wird von Google gesponsert und ist als Open-Source-Projekt unter MIT-Lizenz verfügbar. Mit Vojta Jina war bei der JAX übrigens auch einer der drei Core‐Entwickler, der in seinem Vortrag „AngularJS: Testability in Mind“ die Grundideen von Angular vorstellte und in einer Live-Coding-Session eine Taskliste (das „Hello World“ der Data Binding Frameworks) schrieb.

Das Projekt erfreut sich einer wachsenden und lebendigen Community, wohl nicht zuletzt wegen des T‐Shirt Driven Development Ansatzes. Als Entwicklungsumgebung war eine bis Mai 2012 gültige Testversion von IntelliJ auf dem Workshop USB Stick. Ich hatte schon häufiger gesehen, dass JavaScript-Entwickler scheinbar gerne IntelliJ einsetzen, jetzt verstehe ich endlich warum: Autovervollständigen und Refactoring. Das gibt meine bisherige JavaScript IDE (TextMate + Chrome Developer Tools) und auch Eclipse einfach nicht her.

Natürlich blieben viele Themen im Workshop offen, beispielsweise wurde das REST Backend als gegeben hingenommen und nur am Anfang des Workshops gestartet. Auch Themen wie Security und Cross‐Origin Support beim REST API wurden nur im Theorie‐Block angesprochen. Für eine eintägige Veranstaltung und ein Publikum mit derart unterschiedlichem Wissensstand war das Themenspektrum aber ohnehin schon herausfordernd genug!

Auch im Bereich Frontend‐ und User‐Interaction‐Design gibt es natürlich noch diverse interessante und wichtige Themen. Beispielsweise bieten Frameworks wie Twitter Bootstrap (http://twitter.github.com/bootstrap/) einen guten Ausgangspunkt für die Entwicklung wartbarer und ansprechender Benutzeroberflächen. Ein paar der aktuellen Trends in diesem Bereich sind Responsive Design, CSS Grids und Styleguides. Man sieht, das Thema hält viele spannende Punkte bereit. Höchste Zeit, sich damit zu beschäftigen!

Ich schreibe zum Beispiel schon fleißig an einem Task‐Listen Frontend für Activiti (http://www.activiti.org), um das gelernte gleich anzuwenden. Dazu dann bald mehr auf http://www.bpm‐guide.de .

Nils Preusker ist Berater, Trainer und Softwareentwickler bei der camunda services GmbH. Er kombiniert dabei erfolgreich seine kommunikativen Fähigkeiten mit seiner technischen Kompetenz. Dank umfangreicher Projekterfahrung hat er einen guten Überblick über das Feld der Softwareentwicklung mit Spezialkenntnissen im Bereich JBoss jBPM und Activiti.

Geschrieben von
Hartmut Schlosser
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.