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