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