APLICACIONES WEB CON

NODEJS + EXPRESS + EJS

SERGIO GARCA MONDARAY

NODEJS + EXPRESS + EJS

APLICACIONES WEB CON

Contenido
Tipos de aplicaciones web! NodeJS! Express! EJS! Patrones habituales

TIPOS DE

APLICACIONES WEB
SPA / PAGE-REDRAW

APLICACIONES WEB

TIPOS DE

SPA (single-page)

PAGE-REDRAW (multi-page)

APLICACIONES WEB

TIPOS DE

PAGE-REDRAW
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.

APLICACIONES WEB

TIPOS DE

PAGE-REDRAW
GET HTML
CLIENTE
h s e r ef R

form POST HTML

SERVIDOR

APLICACIONES WEB

TIPOS DE

PAGE-REDRAW
GET HTML
CLIENTE SERVIDOR

Ajax POST

APLICACIONES WEB

TIPOS DE

PAGE-REDRAW
GET HTML
CLIENTE
h s e r ef R

GET HTML

SERVIDOR

APLICACIONES WEB

TIPOS DE

SPA (SINGLE-PAGE APP.)

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

APLICACIONES WEB

TIPOS DE

SPA (SINGLE-PAGE APP.)

GET HTML
Refresh NEVER

CLIENTE

SERVIDOR

GET/POST/PUT JSON

APLICACIONES WEB

TIPOS DE

PARA HOY:

PAGE-REDRAW

NODE JS
JAVASCRIPT EN EL SERVIDOR

NODE JS
Javascript en el servidor! Javascript autnomo! Peticiones: mejor muchas pequeas que pocas grandes! Single-Thread! Orientado a eventos (no bloqueante)

NODE JS

NODE JS

Ejecucin normal

NODE JS

Ejecucin en cluster

NODE JS
Hello world
Servidor bsico con NodeJS

$ curl localhost:3000! Hello world

EXPRESS
HTTP PARA SERES HUMANOS

EXPRESS
Qu es?
Framework web para NodeJS! Inspirado en Sinatra! Dependiente de Connect! Para webs SPA o Multi-page! Perfecto para APIs! Es una capa na
Express 4.0+ no depender de Connect

EXPRESS
Popularidad

EXPRESS
En el mundo real
MySpace! LearnBoost! Persona (Mozilla)! Cozy! Apiary.io! +26k aplicaciones web

EXPRESS
Hello world
Servidor bsico con Express
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);

$ curl localhost:3000! Hello world

EXPRESS
Servir archivos estticos

app.js

public/hello.txt

EXPRESS
Body

EXPRESS
Body

HTTP 200 Content-Length Content-Type:

JSON

EXPRESS
Query

EXPRESS
Params

EJS
HTML PROGRAMADO

EXPRESS
Qu es?
Sistema de plantillas HTML! Utiliza Javascript para programar el HTML! En cliente y en servidor

EJS
Servidor bsico con Express + EJS
var express = require('express');! var http = require('http');! var app = express();! app.set('view engine', 'ejs');! <h1>! ! <%= title %>! </h1>! <p>! ! <%= text %>! </p>

Hello world

!
app.get('/', function (req, res) {! ! res.render('index', {! ! ! title: Hello',! ! ! text: world'! ! });! });!

views/index.ejs
$ curl localhost: 3000! <h1>Hello</h1>! <p>world</p>

!
http.createServer(app).listen(3000);

app.js

bash

EJS
Reemplazo por valor, escapado. Para tipos bsicos.
...! res.render('index', {! ! ! title: hello! });! ...

<%= %>

app.js
<h1>! ! <%= title %>! </h1> $ curl http://localhost:3000!

!
<h1>hello</h1>

views/index.ejs

bash

EJS
Reemplazo por valor, escapado. Para tipos bsicos.
...! res.render('index', {! ! ! title: a < b! });! ...

<%= %>

app.js
<h1>! ! <%= title %>! </h1> $ curl http://localhost:3000!

!
<h1>a &lt; b</h1>

views/index.ejs

bash

EJS
Reemplazo por valor, literal. Para tipos bsicos.
...! res.render('index', {! ! ! title: a < b! });! ...

<%- %>

app.js
<h1>! ! <%- title %>! </h1> $ curl http://localhost:3000!

!
<h1>a < b</h1>

views/index.ejs

bash

EJS
Cdigo JS crudo, para ser ejecutado.
...! res.render('index', {! ! ! title: a < b! });! ...

<% %>

app.js
<h1>! ! <% title %>! </h1> $ curl http://localhost:3000!

!
<h1></h1>

views/index.ejs

bash

EJS
Cdigo JS crudo, para ser ejecutado.
...! res.render('index', {! ! ! title: a < b! });! ...

<% %>

<% if (false) { %>! hola! <% } else { %>! <%- title %>! <% } %>

app.js
$ curl http://localhost:3000!

!
a < b

views/index.ejs

bash

EJS
Cdigo JS crudo, para ser ejecutado.
...! res.render('index', {! ! ! title: a < b! });! ...

<% %>

app.js
<% var a = 2; %>! hello <%- a %> $ curl http://localhost:3000!

!
hello 2

views/index.ejs

bash

ASPECTOS AVANZADOS
PATRONES HABITUALES

PATRONES HABITUALES

Control de acceso! Disposicin de rutas! Esquema tpico de una aplicacin! Modelo compartido

PATRONES HABITUALES
Control de acceso (con clave)

PATRONES HABITUALES
Control de acceso (con sesiones)

PATRONES HABITUALES
Disposicin de rutas

app.js

routes/ sample.js

PATRONES HABITUALES
Esquema de una aplicacin

Estticos Rutas Vistas

PATRONES HABITUALES
Modelo compartido

model/Persona.js

PATRONES HABITUALES
Modelo compartido

app.js

PATRONES HABITUALES
Modelo compartido

public/model.html

POR SU ATENCIN

GRACIAS

SERGIO GARCA MONDARAY

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