Upload
grosser
View
3.935
Download
0
Embed Size (px)
DESCRIPTION
Welche aktuellen Webtechnologien gibt es, wie kann man sie vergleichen, was ist am besten für XVergleich Javascript vs Actionscript, wie funktioniert was und was sind die Vorteile/Nachteile, wo sollte man was benutzen
Citation preview
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