Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )

Konzepte

Im Browser

JS

Browser Plugin

Java Applets

Flash / Flex

Silverlight

Von Überall Startbar

- Java Web Start / JavaFX

Mischformen

GWT (Java + CSS)

Java2Script (SWT)

Echo (SWT+HBN)

ThinWire

Warum im Browser ?

Immer aktuell

Keine Installation

Daten überall verfügbar

Hype Faktor (Social Bookmarking)

Plattform unabhängig

Keine Installationssoftware (für n Systeme)

Warum NICHT im Browser ?

Geringe Grafikleistung

Wenig System Interaktion (Treiber/Dateien)

Zuviel Code (Video/Photobearbeitung)

Für PCs ohne/mit langsamem Internet

Vorteile der HTMLnähe

Ladezeiten / Dateigröße

Bookmarks / Tabs / Mittelklick

Browser-Cache / Back-Button…

Browser Plugins(Autofill/Better-X…)

Drucken

Bilder speicherbar

Browseranpassung (Scroll/Seitenwechsel)

Formatierungen übertragbar

Inhalte ohne Scripte  Scraping

Nutzer erweitern Angebot (z.B. GM)

Zugänglichkeit(Keine Bilder, Blinde…)

Vorteile der HTMLferne

GUI Builder(SWT/Thermo/Expression)

halbwegs closed source

Browserunabhängig / nur 1 Sprache

Inhalte werden nur 1 mal geladen

Statische Sprachen

Refactoring

Code Analyse

Code-Basis

Integration mit dem Backend

Meine Oma benutzt AJAX!

JavaScript

Einfach / überall unterstützt

Kämpft mit Browser Unterschieden

DOM beschränkt  Obj. Anzahl/Animation

Kaum Medien Interaktion

Durch Browser (Navigation/Eingabe/…) stark

Möglichkeiten durch Offenheit Tasks für GMail Multilogin Preisvergleich

Scraping

Flash/Flex

Flash:

Animation / Interaktion

Spiele / Filme / Werbung

Flex:

Anwendungsentwicklung

Markup Sprache  Elemente

IDE für komplexere Programme

Verbreitung ca. 95-99%

Video / Audio Interaktion

Webcam / Mikrofon integrierbar

Speicherplatz auf Client reservierbar (LSO)

Flash/Flex

Geschlossenes durch swf Codierung

RIA für den Desktop durch AIR

Aktuell (Angst vor Silverlight ?):

Preissenkungen für Server (  flv4php)

Flex wird OSS

OS vieler Protokolle/Schnittstellen(AMF)

OS Nachbau vom Player (Red5)

Silverlight

Textbasier  Offen  Google/Blinde

Markup Sprache Inhalte/UI Elemente XAML

XAML einfügen + ansprechen(SOM)  JS

Code

C# VB Python Ruby

Riesige Codebase

Tools/Refactoring

Front/Backend in der selber Sprache

.NET Entwickler (WPF)  Web

Mehr CPU fähig

Silverlight

Media

Video Bearbeitung/Interaktion

Effektivere Video Formate (VC1+H264+WMV)/Audio

Video Streaming von jedem Server

WMA PNG XPS Unterstützung

Setup

(noch)keine Linux Unterstützung (Moonlight)

einfach Installation / Vista

automatische Aktualisierung

XAML

Expression Blend - Serie

JavaFX

Java Web Start + Scriptsprache

Kein Compilieren

"Tedious method calling and instantiation get replaced with declarative initialization and event wiring all packaged in an easy to read scripting language"

Extra Fenster + Warnmeldungen(Firewall & Signatur)

JavaFX

Die Matrix JS Mischform (+CSS) Java ->JS Java Web Start Flex Flash Silverlight Statisch Rich UI Gering Komp. Mittlere Komp. Hohe Komp. Spiele Video/Audio

Get a job!

Webhorror - ACID 2 (2005) IE 7 IE6 Opera 9 Firefox >2 IE 8 Firefox 1.5

JS

Interpretiert  Browserunterschiede

Sprach Unterschiede gering (s. ACID 3)

HTML –> DOM (sehr unterschiedlich)

JS

Prototype – gut/solide

JQuery – einfach/robust: “write less do more“

Dojo – sehr viele Erweiterungen / oft für Großprojekte eingesetzt

Ext – Abstraktion in Elemente Canvas/Box

Grundprobleme

JS

Browserunterschiede <-> Innovation

Kein Compiler/Typenüberprüfung

AS

Extra Plugin(ca. 95%), installierbar?

Komplett laden/gecached  Inhalte

Schwache Trennung Layout/Code

Source nicht einsehbar

Kosten bei Erfolg (Builder: 249$+Charting:699$ Media Server : $4,500 $)

Grundkonzepte

JS (“the world's most misunderstood language”)

Code  Verhalten für Struktur (DOM)

mehrere Komponenten  selbe Struktur

Code + Struktur nachladbar

AS

muss alles laden

Verhalten an die Struktur gebunden

Komponente = Struktur+Verhalten

Neuer Code/Struktur schwer

JS  AS

AS(ES4) = JS(ES3) + “syntactic sugar”

viel in JS möglich, nur ungewohnt

OnClick JS: AS:

Neuer Inhalt JS: AS:

JS

File > Print + extra CSS: media=“print” -> oft gute Ergebnisse

window.print()

AS

Druckvorgang durch Knopfdruck

New FlexPrintJob, if(job.start()){ job.addObject(…); job.send(); };

zu druckende Elemente der Application hinzugefügen, nach dem Drucken entfernen

Drucken

JS

Text korrekt übersetzt vom Server _(X)

Übersetzungstabelle (extra script tag)

AS

- Übersetzung vom Server laden

- Übersetzung via ExternalInterface aus JS

Nachladen / 1 Anwendung pro Sprache

Internationalisation

Einfache Entscheidung ?

Flash/Flex Einsatz ?

Ja

Schutz von Bildern/Inhalten wichtig

Medien bearbeiten

Lange / Tiefe Navigation ? (1 mal laden)

Nein

Tabellen / Business-anwendungen

einfache/textlastige Anwendungen

Komplexität / Grafiklastigkeit gering

Quellen http://code.google.com/webtoolkit/ http://www.thinwire.com/ http://j2s.sourceforge.net/ http://www.greasespot.net/ http://dathompson.blogspot.com/2007/12/tasks-in-gmail.html http://blog.rememberthemilk.com/2007/12/rtm-gmail-task-management-goodness.html http://scrubyt.org/ http://www2.rasterwerks.com/game/phosphor/beta1.asp http://blog.papervision3d.org/ http://silverlight.net/ http://msdn2.microsoft.com/en-us/library/ms752059.aspx http://www.sun.com/software/javafx/index.jsp http://download.java.net/general/openjfx/demos/javafxpad.jnlp http://jquery.com/ http://www.prototypejs.org/ http://mootools.net/ http://script.aculo.us/ http://extjs.com/ http://extjs.com/deploy/dev/examples/desktop/desktop.html http://paul.irish.aurgasm.us/2008/javascript-css-selector-engine-timeline/ http://www.indeed.com/jobtrends http://en.wikipedia.org/wiki/Acid2 http://www.windowsvista.si/main.htm http://www.thegooglecache.com/flash-website-flowchart.jpg http://noticiastech.com/wordpress/wp-content/uploads/2007/04/microsoft_silverlight_c.jpg