Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Die Alternativen für`s Frontend Webapplication-Technology ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
Konzepte <ul><li>Im Browser </li></ul><ul><li>JS </li></ul><ul><li>Browser Plugin </li></ul><ul><li>Java Applets </li></ul...
Warum im Browser ? <ul><li>Immer aktuell </li></ul><ul><li>Keine Installation </li></ul><ul><li>Daten überall verfügbar </...
Warum NICHT im Browser ? <ul><li>Geringe Grafikleistung </li></ul><ul><li>Wenig System Interaktion (Treiber/Dateien) </li>...
Vorteile der HTMLnähe <ul><li>Ladezeiten / Dateigröße </li></ul><ul><li>Bookmarks / Tabs / Mittelklick </li></ul><ul><li>B...
Vorteile der HTMLferne <ul><li>GUI Builder(SWT/Thermo/Expression) </li></ul><ul><li>halbwegs closed source </li></ul><ul><...
Meine Oma  benutzt AJAX!
JavaScript <ul><li>Einfach / überall unterstützt </li></ul><ul><li>Kämpft mit Browser Unterschieden </li></ul><ul><li>DOM ...
Möglichkeiten durch Offenheit Tasks für GMail Multilogin Preisvergleich
Scraping
 
 
 
 
 
 
Flash/Flex <ul><li>Flash:  </li></ul><ul><ul><li>Animation / Interaktion  </li></ul></ul><ul><ul><li>Spiele / Filme / Werb...
Flash/Flex <ul><li>Geschlossenes durch swf Codierung </li></ul><ul><li>RIA für den Desktop durch AIR </li></ul><ul><li>Akt...
 
 
 
 
Silverlight <ul><li>Textbasier    Offen    Google/Blinde </li></ul><ul><li>Markup Sprache Inhalte/UI Elemente XAML </li>...
Silverlight <ul><li>Media </li></ul><ul><li>Video Bearbeitung/Interaktion </li></ul><ul><li>Effektivere Video Formate  (VC...
XAML
 
Expression Blend - Serie
 
JavaFX <ul><li>Java Web Start + Scriptsprache </li></ul><ul><li>Kein Compilieren </li></ul><ul><li>&quot;Tedious method ca...
JavaFX
JavaFX
Die Matrix JS Mischform (+CSS) Java ->JS Java  Web Start Flex Flash Silverlight Statisch Rich UI Gering Komp. Mittlere Kom...
Get a job!
 
JS vs AS Bereit für den Mainstream ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
 
Webhorror - ACID 2 (2005) IE 7 IE6 Opera 9 Firefox >2 IE 8 Firefox 1.5
JS <ul><li>Interpretiert    Browserunterschiede  </li></ul><ul><li>Sprach Unterschiede gering (s. ACID 3) </li></ul><ul><...
JS <ul><li>Prototype – gut/solide </li></ul><ul><li>JQuery – einfach/robust: “write less do more“ </li></ul><ul><li>Dojo –...
Grundprobleme <ul><li>JS </li></ul><ul><li>Browserunterschiede <-> Innovation </li></ul><ul><li>Kein Compiler/Typenüberprü...
Grundkonzepte <ul><li>JS (“the world's most misunderstood language”) </li></ul><ul><li>Code    Verhalten für Struktur (DO...
JS    AS <ul><li>AS(ES4) = JS(ES3) + “syntactic sugar” </li></ul><ul><li>viel in JS möglich, nur ungewohnt </li></ul>
OnClick JS: AS:
Neuer Inhalt JS: AS:
<ul><li>JS </li></ul><ul><li>File > Print + extra CSS: media=“print” -> oft gute Ergebnisse </li></ul><ul><li>window.print...
<ul><li>JS </li></ul><ul><li>Text korrekt übersetzt vom Server _(X)  </li></ul><ul><li>Übersetzungstabelle (extra script t...
Einfache Entscheidung ?
Flash/Flex Einsatz ? <ul><li>Ja </li></ul><ul><li>Schutz von Bildern/Inhalten wichtig </li></ul><ul><li>Medien bearbeiten ...
Quellen http://code.google.com/webtoolkit/ http://www.thinwire.com/ http://j2s.sourceforge.net/ http://www.greasespot.net/...
Nächste SlideShare
Wird geladen in …5
×

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

4.488 Aufrufe

Veröffentlicht am

Welche aktuellen Webtechnologien gibt es, wie kann man sie vergleichen, was ist am besten für X



Vergleich Javascript vs Actionscript, wie funktioniert was und was sind die Vorteile/Nachteile, wo sollte man was benutzen

Veröffentlicht in: Technologie

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

  1. 1. Die Alternativen für`s Frontend Webapplication-Technology ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
  2. 2. Konzepte <ul><li>Im Browser </li></ul><ul><li>JS </li></ul><ul><li>Browser Plugin </li></ul><ul><li>Java Applets </li></ul><ul><li>Flash / Flex </li></ul><ul><li>Silverlight </li></ul><ul><li>Von Überall Startbar </li></ul><ul><li>- Java Web Start / JavaFX </li></ul><ul><li>Mischformen </li></ul><ul><li>GWT (Java + CSS) </li></ul><ul><li>Java2Script (SWT) </li></ul><ul><li>Echo (SWT+HBN) </li></ul><ul><li>ThinWire </li></ul>
  3. 3. Warum im Browser ? <ul><li>Immer aktuell </li></ul><ul><li>Keine Installation </li></ul><ul><li>Daten überall verfügbar </li></ul><ul><li>Hype Faktor (Social Bookmarking) </li></ul><ul><li>Plattform unabhängig </li></ul><ul><li>Keine Installationssoftware (für n Systeme) </li></ul>
  4. 4. Warum NICHT im Browser ? <ul><li>Geringe Grafikleistung </li></ul><ul><li>Wenig System Interaktion (Treiber/Dateien) </li></ul><ul><li>Zuviel Code (Video/Photobearbeitung) </li></ul><ul><li>Für PCs ohne/mit langsamem Internet </li></ul>
  5. 5. Vorteile der HTMLnähe <ul><li>Ladezeiten / Dateigröße </li></ul><ul><li>Bookmarks / Tabs / Mittelklick </li></ul><ul><li>Browser-Cache / Back-Button… </li></ul><ul><li>Browser Plugins(Autofill/Better-X…) </li></ul><ul><li>Drucken </li></ul><ul><li>Bilder speicherbar </li></ul><ul><li>Browseranpassung (Scroll/Seitenwechsel) </li></ul><ul><li>Formatierungen übertragbar </li></ul><ul><li>Inhalte ohne Scripte  Scraping </li></ul><ul><li>Nutzer erweitern Angebot (z.B. GM) </li></ul><ul><li>Zugänglichkeit(Keine Bilder, Blinde…) </li></ul>
  6. 6. Vorteile der HTMLferne <ul><li>GUI Builder(SWT/Thermo/Expression) </li></ul><ul><li>halbwegs closed source </li></ul><ul><li>Browserunabhängig / nur 1 Sprache </li></ul><ul><li>Inhalte werden nur 1 mal geladen </li></ul><ul><li>Statische Sprachen </li></ul><ul><li>Refactoring </li></ul><ul><li>Code Analyse </li></ul><ul><li>Code-Basis </li></ul><ul><li>Integration mit dem Backend </li></ul>
  7. 7. Meine Oma benutzt AJAX!
  8. 8. JavaScript <ul><li>Einfach / überall unterstützt </li></ul><ul><li>Kämpft mit Browser Unterschieden </li></ul><ul><li>DOM beschränkt  Obj. Anzahl/Animation </li></ul><ul><li>Kaum Medien Interaktion </li></ul><ul><li>Durch Browser (Navigation/Eingabe/…) stark </li></ul>
  9. 9. Möglichkeiten durch Offenheit Tasks für GMail Multilogin Preisvergleich
  10. 10. Scraping
  11. 17. Flash/Flex <ul><li>Flash: </li></ul><ul><ul><li>Animation / Interaktion </li></ul></ul><ul><ul><li>Spiele / Filme / Werbung </li></ul></ul><ul><li>Flex: </li></ul><ul><ul><li>Anwendungsentwicklung </li></ul></ul><ul><ul><li>Markup Sprache  Elemente </li></ul></ul><ul><ul><li>IDE für komplexere Programme </li></ul></ul><ul><li>Verbreitung ca. 95-99% </li></ul><ul><li>Video / Audio Interaktion </li></ul><ul><li>Webcam / Mikrofon integrierbar </li></ul><ul><li>Speicherplatz auf Client reservierbar (LSO) </li></ul>
  12. 18. Flash/Flex <ul><li>Geschlossenes durch swf Codierung </li></ul><ul><li>RIA für den Desktop durch AIR </li></ul><ul><li>Aktuell (Angst vor Silverlight ?): </li></ul><ul><ul><li>Preissenkungen für Server (  flv4php) </li></ul></ul><ul><ul><li>Flex wird OSS </li></ul></ul><ul><ul><li>OS vieler Protokolle/Schnittstellen(AMF) </li></ul></ul><ul><ul><li>OS Nachbau vom Player (Red5) </li></ul></ul>
  13. 23. Silverlight <ul><li>Textbasier  Offen  Google/Blinde </li></ul><ul><li>Markup Sprache Inhalte/UI Elemente XAML </li></ul><ul><li>XAML einfügen + ansprechen(SOM)  JS </li></ul><ul><li>Code </li></ul><ul><li>C# VB Python Ruby </li></ul><ul><ul><li>Riesige Codebase </li></ul></ul><ul><ul><li>Tools/Refactoring </li></ul></ul><ul><ul><li>Front/Backend in der selber Sprache </li></ul></ul><ul><li>.NET Entwickler (WPF)  Web </li></ul><ul><li>Mehr CPU fähig </li></ul>
  14. 24. Silverlight <ul><li>Media </li></ul><ul><li>Video Bearbeitung/Interaktion </li></ul><ul><li>Effektivere Video Formate (VC1+H264+WMV)/Audio </li></ul><ul><li>Video Streaming von jedem Server </li></ul><ul><li>WMA PNG XPS Unterstützung </li></ul><ul><li>Setup </li></ul><ul><li>(noch)keine Linux Unterstützung (Moonlight) </li></ul><ul><li>einfach Installation / Vista </li></ul><ul><li>automatische Aktualisierung </li></ul>
  15. 25. XAML
  16. 27. Expression Blend - Serie
  17. 29. JavaFX <ul><li>Java Web Start + Scriptsprache </li></ul><ul><li>Kein Compilieren </li></ul><ul><li>&quot;Tedious method calling and instantiation get replaced with declarative initialization and event wiring all packaged in an easy to read scripting language&quot; </li></ul><ul><li>Extra Fenster + Warnmeldungen(Firewall & Signatur) </li></ul>
  18. 30. JavaFX
  19. 31. JavaFX
  20. 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
  21. 33. Get a job!
  22. 35. JS vs AS Bereit für den Mainstream ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
  23. 37. Webhorror - ACID 2 (2005) IE 7 IE6 Opera 9 Firefox >2 IE 8 Firefox 1.5
  24. 38. JS <ul><li>Interpretiert  Browserunterschiede </li></ul><ul><li>Sprach Unterschiede gering (s. ACID 3) </li></ul><ul><li>HTML –> DOM (sehr unterschiedlich) </li></ul>
  25. 39. JS <ul><li>Prototype – gut/solide </li></ul><ul><li>JQuery – einfach/robust: “write less do more“ </li></ul><ul><li>Dojo – sehr viele Erweiterungen / oft für Großprojekte eingesetzt </li></ul><ul><li>Ext – Abstraktion in Elemente Canvas/Box </li></ul>
  26. 40. Grundprobleme <ul><li>JS </li></ul><ul><li>Browserunterschiede <-> Innovation </li></ul><ul><li>Kein Compiler/Typenüberprüfung </li></ul><ul><li>AS </li></ul><ul><li>Extra Plugin(ca. 95%), installierbar? </li></ul><ul><li>Komplett laden/gecached  Inhalte </li></ul><ul><li>Schwache Trennung Layout/Code </li></ul><ul><li>Source nicht einsehbar </li></ul><ul><li>Kosten bei Erfolg (Builder: 249$+Charting:699$ Media Server : $4,500 $) </li></ul>
  27. 41. Grundkonzepte <ul><li>JS (“the world's most misunderstood language”) </li></ul><ul><li>Code  Verhalten für Struktur (DOM) </li></ul><ul><li>mehrere Komponenten  selbe Struktur </li></ul><ul><li>Code + Struktur nachladbar </li></ul><ul><li>AS </li></ul><ul><li>muss alles laden </li></ul><ul><li>Verhalten an die Struktur gebunden </li></ul><ul><li>Komponente = Struktur+Verhalten </li></ul><ul><li>Neuer Code/Struktur schwer </li></ul>
  28. 42. JS  AS <ul><li>AS(ES4) = JS(ES3) + “syntactic sugar” </li></ul><ul><li>viel in JS möglich, nur ungewohnt </li></ul>
  29. 43. OnClick JS: AS:
  30. 44. Neuer Inhalt JS: AS:
  31. 45. <ul><li>JS </li></ul><ul><li>File > Print + extra CSS: media=“print” -> oft gute Ergebnisse </li></ul><ul><li>window.print() </li></ul><ul><li>AS </li></ul><ul><li>Druckvorgang durch Knopfdruck </li></ul><ul><li>New FlexPrintJob, if(job.start()){ job.addObject(…); job.send(); }; </li></ul><ul><li>zu druckende Elemente der Application hinzugefügen, nach dem Drucken entfernen </li></ul>Drucken
  32. 46. <ul><li>JS </li></ul><ul><li>Text korrekt übersetzt vom Server _(X) </li></ul><ul><li>Übersetzungstabelle (extra script tag) </li></ul><ul><li>AS </li></ul><ul><li>- Übersetzung vom Server laden </li></ul><ul><li>- Übersetzung via ExternalInterface aus JS </li></ul><ul><li>Nachladen / 1 Anwendung pro Sprache </li></ul>Internationalisation
  33. 47. Einfache Entscheidung ?
  34. 48. Flash/Flex Einsatz ? <ul><li>Ja </li></ul><ul><li>Schutz von Bildern/Inhalten wichtig </li></ul><ul><li>Medien bearbeiten </li></ul><ul><li>Lange / Tiefe Navigation ? (1 mal laden) </li></ul><ul><li>Nein </li></ul><ul><li>Tabellen / Business-anwendungen </li></ul><ul><li>einfache/textlastige Anwendungen </li></ul><ul><li>Komplexität / Grafiklastigkeit gering </li></ul>
  35. 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

×