Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
- 1. Die Alternativen für`s Frontend Webapplication-Technology ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
- 2. 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
- 3. Warum im Browser ? Immer aktuell Keine Installation Daten überall verfügbar Hype Faktor (Social Bookmarking) Plattform unabhängig Keine Installationssoftware (für n Systeme)
- 4. Warum NICHT im Browser ? Geringe Grafikleistung Wenig System Interaktion (Treiber/Dateien) Zuviel Code (Video/Photobearbeitung) Für PCs ohne/mit langsamem Internet
- 5. 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…)
- 6. 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
- 7. Meine Oma benutzt AJAX!
- 8. JavaScript Einfach / überall unterstützt Kämpft mit Browser Unterschieden DOM beschränkt Obj. Anzahl/Animation Kaum Medien Interaktion Durch Browser (Navigation/Eingabe/…) stark
- 9. Möglichkeiten durch Offenheit Tasks für GMail Multilogin Preisvergleich
- 10. Scraping
- 17. 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)
- 18. 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)
- 23. 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
- 24. 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
- 25. XAML
- 27. Expression Blend - Serie
- 29. 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)
- 30. JavaFX
- 31. JavaFX
- 32. 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
- 33. Get a job!
- 35. JS vs AS Bereit für den Mainstream ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
- 37. Webhorror - ACID 2 (2005) IE 7 IE6 Opera 9 Firefox >2 IE 8 Firefox 1.5
- 38. JS Interpretiert Browserunterschiede Sprach Unterschiede gering (s. ACID 3) HTML –> DOM (sehr unterschiedlich)
- 39. 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
- 40. 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 $)
- 41. 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
- 42. JS AS AS(ES4) = JS(ES3) + “syntactic sugar” viel in JS möglich, nur ungewohnt
- 43. OnClick JS: AS:
- 44. Neuer Inhalt JS: AS:
- 45. 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
- 46. 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
- 48. 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
- 49. 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