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

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

on

  • 24,732 views

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

Statistics

Views

Total Views
24,732
Views on SlideShare
11,288
Embed Views
13,444

Actions

Likes
4
Downloads
54
Comments
1

25 Embeds 13,444

http://blog.ginader.de 13243
http://www.webkrauts.de 49
http://localhost:8888 36
http://abtasty.com 28
http://www.blog.ginader.de 21
http://feeds.feedburner.com 18
http://webkrauts.de 12
http://translate.googleusercontent.com 8
http://lanyrd.com 5
http://ranksit.com 3
http://cloud.feedly.com 2
http://prlog.ru 2
https://translate.googleusercontent.com 2
http://web-krauts.de 2
http://wk7.textformer.com 2
http://coderwall.com 2
http://10.52.63.121 1
http://static.slidesharecdn.com 1
https://www.google.at 1
http://www.linkedin.com 1
http://www.netzartist.de 1
http://www.ngo-online.de HTTP 1
http://ginader.de&_=1373227317664 HTTP 1
http://webcache.googleusercontent.com 1
http://ginader.de.netzcheck.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 Worldn'); }).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 Worldn'); }).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 Worldn'); }).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 Worldn'); }).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 Worldn'); }).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 Worldn'); }).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.js statt $ 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 ./configure make 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.js starke Community!
  • Danke :-) • http://ginader.de • @ginader • http://www.slideshare.net/ginader • http://speakerrate.com/speakers/ 225-ginader