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