BARCAMP KARLSRUHE             Wie ein Phönix aus der Asche:JavaScript und die vernetzte Zukunft auf Wolke Sieben          ...
EVGENIJ TEREHOV• Web-Developer           seit 1999• Dipl.-Wirt.-Inf. (FH)• Consultant: EXXETA AG •   Enterprise Integratio...
MODEL   VIEWCONTROLLER
VIEW
Backend                                       Frontend                           Assoziationen:•   Business $$            ...
RIA?Kein Mehrwert?
ÜBLICHES PROJEKTVORGEHEN                                       Frontend       Backend                                     ...
FORMFAKTOR
FORMFAKTOR ENTSCHEIDETHeute:Alles in Einem ...... und stets dabei.
?Design & Technologie gehen Hand in Hand!
SO SOLLTE ES SEIN                                                  Frontend       Backend                                 ...
LÖSUNG?
Web 2.0 = Desktop 1.0?
Kopieren?
Gedankenmodelldes Benutzers
Gedankenmodell   Funktionsweise derdes Benutzers           Applikation
NEUE TECHNOLOGIEN     führen zuNEUEN KONZEPTEN!
Neue Technologien?
ZUKUNFTSMUSIK?
Auf die Browser kommt es an! Gecko               Webkit          TridentMozilla Firefox      Apple Safari    Internet Expl...
CLIENT STORAGE•   Cookies haben viele Nachteile•   Es gibt viele Ansätze:    •   localStorage (die meisten Browser; kein I...
WEB SOCKETS• ! ushing  P          statt Polling• ! as  D      Gefühl einer "echten" Anwendung• ! uss  M       vom Server u...
MODEL
NOSQL• ! luster  C          of unreliable commodity hardware Data Base                                                    ...
NOSQL        CouchDB relax
CONTROLLER
»Ev                                                                               ery                                     ...
JAVASCRIPT
s?JAVASCRIPT IN BACKEND you n   ut                     A re
JAVASCRIPT IN BACKEND• One   Stack World! • eine Technologie • Write   once run everywhere. • besseres   Debugging!• Beson...
JAVASCRIPT IN BACKEND• server    side JS                                 »To                                           inf...
JAVASCRIPT IN BACKEND                                                               •   I/O Kosten:                       ...
JAVASCRIPT IN BACKENDEvent-driven statt multi-threaded:  • Context-switch   ist nicht kostenlos  • Jeder Thread-Stack   br...
JAVASCRIPT AUF WOLKE 7• Basiert   auf node.js und HTML• Zusammengeführt      aus  • Cloud9  • Mozilla   Bespin (Skywriter)...
JAVASCRIPT AUF WOLKE 7
JAVASCRIPT AUF WOLKE 7
MOBILE"PhoneGap is an open source development framework for buildingcross-platform mobile apps. Build apps in HTML and Jav...
webOS
UND WAS IST MIT DESKTOP 1.0?
DESKTOP 2.0!
DESKTOP                                        Chrome OS• Es   geht auch andersrum?  • Oh    Ja!• z.B. Jollycloud  • das  ...
Kiddie-frickel-Sprache?
AJAXINTERFACE Standardisierter Ansatz
JAVASCRIPTBrowser              jQuery             DOM tree
JAVASCRIPT          jQuery.ajaxInterfaceBrowser                 jQuery                DOM tree
JAVASCRIPT                     jQuery.ajaxInterface                                            Magie          <?xml?>     ...
AJAXINTERFACE: MÖGLICHKEITEN         5         4         3Aktion         2         1         0             0   1   2   3  ...
BEISPIEL                   <?xml version="1.0"?>                   <jquery>                       <setTitle>new page title...
AJAXINTERFACE: ROADMAP• Entwicklung eines ajaxInterface-Servers (node.JS)   • automatische Zustandshaltung   • JavaScript ...
VIELEN DANK!                        Fragen?Evgenij Terehov | twitter: @EugeneTerehov | www.terehov.de       https://github...
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
BarCamp Karlsruhe 18.06.2011
Nächste SlideShare
Wird geladen in …5
×

BarCamp Karlsruhe 18.06.2011

1.424 Aufrufe

Veröffentlicht am

Überblick der aktuellen technologischen Web-Trends.
Super geeignet zum Spielen von Buzzword-Bingo ;)

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.424
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

BarCamp Karlsruhe 18.06.2011

  1. 1. BARCAMP KARLSRUHE Wie ein Phönix aus der Asche:JavaScript und die vernetzte Zukunft auf Wolke Sieben 18.06.2011 Evgenij Terehov
  2. 2. EVGENIJ TEREHOV• Web-Developer seit 1999• Dipl.-Wirt.-Inf. (FH)• Consultant: EXXETA AG • Enterprise Integration Solutions: Web, Java, Portale (IBM WebSphere Portal), mobile• Website: www.terehov.de• Twitter: @EugeneTerehov• Mail: eugene [a t] terehov.de
  3. 3. MODEL VIEWCONTROLLER
  4. 4. VIEW
  5. 5. Backend Frontend Assoziationen:• Business $$ • "Frontendler"• Enterprise • Pixelschieber• Integration • HTML-frickler• Geschäftsprozesse • JS ist eine Kiddie-frickel-Sprache• HIER werden Mehrwerte geschaffen! • "Klicki-bunti"
  6. 6. RIA?Kein Mehrwert?
  7. 7. ÜBLICHES PROJEKTVORGEHEN Frontend Backend 100 75Oft wird das Frontend im letztenMoment "draufgeklatscht". 50 1 25 2 3 0 4 fiktive Zahlen
  8. 8. FORMFAKTOR
  9. 9. FORMFAKTOR ENTSCHEIDETHeute:Alles in Einem ...... und stets dabei.
  10. 10. ?Design & Technologie gehen Hand in Hand!
  11. 11. SO SOLLTE ES SEIN Frontend Backend 80Erste Fragen: 60- Was soll das Produkt können? 40- Wie wird der Benutzer es bedienen wollen? 1 20 2 3 0 4 fiktive Zahlen
  12. 12. LÖSUNG?
  13. 13. Web 2.0 = Desktop 1.0?
  14. 14. Kopieren?
  15. 15. Gedankenmodelldes Benutzers
  16. 16. Gedankenmodell Funktionsweise derdes Benutzers Applikation
  17. 17. NEUE TECHNOLOGIEN führen zuNEUEN KONZEPTEN!
  18. 18. Neue Technologien?
  19. 19. ZUKUNFTSMUSIK?
  20. 20. Auf die Browser kommt es an! Gecko Webkit TridentMozilla Firefox Apple Safari Internet Explorer Google Chrome Presto Opera
  21. 21. CLIENT STORAGE• Cookies haben viele Nachteile• Es gibt viele Ansätze: • localStorage (die meisten Browser; kein IE) • globalStorage (Firefox) • userData (Internet Explorer) • Google Gears (Google Chrome) • webSQL (viele Browser; kein IE; langsam) jStorage Example: set:• Lösung: Abstraktion! $.jStorage.set(key, value); get: • z.B. Lawnchair.js oder jStorage var value = $.jStorage.get(key); delete: $.jStorage.deleteKey(key); • alle aktuellen Browser werden unterstützt flush: $.jStorage.flush(); • Einheitliche und einfache API
  22. 22. WEB SOCKETS• ! ushing P statt Polling• ! as D Gefühl einer "echten" Anwendung• ! uss M vom Server und Client unterstützt werden• ! ösung: Abstraktion! L • Socket.IO • Desktop: IE >= 5.5; Safari >= 3; FF >= 3; • mobile: iPhone; iPod; Android • www.socket.io
  23. 23. MODEL
  24. 24. NOSQL• ! luster C of unreliable commodity hardware Data Base CouchDB relax •= Datenbank auf einem Cluster aus unzuverlässiger Standardhardware• Dokumentenorientiert• JSON / REST• leichte Replikation• CouchAPPS (HTML / JavaScript Apps) • DB mit eingebauten Web-Server
  25. 25. NOSQL CouchDB relax
  26. 26. CONTROLLER
  27. 27. »Ev ery app lic at JAVASCRIPT will ion ev that e n tu c an ally be w be w ritte ritte n in n in J av a J av a scrip scrip t t« *• HTML5 basiert auf JavaScript!• CouchDB basiert auf JavaScript!• meistverbreitete Sprache der Welt• extrem flexibel• bald auch die mächtigste Sprache der Welt ;-) www.promotejs.com * http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
  28. 28. JAVASCRIPT
  29. 29. s?JAVASCRIPT IN BACKEND you n ut A re
  30. 30. JAVASCRIPT IN BACKEND• One Stack World! • eine Technologie • Write once run everywhere. • besseres Debugging!• Besonderheiten von JS nutzen!
  31. 31. JAVASCRIPT IN BACKEND• server side JS »To infra prov stru ide• basiert auf V8 c tu r a pu e to rely scrip ev e t hig nted• Event-driven, nicht-blockierende I/O hly c , no n-bl onc oc k i urre ng nt p• CommonJS module system rogr ams .«• C/C++ & JavaScript
  32. 32. JAVASCRIPT IN BACKEND • I/O Kosten: • L1: 3 Zyklen • L2: 14 Zyklen• I/O muss anders geschehen als so: • RAM: 250 Zyklen var result = db.query("select * from T"); • Disk: 41.000.000 Zyklen // use result • Netzwerk: 240.000.000 Zyklen• Programm wartet auf DB!• Besser: db.query("select..", function (result) { // use result });
  33. 33. JAVASCRIPT IN BACKENDEvent-driven statt multi-threaded: • Context-switch ist nicht kostenlos • Jeder Thread-Stack braucht seperat Speicher
  34. 34. JAVASCRIPT AUF WOLKE 7• Basiert auf node.js und HTML• Zusammengeführt aus • Cloud9 • Mozilla Bespin (Skywriter)• Frontend & Backend Entwicklung (node.jS)• Mächtiges Debugging-Tool
  35. 35. JAVASCRIPT AUF WOLKE 7
  36. 36. JAVASCRIPT AUF WOLKE 7
  37. 37. MOBILE"PhoneGap is an open source development framework for buildingcross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs."
  38. 38. webOS
  39. 39. UND WAS IST MIT DESKTOP 1.0?
  40. 40. DESKTOP 2.0!
  41. 41. DESKTOP Chrome OS• Es geht auch andersrum? • Oh Ja!• z.B. Jollycloud • das OS aus der Wolke!
  42. 42. Kiddie-frickel-Sprache?
  43. 43. AJAXINTERFACE Standardisierter Ansatz
  44. 44. JAVASCRIPTBrowser jQuery DOM tree
  45. 45. JAVASCRIPT jQuery.ajaxInterfaceBrowser jQuery DOM tree
  46. 46. JAVASCRIPT jQuery.ajaxInterface Magie <?xml?> ReturnBrowser jQuery DOM tree
  47. 47. AJAXINTERFACE: MÖGLICHKEITEN 5 4 3Aktion 2 1 0 0 1 2 3 4 5 6 7 8 9 10 Zeit t
  48. 48. BEISPIEL <?xml version="1.0"?> <jquery> <setTitle>new page title</setTitle> <setSelector value="div#main"> <html action="replace"> <![CDATA[ <h1> New Page Content </h1> ]]> </html> ! </setSelector> </jquery>Abwärtskompatibilität: Der Server erzeugt ajaxInterface XML statt HTML, wenn "ajaxInterface=true" gesetzt ist.
  49. 49. AJAXINTERFACE: ROADMAP• Entwicklung eines ajaxInterface-Servers (node.JS) • automatische Zustandshaltung • JavaScript Template-Engine • Abwärtskompatibilität (history.pushState()) • WebSockets (Socket.IO) • MVC im Browser / Server
  50. 50. VIELEN DANK! Fragen?Evgenij Terehov | twitter: @EugeneTerehov | www.terehov.de https://github.com/terehov/jQuery.ajaxInterface

×