Die Zukunft Der JVM Ist Polyglott

Was kann Apache Wicket 6? Alle Features hier im Heft 14

11.2012

Mag magazin Java • Architekturen • Web • Agile www.javamagazin.de Java

Continuous Delivery Chef und JBoss

Mit dem Open-Source-Projekt Togglz 59 Automatisiertes Deployment 45 Programm im Heft! 35 invokedynamic Die Zukunft der JVM ist polyglott

Sonderdruck für BridgingIT GmbH

JavaScript- Vaadin Java Memory Frameworks TouchKit Leaks Wer die Wahl hat, HTML5-Anwendungen Wenn Leaks sich hat die Qual 96 mit Java 66 läppern 30 SonderdruckAgile @Grafik:Tabelle auf 2Doppelseiten, falls nötig, den Abschnitt „Ökosystem“ heraustrennen

JavaScript-Frameworks: Die Qual der Wahl Die Guten ins Töpfchen

Supermarkt, 19:55 Uhr. Es fehlt noch ein Müsli im Einkaufskorb. Die Regale sind voll von oben bis unten. Alle sehen lecker aus, und auf den meisten steht auch noch „Gesund!“, „Vitamine“ und „Cerealien“. Wir Entwickler stehen manchmal vor einer ähnlichen Entscheidung: Welches Framework passt für unsere Zwecke gerade am besten? Versprochen wird viel, aber was steckt dahinter?

von Stefan Zilch und Karsten Krieg works als Handwerkszeug auswählen. Wie in der Java- Welt ist das Angebot von Frameworks im Bereich von HTML5 und JavaScript haben sich als Weg zur Erstel- JavaScript zwar reichhaltig, aber auch unübersichtlich. lung von portierbaren Apps etabliert. Trotz mancher Dieser Artikel beschäftigt sich mit dreizehn Hiobsbotschaften (Kasten: „Facebook und Perfor- JavaScript-Frameworks, die speziell für den mobi- mance“) sind Anpassungen zwischen den verschiedenen len Bereich designt wurden. Insbesondere werden die Geräten und Browsern aufgrund der zumeist verwen- professionelle Einsatzfähigkeit, die zugrunde liegende deten WebKit-Engine – mit der Ausnahme Windows Architekturunterstützung, die Nachhaltigkeit und die Phone – nicht mehr notwendig. Dadurch hat sich der Qualität betrachtet. Weiche Kriterien wie Community, Aufwand für die Erstellung von Apps signifikant redu- kontinuierliche Weiterentwicklung und Aktivität (Ver- ziert. Wer sich für die Implementierung einer App auf gleichstabelle) werden ebenfalls bewertet. HTML5-Basis entscheidet – sei es als integrierte App via PhoneGap, WebWorks und dergleichen oder als mobile Sencha Touch 2 Webseite bzw. mobiles Widget mit dem Charakter einer Mitte dieses Jahres hat Sencha seine Produktlinie neu App – wird eines der existierenden JavaScript-Frame- durchsortiert und geht unter anderem mit Sencha Touch 2 als Plattform für mobile HTML5-JavaScript- Anwendungen auf den Markt. Gestützt durch die leis- Facebook und Performance tungsstarke Ext-JS-Bibliothek des gleichen Herstellers Die Nachricht machte im Juni die Runde: Facebook implementiert die und flankiert von kostenpflichtigen Ergänzungen wie iOS-App komplett neu, da diese zurzeit auf HTML5-Basis implementierte Sencha Chart oder dem Sencha Architect, bekommt App gravierende Performanceprobleme hat und hatte. Eine Entscheidung man ein Paket, das in dieser Form unter den besproche- dieser Größenordnung – die Facebook-App ist sicherlich nicht die trivi- nen Frameworks einzigartig ist. alste App am Markt – wirft auf den ersten Blick ein schlechtes Licht auf Ext JS bietet ein eigenes mächtiges Klassensystem und HTML5-Apps. ein Model-View-Controller-Pattern, in dem z. B. das Ein detaillierter Blick auf das zugrunde liegende Problem zeigt, dass Model die Felder, Validierung, Beziehungen und die Da- durch den Einsatz von UIWebViews – der Browsertechnik für gepackte tenversorgung beschreibt. Damit ist der Entwickler sehr Apps in iOS – auf die neue Nitro-Engine verzichtet wurde und damit ein nahe an den Möglichkeiten mächtigerer Sprachen und erheblicher Geschwindigkeitsverlust einherging [1]. Die Aussage „HTML5- Design Patterns, die sich mit JavaScript normalerweise Apps sind langsamer als native Apps“ ist nicht vom Tisch zu wischen, nur mit Anstrengung darstellen lassen. sollte aber – wie man in diesem Beispiel sieht – immer nochmals genauer Eine Sencha-Touch-App wird komplett in JavaScript hinterfragt werden. und CSS entwickelt, HTML-Markup wird nicht ver- Die hier vorgestellten Frameworks wurden alle einem Performancetest wendet. Sie wird instanziiert mit einem Objekt Panel. mittels JSLitmus unterzogen, in dem sie in nachvollziehbaren Tests rund Diesem Panel-Objekt können nun weitere, die Appli- um Selektoren, DOM-Manipulation und Widgets ihre Leistung beweisen kation beschreibende Objekte mitgegeben werden, konnten. Die Ergebnisse findet man in der Vergleichstabelle. z. B. das Objekt Store, das den Zugriff auf die Daten beschreibt (Listing 1).

2 javamagazin 11 | 2012 © Software & Support Media GmbH www.JAXenter.de @Grafik:Tabelle auf2 Doppelseiten, Sonderdruckfallsnötig, den Abschnitt „Ökosystem“ heraustrennen Agile

Hiermit lassen sich klar strukturierte Entwicklungs- sondern nutzt hierzu ausschließlich JavaScript. Das fragmente erstellen; viele weitere Attribute der bestehen- Beispiel in Listing 2 zeigt den Ausschnitt, der den Con- den Klassen erlauben eine umfangreiche Konfiguration tent-Bereich der generierten Startseite der HelloWorld- der entstehenden Anwendung. Sencha liefert mit dem Sample-App beschreibt. Er besteht aus einer ScrollView, Tool „sencha“ das Packaging- und Build-Tool. Mit des- die ein Label mit dem Text „Welcome to The M-Pro- sen Hilfe werden die initialen Projektfragmente (Scaf- ject“ enthält. folding) erstellt sowie z. B. eine integrierte App für iOS Wer nun Appetit auf mehr bekommen hat, findet mit- oder Android – analog PhoneGap – gebaut. Die Konfi- hilfe der Community genug Möglichkeiten, sich in die guration des Builds wird über JSON-Objekte bestimmt. Entwicklung mit „The-M-Project“ einzuarbeiten. Ne- Hervorragende Dokumentation, viele Einstiegsressour- ben Twitter, Facebook und GitHub lockt die Webseite cen und eine große Community runden einen sehr po- zusätzlich mit vielen Beispielen, Tutorials sowie einer sitiven Gesamteindruck ab. Sencha Touch ist für einen ausführlichen Dokumentation. produktiven Einsatz im kommerziellen Rahmen geeig- net und sollte, im Rahmen der Lizenzmodelle, immer in jQuery Mobile Betracht gezogen werden. Interessanterweise ist Ext JS jQuery Mobile gehört zu den bekanntesten HTML5- unter einer kostenpflichten kommerziellen Lizenz zu Frameworks im Mobile-Umfeld. Es basiert auf den nutzen. Sencha Touch, das Ext JS verwendet, ist jedoch bereits seit Jahren etablierten jQuery- und jQuery-UI- für eigene Applikationen ohne OEM-Charakter kosten- Frameworks und ist kompatibel mit gängigen Plattfor- frei kommerziell einsetzbar. Zusätzlich ist Support auf men wie Android, iOS und BlackBerry. Der Fokus des Basis von Entwicklerplätzen zukaufbar. Frameworks liegt auf UI-Widgets, die für den mobilen Einsatz entwickelt und optimiert wurden. Neben Stan- The-M-Project dardformularelementen existieren auch Komponenten, Das deutsche Unternehmen M-Way Solutions GmbH die sich im mobilen Umfeld zum De-facto-Standard ent- bietet das Open-Source-Framework „The-M-Project“ wickelt haben, wie Toolbars oder verschiedene Darstel- seit Anfang des Jahres an. Ein Besuch auf der Webseite lungen von Listen. Ein durchdachtes Theming-Konzept lässt schnell erkennen, dass hier Open-Source-Software sorgt für einfaches Anpassen der Styles über Cascading im professionellen Umfang entwickelt wird. „The-M- Style Sheets. Zusätzliche Unterstützung bekommen Ent- Project“ ist weitaus mehr als nur ein Framework für die wickler durch das Online-Tool „Theme Roller“ [1]. Mobile-App-Entwicklung. Zu den Core-Features gehö- Hiermit lassen sich neue Themes erstellen, aber auch ren neben einer Widget Library – basierend auf jQuery bestehende einfach anpassen. Mobile – ein MVC-Ansatz sowie weitere Utility-Biblio- Das Layouting und die Integration von Widgets auf theken. Wer den Einstieg wagt, sollte sich zu Beginn von den so genannten Pages findet über spezielles Markup der zu installierenden Software nicht einschüchtern las- in HTML5 statt. Listing 3 zeigt den HTML5-Quellcode sen. Über die eigentlichen Artefakte von The-M-Project zur Erstellung einer einfachen Liste im Content-Bereich hinaus müssen noch gow (GNU on Windows), win-bash einer Page. Das Attribut data-role legt dabei fest, wie und Node.js installiert werden. Dieser Installationspro- jQuery Mobile mit den einzelnen Elementen auf der zess ist auf einer halben Seite beschrieben und in we- Page umgehen soll. Konkret heißt das im Beispiel, nigen Minuten abgeschlossen. Mit „espresso“ wird ein es existiert eine Page (data-role="page2") mit einem Werkzeug geboten, das ein ständiger Begleiter während Content-Bereich (data-role="content"). Die Liste selbst der Entwicklung einer Applikation ist. Nutzt man es zur (data-role="listview") wird nun innerhalb des Content- Anlage eines Projektes, ist man tatsächlich schnell er- Bereichs angezeigt. Weitere Möglichkeiten zur Konfigu- folgreich: ration sowie zum Verhalten der Liste findet man in der Dokumentation von jQuery Mobile. Zu jeder Kompo- espresso init -e -p HelloWorldSample nente werden die Eigenschaften, aufrufbare Methoden sowie Events dokumentiert. „espresso“ bringt einen eigenen Server mit, den man Es fällt auf, dass das Beispiel ganz ohne JavaScript- startet mit: Code auskommt. Das Geheimnis liegt in der so genannten Auto-Initialisierung [2], die das Framework von espresso server Haus aus mitbringt. Diese besteht aus einer Default- Konfiguration, die dafür sorgt, dass jQuery Mobile beim Weitere Möglichkeiten, wie das Erstellen von Model, Laden der Seite sofort ausgeführt bzw. angewendet wird View und Controller-Klassen, sowie die Möglichkeit und alle Komponenten initialisiert. des nativen Packaging einer iOS- oder Android-App ma- Aus Architektur- und Designsicht bietet das Frame- chen das Tool zu einem komfortablen Werkzeug, das work keine weitere Unterstützung. Wer gerne mit dem die Entwicklung an vielen Stellen beschleunigt. Model-View-Controller- oder dem Model-View-View- Da „The-M-Project“ auf jQuery Mobile basiert, steht Model-Pattern arbeitet, um gerade im Enterprise-Um- der gesamte Widget-Umfang zur Verfügung. Allerdings feld komplexe Applikationen zu strukturieren, muss benötigt man kein Markup, um die App zu designen, zusätzliche Frameworks in seine Lösung integrieren.

www.JAXenter.de © Software & Support Media GmbH javamagazin 11 | 2012 3 SonderdruckAgile @Grafik:Tabelle auf 2Doppelseiten, falls nötig, den Abschnitt „Ökosystem“ heraustrennen

Wink es lässt sich mit auch von der Community entwickel- The Dojo Foundation erkannte bereits 2010 die Zei- ten Plug-ins erweitern und enthält bereits Plug-ins für chen der Zeit und veröffentlichte mit Wink Toolkit Geolocation, Motion Detection und weitere gerätena- ein für mobile Apps optimiertes Framework. Es ba- he Abfragen. Es bietet auch direkte Unterstützung zu siert komplett auf eigenem Code, hat also kein jQuery Gears, SafariDB sowie einige grundlegende SQLite- oder ähnliches als Grundlage. Damit bleibt es schlank: Abfragen. Zusätzlich bringt es Unterstützung von In- Weniger als 13 KB bringt es in der Basisversion an ternationalisierung und Theming mit, die dynamisch den Start. Das Framework bietet Modularisierung, oder über Build-Skripte in die Applikation einfließen können. Zum Bauen der eigenen Web-App kann man ein über ein JSON-Objekt konfiguriertes mitgeliefertes Listing 1: Sencha-Touch-App „Store“ Ant-Script nutzen, das die verwendeten Module und CSS-Dateien verkleinert („minify“ ) und in jeweils ein store: { Artefakt zusammenführt. type: 'tree', Wink nutzt eine Mischung aus Markup und Ja- vaScript, um die Seiten der Webapplikation zu beschrei- fields: [ ben, man kann jedoch auch komplett auf das Markup 'titel', 'autor', 'auszug' verzichten. Negativ fällt hier das Fehlen von Utility-Me- ], thoden auf, es muss z. B. auf das Event onload reagiert proxy: { werden. Hier bieten andere Frameworks komfortab- type: 'jsonp', lere Wege. Als Pluspunkt kann man die umfangrei- url: 'https://yourjson.api.de', che Layout-Bibliothek sehen, die mit vielen Varianten reader: { ausgestattet ist und damit etwas mehr Abwechslung in type: 'json', die HTML5-App bringen kann. Ein Kitchensink sowie rootProperty: 'responseData.feed.entries' einige wenige Tutorials erleichtern den Einstieg in die } ansonsten knapp dokumentierten Ansätze. } Aktuell liegt Wink in der Version 1.4.2 vor. Es } scheint aber sowohl von den Autoren als auch der Community etwas vernachlässigt zu werden, nimmt man den Twitter-Account und die Foren als Basis für Listing 2: The-M-Project Content diese Annahme.

... Zepto content: M.ScrollView.design({ Zepto tritt mit dem Anspruch an, ein für moderne childViews: 'label', Browser optimierter, leichtgewichtiger Ersatz für jQue- label: M.LabelView.design({ ry zu sein. Das API basiert auf dem jQuery-Core-API value: 'Welcome to The M-Project' und bietet damit theoretisch die Möglichkeit, jQuery }) einfach auszutauschen. Mit nur einem Viertel der Grö- }) ße von jQuery scheint die Leichtgewichtigkeit erfüllt ... zu sein. Das wird erreicht, indem auf die Unterstützung von älteren Browsern und dem Internet Explorer im Allgemeinen verzichtet wird. Der Funktionsumfang be- Listing 3: Liste in jQuery Mobile schränkt sich auf jQuery Core plus CSS3-Transforma- tionen, etwas Form-Unterstützung und das Abfangen von Touch-Events. Zepto bietet keine UI-Komponen- ... ten oder Zugriffe auf Gerätekomponenten. Hier muss also mit anderen Frameworks nachgerüstet werden,

was in Bezug auf Wartbarkeit ein schweres Defizit dar-

stellt.

jQuery
jQuery UI
jQuery Mobile

digste an Information präsentiert. Zepto scheint sich

als Alternative zu jQuery bei speziell für mobile Gerä-

te konzipierten Apps durchzusetzen – nimmt man die wachsende Unterstützung von Zepto in anderen Frame- works als Maßstab –, bietet jedoch ohne zusätzliche Frameworks keinen Mehrwert.

4 javamagazin 11 | 2012 © Software & Support Media GmbH www.JAXenter.de @Grafik:Tabelle auf2 Doppelseiten, Sonderdruckfallsnötig, den Abschnitt „Ökosystem“ heraustrennen Agile

qooxdoo kommerzielles Produkt. qooxdoo kommt aus dem Hause 1&1 Internet AG Der Funktionsumfang von Titanium ist vollständig und stellt ein universelles JavaScript-Framework dar, den mobilen Geräten angepasst und bietet native Un- das sich in die Bereiche Website, Desktop, Server und terstützung zu betriebssystemspezifischen Aspekten wie Mobile untergliedert. Der Frameworkumfang im Mo- Apples Bonjour oder den Intents und Activities von bile-Bereich spezialisiert sich auf UI-Komponenten für Android. Cloud-APIs und Facebook-Anbindung, Aus- Touchscreens sowie auf das Event Handling im mo- prägung der UI-Elemente je nach Geräteklasse sowie bilen Umfeld. Das Theming der Widgets findet über XML-Databinding runden den hervorragenden Ein- CSS und LESS statt, womit eine hohe Flexibilität und druck ab. Dynamik gewährleistet ist. qooxdoo setzt vollständig Titanium kompiliert die mit JavaScript erstellten auf JavaScript, was das Erstellen von HTML-Markups Applikationen in nativen UI-Code und hat damit ge- überflüssig macht. Entwickler bekommen durch das genüber ähnlichen Tools wie PhoneGap – das einen Framework ein objektorientiertes Model zur Verfügung Browser-Wrapper um den JavaScript-Code erstellt – gestellt, was stark an Java erinnert. Z. B. werden Ordner einen deutlichen Vorsprung, da die Anwendungen auf in Form von Packages für die Strukturierung verwen- den Geräten tatsächlich wie native Anwendungen wir- det, innerhalb dieser sich pro Klasse eine JS-Datei findet. ken. Folgendes Beispiel zeigt die Implementierung einer Page, Eine detaillierte Besprechung der Features dieses die von NavigationPage erbt. Somit wird Basisfunkti- Frameworks sprengt den Rahmen dieses Artikels – es onalität, darunter Header, Backbutton etc. zur Verfü- existiert bereits Sekundärliteratur. Für den professio- gung gestellt: nellen Einsatz in Projekten muss es jedoch, sollten die Lizenzierungsfragen und Preisgestaltung geklärt worden qx.Class.define("javamagazine.page.Welcome", sein, als erste Wahl betrachtet werden. { extend : qx.ui.mobile.page.NavigationPage, Andere Frameworks construct : function() { Die folgenden Frameworks wurden in den Vergleich mit this.base(arguments); einbezogen, obwohl sie entweder noch sehr neu und nur this.setTitle("Welcome to Java Magazin"); rudimentär implementiert sind oder nicht mehr weiter- } gepflegt werden. }); jqMobi ist ein weiteres auf dem jQuery-API basieren- des Framework. Es wird das Ziel verfolgt, das Spektrum Durch die Unterstützung der gängigen Patterns wie von jQuery abzudecken bei gleichzeitiger Minimalisie- MVC oder MVVM sowie der Entwicklungsmöglichkeit rung des dafür notwendigen Codes. jqMobi und das von Custom Widgets lassen sich auch größere Projekte zugehörige jqUI bieten rudimentäre UI-Widgets und Un- mit individuellen Anforderungen sehr gut und struktu- terstützung von Android- und iOS-Browsern. Mit Mar- riert umsetzen. Die Dokumentation liegt in hochwertiger kup-basiertem Code kann eine Webapplikation relativ Qualität vor, was unter anderem das Einsteiger-Tutorial leicht auf ein mobiles UI gehoben werden, jedoch ist es erkennen lässt. Darin wird ein funktionsfähiger Twitter- im Vergleich zu den bereits besprochenen Frameworks Client implementiert, worin wichtige Aspekte wie Data im Funktionsumfang recht leichtgewichtig. Binding, Page Navigation, Event-Steuerung etc. vermit- Jo ist ein von einer Person entworfenes und gewarte- telt werden. Eine ausführliche API-Dokumentation so- tes Framework. Es besteht nicht nur aus einer Widget wie viele weitere Beispiele runden das Angebot für den Library, sondern hat den Anspruch, ein umfangreiches Einstieg in eine professionelle Entwicklung ab. JavaScript-Framework für mobile Anwendungen mit Eine weitere Besonderheit ist das auf Python basieren- geringem Footprint zu sein. Darin enthalten sind unter de Build-Tool. Neben den Standardfunktionen Projekt- anderem Klassen zur Realisierung des automatischen setup, Minimalisierung und Packaging informiert der Data Binding sowie Zugriffsmöglichkeiten auf lokale Builder über eventuelle Probleme und Fehler. So wird Storages, AJAX-Funktionalität etc. Die Dokumenta- z. B. erkannt, wenn ein Event gefeuert wird, wofür es tion weist auf ein vielversprechendes Framework mit keinen Listener gibt, oder aber wenn der Klassenname Potenzial hin, auch wenn es erst in der Version 0.4.1 nicht dem Dateinamen entspricht. Die Eclipse Rich Ajax vorliegt. Platform (RAP) setzt übrigens qooxdoo als Basisframe- DHTMLX Touch ist eines von vielen Produkten aus work für RWT ein [3]. dem gleichnamigen Hause DHTMLX, einem Hersteller, der jahrelange Erfahrung im Erstellen von kommerzi- Titanium ellen JavaScript-Komponenten besitzt. Das Framework Das Titanium-Framework des Unternehmens Appcele- selbst kann im Open-Source- und kommerziellen Be- rator wird mit viel Marketing-Aufwand auf den Markt reich kostenlos eingesetzt werden. Der Anbieter über- gebracht. Appcelerator bietet das gesamte Spektrum zeugt durch kleine Onlinetools wie einen Skin Builder von Tooling mit eigenen Eclipse-basierten IDEs, SDKs, für individuelles Theming oder einen Visual Designer Build-Unterstützung und vielem mehr. Titanium ist ein zur einfachen Gestaltung von User Interfaces. Die Ent-

www.JAXenter.de © Software & Support Media GmbH javamagazin 11 | 2012 5 SonderdruckAgile @Grafik:Tabelle auf 2Doppelseiten, falls nötig, den Abschnitt „Ökosystem“ heraustrennen

wicklung findet deklarativ in JavaScript statt, womit so lare, Unterstützung von Touch-Events sowie Zugriff auf gut wie kein HTML verwendet werden muss. Nachteilig Geolocation und Offline Data über Extensions. ist die nicht ganz so ausführliche Dokumentation, die Bei xui handelt es sich eher um eine Bibliothek als gerade den Einstieg etwas erschwert. Abhilfe schafft je- um ein Framework. xui hat mit schlanken 4.2 KB einen doch ein Community-Forum bzw. der kostenpflichtige entsprechend geringen Funktionsumfang. Lediglich spe- Support. zielle Touch-Events, AJAX, Animationen und DOM- jQTouch ist ein UI-Komponenten-Framework, das Manipulationen bietet es. Eine Widget-Library sowie sich auf jQuery oder Zepto als Selektor-Bibliothek ver- Unterstützung für typische Patterns (MVC, MVVM) lässt. Es wird gefördert von Sencha Labs, ist aber mit sind nicht enthalten. dem Code von Sencha Touch nicht kompatibel und Das API von Lungo präsentiert sich gut dokumen- hat auch keine Verbindung hierzu. In der vorliegenden tiert mit kurzen Beispielen auf einer aufgeräumten Version bietet es die üblichen UI-Elemente wie Formu- Website und macht den Eindruck einer durchdachten

Kriterien Sencha Touch 2 The-M-Project jQuery Mobile Wink Toolkit Jo LungoJS DHTMLX Touch jQTouch Zepto qooxdoo xui Titanium jqMobi Fakten Hersteller Sencha M-Way Solutions, jQuery Foundation The Dojo Dave Balmer, TAPQUO Inc. DHTMLX LTD David Kaneda Open Source 1&1 Brian LeRoux, Brock Appcelerator appMobi Panacoda Foundation Jr. Whitten, Rob Ellis Website-Link www.sencha.com/ the-m-project.org/ jquerymobile.com winktoolkit.org joapp.com lungojs.com dhtmlx.com/ jqtouch.com zeptojs.com qooxdoo.org xuijs.com appcelerator.com/ jqmobi.com products/touch touch platform/titanium-sdk Lizenzpreise frei [4] frei frei frei frei frei frei frei frei frei frei frei [5] frei Lizenz eigene [6], MIT MIT, GPL BSD [7] eigene [8] GPL v3 [9] GNU GPL, MIT MIT LGPL, EPL MIT Apache MIT kommerziell kommerziell Version 2.0.1 1.2 1.1.1 1.4.2 0.4.1 1.2 1.01 1.0b4 1.0rc1 2.0.1 2.3.2 2.1.0 1.03 Erstes v2.0 v0.3 v1.0 v0.9 v0.0.1 v1.0.1 v1.0 v1.0b v0.1 v1.5 v2.0.0 v1.5.0 v1.0 Release Nov. 2011 Feb. 2011 Nov. 2011 Jun. 2010 Jun. 2010 2011 2011 Jun. 2010 Okt. 2010 Jul. 2011 Jan. 2011 Okt. 2010 Jan. 2012 Gehostet Sencha GitHub GitHub GitHub GitHub GitHub n/a GitHub GitHub SourceForge GitHub Appcelerator GitHub Technische Informationen Plattformunterstützung BlackBerry, Silk BlackBerry, BlackBerry, Windows BlackBerry, webOS, BlackBerry BlackBerry BlackBerry, BlackBerry BlackBerry iOS und Android BlackBerry (Endgeräte, außer iOs Windows Phone Phone, Firefox, Windows Phone, BlackBerry, WebKit, Silk, nativ, mobile Browser und Android) Opera, Bada Firefox, Opera Chrome OS Opera Basiert auf Ext JS jQuery jQuery eigene eigene eigene eigener JS-Suite jQuery jQuery qooxdoo-sdk eigene eigene jQuery All in one ja ja nein [13] ja ja ja ja nein [13] nein [14] ja nein ja ja Footprint [15] modularisierter 66 KB 91 KB 12 KB 12 KB 70 KB 186 KB 12 KB 23 KB modularisierter Build 10 KB n/a 15 KB Build Erweiterbarkeit ja [16] ja [17] ja [17] ja [16] ja ja [18] nein ja ja [16] ja nein ja ja [16] Modularität ja ja nein ja nein nein nein nein nein nein nein ja nein [19] Umfang der UI- ++ ++ ++ 0 0 + + 0 -- ++ -- [20] ++ 0 Komponenten Markup/JavaScript JavaScript JavaScript Markup Markup + JavaScript Markup + Markup + Markup + Markup + JavaScript JavaScript JavaScript Markup JavaScript JavaScript JavaScript JavaScript JavaScript [21] Handling Setup-Aufwände – – ++ ++ ++ ++ ++ ++ ++ 0 ++ – ++ Integrationsfähigkeit – – ++ – [22] + + + + ++ ++ – ++ Tools Charts, Visual App Build Tool Theme Roller, keine keine keine Skin Builder, keine Build- und Build Tool keine Eclipse IDE, keine Builder Codiqa [23] Visual Designer Minifyscript Scaffolding, Build- Tools Deployment Support ja ja nein nein nein nein nein nein nein ja nein ja nein Performance n/a [24] n/a [25] -- + 0 ++ - n/a [26] ++ -- 0 n/a [27] --

Anmerkungen zur Tabelle: [8] Lizenz: http://joapp.com/docs/#License [13] Addon zu jQuery [4] OEM Lizenz kostenpflichtig verfügbar [9] alternativ kostenpflichtige OEM Lizenz [14] keine UI-Komponenten vorhanden [5] frei (App Explore) nach Registrierung [10] nur für kommerziellen Support [15] Größen in minimierter Variante [6] http://www.sencha.com/products/touch/license/ [11] keine Beispiele vorhanden [16] über Plug-ins [7] modifizierte Lizenz [12] wenige Blogeinträge [17] über jQuery-Plug-ins

Tabelle 1: Vergleichstabelle

6 javamagazin 11 | 2012 © Software & Support Media GmbH www.JAXenter.de @Grafik:Tabelle auf2 Doppelseiten, Sonderdruckfallsnötig, den Abschnitt „Ökosystem“ heraustrennen Agile

Implementierung. Es verwendet bei Selektoren nicht Fazit die jQuery-Syntax, sondern nutzt eine eigene Variante Im Pool der verfügbaren JavaScript-Frameworks für mit QuoJS. Lungo verfügt neben den notwendigen UI- mobile Apps haben sich mittlerweile die Platzhirsche Widgets über eine Navigationsunterstützung mittels durchgesetzt: jQuery Mobile, Sencha Touch und qoox- semantischem HTML-Markup, was gemäß der Prä- doo sind zurzeit sowohl aufgrund ihres Funktionsum- misse des Projekts auch für alle anderen Framework- fangs als auch ihrer momentanen Aktivität die ersten komponenten gilt. Die Grundlage einer Lungo-App ist drei, unter denen man sich entscheiden kann. das semantisch angereicherte HTML5-/CSS-Markup. Dadurch können auch mit Entwickler mit wenig Er- • jQuery Mobile gewinnt durch seine Vielfalt und fahrung in JavaScript schnell zu funktionierenden Pro- große Community, verliert jedoch an Boden bezüg- totypen gelangen. lich Performance und Größe sowie durch das Fehlen vorgegebener Programmiermodelle.

[18] über Sugars [23] kommerziell [26] Plug-in für jQuery/Zepto, daher keine [19] Core und UI [24] keine simplen DOM-Manipulationen, daher eigene Performancemessung [20] Framework enthält keine UI-Komponenten keine eigene Performancemessung [27] natives Kompilat, nicht gemessen [21] reine jQuery-Funktionen, damit frei in der Wahl [25] keine simplen CSS-Manipulationen, daher keine [22] benötigt Plug-in, um mit jQuery zu funktionieren eigene Performancemessung

www.JAXenter.de © Software & Support Media GmbH javamagazin 11 | 2012 7 SonderdruckAgile @Grafik:Tabelle auf 2Doppelseiten, falls nötig, den Abschnitt „Ökosystem“ heraustrennen

• Sencha Touch hat die Unterstützung eines größeren Unternehmens und befriedigt auch hohe Qualitätsan- sprüche; die Erstellung von nachhaltigem und wart- barem Code wird leicht gemacht. • qooxdoo erfrischt mit seinen Konzepten und Ent- wurfsmustern sowie einem runden Gesamtbild und hilfreichen Tools.

Experimentierfreudige dürfen sich auch The-M-Project anschauen, das mit soliden und innovativen Konzepten punkten kann. Titanium mit seiner Fähigkeit, nativ zu kompilieren und seinem umfangreichen Toolset stellt einen weniger vor die Entscheidung für ein Framework und mehr vor eine Technologieentscheidung, da nur die Entwicklung mit JavaScript getrieben wird, nicht aber die tatsächliche Präsentation am Gerät. Fazit: Die Entwicklung der Sprache JavaScript hat auch bei den mobilen Geräten den modernen Stand erreicht. Mit Browser- und Geräteunabhängigkeit können nahezu alle Frameworks aufwarten, und die UI-Widgets bieten in weiten Teilen das Gefühl einer nativen App. Damit und mit dem richtigen Augenmerk auf Performance und Usability kann eine hohe Akzep- tanz von HTML5 als mobile Applikationsplattform erreicht werden.

Karsten Krieg ist Senior Consultant bei bridgingIT GmbH und be- schäftigt sich mit Softwarearchitekturen und nachhaltigen Entwick- lungsmethoden. Als Leiter der Fachgruppe „Architekturen Mobiler Geschäftslösungen“ verbindet er innovative und qualitätsbewuss- te Konzepte.

Stefan Zilch ist Consultant bei bridgingIT GmbH und beschäftigt sich mit Softwarearchitekturen für Mobile-Applikationen. Als Soft- ware Engineer konzipiert und entwickelt er mobile Geschäftslösun- gen und wirkt in der oben genannten Fachgruppe mit.

Links & Literatur

[1] Facebook und Performance: http://blog.mobtest.com/2012/05/heres- why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/ [2] jQuery Autoinitialisierung: http://jquerymobile.com/demos/1.1.1/docs/ api/globalconfig.html [3] Eclipse RAP/RWT: http://wiki.eclipse.org/WidgetToolkit