aplicaciones web con nodejs + express + ejsexpress+ejs.pdf · tipos de aplicaciones web enfoque...
TRANSCRIPT
Tipos de aplicaciones web
NodeJS
Express
EJS
Patrones habituales
APLICACIONES WEB CON NODEJS + EXPRESS + EJS
Contenido
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
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
Javascript en el servidor
Javascript autónomo
Peticiones: mejor muchas pequeñas que pocas grandes
Single-Thread
Orientado a eventos (no bloqueante)
NODE JS
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?
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
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
Control de acceso
Disposición de rutas
Esquema típico de una aplicación
Modelo compartido
PATRONES HABITUALES