webtechnologien fuer das frontend und flash( flex ) vs js( ajax )

Die Alternativen für`s Frontend

Webapplication-Technology

©2008 Michael GrossergrosserDOTmichaelATgmailDOTcom

KonzepteIm 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

SilverlightMedia-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

JavaFX

Die MatrixJS Mischfor

m(+CSS)

Java->JS

Java Web Start

FlexFlash

Silverlight

Statisch

Rich UI

Gering Komp.

Mittlere Komp.

Hohe Komp.

Spiele

Video/Audio

Get a job!

JS vs AS

Bereit für den Mainstream

©2008 Michael GrossergrosserDOTmichaelATgmailDOTcom

Webhorror - ACID 2 (2005)IE 7IE6

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

GrundproblemeJS- 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$)

GrundkonzepteJS (“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

OnClickJS:

AS:

Neuer InhaltJS:

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

Quellenhttp://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.htmlhttp://blog.rememberthemilk.com/2007/12/rtm-gmail-task-management-goodness.htmlhttp://scrubyt.org/

http://www2.rasterwerks.com/game/phosphor/beta1.asphttp://blog.papervision3d.org/

http://silverlight.net/http://msdn2.microsoft.com/en-us/library/ms752059.aspx

http://www.sun.com/software/javafx/index.jsphttp://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/jobtrendshttp://en.wikipedia.org/wiki/Acid2

http://www.windowsvista.si/main.htmhttp://www.thegooglecache.com/flash-website-flowchart.jpghttp://noticiastech.com/wordpress/wp-content/uploads/2007/04/microsoft_silverlight_c.jpg