nodejs+express+ejs.pdf

5/28/2018 nodejs+express+ejs.pdf

1/46

SERGIO GARCA MONDARAY

APLICACIONES WEB CON

NODEJS + EXPRESS + EJS


2/46

Tipos de aplicaciones webNodeJSExpressEJSPatrones habituales

APLICACIONES WEB CON

NODEJS + EXPRESS + EJS

Contenido


3/46

SPA

TIPOS DE

APLICACIONES WEB/ PAGE-REDRAW


4/46

TIPOS DEAPLICACIONES WEB

PAGE-REDRAW(multi-page)

SPA

(single-page)


5/46


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.

PAGE-REDRAW


6/46


PAGE-REDRAW

CLIENTE SERVIDOR

GET

HTML

form POSTHTML

Refr

esh


7/46


PAGE-REDRAW

CLIENTE SERVIDOR

GET

HTML

Ajax POST


8/46


PAGE-REDRAW

CLIENTE SERVIDOR

GET

HTML

GETHTML

Refr

esh


9/46


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

SPA (SINGLE-PAGE APP.)


10/46


SPA (SINGLE-PAGE APP.)

CLIENTE SERVIDOR

GET

HTML

GET/POST/PUT

JSON

RefreshNEVER


11/46


PARA HOY:

PAGE-REDRAW


12/46

NODE JSJAVASCRIPT EN EL SERVIDOR


13/46

Javascript en el servidorJavascript autnomoPeticiones: mejor muchas pequeas que pocasgrandesSingle-ThreadOrientado a eventos (no bloqueante)

NODE JS


14/46

NODE JS


15/46

NODE JS

Ejecucin normal


16/46

NODE JS

Ejecucin en cluster


17/46

Hello worldServidor bsico con NodeJS

$ curl localhost:3000Hello world

NODE JS


18/46

EXPRESSHTTP PARA SERES HUMANOS


19/46

EXPRESS

Framework web para NodeJSInspirado en SinatraDependiente de ConnectPara webs SPA o Multi-pagePerfecto para APIsEs una capa fina

Express 4.0+no dependerde Connect

Qu es?


20/46

EXPRESS

Popularidad


21/46

EXPRESS

En el mundo real

MySpaceLearnBoostPersona (Mozilla)CozyApiary.io+26k aplicaciones web


22/46

Hello world

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);

Servidor bsico con Express

EXPRESS

$ curl localhost:3000Hello world


23/46

Servir archivos estticos

EXPRESS

app.js

public/hello.txt


24/46

Body

EXPRESS


25/46

Body

HTTP 200 Content-Length Content-Type:

JSON

EXPRESS


26/46

Query

EXPRESS


27/46

Params

EXPRESS


28/46

EJSHTML PROGRAMADO


29/46

EXPRESS

Sistema de plantillas HTMLUtiliza Javascript para programar el HTMLEn cliente y en servidor

Qu es?


30/46

Hello worldServidor 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);

$ curl localhost:3000Hello

world

app.js bash

views/index.ejs

EJS


31/46

Reemplazo por valor, escapado. Para tipos bsicos.

$ curl http://localhost:3000hello

views/index.ejs bash

EJS

...res.render('index', {

title: hello

});...

app.js


32/46

Reemplazo por valor, escapado. Para tipos bsicos.

$ curl http://localhost:3000a < b


EJS


title: a < b

});...

app.js


33/46

Reemplazo por valor, literal. Para tipos bsicos.



EJS


title: a < b

});...

app.js


34/46

Cdigo JS crudo, para ser ejecutado.

$ curl http://localhost:3000


EJS


title: a < b

});...

app.js


35/46


hola



EJS


title: a < b

});...

app.js


36/46


hello

$ curl http://localhost:3000hello 2


EJS


title: a < b

});...

app.js


37/46

ASPECTOS AVANZADOSPATRONES HABITUALES


38/46

Control de accesoDisposicin de rutas

Esquema tpico de una aplicacinModelo compartido

PATRONES HABITUALES


39/46

Control de acceso (con clave)

PATRONES HABITUALES


40/46

PATRONES HABITUALES

Control de acceso (con sesiones)


41/46

Disposicin de rutas

PATRONES HABITUALES

app.js

routes/sample.js


42/46

Esquema de una aplicacin

PATRONES HABITUALES

Estticos

Rutas

Vistas


43/46

Modelo compartido

PATRONES HABITUALES

model/Persona.js


44/46

Modelo compartido

PATRONES HABITUALES

app.js


45/46

Modelo compartido

PATRONES HABITUALES

public/model.html


46/46

GRACIASPOR SU ATENCIN

SERGIO GARCA MONDARAY@sgmonda

https://github.com/[email protected]

nodejs+express+ejs.pdf

Documents

Transcript of nodejs+express+ejs.pdf