APLICACIONES WEB CON

NODEJS + EXPRESS + EJS

SERGIO GARCA 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 clsico del desarrollo web: el cliente
solicita pginas y el servidor las construye.

Los navegadores web fueron diseados para este

tipo de aplicaciones.

Son perfectas para SEO (Search Engine

Optimization).

Hay muchos lenguajes y frameworks diseados

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 pgina
una sola vez.

El resto de peticiones (Ajax/Websockets) no devuelven

HTML.

Mayor lgica en el lado del cliente.

Los navegadores web no estn 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 autnomo

Peticiones: mejor muchas pequeas que pocas

grandes

Single-Thread

Orientado a eventos (no bloqueante)

NODE JS

NODE JS

Ejecucin normal

NODE JS

Ejecucin en cluster

NODE JS
Hello world
Servidor bsico 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 bsico 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 estticos

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 bsico 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 bsicos.

...
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 bsicos.

...
res.render('index', {
title: a < b
});
...

app.js
<h1>
<%= title %>
</h1>

views/index.ejs

$ curl http://localhost:3000

!
<h1>a &lt; b</h1>

bash

EJS

<%- %>

Reemplazo por valor, literal. Para tipos bsicos.

...
res.render('index', {
title: a < b
});
...

app.js
<h1>
<%- title %>
</h1>

views/index.ejs

$ curl http://localhost:3000

!
<h1>a < b</h1>

bash

EJS

<% %>

Cdigo 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

<% %>

Cdigo 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

<% %>

Cdigo 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

Disposicin de rutas

Esquema tpico de una aplicacin

Modelo compartido

PATRONES HABITUALES
Control de acceso (con clave)

PATRONES HABITUALES
Control de acceso (con sesiones)

PATRONES HABITUALES
Disposicin de rutas

app.js

routes/
sample.js

PATRONES HABITUALES
Esquema de una aplicacin

Estticos
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 ATENCIN

SERGIO GARCA MONDARAY

@sgmonda
https://github.com/sgmonda
sgmonda@gmail.com