Webapplikationen mit Adobe Flex und Microsoft.net sowie AMFPHP - Teil I

Autor: Oliver Matthias Merx
Eingetragen seit: 08/2006
Letzter Beitrag: 06/2010
Beiträge insgesamt: 12
Expertenprofil   Alle Experten   

DruckversionAls E-Mail versendenZum Magazin-Forum

Software as a Service ist in aller Munde. Doch welche Entwicklungsumgebungen soll man speziell bei browsergestützten Applikationen für das GUI verwenden? In dem zweiteiligen Beitrag werden zwei Praxisbeispiele für die Kombination von Adobe Flex mit Microsoft.net sowie für die Integration von Flex und AMFPHP vorgestellt. Die Ergebnisse können für Webapplikationen aller Art interessant sein.

Im ersten Teil wird der Schwerpunkt auf die Darstellung von Flex-spezifischen Fragestellungen gelegt:


Herausforderung

Immer öfter stellt sich für Softwarehersteller die Frage, wie eine Business-Applikation so umgesetzt werden kann, dass sie sowohl als browserbasierter Webservice sowie als Installer- bzw. Desktop-Variante angeboten werden kann.

Diese Fragestellung existierte auch bei "Apollo" – einem der Kernprodukte der Superwise AG, Wolfratshausen. Bei Apollo handelt es sich um eine hoch innovative, auf .NET basierte Suchmaschine, die dem menschlichen Gehirn nachempfunden ist. Mit Apollo lassen sich Text-Dokumente, Filme oder Bilder durchsuchen. Ende 2009 entstand der Entschluss, ein einheitliches RichClient-GUI zu entwickeln, das alle Möglichkeiten der Distribution offen lässt.

Bei der Findung der letztendlichen Lösung spielte ein zweites Projekt mit hinein: Zeitgleich wurde bei der Superwise AG die Projektsteuerungssoftware "Leonardo" überarbeitet. Diese Applikation war bereits vor einiger Zeit als RichClient-Lösung mit HTML/PHP/MySQL und AJAX umgesetzt worden. Die mit HTML/AJAX gesammelten Erfahrungen waren allerdings nicht immer zufriedenstellend. Insbesondere stellte sich die Browserkompatibilität sowie die einfache Anpassung an Kundenwünsche als Herausforderung dar.

Es galt daher, dem bisherigen HTML/AJAX-Ansatz Alternativen gegenüber zu stellen. Im Zusammenhang mit anspruchsvollen RichClient-Lösungen sind dies insbesondere Adobe Flex und Microsoft Silverlight. Um die Vor- und Nachteile der drei Lösungsvarianten strukturiert zu prüfen wurde vorab folgende Kriterienliste erstellt (übergreifend für beide Projekte):

Anforderungen (Auszug) Relevanz* HTML/AJAX** Flex** Silverlight**
Browserkompabilität 3 +/- ++ +
benutzerfreundliche Umsetzung/Usability 3 + ++ ++
Zukunftssicherheit/Weiterentwicklung 3 ++ ++ ***
Einbindung von Tabellen, Kalenderdaten, Datenvisualisierung 3 ++/o ++ ++
Tatsächliche Praxisbewährung bei vergleichbaren Lösungen 3 *** *** ***
Zusammenspiel mit PHP-Backend 3 ++ ++ ***
Zusammenspiel mit .net-Backend 2 ++ *** ++
Integration mit Desktop-Lösung 2 o ++ ++
Programmierer-Ressourcen/Community 1 ++ ++ ***
Nutzung von Drag and Drop-Funktionalitäten 1 +/o ++ ++
Einfache Anpassung an Kunden-CI 1 + ++ ++
    * von 1 = wichtig bis 3 = sehr wichtig
    ** die Bewertung erfolgte auf Basis eigener Erfahrungswerte und Internet-Recherchen
    *** diesbezügliche Erfahrungswerte fehlten im Vorfeld der Entscheidung bzw. die bisherigen eigenen Erfahrungen und Recherchen reichten aufgrund widersprüchlicher Ergebnisse nicht als Maßstab für die Entscheidung
Letztlich fiel die Entscheidung in beiden Projekten zu Gunsten von Flex/Flash. Daraus ergab sich folgende Matrix:

Übersicht
Projektname: "Apollo" "Leonardo"
Anwendungsart: Suchmaschine Projektsoftware
Architektur: Client/Server, Desktop, Mobile Client/Server
Daten: Textfiles, Bilder, Videos MySQL-Datenbank
Frontend / GUI: Adobe Flex / AIR Adobe Flex
Middleware: Flourine FX Aperture / .NET-DLL AMF-PHP



Hybridprojekte mit Flex/AIR

1. Flex/Flash

Beim Flex-Builder handelt es sich um eine auf Eclipse basierende Entwicklungsumgebung zur Erstellung von Flash-Files (swf-Format). Flex nutzt dabei die Scriptsprache Actionscript 3 (AS3). AS3 basierte swf können mit dem Flash-PlugIn ab Version 9 in nahezu jedem Browsertyp dargestellt werden. Die Verbreitung der Flash-PlugIns 9/10 liegt Anfang 2010 bei über 95%.

Mit Flex ist die effiziente Erstellung anspruchsvoller RichClient-Oberflächen möglich. Dafür verfügt Flex neben AS3 über die XML-basierte Layoutscriptsprache "mxml". Dabei handelt es sich um vereinfachtes AS3 mit XML-Logik (Nodes, Children, Attribute etc.). Durch die Vereinfachung lassen sich komplexe, in sich verschachtelte Applikationen mit hoher Frontend-Komplexität erstellen.


2. Flex vs. Silverlight

Das Microsoft-PlugIn "Silverlight" verfügt mit "xaml" über eine ähnliche Scriptsprache wie "mxml". Daher soll kurz darauf hingewiesen werden, dass der Ausschlag für Flex nicht in erster Linie aufgrund technischer Features erfolgte. Entscheidend war vielmehr der höhere Reifegrad von Flex sowie die größere Community, die viele praxisbewährte Code-Beispiele und umfänglichen Support ermöglicht. Da sich Flex auch im Hinblick auf die Integration mit Microsoft.net als geeignete Wahl erwies, fiel die Entscheidung in beiden Projekten zugunsten von Flex.


3. Adobe AIR

Während das Adobe Flash-PlugIn in erster Linie ein Addon für Browser darstellt, ist das Ergänzungsprodukt Adobe AIR die Brücke zur Entwicklung klassischer Desktop-Applikationen. Das PlugIn unterliegt allen browserspezifischen Sicherheitsrestriktionen: Das Öffnen und Speichern von lokalen Files, der Zugriff auf die Registry oder andere sicherheitsempfindliche Bereiche des Rechners sind strikt unterbunden. Will man also mit Flex jenseits der Browserbarrieren "echte" Applikationen erstellen, benötig man Adobe AIR. Die mit AIR erstellen Applikationen werden über eine Installationsroutine auf dem Rechner installiert. Mit AIR lassen sich auch plattformübergreifende Lösungen erstellen (PC und MAC).

Durch das Zusammenspiel von Adobe AIR und Flex/Flash lassen sich mit hoher Effizienz "Hybrid-Projekte" erstellen. Das sind Applikationen, die mit vielfach identischem Code einerseits über den Browser und andererseits als Standalone-Applikation ausgeführt werden. Damit aber für beide Varianten der gleiche Source-Code verwendet werden kann, empfiehlt es sich, die Architektur einer solchen Hybrid-Applikation vorab genau zu durchdenken.


4. Module und Komponenten

Bei Flex wird grundsätzlich zwischen Applikation, Modulen und Komponenten unterschieden.

AIR-Applikation Web-Applikation Modul Komponente
mxml-Format <mx:Windowed
Application/>
<mx:Application/> <mx:Module/> Diverse Typen, z.B. <mx:TitleWindow/>, <mx:DataGrid/>
Funktion Standalone-Applikation File für HTML-Einbindung in browserbasierte Anwendung mehrfach verwendbare Haupt-Elemente mehrfach verwendbare Unter-Elemente; insbes. AS-Klassen und mxml-Klassen
Dateiformat nach Kompilierung AIR-File mit integrierten und/oder zusätzlichen externen swf selbständiges swf unselbständiges swf, das nur zusammen mit AIR oder Web-Applikation geöffnet werden kann Interner Bestandteil von swf


Ein Flex-Projekt besteht im Regelfall aus einer Applikation und mehreren Modulen. Letztere sind wiederum in verschiedene Komponenten und/oder Klassen unterteilt. Relevanz hat diese Unterteilung für die Aufteilung in solche Elemente, die von beiden Varianten gemeinsam oder nur in einer der beiden Applikations-Varianten genutzt werden.


Die Unterteilung in Module und Komponenten ist auch für die Arbeitsteilung im Team von Relevanz. Diesbezüglich ist je nach Projektumfang und Größe des Teams die Verwendung eines zusätzlichen Frameworks wie PureMVC oder Carnigorm zu empfehlen.

Hohe Relevanz besitzt die Architektur von Flex-Projekten auch für das Ressourcen Management. Dieser Aspekt spielte sowohl bei Apollo als auch bei Leonardo eine wichtige Rolle. Ihm wird daher nachfolgend etwas mehr Aufmerksamkeit gewidmet.


5. Memory- und Cache Management

Mehr noch als bei AS2 basierten Flash-Code (bis Version 8) spielt bei Flex und AS3 (ähnlich bei JAVA Link) das Memory Management eine wichtige Rolle. Das heißt:
  • Genutzter Speicher ist so klein wie möglich zu halten
  • Nicht mehr genutzter Speicher muss rasch wieder frei gegeben werden
Da viele Flex-Programmierer ehemalige Flasher sind, müssen diese im Rahmen von Flex- Komponenten stärker als bisher beachten, dass Klassen und Komponenten weitgehend als Singleton erstellt bzw. mehrfach (wieder-)verwendet werden. Bei Apollo gilt diese Herausforderung insbesondere für die Visualisierung von Suchtreffern in Form von Relevanz-Auswertungen.



Apollo erlaubt unterschiedliche Suchtreffer-Auswertungen die z.B. als mehrfach verschachtelte Mindmap oder dynamisch generierte Balkendiagramme ausgegeben werden. Die dabei entstehenden Grafik-Elemente sind jeweils neue Instanzen z.T. recht komplexer Einzel-Komponenten. Die mehrfach aufeinander folgende Visualisierung von Suchtreffern kann bei schlechtem Memory-Management in Flex zu erheblichen Performance-Problemen führen.
Detailansicht


Gerade bei Webapplikationen mit einer Vielzahl von Pop Up-Fenstern, großen Mengen von dynamisch erstellen Tabellen, Visualisierungen und anderen dynamisch erstellten Inhalten muss folglich bei Flex darauf geachtet werden, dass einmal erstellte und nicht mehr verwendete bzw. benötigte Instanzen restlos gelöscht bzw. zentrale Instanzen als Singleton erstellt und permanent wieder verwendet werden. Um das Memory-Management zu unterstützen, hat Flex extra einen Profiler integriert. Dieser hilft dabei, die Übersicht über die erstellten bzw. (nicht) gelöschten Instanzen und damit die Auslastung des Speichers zu behalten.



Flex Memory-Use bei größeren Applikationen
Erläuterung: links und rechts wurden Flex je 1000 Suchtreffer-Komponenten zur Laufzeit dynamisch zugefügt. Bei der Lösung auf der linken Seite wurden die nicht mehr verwendeten Objekte lediglich von der sichtbaren Oberfläche, nicht jedoch aus dem Speicher gelöscht. Die linke Applikation hat bereits nach kurzer Laufzeit erhebliche Performanceprobleme, da sämtliche Objekte noch geladen sind. Die rechte Variante hat dagegen trotz gleicher Gesamtmenge erstellter Instanzen nur 30 Instanzen im Speicher.
Detailansicht


Es empfiehlt sich in jedem Fall, diesen kritischen Punkt bei Webapplikationen mit Flex und/oder AIR entsprechende Aufmerksamkeit zu widmen. Das heißt z.B. auch, dass die Bindung von Objekten in Arrays, ebenso wie die Verwendung von Event-Listenern genau geplant werden muss.

Flashpräsentation: Resource Management für ActionScript 3 (AS3) und Flex 2


Im zweiten Teil, der voraussichtlich in der KW 15 in unserem Magazin erscheint, geht es vornehmlich um das Zusammenspiel von Flex und DOT.net bzw. die Kombination von AMFPHP und Flex.


03/2010, Torsten Dobroschke

Torsten Dobroschke arbeitet als freier Softwareentwickler und Consultant im Süden von München. Er ist seit mehr als 10 Jahren für Unternehmen der Softwarebranche tätig. Er war vorher bei Modem Media Deutschland als Softwareentwickler tätig.


03/2010, Oliver Matthias Merx



Oliver Merx ist selbständiger Berater und Softwareentwickler. Zuvor arbeitete er in verschiedenen Positionen bei führenden Internet-Dienstleistern, darunter Pixelpark, Modem Media Deutschland und PopNet.
Alle Experten   
Publizieren Sie Ihren eigenen Fachbeitrag   


Kommentare zu diesem Beitrag 


Webapplikationen mit Adobe Flex und Micr...  
Fachartikel 16.03.10
HTML 5 als Alternative?  
oliver merx 15.04.10

Schreiben Sie einen Kommentar zu diesem Beitrag

Newsletter abonnieren

Verpassen Sie nichts und bleiben Sie informiert mit unserem Newsletter.
Ihre E-Mail Adresse:  
RSS-Feed: Alle News aktuellUnsere News auf Ihrer Website

Weitere Beiträge zu diesem Thema

HTML 5 und die Zukunft des Web
Das Leben für alle Websitebetreiber ist im Jahr 2010 ein Zuckerschlecken. Wir müssen uns mit viel weniger technischen Details herumschlagen als noch vor ein paar Jahren...
Webapplikationen mit Adobe Flex und Microsoft.net sowie AMFPHP - Teil II
Im nachfolgenden zweiten Teil geht es insbesondere um das konkrete Zusammenspiel von Flex mit AMFPHP und .NET...
Praxis: Neue, mehrsprachige Konzernwebsite – von Livelink WCMS auf RedDot
Im Zuge der Ausgliederung aus dem MAN-Konzern suchte die manroland AG ein CMS und einen erfahrenen Dienstleister für die Umsetzung ihrer neuen, internationalen Webpräsenz. edicos überzeugte mit tiefgehender CMS-Expertise...
So machen Sie Magento fit für Google & Co.
Dieser Beitrag stellt eine Schritt-für-Schritt-Anleitung für eine solide Suchmaschinenoptimierung eines Magento Online-Shops dar. Magento bringt bereits eine gute Basis für die Optimierung mit...
Systemvorstellung: aitsu Content Management System
aitsu ist ein Framework, das auf dem Web Content Management System Contenido aufsetzt. Contenido-Funktionen bleiben erhalten und werden durch weitere Framework-Funktionen ergänzt...

Beiträge aus anderen Themenbereichen

VOICE Days plus: Deutschlands Servicewelt im Fokus
Im Interview spricht der Schirmherr der Initiative Prof. Dieter Spath über "Das Konstruktionsbüro für Dienstleistungen" und vieles mehr. Am 12. Oktober eröffnet Prof. Dieter Spath den VOICE Days plus Kongress...
Lösungsmöglichkeiten zum Konflikt der E-Mail-Archivierung mit Fernmeldegeheimnis und Datenschutz
Die Gestattung der privaten Nutzung der betriebseigenen IT-Infrastruktur durch die Mitarbeiter bringt nicht zu unterschätzende rechtliche Komplikationen mit sich – gerade was auch die Archivierung von E-Mails anbelangt...
eCommerce & Datenschutz - Das sollten Sie wissen
Datenschutz spielt auch im eCommerce eine große Rolle. So müssen z.B. für den Betrieb eines Onlineshops die gesetzlichen Vorschriften zum Datenschutz eingehalten werden...

Veranstaltungen
Das Content Management PortalDas Dokumenten Management PortalDas IT-Security PortalDas Customer Relationship Management PortalDas E-Commerce PortalDas Enterprise Resource Planning PortalPortal für VoIP und mobile KommunikationDas Magazin für IT im KrankenhausDas Verzeichnis für IT-Profis
homeimpressumerklärung zum datenschutz - privacy policykontaktwerbung

know how

news

veranstaltungen

Schnellsuche




Weiterempfehlen


Gefällt Ihnen unsere Website? Dann senden Sie doch Freunden und Bekannten einen Hinweis auf Contentmanager.de!



Unser Partner


Beiträge von kernpunkt GmbH in unserem Magazin:
Website-Performance: Der messbare Augenblick
Usability: Sicherheit mit dem Website-Check
Dialog statt Monolog: Social Media Newsroom



Der IT-Service-Finder


Auf der Suche nach dem besten IT-Dienstleister? Hier werden Sie fündig! Bereits 1.840 Unternehmen aus 17 Ländern.

Zu den IT-Profis...