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.397 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
2 Kommentare
3 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
4.397
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
31
Aktionen
Geteilt
0
Downloads
14
Kommentare
2
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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

    ×