Eine exemplarische Gegenüberstellung von Google Web Toolkit, Microsoft Silverlight und AngularJS Diplomarbeit zur Erlangung des akademischen Grades Mag. rer. soc. oec. im Diplomstudium Wirtschaftsinformatik Eingereicht von: Michael WALTER (9655406) Angefertigt am: Institut für Wirtschaftsinformatik - Software Engineering Beurteiler: a. Univ.-Prof. Dr. Alois Stritzinger Juni 2015 Inhaltsverzeichnis 1 Einleitung – Problembeschreibung...........................................................................7 2 Merkmale von Rich Internet Applications...............................................................9 3 Anforderungsspezifikation der Beispielanwendung............................................12 3.1 Zielbestimmungen..............................................................................................12 3.2 Produkteinsatz....................................................................................................12 3.3 Produktfunktionen..............................................................................................12 3.4 Produktdaten......................................................................................................15 3.5 Produktleistungen..............................................................................................16 3.6 Qualitätsanforderungen....................................................................................16 3.7 Ergänzungen.......................................................................................................16 4 Client-Server-Kommunikation.................................................................................18 4.1 Klassische, seitenbasierte Webapplikation....................................................18 4.2 HTML-Anwendungen mit AJAX.......................................................................19 4.3 Same Origin Policy (SOP)................................................................................28 4.4 SOP beim Browser deaktivieren....................................................................31 5 Serverseitige Infrastruktur........................................................................................36 6 Datenquelle................................................................................................................ 39 6.1 Datenbankmanagementsystem MySQL.........................................................39 6.2 Zugriff mit PHP auf eine MySQL-Datenbank................................................43 6.3 Serverseitige Funktionalitäten..........................................................................44 6.4 Zeitbasierte Ausführung mit Cron...................................................................50 7 Schichtenmodelle (MVC - MVVM)........................................................................51 8 Google Web Toolkit (GWT)...................................................................................55 8.1 Entwicklungsumgebung....................................................................................55 8.2 Neues Projekt erstellen....................................................................................56 8.3 RIA im Development-Mode ausführen...........................................................57 Seite 2 / 136 8.4 RIA im Production-Mode ausführen...............................................................60 8.5 Aufbau einer GWT-Anwendung......................................................................61 8.6 GWT-Widgets....................................................................................................62 8.7 Einbindung externer Module...........................................................................68 8.8 JavaScript Native Interface (JSNI)..................................................................69 8.9 Kommunikation mit dem Server......................................................................70 8.10 GWT - Fazit......................................................................................................76 9 Silverlight.................................................................................................................... 78 9.1 Entwicklungsumgebung....................................................................................78 9.2 Extensible Application Markup Language (XAML).......................................81 9.3 Programmaufbau................................................................................................83 9.4 GUI-Komponenten - UserControls................................................................84 9.5 GUI-Dialog - ChildWindow.............................................................................89 9.6 Datenbindung.....................................................................................................90 9.7 Kommunikation Client-Server..........................................................................92 9.8 Silverlight - Fazit.................................................................................................94 10 AngularJS................................................................................................................97 10.1 Entwicklungsumgebung..................................................................................97 10.2 Direktiven..........................................................................................................98 10.3 Templates.......................................................................................................106 10.4 Filter................................................................................................................. 108 10.5 Two-Way-Data-Binding................................................................................109 10.6 Dependency Injection..................................................................................110 10.7 Services..........................................................................................................111 10.8 Routes............................................................................................................. 113 10.9 AngularJS - Fazit...........................................................................................115 11 Vergleich der Frameworks.................................................................................117 11.1 Allgemein........................................................................................................117 Seite 3 / 136 11.2 Kommunikation...............................................................................................119 11.3 Framework-Features.....................................................................................121 11.4 Elemente der Benutzerschnittstellen..........................................................122 11.5 RIA-Implementierungen: Portfoliomanager...............................................125 11.6 Praktische Verwendbarkeit der RIAs.........................................................127 11.7 Vergleich - Fazit............................................................................................130 Seite 4 / 136 Eigenständigkeitserklärung Ich erkläre an Eides statt, dass ich die vorliegende Diplomarbeit selbstständig und ohne fremde Hilfe verfasst, andere als die angegebenen Quellen und Hilfsmittel nicht benutzt bzw. die wörtlich oder sinngemäß entnommenen Stellen als solche kenntlich gemacht habe. Die vorliegende Diplomarbeit ist mit dem elektronisch übermittelten Textdokument identisch. _______________ ____________________ Datum Unterschrift Seite 5 / 136 Danksagungen An dieser Stelle möchte ich mich bei allen Personen bedanken, die mich während der Erstellung dieser Arbeit motiviert und unterstützt haben. Ich bedanke mich besonders bei meinem Betreuer, Herrn a. Univ.-Prof. Dr. Alois Stritzinger, der jahrelang meine Arbeit und somit auch mich betreute. Vielen Dank für Ihre Geduld! Weiterer Dank gebührt meinem Kollegen, Herrn DI Mag. Wolfgang Fischer, für die zahlreichen Stunden, in denen er diese Arbeit Korrektur gelesen hat und dem zu verdanken ist, dass einige Rechtschreib-, Beistrich-, und Fallfehler aus diesem Dokument flogen. Ich bedanke mich natürlich auch bei meiner Partnerin Helene Knoll, die mich immer wieder ermutigte, diese Arbeit abzuschließen. Danke für dein Verständnis an den vielen Abenden, die du allein verbringen musstest, während ich diese Arbeit schrieb. Mein besonderer Dank gilt meinen Eltern Nelly und Reinalt, die mir dieses Studium erst ermöglichten und mich in meinen Entscheidungen unterstützt haben. Danke für die moralische und finanzielle Unterstützung und verzeiht mir die Sorgen, die ich euch sicher öfters bereitet habe. Seite 6 / 136 1 Einleitung – Problembeschreibung Meinen ersten Kontakt mit dem Internet hatte ich im ersten Studienjahr. Meine Freunde und ich verbrachten viele Nächte vor den Bildschirmen im Computerlabor des TNF-Turms, um die Welt des World-Wide-Webs zu erkunden. An einen eigenen Internetanschluss war zu dieser Zeit noch nicht zu denken. Faszinierend fand ich nicht nur all die Informationen, die man auf statischen Webseiten finden konnte, sondern auch, dass sich Webseiten ändern konnten, je nachdem welche Daten in Formulare eingegeben wurden. Einige Semester später war ich schon fähig, eine Internetanwendung für eine Grundstücksbörse zu implementieren. Diese wurde mit PHP und MySQL realisiert und funktionierte komplett ohne JavaScript, Sessions oder Cookies. Die Benutzeroberfläche war noch durchwegs statisch, was aber den damaligen Internetstandards entsprach.