Post on 10-May-2015
description
Dirk Ginader | Yahoo! Inc.
Javascript auf Client UND Server
warum JS auf dem Server?
• Web Developer mögen Javascript
• Javascript Frameworks• Code nur einmal schreiben
• Progressive Enhancement einfach so!
• node.js
node.js
• Javascript auf dem Server
• V8 Engine (rockt googles Chrome)• blockt nicht
• statt dessen alles auf Event Basis
• CommonJS• fantastisch schnell!
nodejs.org
“Node's goal is to provide an easy way to build scalable network programs”
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
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!
Logik nur einmal schreiben!
• Wenn man progressive enhancement ernst nimmt schreibt man viel Business und Renderlogik zweimal
Logik nur einmal schreiben!
• Currency Converter– http://finance.yahoo.com/currency-
converter/– damals Javascript + PHP
– 2x Logik Konvertierung– 2x Rendering
– Rundungsfehler!
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
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Erste Schritte
var http = require('http');
http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
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!
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(){ … })});
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!?
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
Examples
•Socket Chat
•Swarmation: http://swarmation.com/
•moving cursors: http://jeffkreeftmeijer.com/2010/experimenting-with-node-js/
•hummingbird: http://projects.nuttnet.net/hummingbird/
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 ...
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
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
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?
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();
DOM mit YUI3
•Kann genau das!
•http://express.davglass.com/
•http://github.com/davglass/yui-express
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'); } } });});
YUI/Express JS Demo
Form Validation Demo
DOM mit YUI3
•Form Validation
•Client und Server ein YUI3 Modul
•http://github.com/ginader/yui-express
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());});
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.jsstatt $ node server.js
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
•...
npm
• Isaac Z. Schlueter
• http://npmjs.org/• einfacher Package Manager
• $ npm install yui3
• $ npm update yui3• ...
Alternativen
• http://www.narwhaljs.org/
• http://www.ringojs.org/• http://www.mozilla.org/rhino/
• ...
installation
git clone git://github.com/ry/node.git
./configuremake
make install
node server.js
no.de
• einfache Alternative
• kostenlos• (beta)
• git remote– push = deploy
• https://no.de/
• http://www.joyent.com
Hilfe
• http://nodejs.org
• http://code.google.com/p/git-osx-installer/
• http://no.de/
• irc.freenode.net #node.jsstarke Community!
Danke :-)
• http://ginader.de
• @ginader• http://www.slideshare.net/ginader
• http://speakerrate.com/speakers/225-ginader