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 &lt; 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

GRACIAS POR SU ATENCIÓN

SERGIO GARCÍA MONDARAY@sgmonda

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