APLICACIONES WEB CON NODEJS + EXPRESS + EJSfiles.meetup.com/2301351/nodejs+express+ejs.pdf · Tipos...
46
SERGIO GARCÍA MONDARAY APLICACIONES WEB CON NODEJS + EXPRESS + EJS
Transcript of APLICACIONES WEB CON NODEJS + EXPRESS + EJSfiles.meetup.com/2301351/nodejs+express+ejs.pdf · Tipos...
SERGIO GARCÍA MONDARAY
APLICACIONES WEB CON NODEJS + EXPRESS + EJS
Tipos de aplicaciones web
NodeJS
Express
EJS
Patrones habituales
APLICACIONES WEB CON NODEJS + EXPRESS + EJS
Contenido
SPA
TIPOS DE APLICACIONES WEB
/ PAGE-REDRAW
TIPOS DE APLICACIONES WEB
PAGE-REDRAW (multi-page)
SPA (single-page)
TIPOS DE APLICACIONES WEB
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.
PAGE-REDRAW
TIPOS DE APLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
form POST
HTMLRe
fresh
TIPOS DE APLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
Ajax POST
TIPOS DE APLICACIONES WEB
PAGE-REDRAW
CLIENTE SERVIDOR
GET
HTML
GET
HTMLRe
fresh
TIPOS DE APLICACIONES WEB
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…
SPA (SINGLE-PAGE APP.)
TIPOS DE APLICACIONES WEB
SPA (SINGLE-PAGE APP.)
CLIENTE SERVIDOR
GET
HTML
GET/POST/PUT
JSON
RefreshNEVER
TIPOS DE APLICACIONES WEB
PARA HOY:PAGE-REDRAW
NODE JSJAVASCRIPT EN EL SERVIDOR
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
NODE JS
Ejecución normal
NODE JS
Ejecución en cluster
Hello worldServidor básico con NodeJS
$ curl “localhost:3000”Hello world
NODE JS
EXPRESSHTTP PARA SERES HUMANOS
EXPRESS
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
¿Qué es?
EXPRESSPopularidad
EXPRESSEn el mundo real
MySpace
LearnBoost
Persona (Mozilla)
Cozy
Apiary.io
+26k aplicaciones web
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 básico con Express
EXPRESS
$ curl “localhost:3000”Hello world
Servir archivos estáticosEXPRESS
app.js
public/hello.txt
Body
EXPRESS
Body
• HTTP 200 • Content-Length • Content-Type:
JSON
EXPRESS
Query
EXPRESS
Params
EXPRESS
EJSHTML PROGRAMADO
EXPRESS
Sistema de plantillas HTML
Utiliza Javascript para programar el HTML
En cliente y en servidor
¿Qué es?
Hello worldServidor 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);
<h1> <%= title %></h1><p> <%= text %></p>
$ curl “localhost:3000”<h1>Hello</h1><p>world</p>
app.js bash
views/index.ejs
EJS
Reemplazo por valor, escapado. Para tipos básicos.
<h1> <%= title %></h1>
$ curl “http://localhost:3000”!<h1>hello</h1>
views/index.ejs bash
EJS<%= … %>
...res.render('index', { title: ‘hello’});...
app.js
Reemplazo por valor, escapado. Para tipos básicos.
<h1> <%= title %></h1>
$ curl “http://localhost:3000”!<h1>a < b</h1>
views/index.ejs bash
EJS<%= … %>
...res.render('index', { title: ‘a < b’});...
app.js
Reemplazo por valor, literal. Para tipos básicos.
<h1> <%- title %></h1>
$ curl “http://localhost:3000”!<h1>a < b</h1>
views/index.ejs bash
EJS<%- … %>
...res.render('index', { title: ‘a < b’});...
app.js
Código JS crudo, para ser ejecutado.
<h1> <% title %></h1>
$ curl “http://localhost:3000”!<h1></h1>
views/index.ejs bash
EJS<% … %>
...res.render('index', { title: ‘a < b’});...
app.js
Código JS crudo, para ser ejecutado.
<% if (false) { %> hola<% } else { %> <%- title %><% } %>
$ curl “http://localhost:3000”!a < b
views/index.ejs bash
EJS<% … %>
...res.render('index', { title: ‘a < b’});...
app.js
Código JS crudo, para ser ejecutado.
<% var a = 2; %>hello <%- a %>
$ curl “http://localhost:3000”!hello 2
views/index.ejs bash
EJS<% … %>
...res.render('index', { title: ‘a < b’});...
app.js
ASPECTOS AVANZADOSPATRONES 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
PATRONES HABITUALESControl de acceso (con sesiones)
Disposición de rutasPATRONES HABITUALES
app.js
routes/ sample.js
Esquema de una aplicación
PATRONES HABITUALES
Estáticos
Rutas
Vistas
Modelo compartido
PATRONES HABITUALES
model/Persona.js
Modelo compartido
PATRONES HABITUALES
app.js
Modelo compartido
PATRONES HABITUALES
public/model.html
