System is processing data
Please download to view
...

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

by dirk-ginader

on

Report

Category:

Technology

Download: 0

Comment: 0

26,505

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