Enviar búsqueda
Cargar
Single Page Applications
•
5 recomendaciones
•
2,365 vistas
Diego Cardozo
Seguir
Presentación sobre Single Page Applications para una Meetup local de .NET.
Leer menos
Leer más
Software
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 21
Descargar ahora
Descargar para leer sin conexión
Recomendados
Que es api
Que es api
Washington Cedeño
Novedades Windows Server 2016 TP5
Novedades Windows Server 2016 TP5
Ivan Martinez
Memoria de una computadora
Memoria de una computadora
Mary Jose Sg
Firewall
Firewall
nachosport
Arquitectura Cliente-Servidor y P2P
Arquitectura Cliente-Servidor y P2P
Manuel Marcano
oohdm
oohdm
Angel Méndez Castillo
Legislación informática
Legislación informática
ale-pruneda
Curso taller: Sistemas de Gestión de Seguridad de la Información
Curso taller: Sistemas de Gestión de Seguridad de la Información
Horacio Veramendi
Recomendados
Que es api
Que es api
Washington Cedeño
Novedades Windows Server 2016 TP5
Novedades Windows Server 2016 TP5
Ivan Martinez
Memoria de una computadora
Memoria de una computadora
Mary Jose Sg
Firewall
Firewall
nachosport
Arquitectura Cliente-Servidor y P2P
Arquitectura Cliente-Servidor y P2P
Manuel Marcano
oohdm
oohdm
Angel Méndez Castillo
Legislación informática
Legislación informática
ale-pruneda
Curso taller: Sistemas de Gestión de Seguridad de la Información
Curso taller: Sistemas de Gestión de Seguridad de la Información
Horacio Veramendi
Presentación sobre Diseño Web
Presentación sobre Diseño Web
Marcelo Freitas
Manual de seguridad informática
Manual de seguridad informática
Cristhian Mendoza
DIRECCIONES Y CLASES IP
DIRECCIONES Y CLASES IP
Diego Villacis
Arquitectura Rest
Arquitectura Rest
Israel Rey
Seguridad física de una red de área local
Seguridad física de una red de área local
Luan Divad Seyer
Javascript
Javascript
guest044583b
Arquitectura de aplicaciones distribuidas
Arquitectura de aplicaciones distribuidas
Rosario Dguez
Arquitectura 3 Capas
Arquitectura 3 Capas
Fani Calle
Html (ppt)
Html (ppt)
Gonzalo De Melo Goux
Procesador
Procesador
JuanEsteban9907
Python
Python
kismet010
Tarjeta madre
Tarjeta madre
Tania Beltran Garcia
PRESENTACIÓN RUP
PRESENTACIÓN RUP
MSc Aldo Valdez Alvarado
Direcciones URL
Direcciones URL
Lucía Alvarez
Funciones del sistema operativo
Funciones del sistema operativo
Hugo
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
Javier Vélez Reyes
Diapositivas de wordpress
Diapositivas de wordpress
jhoanaalfredito
Lenguaje html y css
Lenguaje html y css
RicardoFerrandoGmez
Taller No. 1 Introducción a Bases de Datos..pdf
Taller No. 1 Introducción a Bases de Datos..pdf
LIZETHHASLEIDYPOLOCH
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
josuew2013
Optimizar 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 Networks
Raiola Networks
Más contenido relacionado
La actualidad más candente
Presentación sobre Diseño Web
Presentación sobre Diseño Web
Marcelo Freitas
Manual de seguridad informática
Manual de seguridad informática
Cristhian Mendoza
DIRECCIONES Y CLASES IP
DIRECCIONES Y CLASES IP
Diego Villacis
Arquitectura Rest
Arquitectura Rest
Israel Rey
Seguridad física de una red de área local
Seguridad física de una red de área local
Luan Divad Seyer
Javascript
Javascript
guest044583b
Arquitectura de aplicaciones distribuidas
Arquitectura de aplicaciones distribuidas
Rosario Dguez
Arquitectura 3 Capas
Arquitectura 3 Capas
Fani Calle
Html (ppt)
Html (ppt)
Gonzalo De Melo Goux
Procesador
Procesador
JuanEsteban9907
Python
Python
kismet010
Tarjeta madre
Tarjeta madre
Tania Beltran Garcia
PRESENTACIÓN RUP
PRESENTACIÓN RUP
MSc Aldo Valdez Alvarado
Direcciones URL
Direcciones URL
Lucía Alvarez
Funciones del sistema operativo
Funciones del sistema operativo
Hugo
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
Javier Vélez Reyes
Diapositivas de wordpress
Diapositivas de wordpress
jhoanaalfredito
Lenguaje html y css
Lenguaje html y css
RicardoFerrandoGmez
Taller No. 1 Introducción a Bases de Datos..pdf
Taller No. 1 Introducción a Bases de Datos..pdf
LIZETHHASLEIDYPOLOCH
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
josuew2013
La actualidad más candente
(20)
Presentación sobre Diseño Web
Presentación sobre Diseño Web
Manual de seguridad informática
Manual de seguridad informática
DIRECCIONES Y CLASES IP
DIRECCIONES Y CLASES IP
Arquitectura Rest
Arquitectura Rest
Seguridad física de una red de área local
Seguridad física de una red de área local
Javascript
Javascript
Arquitectura de aplicaciones distribuidas
Arquitectura de aplicaciones distribuidas
Arquitectura 3 Capas
Arquitectura 3 Capas
Html (ppt)
Html (ppt)
Procesador
Procesador
Python
Python
Tarjeta madre
Tarjeta madre
PRESENTACIÓN RUP
PRESENTACIÓN RUP
Direcciones URL
Direcciones URL
Funciones del sistema operativo
Funciones del sistema operativo
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
Diapositivas de wordpress
Diapositivas de wordpress
Lenguaje html y css
Lenguaje html y css
Taller No. 1 Introducción a Bases de Datos..pdf
Taller No. 1 Introducción a Bases de Datos..pdf
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
Similar a Single Page Applications
Optimizar 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 Networks
Raiola Networks
Code 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 Web
Luis Fernando Aguas Bucheli
Performance en Drupal 7
Performance en Drupal 7
Karim Boudjema Schombourg
High performance Web Sites
High performance Web Sites
openfinanceDev
Plataformas cliente servidor
Plataformas cliente servidor
Edsel Barbosa González
Renderizando la web del 2020
Renderizando la web del 2020
Adrian Alonso Vega
Aprendiendo GWT
Aprendiendo GWT
Manuel Carrasco Moñino
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
ouuyeah
Proyectos escalables con Drupal
Proyectos escalables con Drupal
Pablo Cerda
Programacion Basica
Programacion Basica
Yoconditap
Presentación de programacion
Presentación de programacion
lajokito
Tema 6
Tema 6
ELias Davila Guerrero
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticas
Ander Martinez
Instalacion adobe dream weaver
Instalacion adobe dream weaver
Luis Viteri
Rendimiento Java Script - Programador PHP
Rendimiento Java Script - Programador PHP
Juan Belón Pérez
Responsive Web Design
Responsive Web Design
Juan Morales
Jsf Java Server Faces
Jsf Java Server Faces
cok12v
Semana 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 intento
Puntos 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 luz
5-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 7
High performance Web Sites
High performance Web Sites
Plataformas cliente servidor
Plataformas cliente servidor
Renderizando la web del 2020
Renderizando la web del 2020
Aprendiendo GWT
Aprendiendo GWT
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Proyectos escalables con Drupal
Proyectos escalables con Drupal
Programacion Basica
Programacion Basica
Presentación de programacion
Presentación de programacion
Tema 6
Tema 6
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticas
Instalacion adobe dream weaver
Instalacion adobe dream weaver
Rendimiento Java Script - Programador PHP
Rendimiento Java Script - Programador PHP
Responsive Web Design
Responsive Web Design
Jsf Java Server Faces
Jsf Java Server Faces
Semana 4 SPA vs MPA
Semana 4 SPA vs MPA
Más de Diego Cardozo
El proximo billon de usuarios
El proximo billon de usuarios
Diego Cardozo
The next billion users
The next billion users
Diego Cardozo
Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
Diego Cardozo
Cranking It Up - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
Diego Cardozo
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
Diego Cardozo
Performance 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 intento
Diego Cardozo
Optimize 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 trying
Diego Cardozo
Testeando 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.js
Diego Cardozo
Structuring web applications with Backbone.js
Structuring web applications with Backbone.js
Diego Cardozo
Component Based Software Development
Component Based Software Development
Diego Cardozo
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
Diego Cardozo
Single page applications
Single page applications
Diego Cardozo
Más de Diego Cardozo
(15)
El proximo billon de usuarios
El proximo billon de usuarios
The next billion users
The next billion users
Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
Cranking It Up - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
Performance in the cloud
Performance in the cloud
Có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 trying
How 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 intento
Organizació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.js
Component Based Software Development
Component Based Software Development
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
Single page applications
Single page applications
Single Page Applications
1.
Single Page Applications Diego Cardozo github.com/diegocard/SPA-Presentation
2.
Temas 1. Motivación 2. Introducción 3.
Ejemplos 4. Arquitectura 5. Ventajas y desventajas 6. Herramientas 7. Demo
3.
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
4.
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.
5.
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?
6.
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.
7.
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.
8.
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.
9.
Ejemplos GMail Esta presentación Stashy Nogginator
10.
Arquitectura
11.
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.
12.
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.
13.
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.
14.
Herramientas (1) Desarrollo del cliente
15.
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.
16.
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).
17.
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.
18.
Demogithub.com/diegocard/SPA-Demo
19.
Recursos learn.knockout.com singlepageappbook.com todomvc.com johnpapa.net slideshare.net/dcslides/spa-25806613
20.
Para saber más
21.
¿Preguntas?
Descargar ahora