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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax ) - Presentation 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:
      • 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
      • 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
    45. Einfache Entscheidung ?
    46. 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
    47. 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

    + grossergrosser, 2 years ago

    custom

    2640 views, 2 favs, 0 embeds more stats

    Welche aktuellen Webtechnologien gibt es, wie kann more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2640
      • 2640 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 8
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories