Node.js MVC:Express.js + Derby.js Tutorial de Hello World

DerbyJS:marco MVC de Node.js

Express.js es un marco de nodo popular que utiliza el concepto de middleware para mejorar la funcionalidad de las aplicaciones. Derby es un nuevo marco sofisticado de Model View Controller (MVC) que está diseñado para usarse con Express como su middleware. Derby también incluye compatibilidad con Racer, un motor de sincronización de datos y un motor de plantillas tipo Handlebars, entre muchas otras funciones.

Instalación de Derby.js

Configuremos una arquitectura de aplicación Derby básica sin el uso de scaffolding. Por lo general, los generadores de proyectos son confusos cuando las personas recién comienzan a aprender un nuevo marco integral. Este es un tutorial mínimo de la aplicación "Hello World" que todavía ilustra el esqueleto de Derby y muestra plantillas en vivo con websockets.

Por supuesto, necesitaremos Node.js y NPM, que se pueden obtener en nodejs.org. Para instalar derby globalmente ejecute:

$ npm install -g derby

Para comprobar la instalación:

$ derby -V

Mi versión a partir de abril de 2013 es 0.3.15. ¡Deberíamos estar listos para crear nuestra primera aplicación!

Estructura de archivos en una aplicación Derby.js

Esta es la estructura de carpetas del proyecto:

project/
  -package.json
  -index.js
  -derby-app.js
  views/
    derby-app.html
  styles/
    derby-app.less

Dependencias para el proyecto Derby.js

Incluyamos dependencias y otra información básica en package.json archivo:

 {
  "name": "DerbyTutorial",
  "description": "",
  "version": "0.0.0",
  "main": "./server.js",
  "dependencies": {
    "derby": "*",
    "express": "3.x"
  },
  "private": true
}

Ahora podemos ejecutar npm install que descargará nuestras dependencias en node_modules carpeta.

Vistas en Derby.js

Las vistas deben estar en vistas y deben estar en index.html en una carpeta que tiene el mismo nombre que el archivo JavaScript de su aplicación derby, es decir, views/derby-app/index.html , o estar dentro de un archivo que tenga el mismo nombre que el archivo JS de la aplicación derby, es decir, derby-app.html .

En este ejemplo de la aplicación "Hello World", usaremos <Body:> plantilla y {message} variable. Derby utiliza una sintaxis similar a la de un manillar de bigote para el enlace reactivo. index.html se parece a esto:

<Body:>
  <input value="{message}"><h1>{message}</h1>

Lo mismo con los archivos Stylus/LESS, en nuestro ejemplo index.css tiene solo una línea:

h1 {
  color: blue;
}

Para obtener más información sobre estos maravillosos preprocesadores de CSS, consulte la documentación en Stylus y LESS.

Construyendo el Servidor Principal Derby.js

index.js es nuestro archivo de servidor principal, y lo comenzamos con una inclusión de dependencias con require() función:

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

La última línea es nuestro archivo de aplicación derby derby-app.js .

Ahora estamos creando la aplicación Express.js (v3.x tiene diferencias significativas entre 2.x) y un servidor HTTP:

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

var expressApp = new express(),
  server = http.createServer(expressApp);

Derby usa la biblioteca de sincronización de datos Racer que creamos así:

var store = derby.createStore({
  listen: server
});

Para obtener algunos datos desde el back-end hasta el front-end, creamos una instancia del objeto modelo:

var model = store.createModel();

Lo más importante es que necesitamos pasar el modelo y las rutas como middlewares a la aplicación Express.js. Necesitamos exponer la carpeta pública para que socket.io funcione correctamente.

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

Ahora podemos iniciar el servidor en el puerto 3001 (o cualquier otro):

server.listen(3001, function(){
  model.set('message', 'Hello World!');
});

Código completo de index.js archivo:

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

var expressApp = new express(),
  server = http.createServer(expressApp);

var store = derby.createStore({
  listen: server
});

var model = store.createModel();

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

server.listen(3001, function(){
  model.set('message', 'Hello World!');
});

Aplicación Derby.js

Finalmente, el archivo de la aplicación Derby que contiene el código tanto para el front-end como para el back-end. El código de solo front-end está dentro de app.ready() llamar de vuelta. Para comenzar, solicitemos y creemos una aplicación. Derby usa una construcción inusual (no el mismo viejo module.exports = app familiar ):

var derby = require('derby'),
  app = derby.createApp(module);

Para hacer que la magia de socket.io funcione, necesitamos suscribir el atributo del modelo a su representación visual, en otras palabras, enlazar datos y ver. Podemos hacerlo en la ruta raíz, y así es como lo definimos (el patrón es / , también conocido como root):

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();  
  })  
});

Código completo de derby-app.js archivo:

var derby = require('derby'),
  app = derby.createApp(module);

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();  
  })  
});  

Lanzamiento de la aplicación Hello World

Ahora todo debería estar listo para arrancar nuestro servidor. Ejecutar node . o node index.js y abra un navegador en http://localhost:3001. Debería poder ver algo como esto:http://cl.ly/image/3J1O0I3n1T46.

Pasar valores al back-end en Derby.js

Por supuesto, los datos estáticos no son muchos, por lo que podemos modificar ligeramente nuestra aplicación para que las piezas de back-end y front-end hablen entre sí.

En el archivo del servidor index.js añadir store.afterDb para escuchar set eventos en message atributo:

server.listen(3001, function(){
  model.set('message', 'Hello World!');
  store.afterDb('set','message', function(txn, doc, prevDoc, done){
    console.log(txn)
    done();
  }) 
});

Código completo de index.js después de las modificaciones:

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

var expressApp = new express(),
  server = http.createServer(expressApp);

var store = derby.createStore({
  listen: server
});

var model = store.createModel();

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

server.listen(3001, function(){
  model.set('message', 'Hello World!');
  store.afterDb('set','message', function(txn, doc, prevDoc, done){
    console.log(txn)
    done();
  })   
});

En el archivo de la aplicación Derby derby-app.js añadir model.on() a app.ready() :

  app.ready(function(model){
	    model.on('set', 'message',function(path, object){
	    console.log('message has been changed: '+ object);
	  })
  });

derby-app.js completo archivo después de las modificaciones:

var derby = require('derby'),
  app = derby.createApp(module);

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();
  })
});

app.ready(function(model) {
  model.on('set', 'message', function(path, object) {
    console.log('message has been changed: ' + object);
  })
});

Ahora veremos los registros tanto en la ventana de la terminal como en la consola de herramientas para desarrolladores del navegador. El resultado final debería verse así en el navegador:http://cl.ly/image/0p3z1G3M1E2c, y así en la terminal:http://cl.ly/image/322I1u002n38.

Para obtener más magia en el área de persistencia, consulte la propiedad db de Racer. ¡Con él puedes configurar una sincronización automática entre las vistas y la base de datos!

Avíseme si está interesado en algún tema específico para futuras publicaciones en el blog y no olvide revisar mis libros de JavaScript:

  • Prototipos rápidos con JS:desarrollo ágil de JavaScript
  • Oh My JS:los mejores artículos de JavaScript

El código completo de todos los archivos en esta aplicación Express.js + Derby Hello World está disponible como resumen en https://gist.github.com/azat-co/5530311.