node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)

1. Dirk Ginader | Yahoo! Inc.
Javascript
auf Client UND Server

2. warum JS auf dem Server?
• Web Developer mögen Javascript
• Javascript Frameworks
• Code nur einmal schreiben
• Progressive Enhancement einfach
so!
• node.js

3. node.js
• Javascript auf dem Server
• V8 Engine (rockt googles Chrome)
• blockt nicht
• statt dessen alles auf Event Basis
• CommonJS
• fantastisch schnell!

4. nodejs.org
“Node's goal is to provide an easy
way to build scalable network
programs”

5. blockt nicht?
• in PHP:
$query="SELECT * FROM foo WHERE bar='baz'";
$result=mysql_query($query);
// ... und dann wird gewartet...
DoSomethingElse(); // passiert später
• in node.js:
db.query("SELECT * FROM foo WHERE bar='baz'",
function (update, select) {
// callback wenn fertig
});
DoSomethingElse(); // passiert sofort

6. blockt nicht?
• bei einer Abfrage nicht so schlimm
• aber bei 10?
• oder bei 100?
• node macht alle Abfragen
gleichzeitig
• php wartet auf jede einzelne
nacheinander...
• VIEL schneller!

7. Logik nur einmal schreiben!
• Wenn man progressive enhancement
ernst nimmt schreibt man viel
Business und Renderlogik zweimal

8. Logik nur einmal schreiben!
• Currency Converter
– http://finance.yahoo.com/currency-
converter/
– damals Javascript + PHP
– 2x Logik Konvertierung
– 2x Rendering
– Rundungsfehler!

9. Logik nur einmal schreiben!
• Formular Validierung
– 2x Regular Expressions!
– 2x Fehlermeldungen!
– 2x komplexes Testen von Radio- und
Selectboxen
– Anzeigen der Fehler beim Feld ist
schmerzhaft auf dem Server

10. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

11. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

12. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

13. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

14. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

15. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');

16. node ist der Server!
• kein Apache!
•keine neue Instanz jedes mal...
• läuft ständig!
•kann persistente Daten halten!
•kann viele User gleichzeitig bedienen...
• ... und verbinden!

17. socket.io Server
var http = require('http'),
io = require('socket.io'),
server = http.createServer(function(req, res){
// hello world
});
var socket = io.listen(server);
socket.on('connection', function(client){
// neuer User!
client.on('message', function(){ … })
client.on('disconnect', function(){ … })
});

18. socket.io Client
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = new io.Socket({node_server_url});
socket.on('connect', function(){ … })
socket.on('message', function(){ … })
socket.on('disconnect', function(){ … })
</script>
• HTML5 Socket nur in Webkit!?

19. socket.io Client
• Supports
– WebSocket, Flash Socket, ActiveX
HTMLFile (IE), XHR with multipart
encoding, XHR with long-polling, JSONP
polling (for cross-domain)
• Tested on
– Safari 4, Google Chrome 5, Internet
Explorer 6, Internet Explorer 7, Internet
Explorer 8, iPhone Safari, iPad Safari,
Firefox 3, Firefox 4 (Minefield), Opera
10.61

20. Examples
• Socket Chat
• Swarmation: http://
swarmation.com/
• moving cursors: http://
jeffkreeftmeijer.com/2010/
experimenting-with-node-js/
• hummingbird: http://
projects.nuttnet.net/hummingbird/

21. express.js
• http://expressjs.com/
• Framework für node.js
• macht Application Entwicklung sehr
viel einfacher
• var app = express.createServer();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);
• url routing, static file server,
views ...

22. YUI3 auf node.js
• Dav Glass schaffte es als erster eine
Javascript Library auf node.js zu
bringen
• Die besondere Architektur von YUI3
machte das “ganz einfach”
• Auch YUI2 Module laufen jetzt auf
node (dank YUI2 in YUI3)
• Alle YUI3 Gallery Module
automatisch

23. EIN DOM AUF DEM SERVER!
• Dav Glass kombinierte
• http://github.com/tmpvar/jsdom
•um einen echten DOM wie im Browser
auf den Server zu bringen!
• http://github.com/tautologistics/
node-htmlparser
•für innerHTML Support
• fake window und document Objekte

24. Templating wie wir es kennen
<div id=‘header’>
<h1>{headline}</h1>
</div>
<div id=‘navigation’>
<ul>{nav}</ul>
</div>
<div id=‘content’>
{content}
</div>
... und jetzt muss auf einer Seite die
Navigation weg...
Neues Template?

25. Templating wie wir es wollen
<div id=‘header’>
<h1>My awesome Company</h1>
</div>
<div id=‘navigation’>
<ul>
<li class=‘home’><a href=”/”>Home</a></li>...
</ul>
</div>
<div id=‘content’>
<p>example content</p>
</div>
h1.html(‘hey!’);
content.addClass(‘active’);
navigation.remove();

26. DOM mit YUI3
• Kann genau das!
• http://express.davglass.com/
• http://github.com/davglass/yui-
express

27. DOM mit YUI3
app.get('/two', function(req, res){
res.render('same.html', {
locals: {
content: '#content',
sub: {
title: 'YUI/Express JS Demo'
},
before: function(Y) {
Y.one('h1').set('innerHTML', 'Welcome to Page #2');
},
after: function(Y, options, partial) {
Y.one('title').set('innerHTML', 'Page #2');
Y.all('#nav li.selected').removeClass('selected');
Y.one('#nav li.two').addClass('selected');
}
}
});
});

28. YUI/Express JS Demo

29. Form Validation Demo

30. DOM mit YUI3
• Form Validation
• Client und Server ein YUI3 Modul
• http://github.com/ginader/yui-
express

31. jQuery arbeitet auch daran
var jsdom = require("jsdom"),
window = jsdom.jsdom().createWindow(),
lib = "http://code.jquery.com/jquery-1.4.2.min.js";
jsdom.jQueryify(window, lib , function() {
window.jQuery('body')
.append(<div class='testing'>Hello World</div>");
console.log(window.jQuery(".testing").text());
});

32. nodemon autorestart
• node restart nach jeder Code
Änderung wird schnell “etwas
Anstrengend”...
• Remy Sharp fand das auch:
http://github.com/remy/nodemon
• nodemon macht das automatisch!
• $ nodemon server.js
statt
$ node server.js

33. CommonJS
• http://www.commonjs.org/
• Standard für Javascript Module mit
einheitlichem Interface
• erlaubt require(‘module’);
• Nicht nur node.js sondern auch
•couchDB
•Narwhal
•RingoJS
•...

34. npm
• Isaac Z. Schlueter
• http://npmjs.org/
• einfacher Package Manager
• $ npm install yui3
• $ npm update yui3
• ...

35. Alternativen
• http://www.narwhaljs.org/
• http://www.ringojs.org/
• http://www.mozilla.org/rhino/
• ...

36. installation
git clone git://github.com/ry/
node.git
./configure
make
make install
node server.js

37. no.de
• einfache Alternative
• kostenlos
• (beta)
• git remote
– push = deploy
• https://no.de/
• http://www.joyent.com

38. Hilfe
• http://nodejs.org
• http://code.google.com/p/git-osx-
installer/
• http://no.de/
• irc.freenode.net #node.js
starke Community!

39. Danke :-)
• http://ginader.de
• @ginader
• http://www.slideshare.net/ginader
• http://speakerrate.com/speakers/
225-ginader