View
36
Download
0
Category
Tags:
Preview:
Citation preview
5/28/2018 nodejs+express+ejs.pdf
1/46
SERGIO GARCA MONDARAY
APLICACIONES WEB CON
NODEJS + EXPRESS + EJS
5/28/2018 nodejs+express+ejs.pdf
2/46
Tipos de aplicaciones webNodeJSExpressEJSPatrones habituales
APLICACIONES WEB CON
NODEJS + EXPRESS + EJS
Contenido
5/28/2018 nodejs+express+ejs.pdf
3/46
SPA
TIPOS DE
APLICACIONES WEB/ PAGE-REDRAW
5/28/2018 nodejs+express+ejs.pdf
4/46
TIPOS DEAPLICACIONES WEB
PAGE-REDRAW(multi-page)
SPA
(single-page)
5/28/2018 nodejs+express+ejs.pdf
5/46
TIPOS DEAPLICACIONES WEB
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
5/28/2018 nodejs+express+ejs.pdf
6/46
TIPOS DEAPLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
form POSTHTML
Refr
esh
5/28/2018 nodejs+express+ejs.pdf
7/46
TIPOS DEAPLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
Ajax POST
5/28/2018 nodejs+express+ejs.pdf
8/46
TIPOS DEAPLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
GETHTML
Refr
esh
5/28/2018 nodejs+express+ejs.pdf
9/46
TIPOS DEAPLICACIONES WEB
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.)
5/28/2018 nodejs+express+ejs.pdf
10/46
TIPOS DEAPLICACIONES WEB
SPA (SINGLE-PAGE APP.)
CLIENTE SERVIDOR
GET
HTML
GET/POST/PUT
JSON
RefreshNEVER
5/28/2018 nodejs+express+ejs.pdf
11/46
TIPOS DEAPLICACIONES WEB
PARA HOY:
PAGE-REDRAW
5/28/2018 nodejs+express+ejs.pdf
12/46
NODE JSJAVASCRIPT EN EL SERVIDOR
5/28/2018 nodejs+express+ejs.pdf
13/46
Javascript en el servidorJavascript autnomoPeticiones: mejor muchas pequeas que pocasgrandesSingle-ThreadOrientado a eventos (no bloqueante)
NODE JS
5/28/2018 nodejs+express+ejs.pdf
14/46
NODE JS
5/28/2018 nodejs+express+ejs.pdf
15/46
NODE JS
Ejecucin normal
5/28/2018 nodejs+express+ejs.pdf
16/46
NODE JS
Ejecucin en cluster
5/28/2018 nodejs+express+ejs.pdf
17/46
Hello worldServidor bsico con NodeJS
$ curl localhost:3000Hello world
NODE JS
5/28/2018 nodejs+express+ejs.pdf
18/46
EXPRESSHTTP PARA SERES HUMANOS
5/28/2018 nodejs+express+ejs.pdf
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?
5/28/2018 nodejs+express+ejs.pdf
20/46
EXPRESS
Popularidad
5/28/2018 nodejs+express+ejs.pdf
21/46
EXPRESS
En el mundo real
MySpaceLearnBoostPersona (Mozilla)CozyApiary.io+26k aplicaciones web
5/28/2018 nodejs+express+ejs.pdf
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
5/28/2018 nodejs+express+ejs.pdf
23/46
Servir archivos estticos
EXPRESS
app.js
public/hello.txt
5/28/2018 nodejs+express+ejs.pdf
24/46
Body
EXPRESS
5/28/2018 nodejs+express+ejs.pdf
25/46
Body
HTTP 200 Content-Length Content-Type:
JSON
EXPRESS
5/28/2018 nodejs+express+ejs.pdf
26/46
Query
EXPRESS
5/28/2018 nodejs+express+ejs.pdf
27/46
Params
EXPRESS
5/28/2018 nodejs+express+ejs.pdf
28/46
EJSHTML PROGRAMADO
5/28/2018 nodejs+express+ejs.pdf
29/46
EXPRESS
Sistema de plantillas HTMLUtiliza Javascript para programar el HTMLEn cliente y en servidor
Qu es?
5/28/2018 nodejs+express+ejs.pdf
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
5/28/2018 nodejs+express+ejs.pdf
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
5/28/2018 nodejs+express+ejs.pdf
32/46
Reemplazo por valor, escapado. Para tipos bsicos.
$ curl http://localhost:3000a < b
views/index.ejs bash
EJS
...res.render('index', {
title: a < b
});...
app.js
5/28/2018 nodejs+express+ejs.pdf
33/46
Reemplazo por valor, literal. Para tipos bsicos.
$ curl http://localhost:3000a < b
views/index.ejs bash
EJS
...res.render('index', {
title: a < b
});...
app.js
5/28/2018 nodejs+express+ejs.pdf
34/46
Cdigo JS crudo, para ser ejecutado.
$ curl http://localhost:3000
views/index.ejs bash
EJS
...res.render('index', {
title: a < b
});...
app.js
5/28/2018 nodejs+express+ejs.pdf
35/46
Cdigo JS crudo, para ser ejecutado.
hola
$ curl http://localhost:3000a < b
views/index.ejs bash
EJS
...res.render('index', {
title: a < b
});...
app.js
5/28/2018 nodejs+express+ejs.pdf
36/46
Cdigo JS crudo, para ser ejecutado.
hello
$ curl http://localhost:3000hello 2
views/index.ejs bash
EJS
...res.render('index', {
title: a < b
});...
app.js
5/28/2018 nodejs+express+ejs.pdf
37/46
ASPECTOS AVANZADOSPATRONES HABITUALES
5/28/2018 nodejs+express+ejs.pdf
38/46
Control de accesoDisposicin de rutas
Esquema tpico de una aplicacinModelo compartido
PATRONES HABITUALES
5/28/2018 nodejs+express+ejs.pdf
39/46
Control de acceso (con clave)
PATRONES HABITUALES
5/28/2018 nodejs+express+ejs.pdf
40/46
PATRONES HABITUALES
Control de acceso (con sesiones)
5/28/2018 nodejs+express+ejs.pdf
41/46
Disposicin de rutas
PATRONES HABITUALES
app.js
routes/sample.js
5/28/2018 nodejs+express+ejs.pdf
42/46
Esquema de una aplicacin
PATRONES HABITUALES
Estticos
Rutas
Vistas
5/28/2018 nodejs+express+ejs.pdf
43/46
Modelo compartido
PATRONES HABITUALES
model/Persona.js
5/28/2018 nodejs+express+ejs.pdf
44/46
Modelo compartido
PATRONES HABITUALES
app.js
5/28/2018 nodejs+express+ejs.pdf
45/46
Modelo compartido
PATRONES HABITUALES
public/model.html
5/28/2018 nodejs+express+ejs.pdf
46/46
GRACIASPOR SU ATENCIN
SERGIO GARCA MONDARAY@sgmonda
https://github.com/sgmondasgmonda@gmail.com
Recommended