• 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 easyway to build scalable networkprograms”
  • 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 Servervar 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 Browserauf 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 dieNavigation 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./configuremakemake 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
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    Javascript auf Client und Server mit node.js - webtech 2010

    by dirk-ginader

    on

    Report

    Category:

    Technology

    Download: 0

    Comment: 0

    26,503

    views

    Comments

    Description

    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 :-)
    Download Javascript auf Client und Server mit node.js - webtech 2010

    Transcript

    • 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 easyway to build scalable networkprograms”
  • 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 Servervar 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 Browserauf 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 dieNavigation 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./configuremakemake 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
  • Fly UP