Scribd
Cargar
520 vistas

Nodejs Express Ejs PDF

Este documento presenta Node.js, Express y EJS para el desarrollo de aplicaciones web. Explica los tipos de aplicaciones web SPA y multi-página, y luego introduce Node.js, un entorno de ejecución de JavaScript para el servidor. Luego describe Express, un marco web para Node.js, y EJS, un sistema de plantillas para generar HTML dinámico. Finalmente, cubre patrones comunes como el control de acceso, la organización de rutas y el uso de modelos compartidos.

Cargado por

jose
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
520 vistas

Nodejs Express Ejs PDF

Este documento presenta Node.js, Express y EJS para el desarrollo de aplicaciones web. Explica los tipos de aplicaciones web SPA y multi-página, y luego introduce Node.js, un entorno de ejecución de JavaScript para el servidor. Luego describe Express, un marco web para Node.js, y EJS, un sistema de plantillas para generar HTML dinámico. Finalmente, cubre patrones comunes como el control de acceso, la organización de rutas y el uso de modelos compartidos.

Cargado por

jose
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 46

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 [email protected]

También podría gustarte