SlideShare una empresa de Scribd logo
Single	Page
Applications
Diego	Cardozo
github.com/diegocard/SPA-Presentation
Temas
1.	 Motivación
2.	 Introducción
3.	 Ejemplos
4.	 Arquitectura
5.	 Ventajas	y	desventajas
6.	 Herramientas
7.	 Demo
Motivación	(1)
Uno	de	los	factores	principales	para	la	experiencia
de	usuario	es	el	tiempo	de	carga.
Para	mejorarlo,	conocemos	varias	técnicas:
Minimizar	scripts	y	CSS
Combinar	imágenes	en	un	único	sprite
Retardar	la	ejecución	de	JavaScript
Manejo	especial	de	archivos	estáticos	(CDN)
Caché	de	recursos
Motivación	(2)
Sin	embargo,	aún	con	caché	el	browser	debe:
Volver	a	parsear	y	ejecutar	el	código	CSS	y	JavaScript.
Descargar	y	parsear	todo	el	código	HTML.
Aún	cuando	sólo	haya	cambiado	un	pequeña	parte.
Reconstruir	el	árbol	DOM.
Renderizar	la	interfaz.
El	usuario	ve	como	la	página	se	construye	mientras	espera.
Motivación	(3)
En	resumen,	SPA	surge	como	una	respuesta	a	las	preguntas:
¿Como	podemos	lograr	un	manejo	mas	eficiente?
¿Podemos	cargar	solamente	lo	nuevo	o	necesario?
¿Como	podemos	mejorar	la	experiencia	del	usuario?
Introducción	(1)
¿Que	es	una	SPA?
Es	un	nuevo	enfoque	para	construir	aplicaciones	web.
Todo	el	código	se	carga	en	la	primera	llamada	o
posteriormente	de	forma	dinámica,	sin	recargar	la	página.
La	navegación	se	resuelve	en	el	cliente.
Las	llamadas	al	servidor	se	hacen	de	forma	asincrónica.
La	interfaz	se	construye	en	el	cliente.
Introducción	(2)
Que	NO	es	una	SPA
Unir	todas	las	páginas	del	sitio	en	una	sola	y	cargarla
estáticamente.
Blanco	o	negro,	existen	enfoques	híbridos.
Una	bala	de	plata:	puede	no	servir	para	todos	los	casos	o
proyectos.
Introducción	(3)
¿Que	puede	hacer	una	SPA?
Cambios	de	URL	y	navegación	hacia	atrás	y	adelante.
Manipulación	de	DOM	del	lado	del	cliente.
Esperar	a	que	la	vista	se	cargue	antes	de	mostrarla.
Almacenar	páginas	ya	cargadas	en	el	cliente.
Ejemplos
GMail
Esta	presentación
Stashy
Nogginator
Arquitectura
Ventajas	y	desventajas	(1)
Ventajas
Interfaz	mas	rápida.
Mantenimiento	más	sencillo.
Distribución	de	carga.
Comienzo	del	desarrollo	más	ágil.
La	interfaz	es	simplemente	otro	cliente.
Se	presta	muy	bien	para	testing.
Perfecto	para	combinar	con	aplicaciones	móviles.
Ventajas	y	desventajas	(2)
Desventajas
La	primera	carga	puede	ser	lenta.
SEO	se	vuelve	complejo.
Require	JavaScript	habilitado.
Requiere	conocimiento	adicional	de	JavaScript.
Rompe	con	las	convenciones	de	analytics,	ads	y	widgets.
Ventajas	y	desventajas	(3)
Otros	aspectos
Trasladamos	la	lógica	de	negocio	no	crítica	al	cliente.
Antes	nuestro	código	era	90%	C#/VB	y	10%	JS.
Ahora	para	a	ser	a	50	y	50.
No	es	una	ventaja	o	desventaja,	pero	vamos	a	precisar	un
juego	distinto	de	herramientas	para	mantener	buenas
prácticas.
Herramientas	(1)
Desarrollo	del	cliente
Herramientas	(2)
Knockout.js
Knockout	creado	por	Steve	Anderson
PM	de	ASP.NET	en	Microsoft.
Utiliza	MVVM,	patrón	de	diseño	creado	por	John	Smith
MVP	en	Microsoft	por	su	trabajo	en	WPF.
Se	puede	utilizar	aún	cuando	no	desarrollamos	SPA.
Incluído	por	defecto	junto	con	los	templates	de	MVC4.
Herramientas	(3)
Desarrollo	del	servidor
En	MVC,	nuestros	controladores	pasan	a	ser	ApiControllers
para	definir	un	API	RESTful.
Implementamos	una	sola	vista	(layout).
No	vamos	a	utilizar	Razor	para	renderizar	las	vistas.
Vamos	a	ver	un	template	para	Visual	Studio	que	trae	un
proyecto	pre-configurado	para	SPA	(Hot	Towel	SPA).
Demo	(1)
Partimos	del	template	Hot	Towel	SPA	de	John	Papa
Vamos	a	ver	los	principales	componenetes	de	Durandal
Ver	cada	componente	a	fondo	llevaría	demasiado.
En	el	servidor	recorremos	el	API	RESTful	
Expone	los	datos	de	los	usuarios.
Agregamos	una	funcionalidad	(sesiones).
Recorremos	el	código	del	cliente.
Analizamos	las	librerías	mas	importantes.
Demogithub.com/diegocard/SPA-Demo
Recursos
learn.knockout.com
singlepageappbook.com
todomvc.com
johnpapa.net
slideshare.net/dcslides/spa-25806613
Para	saber	más
¿Preguntas?

Más contenido relacionado

La actualidad más candente

Curso: Seguridad de redes e Internet: Sílabo
Curso: Seguridad de redes e Internet: SílaboCurso: Seguridad de redes e Internet: Sílabo
Curso: Seguridad de redes e Internet: Sílabo
Jack Daniel Cáceres Meza
 
Bases de Datos SQL y NoSQL
Bases de Datos SQL y NoSQLBases de Datos SQL y NoSQL
Bases de Datos SQL y NoSQL
CONALEP
 
Trabajo zabbix
Trabajo zabbixTrabajo zabbix
Trabajo zabbix
johanapreciosa
 
Desarrollo web
Desarrollo webDesarrollo web
Desarrollo web
Jesus Clavijo
 
Procedimientos almacenados
Procedimientos almacenadosProcedimientos almacenados
Procedimientos almacenados
Vicente Alberca
 
DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
 DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
cluelessjoe
 
Arquitectura multicapa
Arquitectura multicapaArquitectura multicapa
Arquitectura multicapa
univ of pamplona
 
Firewall
FirewallFirewall
Firewall
nachosport
 
Tema 4. Detección de Intrusos
Tema 4. Detección de IntrusosTema 4. Detección de Intrusos
Tema 4. Detección de Intrusos
Francisco Medina
 
ARCHIVOS Y DIRECTORIOS EN LINUX
ARCHIVOS Y DIRECTORIOS EN LINUXARCHIVOS Y DIRECTORIOS EN LINUX
ARCHIVOS Y DIRECTORIOS EN LINUX
Alex Daquilema
 
Arquitecturas de Bases de Datos Distribuidas
Arquitecturas de Bases de Datos DistribuidasArquitecturas de Bases de Datos Distribuidas
Arquitecturas de Bases de Datos Distribuidas
Antonio Soria
 
Gestionde fichero
Gestionde ficheroGestionde fichero
Clases Genéricas en Java
Clases Genéricas en JavaClases Genéricas en Java
Clases Genéricas en Java
Alejandro Colomer Everett
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
Gabriel Mondragón
 
KALI LINUX.pptx
KALI LINUX.pptxKALI LINUX.pptx
KALI LINUX.pptx
Luis694978
 
Documentar Software con PUDS
Documentar Software con PUDSDocumentar Software con PUDS
Documentar Software con PUDS
Fabiana Venuti
 
Bases de datos de grafos
Bases de datos de grafosBases de datos de grafos
Bases de datos de grafos
Inspirate Unaula
 
Silabo Diseño de Redes
Silabo  Diseño de RedesSilabo  Diseño de Redes
Silabo Diseño de Redes
Johan Silva Cueva
 
Switch,Router,Firewall
Switch,Router,FirewallSwitch,Router,Firewall
Switch,Router,Firewall
Jonathan Sanchez
 
DOCKER+AWS+MELI
DOCKER+AWS+MELIDOCKER+AWS+MELI
DOCKER+AWS+MELI
melidevelopers
 

La actualidad más candente (20)

Curso: Seguridad de redes e Internet: Sílabo
Curso: Seguridad de redes e Internet: SílaboCurso: Seguridad de redes e Internet: Sílabo
Curso: Seguridad de redes e Internet: Sílabo
 
Bases de Datos SQL y NoSQL
Bases de Datos SQL y NoSQLBases de Datos SQL y NoSQL
Bases de Datos SQL y NoSQL
 
Trabajo zabbix
Trabajo zabbixTrabajo zabbix
Trabajo zabbix
 
Desarrollo web
Desarrollo webDesarrollo web
Desarrollo web
 
Procedimientos almacenados
Procedimientos almacenadosProcedimientos almacenados
Procedimientos almacenados
 
DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
 DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
DDD, CQRS et Event Sourcing : quand coder propre n'est plus suffisant
 
Arquitectura multicapa
Arquitectura multicapaArquitectura multicapa
Arquitectura multicapa
 
Firewall
FirewallFirewall
Firewall
 
Tema 4. Detección de Intrusos
Tema 4. Detección de IntrusosTema 4. Detección de Intrusos
Tema 4. Detección de Intrusos
 
ARCHIVOS Y DIRECTORIOS EN LINUX
ARCHIVOS Y DIRECTORIOS EN LINUXARCHIVOS Y DIRECTORIOS EN LINUX
ARCHIVOS Y DIRECTORIOS EN LINUX
 
Arquitecturas de Bases de Datos Distribuidas
Arquitecturas de Bases de Datos DistribuidasArquitecturas de Bases de Datos Distribuidas
Arquitecturas de Bases de Datos Distribuidas
 
Gestionde fichero
Gestionde ficheroGestionde fichero
Gestionde fichero
 
Clases Genéricas en Java
Clases Genéricas en JavaClases Genéricas en Java
Clases Genéricas en Java
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
 
KALI LINUX.pptx
KALI LINUX.pptxKALI LINUX.pptx
KALI LINUX.pptx
 
Documentar Software con PUDS
Documentar Software con PUDSDocumentar Software con PUDS
Documentar Software con PUDS
 
Bases de datos de grafos
Bases de datos de grafosBases de datos de grafos
Bases de datos de grafos
 
Silabo Diseño de Redes
Silabo  Diseño de RedesSilabo  Diseño de Redes
Silabo Diseño de Redes
 
Switch,Router,Firewall
Switch,Router,FirewallSwitch,Router,Firewall
Switch,Router,Firewall
 
DOCKER+AWS+MELI
DOCKER+AWS+MELIDOCKER+AWS+MELI
DOCKER+AWS+MELI
 

Similar a Single Page Applications

Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
Diego Cardozo
 
Puntos clave para optimizar Wordpress by Raiola Networks
Puntos clave para optimizar Wordpress by Raiola NetworksPuntos clave para optimizar Wordpress by Raiola Networks
Puntos clave para optimizar Wordpress by Raiola Networks
Raiola Networks
 
Code camp 2011 - Creando aplicaciones a la velocidad de la luz
Code camp 2011 - Creando aplicaciones a la velocidad de la luzCode camp 2011 - Creando aplicaciones a la velocidad de la luz
Code camp 2011 - Creando aplicaciones a la velocidad de la luz
Diego Ferreyra
 
5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web
Luis Fernando Aguas Bucheli
 
Performance en Drupal 7
Performance en Drupal 7Performance en Drupal 7
Performance en Drupal 7
Karim Boudjema Schombourg
 
High performance Web Sites
High performance Web SitesHigh performance Web Sites
High performance Web Sites
openfinanceDev
 
Plataformas cliente servidor
Plataformas cliente servidorPlataformas cliente servidor
Plataformas cliente servidor
Edsel Barbosa González
 
Renderizando la web del 2020
Renderizando la web del 2020Renderizando la web del 2020
Renderizando la web del 2020
Adrian Alonso Vega
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
Manuel Carrasco Moñino
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
ouuyeah
 
Proyectos escalables con Drupal
Proyectos escalables con DrupalProyectos escalables con Drupal
Proyectos escalables con Drupal
Pablo Cerda
 
Presentación de programacion
Presentación  de programacionPresentación  de programacion
Presentación de programacion
lajokito
 
Programacion Basica
Programacion Basica Programacion Basica
Programacion Basica
Yoconditap
 
Tema 6
Tema 6Tema 6
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticasUDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticas
Ander Martinez
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
Luis Viteri
 
Rendimiento Java Script - Programador PHP
Rendimiento  Java Script - Programador PHPRendimiento  Java Script - Programador PHP
Rendimiento Java Script - Programador PHP
Juan Belón Pérez
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Juan Morales
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
cok12v
 
Semana 4 SPA vs MPA
Semana 4  SPA vs MPASemana 4  SPA vs MPA
Semana 4 SPA vs MPA
Richard Eliseo Mendoza Gafaro
 

Similar a Single Page Applications (20)

Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
 
Puntos clave para optimizar Wordpress by Raiola Networks
Puntos clave para optimizar Wordpress by Raiola NetworksPuntos clave para optimizar Wordpress by Raiola Networks
Puntos clave para optimizar Wordpress by Raiola Networks
 
Code camp 2011 - Creando aplicaciones a la velocidad de la luz
Code camp 2011 - Creando aplicaciones a la velocidad de la luzCode camp 2011 - Creando aplicaciones a la velocidad de la luz
Code camp 2011 - Creando aplicaciones a la velocidad de la luz
 
5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web
 
Performance en Drupal 7
Performance en Drupal 7Performance en Drupal 7
Performance en Drupal 7
 
High performance Web Sites
High performance Web SitesHigh performance Web Sites
High performance Web Sites
 
Plataformas cliente servidor
Plataformas cliente servidorPlataformas cliente servidor
Plataformas cliente servidor
 
Renderizando la web del 2020
Renderizando la web del 2020Renderizando la web del 2020
Renderizando la web del 2020
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Proyectos escalables con Drupal
Proyectos escalables con DrupalProyectos escalables con Drupal
Proyectos escalables con Drupal
 
Presentación de programacion
Presentación  de programacionPresentación  de programacion
Presentación de programacion
 
Programacion Basica
Programacion Basica Programacion Basica
Programacion Basica
 
Tema 6
Tema 6Tema 6
Tema 6
 
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticasUDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticas
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
Rendimiento Java Script - Programador PHP
Rendimiento  Java Script - Programador PHPRendimiento  Java Script - Programador PHP
Rendimiento Java Script - Programador PHP
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
 
Semana 4 SPA vs MPA
Semana 4  SPA vs MPASemana 4  SPA vs MPA
Semana 4 SPA vs MPA
 

Más de Diego Cardozo

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
Diego Cardozo
 
The next billion users
The next billion usersThe next billion users
The next billion users
Diego Cardozo
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
Diego Cardozo
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
Diego Cardozo
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
Diego Cardozo
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
Diego Cardozo
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
Diego Cardozo
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
Diego Cardozo
 
How to test performance and not die trying
How to test performance and not die tryingHow to test performance and not die trying
How to test performance and not die trying
Diego Cardozo
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
Diego Cardozo
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
Diego Cardozo
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
Diego Cardozo
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
Diego Cardozo
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
Diego Cardozo
 
Single page applications
Single page applicationsSingle page applications
Single page applications
Diego Cardozo
 

Más de Diego Cardozo (15)

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
 
The next billion users
The next billion usersThe next billion users
The next billion users
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
 
How to test performance and not die trying
How to test performance and not die tryingHow to test performance and not die trying
How to test performance and not die trying
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 

Single Page Applications