Your SlideShare is downloading. ×
Javascript auf Client und Server mit node.js - webtech 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

26,323
views

Published on

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 :-)

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 :-)

Published in: Technology

1 Comment
4 Likes
Statistics
Notes
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
26,323
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
54
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×