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

1. BARCAMP KARLSRUHE
Wie ein Phönix aus der Asche:
JavaScript und die vernetzte Zukunft auf Wolke Sieben
18.06.2011
Evgenij Terehov

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. MODEL
VIEW
CONTROLLER

4. VIEW

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. RIA?
Kein Mehrwert?

7. ÜBLICHES PROJEKTVORGEHEN
Frontend Backend
100
75
Oft wird das Frontend im letzten
Moment "draufgeklatscht".
50
1 25
2
3 0
4
fiktive Zahlen

8. FORMFAKTOR

9. FORMFAKTOR ENTSCHEIDET
Heute:
Alles in Einem ...
... und stets dabei.

11. ?
Design & Technologie gehen Hand in Hand!

12. SO SOLLTE ES SEIN
Frontend Backend
80
Erste Fragen:
60
- Was soll das Produkt können?
40
- Wie wird der Benutzer es bedienen wollen?
1 20
2
3 0
4
fiktive Zahlen

13. LÖSUNG?

15. Web 2.0 = Desktop 1.0?

16. Kopieren?

18. Gedankenmodell
des Benutzers

19. Gedankenmodell Funktionsweise der
des Benutzers Applikation

20. NEUE TECHNOLOGIEN
führen zu
NEUEN KONZEPTEN!

23. Neue Technologien?

26. ZUKUNFTSMUSIK?

27. Auf die Browser kommt es an!
Gecko Webkit Trident
Mozilla Firefox Apple Safari Internet Explorer
Google Chrome
Presto
Opera

28. 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

29. 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

30. MODEL

31. 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

32. NOSQL
CouchDB relax

33. CONTROLLER

34. »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

35. JAVASCRIPT

36. s?
JAVASCRIPT IN BACKEND you n ut
A re

37. JAVASCRIPT IN BACKEND
• One Stack World!
• eine Technologie
• Write once run everywhere.
• besseres Debugging!
• Besonderheiten von JS nutzen!

38. 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

39. 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 });

40. JAVASCRIPT IN BACKEND
Event-driven statt multi-threaded:
• Context-switch ist nicht kostenlos
• Jeder Thread-Stack braucht seperat Speicher

41. 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

42. JAVASCRIPT AUF WOLKE 7

43. JAVASCRIPT AUF WOLKE 7

44. MOBILE
"PhoneGap is an open source development framework for building
cross-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."

45. webOS

46. UND WAS IST MIT DESKTOP 1.0?

47. DESKTOP 2.0!

48. DESKTOP
Chrome OS
• Es geht auch andersrum?
• Oh Ja!
• z.B. Jollycloud
• das OS aus der Wolke!

49. Kiddie-frickel-Sprache?

50. AJAXINTERFACE
Standardisierter Ansatz

51. JAVASCRIPT
Browser
jQuery
DOM tree

52. JAVASCRIPT
jQuery.ajaxInterface
Browser
jQuery
DOM tree

53. JAVASCRIPT
jQuery.ajaxInterface
Magie
<?xml?>
Return
Browser
jQuery
DOM tree

54. AJAXINTERFACE: MÖGLICHKEITEN
5
4
3
Aktion
2
1
0
0 1 2 3 4 5 6 7 8 9 10
Zeit t

55. 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.

56. 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

57. VIELEN DANK!
Fragen?
Evgenij Terehov | twitter: @EugeneTerehov | www.terehov.de
https://github.com/terehov/jQuery.ajaxInterface