APLICACIONES WEB CON
NODEJS + EXPRESS + EJS
SERGIO GARCÍA GA RCÍ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 f R e
form POST HTML
SERVIDOR
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW GET HTML CLIENTE
Ajax POST
SERVIDOR
TIPOS DE
APLICACIONES WEB
PAGE-REDRAW GET HTML CLIENTE h s e r f R e
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
<%= title %>
<%= text %>
views/index.ejs $ curl “localhost: 3000”
Hello
world
bash
EJS
<%= … %> Reemplazo por valor, escapado. Para tipos básicos. ... res.render('index', { title: ‘hello’ }); ...
app.js
<%= title %>
views/index.ejs
$ curl “http://localhost:3000”
hello
bash
EJS
<%= … %> Reemplazo por valor, escapado. Para tipos básicos. ... res.render('index', { title: ‘a < b’ }); ...
app.js
<%= title %>
views/index.ejs
$ curl “http://localhost:3000”
a < b
bash
EJS
<%- … %> Reemplazo por valor, literal. Para tipos básicos. ... res.render('index', { title: ‘a < b’ }); ...
app.js
<%- title %>
views/index.ejs
$ curl “http://localhost:3000”
a < b
bash
EJS
<% … %> Código JS crudo, para ser ejecutado. ... res.render('index', { title: ‘a < b’ }); ...
app.js
<% title %>
views/index.ejs
$ curl “http://localhost:3000”
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