BarCamp Karlsruhe 18.06.2011

1,565 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,565
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×