sábado, 5 de noviembre de 2011

Herramientas para facilitar el desarrollo con node.js

Hoy estoy comenzando un pequeño ejercicio consistente en programar una pequeña aplicación web en node.js que optimice imágenes en formato png.

La idea es tener un formulario con el que se suba una imagen en formato png y se optimice con un optipng o alguna librería parecida. Si además, podemos ir informando al cliente del avance del proceso de upload y optimización en tiempo real, pues mejor que mejor.

En el ejercicio me gustaría probar las siguientes herramientas:
De momento, os presento unos ejemplos de como se usan las herramientas. En los siguientes posts iré contando los avances que haga en el ejercicio y como iré usando las distintas piezas (con más o menos acierto).

Express.js
Resulta muy cómodo para responder a urls amigables y agregar middleware:


var app = require('express').createServer();

//middleware para logs
app.use(express.logger({ format: ':method :url' }));

app.get('/', function(req, res){
  res.send('Hola mundo');
});

//urls amigables con parámetros
app.get('/usuario/:id', function(req, res){
    res.send('Usuario ' + req.params.id);
});

app.listen(8000);

Jade
Al más puro estilo haml, una plantilla como

!!! 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      - if (youAreUsingJade)
        p You are amazing
      - else
        p Get on it!

pasa a ser

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript"> 
      if(foo) {
        bar()
      }
    </script> 
  </head> 
  <body>
    <h1>Jade - node template engine</h1> 
    <div id="container"> 
      <p>You are amazing</p>
    </div> 
  </body>
</html>


Connect-form
Para gestionar  los uploads de ficheros (para una app de express):

  app.post('/', function(req, res, next){
  // connect-form adds the req.form object
  // we can (optionally) define onComplete, passing
  // the exception (if any) fields parsed, and files parsed
  req.form.complete(function(err, fields, files){
    if (err) {
      next(err);
    } else {
      console.log('\nuploaded %s to %s'
      ,  files.image.filename
      , files.image.path);
     res.redirect('back');
    }
  });

  // We can add listeners for several form
  // events such as "progress"
  req.form.on('progress', function(bytesReceived, bytesExpected){
    var percent = (bytesReceived / bytesExpected * 100) | 0;
     process.stdout.write('Uploading: %' + percent + '\r');
  });
});




Socket.io
La gestión de las comunicaciones entre cliente y servidor se realiza en base a eventos.

En el servidor:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

En el cliente:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

No hay comentarios:

Publicar un comentario