Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )

  • 2,805 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,805
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 11.  
  • 12.  
  • 13.  
  • 14.  
  • 15.  
  • 16.  
  • 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)
  • 19.  
  • 20.  
  • 21.  
  • 22.  
  • 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
  • 26.  
  • 27. Expression Blend - Serie
  • 28.  
  • 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!
  • 34.  
  • 35. JS vs AS Bereit für den Mainstream ©2008 Michael Grosser grosserDOTmichaelATgmailDOTcom
  • 36.  
  • 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
  • 47. Einfache Entscheidung ?
  • 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