Evaluation of Frameworks for Desktop-Like Web Applications in Pure JavaScript

Educational  Technology
Educational TechnologyGraz University of Technology
Einführung                    Methode und Ausführung                      Schluss




             Evaluation of Frameworks for Desktop-Like
                Web Applications in Pure JavaScript

                                 Thomas Billicsich

                   Institut für Informationssysteme und Computer Medien
                                            TU Graz


                                15. November 2012
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung                 Methode und Ausführung   Schluss



Was ist eine Web Application?



      Eigenschaften
      läuft im Browser
      Aufruf durch URL-Eingabe

      Beispiele
             • Suchmaschinen
             • Maps
             • E-Mail
Einführung                      Methode und Ausführung                               Schluss



Vorteile und Nachteile

      Vorteile

             • plattformunabhängig                       • Datensicherheit
             • kein Setup/Installation                   • Zusammarbeit, Mobilität
             • keine Virengefahr


                    Nachteile
                      • Internetverbindung
                       • ressourcenintensiv
                       • kein lokales Dateisystem
                       • keine lokale Peripherie
Einführung     Methode und Ausführung   Schluss



Desktop-Like
GMX
Einführung     Methode und Ausführung   Schluss



Desktop-Like
iCloud
Einführung       Methode und Ausführung   Schluss



Desktop-Like
GMX vs. iCloud
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung                     Methode und Ausführung                  Schluss



Frameworks
Definition




      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



Frameworks
Eigenschaften




      Eigenschaften

             • Modular
                                                       • Ausgereift
             • Erweiterbar
                                                       • Komplex
             • Zentral steuernd
                                                       • Outsourcing
             • Abstrakt
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung                     Methode und Ausführung   Schluss



Entscheidungsprozess
Stufen




             I Evaluationsmodell
             II Marktanalyse
         III Requirements
         IV Screening
         V Evaluierung
         VI Validierung
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung                   Methode und Ausführung                              Schluss



Kandidaten
Gesamtübersicht I




             • ActiveJS                               • CorMVC
             • Agility.js                             • DHTMLX
             • AmplifyJS                              • Dojo Toolkit
             • AngularJS                              • Eyeballs
             • AppJS                                  • Ember.js
             • Backbone.js                            • Ext JS
             • batman.js                              • Glow
             • Bindows                                • Google Closure Library
             • Cappuccino                             • JavaScriptMVC
             • Choco                                  • jQuery
Einführung                    Methode und Ausführung                       Schluss



Kandidaten
Gesamtübersicht II




             • Knockback.js                            • script.aculo.us
             • Knockout.js                             • SmartClient
             • Luna (Asana)                            • Spine.js
             • MooTools                                • SproutCore
             • MochiKit                                • Spry
             • Mojito (Yahoo!)                         • UIZE
             • Prototype                               • underscore.js
             • qooxdoo                                 • Wakanda
             • Rialto                                  • YUI!
             • Rico                                    • zepto.js
             • Sammy.js
Einführung    Methode und Ausführung   Schluss



Kandidaten
ausgewählte




                         Bindows
                      Cappuccino
                         DHTMLX

                      Dojo Toolkit
                          Ext JS
                         qooxoo
                      SmartClient
                      SproutCore
Einführung   Methode und Ausführung   Schluss



Kandidaten
Bindows
Einführung   Methode und Ausführung   Schluss



Kandidaten
Cappuccino
Einführung   Methode und Ausführung   Schluss



Kandidaten
DHTMLX
Einführung     Methode und Ausführung   Schluss



Kandidaten
Dojo Toolkit
Einführung   Methode und Ausführung   Schluss



Kandidaten
Ext JS
Einführung   Methode und Ausführung   Schluss



Kandidaten
qooxdoo
Einführung    Methode und Ausführung   Schluss



Kandidaten
SmartClient
Einführung   Methode und Ausführung   Schluss



Kandidaten
SproutCore
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung       Methode und Ausführung   Schluss



Evaluierungsmodell
Kategorien




                      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 Started
qooxdoo
Einführung        Methode und Ausführung   Schluss



Getting Started
qooxdoo
Einführung        Methode und Ausführung   Schluss



Getting Started
qooxdoo
Einführung        Methode und Ausführung   Schluss



Getting Started
qooxdoo
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 Setting
SproutCore
Einführung       Methode und Ausführung   Schluss



Development Setting
SproutCore
Einführung                     Methode und Ausführung                 Schluss



User Interface



      sichtbare Elemente des Frameworks

      Kriterien

             • Label                                    • Slider
             • Button                                   • Kalender
             • Eingabefeld                              • Diagramme
             • Baumansichten                            • etc.
Einführung                    Methode und Ausführung                         Schluss



Features

      technische Ausstattung des Frameworks
      Kriterien

             • MVC Architektur*                        • Inputvalidierung
             • Layoutmanager*                          • Kontextmenü
             • DOM-Abstraktion*                        • Tool Tips
             • Data Store                              • Keyboardshortcuts
             • Bindings                                • Offline Mode
             • Drag & Drop                             • Server Push
             • Sprachanpassung                         • Browserverlauf
             • Theming
Einführung                     Methode und Ausführung                               Schluss



Community oder Hersteller

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

      Kriterien

             • in aktiver Entwicklung*                  • Popularität im Internet
             • Reifegrad*                               • Aktivität im Forum
             • Verfügbarkeit von                        • Aktivität auf Twitter
               Büchern                                  • Aktivität auf eigenem
             • Berichterstattung in                       Blog
               Magazinen (on-/offline)                   • Real-Life Beispiele
Einführung                     Methode und Ausführung                 Schluss



Dokumentation

      Bezieht alle vom Frameworkhersteller zur Verfügung gestellten
      Informationen ein. Gute Kommunikation von
      Zusammenhä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



Dokumentation
Ext JS
Einführung      Methode und Ausführung   Schluss



Dokumentation
Ext JS
Einführung      Methode und Ausführung   Schluss



Dokumentation
Ext JS
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung          Methode und Ausführung           Schluss



Ergebnis




                          Empfohlen
                 Ext JS, qooxdoo, SproutCore

                           Mittelmäßig
             Dojo Toolkit, SmartClient, Cappuccino

                        Nicht empfohlen
                       Bindows, DHTMLX
Einführung                   Methode und Ausführung   Schluss



Gliederung


       1     Einführung
              Web Applications
              Frameworks

       2     Methode und Ausführung
              Entscheidungsprozess
              Kandidaten
              Modell und Evaluierung

       3     Schluss
              Ergebnis
              Validierung und Learnings
Einführung              Methode und Ausführung   Schluss



Validierung
      einfaches Programm mit qooxdoo
Einführung                 Methode und Ausführung         Schluss



Learnings




      zu viele Frameworks
      zusätzliche Filterstufe

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

      theoretische Beurteilung von Funktionalität
      durcharbeiten von Tutorials
1 von 47

Más contenido relacionado

Similar a Evaluation of Frameworks for Desktop-Like Web Applications in Pure JavaScript(20)

Más de Educational Technology(20)

Portability of Mobile ApplicationsPortability of Mobile Applications
Portability of Mobile Applications
Educational Technology11 views
School Start Screening ToolSchool Start Screening Tool
School Start Screening Tool
Educational Technology342 views
Learning Analytics and MOOCsLearning Analytics and MOOCs
Learning Analytics and MOOCs
Educational Technology713 views
Einsatz von Mixed Reality im KlassenzimmerEinsatz von Mixed Reality im Klassenzimmer
Einsatz von Mixed Reality im Klassenzimmer
Educational Technology492 views
Development of a learning diary for a MOOC platformDevelopment of a learning diary for a MOOC platform
Development of a learning diary for a MOOC platform
Educational Technology245 views

Evaluation of Frameworks for Desktop-Like Web Applications in Pure JavaScript

  • 1. Einführung Methode und Ausführung Schluss Evaluation of Frameworks for Desktop-Like Web Applications in Pure JavaScript Thomas Billicsich Institut für Informationssysteme und Computer Medien TU Graz 15. November 2012
  • 2. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 3. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 4. Einführung Methode und Ausführung Schluss Was ist eine Web Application? Eigenschaften läuft im Browser Aufruf durch URL-Eingabe Beispiele • Suchmaschinen • Maps • E-Mail
  • 5. Einführung Methode und Ausführung Schluss Vorteile und Nachteile Vorteile • plattformunabhängig • Datensicherheit • kein Setup/Installation • Zusammarbeit, Mobilität • keine Virengefahr Nachteile • Internetverbindung • ressourcenintensiv • kein lokales Dateisystem • keine lokale Peripherie
  • 6. Einführung Methode und Ausführung Schluss Desktop-Like GMX
  • 7. Einführung Methode und Ausführung Schluss Desktop-Like iCloud
  • 8. Einführung Methode und Ausführung Schluss Desktop-Like GMX vs. iCloud
  • 9. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 10. Einführung Methode und Ausführung Schluss Frameworks Definition 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
  • 11. Einführung Methode und Ausführung Schluss Frameworks Eigenschaften Eigenschaften • Modular • Ausgereift • Erweiterbar • Komplex • Zentral steuernd • Outsourcing • Abstrakt
  • 12. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 13. Einführung Methode und Ausführung Schluss Entscheidungsprozess Stufen I Evaluationsmodell II Marktanalyse III Requirements IV Screening V Evaluierung VI Validierung
  • 14. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 15. Einführung Methode und Ausführung Schluss Kandidaten Gesamtübersicht I • ActiveJS • CorMVC • Agility.js • DHTMLX • AmplifyJS • Dojo Toolkit • AngularJS • Eyeballs • AppJS • Ember.js • Backbone.js • Ext JS • batman.js • Glow • Bindows • Google Closure Library • Cappuccino • JavaScriptMVC • Choco • jQuery
  • 16. Einführung Methode und Ausführung Schluss Kandidaten Gesamtübersicht II • Knockback.js • script.aculo.us • Knockout.js • SmartClient • Luna (Asana) • Spine.js • MooTools • SproutCore • MochiKit • Spry • Mojito (Yahoo!) • UIZE • Prototype • underscore.js • qooxdoo • Wakanda • Rialto • YUI! • Rico • zepto.js • Sammy.js
  • 17. Einführung Methode und Ausführung Schluss Kandidaten ausgewählte Bindows Cappuccino DHTMLX Dojo Toolkit Ext JS qooxoo SmartClient SproutCore
  • 18. Einführung Methode und Ausführung Schluss Kandidaten Bindows
  • 19. Einführung Methode und Ausführung Schluss Kandidaten Cappuccino
  • 20. Einführung Methode und Ausführung Schluss Kandidaten DHTMLX
  • 21. Einführung Methode und Ausführung Schluss Kandidaten Dojo Toolkit
  • 22. Einführung Methode und Ausführung Schluss Kandidaten Ext JS
  • 23. Einführung Methode und Ausführung Schluss Kandidaten qooxdoo
  • 24. Einführung Methode und Ausführung Schluss Kandidaten SmartClient
  • 25. Einführung Methode und Ausführung Schluss Kandidaten SproutCore
  • 26. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 27. Einführung Methode und Ausführung Schluss Evaluierungsmodell Kategorien Getting Started Development Setting User Interface Features Community Dokumentation
  • 28. 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
  • 29. Einführung Methode und Ausführung Schluss Getting Started qooxdoo
  • 30. Einführung Methode und Ausführung Schluss Getting Started qooxdoo
  • 31. Einführung Methode und Ausführung Schluss Getting Started qooxdoo
  • 32. Einführung Methode und Ausführung Schluss Getting Started qooxdoo
  • 33. 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
  • 34. Einführung Methode und Ausführung Schluss Development Setting SproutCore
  • 35. Einführung Methode und Ausführung Schluss Development Setting SproutCore
  • 36. Einführung Methode und Ausführung Schluss User Interface sichtbare Elemente des Frameworks Kriterien • Label • Slider • Button • Kalender • Eingabefeld • Diagramme • Baumansichten • etc.
  • 37. Einführung Methode und Ausführung Schluss Features technische Ausstattung des Frameworks Kriterien • MVC Architektur* • Inputvalidierung • Layoutmanager* • Kontextmenü • DOM-Abstraktion* • Tool Tips • Data Store • Keyboardshortcuts • Bindings • Offline Mode • Drag & Drop • Server Push • Sprachanpassung • Browserverlauf • Theming
  • 38. Einführung Methode und Ausführung Schluss Community oder Hersteller wie stark ist die Instanz die hinter dem Framework steht; wie viele Entwickler beschäftigen sich aktiv damit; wie ausgereift ist das Projekt Kriterien • in aktiver Entwicklung* • Popularität im Internet • Reifegrad* • Aktivität im Forum • Verfügbarkeit von • Aktivität auf Twitter Büchern • Aktivität auf eigenem • Berichterstattung in Blog Magazinen (on-/offline) • Real-Life Beispiele
  • 39. Einführung Methode und Ausführung Schluss Dokumentation Bezieht alle vom Frameworkhersteller zur Verfügung gestellten Informationen ein. Gute Kommunikation von Zusammenhä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
  • 40. Einführung Methode und Ausführung Schluss Dokumentation Ext JS
  • 41. Einführung Methode und Ausführung Schluss Dokumentation Ext JS
  • 42. Einführung Methode und Ausführung Schluss Dokumentation Ext JS
  • 43. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 44. Einführung Methode und Ausführung Schluss Ergebnis Empfohlen Ext JS, qooxdoo, SproutCore Mittelmäßig Dojo Toolkit, SmartClient, Cappuccino Nicht empfohlen Bindows, DHTMLX
  • 45. Einführung Methode und Ausführung Schluss Gliederung 1 Einführung Web Applications Frameworks 2 Methode und Ausführung Entscheidungsprozess Kandidaten Modell und Evaluierung 3 Schluss Ergebnis Validierung und Learnings
  • 46. Einführung Methode und Ausführung Schluss Validierung einfaches Programm mit qooxdoo
  • 47. Einführung Methode und Ausführung Schluss Learnings zu viele Frameworks zusätzliche Filterstufe Beurteilung von Features teils zu frei präzisere Definition der benötigten Funktionalität theoretische Beurteilung von Funktionalität durcharbeiten von Tutorials