Enviar pesquisa
Carregar
Single Page Applications
•
5 gostaram
•
2,365 visualizações
Diego Cardozo
Seguir
Presentación sobre Single Page Applications para una Meetup local de .NET.
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 21
Baixar agora
Baixar para ler offline
Recomendados
Cuadro comparativo de los sistemas operativos
Cuadro comparativo de los sistemas operativos
tallarinxD
Base de datos mi biblioteca
Base de datos mi biblioteca
alexander314
Teoria del modelado de objetos otros diagramas actividad despliegue
Teoria del modelado de objetos otros diagramas actividad despliegue
Robert Rodriguez
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la Web
Tensor
Ppt de ingenieria de requerimiento
Ppt de ingenieria de requerimiento
mely1930
Programacion en n capas
Programacion en n capas
Jose Antonio Lapa Huanca
IEEE 730 1989: Plan de aseguramiento de la calidad del software
IEEE 730 1989: Plan de aseguramiento de la calidad del software
Jesús Navarro
Ieee 830
Ieee 830
ALEX MERINO
Recomendados
Cuadro comparativo de los sistemas operativos
Cuadro comparativo de los sistemas operativos
tallarinxD
Base de datos mi biblioteca
Base de datos mi biblioteca
alexander314
Teoria del modelado de objetos otros diagramas actividad despliegue
Teoria del modelado de objetos otros diagramas actividad despliegue
Robert Rodriguez
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la Web
Tensor
Ppt de ingenieria de requerimiento
Ppt de ingenieria de requerimiento
mely1930
Programacion en n capas
Programacion en n capas
Jose Antonio Lapa Huanca
IEEE 730 1989: Plan de aseguramiento de la calidad del software
IEEE 730 1989: Plan de aseguramiento de la calidad del software
Jesús Navarro
Ieee 830
Ieee 830
ALEX MERINO
Tipos de Requerimientos en Ingeniería de Software
Tipos de Requerimientos en Ingeniería de Software
Leo Ruelas Rojas
oohdm
oohdm
Angel Méndez Castillo
Que es un firewall y su función
Que es un firewall y su función
Consuelo Sandoval
Ingenieria de software - Unidad 4 seguridad
Ingenieria de software - Unidad 4 seguridad
José Antonio Sandoval Acosta
Control de versiones (CVS)
Control de versiones (CVS)
Cursando Desarrollo Web
Unidad 3 topicos avanzados de programacion
Unidad 3 topicos avanzados de programacion
Irving Che
Modelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones web
MaritzaD
Framework
Framework
Alexis Arguello
Patrones de diseño
Patrones de diseño
Kelly Cuervo
Concepto y extensiones de negocio de Eriksson Penker
Concepto y extensiones de negocio de Eriksson Penker
Marcos Omar Cruz Ortrega
Desarrollo de software basado en componentes
Desarrollo de software basado en componentes
Ulises Cruz
Tabla comparativa servidores web
Tabla comparativa servidores web
juancma77
Ejemplos práctios de calidad en el software tecdencies
Ejemplos práctios de calidad en el software tecdencies
MICProductivity
Arquitectura de objetos distribuidos 1
Arquitectura de objetos distribuidos 1
Javier Rubiano Quiroga
Bootstrap
Bootstrap
Edsel Barbosa González
13.diseño de web apps
13.diseño de web apps
Ramiro Estigarribia Canese
Ingenieria de software
Ingenieria de software
Diaxz Salgado
Que es api
Que es api
Washington Cedeño
El diseño web
El diseño web
Edwin Geovanni Vega Saldaña
Ciclo Vida del Software
Ciclo Vida del Software
Wilfredo Mogollón
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
Mais conteúdo relacionado
Mais procurados
Tipos de Requerimientos en Ingeniería de Software
Tipos de Requerimientos en Ingeniería de Software
Leo Ruelas Rojas
oohdm
oohdm
Angel Méndez Castillo
Que es un firewall y su función
Que es un firewall y su función
Consuelo Sandoval
Ingenieria de software - Unidad 4 seguridad
Ingenieria de software - Unidad 4 seguridad
José Antonio Sandoval Acosta
Control de versiones (CVS)
Control de versiones (CVS)
Cursando Desarrollo Web
Unidad 3 topicos avanzados de programacion
Unidad 3 topicos avanzados de programacion
Irving Che
Modelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones web
MaritzaD
Framework
Framework
Alexis Arguello
Patrones de diseño
Patrones de diseño
Kelly Cuervo
Concepto y extensiones de negocio de Eriksson Penker
Concepto y extensiones de negocio de Eriksson Penker
Marcos Omar Cruz Ortrega
Desarrollo de software basado en componentes
Desarrollo de software basado en componentes
Ulises Cruz
Tabla comparativa servidores web
Tabla comparativa servidores web
juancma77
Ejemplos práctios de calidad en el software tecdencies
Ejemplos práctios de calidad en el software tecdencies
MICProductivity
Arquitectura de objetos distribuidos 1
Arquitectura de objetos distribuidos 1
Javier Rubiano Quiroga
Bootstrap
Bootstrap
Edsel Barbosa González
13.diseño de web apps
13.diseño de web apps
Ramiro Estigarribia Canese
Ingenieria de software
Ingenieria de software
Diaxz Salgado
Que es api
Que es api
Washington Cedeño
El diseño web
El diseño web
Edwin Geovanni Vega Saldaña
Ciclo Vida del Software
Ciclo Vida del Software
Wilfredo Mogollón
Mais procurados
(20)
Tipos de Requerimientos en Ingeniería de Software
Tipos de Requerimientos en Ingeniería de Software
oohdm
oohdm
Que es un firewall y su función
Que es un firewall y su función
Ingenieria de software - Unidad 4 seguridad
Ingenieria de software - Unidad 4 seguridad
Control de versiones (CVS)
Control de versiones (CVS)
Unidad 3 topicos avanzados de programacion
Unidad 3 topicos avanzados de programacion
Modelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones web
Framework
Framework
Patrones de diseño
Patrones de diseño
Concepto y extensiones de negocio de Eriksson Penker
Concepto y extensiones de negocio de Eriksson Penker
Desarrollo de software basado en componentes
Desarrollo de software basado en componentes
Tabla comparativa servidores web
Tabla comparativa servidores web
Ejemplos práctios de calidad en el software tecdencies
Ejemplos práctios de calidad en el software tecdencies
Arquitectura de objetos distribuidos 1
Arquitectura de objetos distribuidos 1
Bootstrap
Bootstrap
13.diseño de web apps
13.diseño de web apps
Ingenieria de software
Ingenieria de software
Que es api
Que es api
El diseño web
El diseño web
Ciclo Vida del Software
Ciclo Vida del Software
Semelhante 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
Semelhante 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
Mais 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
Mais 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?
Baixar agora