aplicaciones web con

APLICACIONES WEB CON
NODEJS + EXPRESS + EJS
SERGIO GARCÍA MONDARAY
APLICACIONES WEB CON
NODEJS + EXPRESS + EJS
Contenido
Tipos de aplicaciones web
NodeJS
Express
EJS
Patrones habituales
TIPOS DE
APLICACIONES WEB
SPA / PAGE-REDRAW
TIPOS DE
APLICACIONES WEB
SPA
(single-page)
PAGE-REDRAW
(multi-page)
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW
Enfoque clásico del desarrollo web: el cliente
solicita páginas y el servidor las construye.
Los navegadores web fueron diseñados para este
tipo de aplicaciones.
Son perfectas para SEO (Search Engine
Optimization).
Hay muchos lenguajes y frameworks diseñados
para construir este tipo de aplicaciones.
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW
GET
HTML
CLIENTE
h
s
e
r
ef
R
form POST
HTML
SERVIDOR
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW
GET
HTML
CLIENTE
SERVIDOR
Ajax POST
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW
GET
HTML
CLIENTE
h
s
e
r
ef
R
GET
HTML
SERVIDOR
TIPOS DE
APLICACIONES WEB
SPA (SINGLE-PAGE APP.)
Enfoque moderno: el cliente solicita una única página
una sola vez.
El resto de peticiones (Ajax/Websockets) no devuelven
HTML.
Mayor lógica en el lado del cliente.
Los navegadores web no están tan preparados.
Empiezan a surgir frameworks SPA, como AngularJS,
Ember, Meteor…
TIPOS DE
APLICACIONES WEB
SPA (SINGLE-PAGE APP.)
GET
HTML
CLIENTE
Refresh
NEVER
GET/POST/PUT
JSON
SERVIDOR
TIPOS DE
APLICACIONES WEB
PARA HOY:
PAGE-REDRAW
NODE JS
JAVASCRIPT EN EL SERVIDOR
NODE JS
Javascript en el servidor
Javascript autónomo
Peticiones: mejor muchas pequeñas que pocas
grandes
Single-Thread
Orientado a eventos (no bloqueante)
NODE JS
NODE JS
Ejecución normal
NODE JS
Ejecución en cluster
NODE JS
Hello world
Servidor básico con NodeJS
$ curl “localhost:3000”
Hello world
EXPRESS
HTTP PARA SERES HUMANOS
EXPRESS
¿Qué es?
Framework web para NodeJS
Inspirado en Sinatra
Dependiente de Connect
Para webs SPA o Multi-page
Perfecto para APIs
Es una capa fina
Express 4.0+
no dependerá
de Connect
EXPRESS
Popularidad
EXPRESS
En el mundo real
MySpace
LearnBoost
Persona (Mozilla)
Cozy
Apiary.io
+26k aplicaciones web
EXPRESS
Hello world
Servidor básico con Express
var express = require('express');
var http = require('http');
var app = express();
!
app.get('/', function (req, res) {
res.send(‘Hello world’);
});
!
http.createServer(app).listen(3000);
$ curl “localhost:3000”
Hello world
EXPRESS
Servir archivos estáticos
app.js
public/hello.txt
EXPRESS
Body
EXPRESS
Body
• HTTP 200
• Content-Length
• Content-Type:
JSON
EXPRESS
Query
EXPRESS
Params
EJS
HTML PROGRAMADO
EXPRESS
¿Qué es?
Sistema de plantillas HTML
Utiliza Javascript para programar el HTML
En cliente y en servidor
EJS
Hello world
Servidor básico con Express + EJS
var express = require('express');
var http = require('http');
var app = express();
app.set('view engine', 'ejs');
!
app.get('/', function (req, res) {
res.render('index', {
title: ‘Hello',
text: ‘world'
});
});
!
http.createServer(app).listen(3000);
app.js
<h1>
<%= title %>
</h1>
<p>
<%= text %>
</p>
views/index.ejs
$ curl “localhost:
3000”
<h1>Hello</h1>
<p>world</p>
bash
EJS
<%= … %>
Reemplazo por valor, escapado. Para tipos básicos.
...
res.render('index', {
title: ‘hello’
});
...
app.js
<h1>
<%= title %>
</h1>
views/index.ejs
$ curl “http://localhost:3000”
!
<h1>hello</h1>
bash
EJS
<%= … %>
Reemplazo por valor, escapado. Para tipos básicos.
...
res.render('index', {
title: ‘a < b’
});
...
app.js
<h1>
<%= title %>
</h1>
views/index.ejs
$ curl “http://localhost:3000”
!
<h1>a < b</h1>
bash
EJS
<%- … %>
Reemplazo por valor, literal. Para tipos básicos.
...
res.render('index', {
title: ‘a < b’
});
...
app.js
<h1>
<%- title %>
</h1>
views/index.ejs
$ curl “http://localhost:3000”
!
<h1>a < b</h1>
bash
EJS
<% … %>
Código JS crudo, para ser ejecutado.
...
res.render('index', {
title: ‘a < b’
});
...
app.js
<h1>
<% title %>
</h1>
views/index.ejs
$ curl “http://localhost:3000”
!
<h1></h1>
bash
EJS
<% … %>
Código JS crudo, para ser ejecutado.
...
res.render('index', {
title: ‘a < b’
});
...
<% if (false) { %>
hola
<% } else { %>
<%- title %>
<% } %>
views/index.ejs
app.js
$ curl “http://localhost:3000”
!
a < b
bash
EJS
<% … %>
Código JS crudo, para ser ejecutado.
...
res.render('index', {
title: ‘a < b’
});
...
app.js
<% var a = 2; %>
hello <%- a %>
$ curl “http://localhost:3000”
!
hello 2
views/index.ejs
bash
ASPECTOS AVANZADOS
PATRONES HABITUALES
PATRONES HABITUALES
Control de acceso
Disposición de rutas
Esquema típico de una aplicación
Modelo compartido
PATRONES HABITUALES
Control de acceso (con clave)
PATRONES HABITUALES
Control de acceso (con sesiones)
PATRONES HABITUALES
Disposición de rutas
app.js
routes/
sample.js
PATRONES HABITUALES
Esquema de una aplicación
Estáticos
Rutas
Vistas
PATRONES HABITUALES
Modelo compartido
model/Persona.js
PATRONES HABITUALES
Modelo compartido
app.js
PATRONES HABITUALES
Modelo compartido
public/model.html
GRACIAS
POR SU ATENCIÓN
SERGIO GARCÍA MONDARAY
@sgmonda
https://github.com/sgmonda
sgmonda@gmail.com