Einführung Methode und Ausführung Schluss

Evaluation of Frameworks for Desktop-LikeWeb Applications in Pure JavaScript

Thomas Billicsich

Institut für Informationssysteme und Computer MedienTU Graz

15. November 2012

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

Was ist eine Web Application?

Eigenschaftenläuft im BrowserAufruf durch URL-Eingabe

Beispiele• Suchmaschinen• Maps• E-Mail

Einführung Methode und Ausführung Schluss

Vorteile und Nachteile

Vorteile

• plattformunabhängig• kein Setup/Installation• keine Virengefahr

• Datensicherheit• Zusammarbeit, Mobilität

Nachteile• Internetverbindung• ressourcenintensiv• kein lokales Dateisystem• keine lokale Peripherie

Einführung Methode und Ausführung Schluss

Desktop-LikeGMX

Einführung Methode und Ausführung Schluss

Desktop-LikeiCloud

Einführung Methode und Ausführung Schluss

Desktop-LikeGMX vs. iCloud

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

FrameworksDefinition

ein Framework ist...• eine Menge von zusammengehörigen Klassen.• eine Lösungsskizze für eine bestimmte Problemklasse.• ein wiederverwendbares Design einer Menge von Klassen

und deren Interaktion.• ein Programmgerüst, das an die eigenen Bedürfnisse

angepasst werden muss.• ein vorgegebenes Design, das Entscheidungen

vorwegnimmt.• keine Library

Einführung Methode und Ausführung Schluss

FrameworksEigenschaften

Eigenschaften

• Modular• Erweiterbar• Zentral steuernd• Abstrakt

• Ausgereift• Komplex• Outsourcing

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

EntscheidungsprozessStufen

I EvaluationsmodellII Marktanalyse

III RequirementsIV ScreeningV Evaluierung

VI Validierung

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

KandidatenGesamtübersicht I

• ActiveJS

• Agility.js• AmplifyJS

• AngularJS

• AppJS

• Backbone.js• batman.js• Bindows• Cappuccino• Choco

• CorMVC

• DHTMLX

• Dojo Toolkit• Eyeballs• Ember.js• Ext JS

• Glow• Google Closure Library• JavaScriptMVC

• jQuery

Einführung Methode und Ausführung Schluss

KandidatenGesamtübersicht II

• Knockback.js• Knockout.js• Luna (Asana)• MooTools• MochiKit• Mojito (Yahoo!)• Prototype• qooxdoo• Rialto• Rico• Sammy.js

• script.aculo.us• SmartClient• Spine.js• SproutCore• Spry• UIZE

• underscore.js• Wakanda• YUI!

• zepto.js

Einführung Methode und Ausführung Schluss

Kandidatenausgewählte

Bindows

Cappuccino

DHTMLX

Dojo Toolkit

Ext JS

qooxoo

SmartClient

SproutCore

Einführung Methode und Ausführung Schluss

KandidatenBindows

Einführung Methode und Ausführung Schluss

KandidatenCappuccino

Einführung Methode und Ausführung Schluss

KandidatenDHTMLX

Einführung Methode und Ausführung Schluss

KandidatenDojo Toolkit

Einführung Methode und Ausführung Schluss

KandidatenExt JS

Einführung Methode und Ausführung Schluss

Kandidatenqooxdoo

Einführung Methode und Ausführung Schluss

KandidatenSmartClient

Einführung Methode und Ausführung Schluss

KandidatenSproutCore

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

EvaluierungsmodellKategorien

Getting Started

Development Setting

User Interface

Features

Community

Dokumentation

Einführung Methode und Ausführung Schluss

Getting Started

• Anfänger• schnelle Entscheidung über potentielle Eignung• zentrale Stelle: Projektwebseite

Kriterien• informative Einführung auf der Projektseite• Beste Practices für den Start• Qualität des Getting Started Tutorials

Einführung Methode und Ausführung Schluss

Getting Startedqooxdoo

Einführung Methode und Ausführung Schluss

Getting Startedqooxdoo

Einführung Methode und Ausführung Schluss

Getting Startedqooxdoo

Einführung Methode und Ausführung Schluss

Getting Startedqooxdoo

Einführung Methode und Ausführung Schluss

Development Setting

direkte Unterstützung der Entwickler für Coden, Testen,Veröffentlichung und Wartung

Kriterien• Tools zur Codegenerierung• Testunterstützung• Unterstützung für Deployment• Client-Server Protokolle• Plattformunabhängig (Server und Entwicklung)*• Lizenz

Einführung Methode und Ausführung Schluss

Development SettingSproutCore

Einführung Methode und Ausführung Schluss

Development SettingSproutCore

Einführung Methode und Ausführung Schluss

User Interface

sichtbare Elemente des Frameworks

Kriterien

• Label• Button• Eingabefeld• Baumansichten

• Slider• Kalender• Diagramme• etc.

Einführung Methode und Ausführung Schluss

Features

technische Ausstattung des Frameworks

Kriterien

• MVC Architektur*• Layoutmanager*• DOM-Abstraktion*• Data Store• Bindings• Drag & Drop• Sprachanpassung• Theming

• Inputvalidierung• Kontextmenü• Tool Tips• Keyboardshortcuts• Offline Mode• Server Push• Browserverlauf

Einführung Methode und Ausführung Schluss

Community oder Hersteller

wie stark ist die Instanz die hinter dem Framework steht; wieviele Entwickler beschäftigen sich aktiv damit; wie ausgereift istdas Projekt

Kriterien

• in aktiver Entwicklung*• Reifegrad*• Verfügbarkeit von

Büchern• Berichterstattung in

Magazinen (on-/offline)

• Popularität im Internet• Aktivität im Forum• Aktivität auf Twitter• Aktivität auf eigenem

Blog• Real-Life Beispiele

Einführung Methode und Ausführung Schluss

Dokumentation

Bezieht alle vom Frameworkhersteller zur Verfügung gestelltenInformationen ein. Gute Kommunikation vonZusammenhängen.

Kriterien• Themenabdeckung von Guides• Qualität von Guides• Qualität der API Referenz und des Viewers• Codebeispiele• Informationen über Änderungen in neuen Versionen• Aufbau und Gesamtstruktur• Kenntlichmachung des Aktualisierungsdatums

Einführung Methode und Ausführung Schluss

DokumentationExt JS

Einführung Methode und Ausführung Schluss

DokumentationExt JS

Einführung Methode und Ausführung Schluss

DokumentationExt JS

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

Ergebnis

EmpfohlenExt JS, qooxdoo, SproutCore

MittelmäßigDojo Toolkit, SmartClient, Cappuccino

Nicht empfohlenBindows, DHTMLX

Einführung Methode und Ausführung Schluss

Gliederung

1 EinführungWeb ApplicationsFrameworks

2 Methode und AusführungEntscheidungsprozessKandidatenModell und Evaluierung

3 SchlussErgebnisValidierung und Learnings

Einführung Methode und Ausführung Schluss

Validierung

einfaches Programm mit qooxdoo

Einführung Methode und Ausführung Schluss

Learnings

zu viele Frameworkszusätzliche Filterstufe

Beurteilung von Features teils zu freipräzisere Definition der benötigten Funktionalität

theoretische Beurteilung von Funktionalitätdurcharbeiten von Tutorials