GeneXus Tilo: Una nueva experiencia de usuario en aplicaciones web
•Descargar como PPTX, PDF•
0 recomendaciones•786 vistas
El documento presenta las nuevas características de UX en GeneXus Tilo, incluyendo un nuevo modelo de eventos que reduce el tráfico de red y procesamiento del servidor y cliente, compatibilidad con componentes web independientes, y mejoras en la navegación entre páginas usando animaciones de HTML5. Estas características proporcionan una mejor experiencia de usuario y mayor control para los programadores.
Recomendados
Recomendados
Más contenido relacionado
Similar a GeneXus Tilo: Una nueva experiencia de usuario en aplicaciones web
Similar a GeneXus Tilo: Una nueva experiencia de usuario en aplicaciones web (20)
Más de GeneXus
Más de GeneXus (20)
GeneXus Tilo: Una nueva experiencia de usuario en aplicaciones web
- 1. GeneXus Tilo: Una nueva UX en aplicaciones web #GX2913 Nicolás Cardelino Artech
- 10. Ejecución de eventos • Comportamiento actual User event
- 11. Ejecución de eventos • Comportamiento deseado User event
- 12. Modelo de eventos • Modelo actual • Nuevo modelo – GET – GET • Start • Start • Refresh • Refresh • Load • Load – POST – POST • Start • Lectura de variables • Lectura de variables • Evento de usuario • Evento de usuario • Refresh • Load
- 13. Beneficios • Menos tráfico – Upstream y downstream • Menos procesamiento en el servidor • Menos procesamiento en el cliente • Más fácil de programar • Mayor control para el programador
- 14. Compatibilidad • Propiedad “Web User Experience” – KBs nuevas – KBs migradas • Configurable por objeto
- 16. Navegación entre páginas • Páginas que comparten Master Page Master page Master page Content placeholder
- 17. Navegación entre páginas • Páginas que NO comparten Master Page Page A B
- 18. Navegación entre páginas • HTML5 – Detección de capacidades del navegador • Animaciones / Transiciones • SEO
- 19. Beneficios • Menos tráfico • Menos procesamiento en el servidor • Mejor experiencia de usuario
- 21. Web components • Independientes WC A WC B WC C
- 22. Web components • Agrupación WC A WC B WC C
- 23. Beneficios • Menos tráfico – Upstream y downstream • Menos procesamiento en el servidor • Menos procesamiento en el cliente • Mayor control para el programador • Mejor experiencia de usuario
- 25. Información de interés • Conferencias relacionadas • A continuación: ¡Aplicaciones actualizadas al instante! Feedback y notificaciones inmediatas en aplicaciones Web • Nicolás Cardelino, GeneXus I+D ncardelino@genexus.com @ncardeli
- 26. ¡MUCHAS GRACIAS!
Notas del editor
- Empecemos entonces por preguntarnos qué es la experiencia de usuario. Creo que la forma más sencilla de explicarlo es trazando un paralelismo con un restaurante. Una buena userexperience en un restaurante va a estar dada por una suma de cosas: la calidad de la comida, la decoración, la iluminación, la atención del personal, la música de fondo. Todo conjugado para ofrecernos una buena experiencia, un buen momento, con el que nos sintamos a gusto. Claramente, la UX es algo subjetivo, un restaurante que un amigo nos recomendó como lo máximo, puede parecernos el peor./*En el mundo de las aplicaciones se tiende muchas veces a confundir lo que es una buena UI con una buena UX. Pero no alcanza con tener una buena UI. Siguiendo con el ejemplo del restaurante, puede que las sillas y mesa sean muy cómodas y esté todo muy bien armado como en la foto, con flores y todo, pero si la comida llega fría o la música es heavy metal a todo volumen y no deja hablar a nadie, es difícil que la UX sea buena.*/No alcanza con que la mesa esté bien servida y todo muy bien decorado, es decir que tenga una buena UI, o que nos atiendan rápidamente, la UX está dada por una suma de variables, por un todo.
- Desde las primeras versiones web, allá por la 7.0 hasta hoy en día han pasado muchas cosas. En particular ha ido cambiando la forma en que dialoga en navegador con el servidor web. De aquellas épocas de diálogos de refresh completo, fuimos evolucionando acompañando los cambios tecnológicos, permitiendo que fuera posible lograr aplicaciones cada vez más responsivas y performantes con GeneXus.Varios tecnologías fueron surgiendo, consolidánose y adoptándose, pero la adopción de AJAX tuvo un papel fundamental en estos cambios. Desde que surgió, en cada versión hemos ido profundizando el uso de esta tecnología dentro de GeneXus.Para GeneXus Tilo se nos presentan nuevos desafíos, ya que el tipo de aplicaciones que nuestros clientes demandan tienen dos características fundamentales: deben ser altamente interactivas, con una excelente experiencia de usuario y deben ser rápidas.¿Y cómo culparlos? Quien no desearía que la aplicación que usa en el trabajo todo el día sea tan práctica de usar como las aplicaciones que utiliza en su tiempo libre (o en el trabajo también, no)? ¿O que ofrezcan experiencias de usuario tan pulidas y logradas como las aplicaciones de sus celulares y tablets?
- Desde las primeras versiones web, allá por la 7.0 hasta hoy en día han pasado muchas cosas. En particular ha ido cambiando la forma en que dialoga en navegador con el servidor web. De aquellas épocas de diálogos de refresh completo, fuimos evolucionando acompañando los cambios tecnológicos, permitiendo que fuera posible lograr aplicaciones cada vez más responsivas y performantes con GeneXus.Varios tecnologías fueron surgiendo, consolidánose y adoptándose, pero la adopción de AJAX tuvo un papel fundamental en estos cambios. Desde que surgió, en cada versión hemos ido profundizando el uso de esta tecnología dentro de GeneXus.Para GeneXus Tilo se nos presentan nuevos desafíos, ya que el tipo de aplicaciones que nuestros clientes demandan tienen dos características fundamentales: deben ser altamente interactivas, con una excelente experiencia de usuario y deben ser rápidas.¿Y cómo culparlos? Quien no desearía que la aplicación que usa en el trabajo todo el día sea tan práctica de usar como las aplicaciones que utiliza en su tiempo libre (o en el trabajo también, no)? ¿O que ofrezcan experiencias de usuario tan pulidas y logradas como las aplicaciones de sus celulares y tablets?
- Hoy existe un comportamiento web de las aplicaciones GX "heredado“ de las primeras épocas de desarrollo web con GeneXus que mencionaba recién,y creemos que el tipo de aplicaciones que nuestros clientes requieren hoy exigen cambios en este comportamiento y en particular, en la forma en que programamos nuestras aplicaciones.Con el modelo actual nuestros eventos de usuario, cada vez que son ejecutados, refrescan toda la pantalla, incluso actualizando elementos de la interfaz que no participaron de la ejecución del evento.Este mecanismo requiere que viajen en cada evento de usuario los valores de todas las variables en pantalla.
- Para lograr aplicaciones como las que nos hemos planteado como objetivo, debemos poder ejecutar eventos de usuario sin que se vea afectada toda la pantalla, involucrando únicamente a los elementos modificados en el evento. De esta forma, se logra que el diálogo sea más ágil y fluido, redundando en una mejor experiencia de usuario.
- Creemos que parte de la solución pasa por hacer algunos cambios en el modelo de ejecución de eventos. Quienes tomaron el curso de desarrollo web con GeneXus recordarán el orden de disparo de los eventos. En el GET, es decir, cuando el usuario solicita la página, ya sea desde la barra de direcciones o siguiendo un link, se disparan los eventos Start, Refresh y Load. En el POST, es decir, cuando se ejecuta un evento de usuario (Enter, Click, etc), el orden de disparo pasa a ser Start, Lectura de variables en pantalla, Evento de usuario, Refresh y Load.En el nuevo modelo que proponemos para GeneXus Tilo, en el GET el comportamiento es el mismo, pero en el POST sólo se ejecuta el evento de usuario, previa lectura de las variables en pantalla. Es decir, el evento Start pasa a ejecutarse una sola vez y los eventos Refresh y Load, dejan de invocarse implícitamente.En pantalla se reflejarán únicamente los cambios hechos sobre los controles en el evento de usuario ejecutado.Está previsto que los eventos Refresh y Load puedan invocarse explícitamente, por ejemplo, utilizando el comando Refresh.
- Se ofrecerán distintos niveles de granularidad para indicar cómo se ejecutará el refresh. En primer lugar contaremos con el comando Refresh, que si es ejecutado en el evento de usuario, hará que se ejecuten los eventos Refresh y Load del objeto actual, más los eventos Refresh y Load de los web components que sean descendientes del objeto actual.Este caso será util cuando se modifiquen datos en el evento de usuario y el programador sabe que va a tener que refrescar los grids y web components del objeto para reflejar los cambios.
- Ahora supongamos que luego de mi evento de usuario quiero actualizar únicamente uno o algunos de los grids en pantalla. Para eso usaremos el método Refresh del control grid.En este caso, se ejecutarán el evento Refresh y el evento Load del grid.
- Otro caso es aquel en que tengo una pantalla muy componentizada y el cambio realizado en el evento de usuario puede afectar potencialmente a toda la pantalla o incluso a la master page. Este sería el caso más parecido al comportamiento actual de las aplicaciones web. En ese caso, se puede utilizar el método Form.Refresh() para actualizar toda la pantalla.
- Con este nuevo modelo obtenemos varios beneficios. En primer lugar se disminuye el tráfico entre el cliente y el servidor. El tráfico de subida se disminuye gracias a que para ejecutar un evento de usuario, sólo se transmiten los valores de las variables utilizadas por el evento a ejecutar. El tráfico de bajada disminuye por una razón similar, sólo se transmiten del servidor al cliente aquello que fue cambiado en el evento de usuario ejecutado.El servidor pasa menos trabajo también, ya que se ejecutan menos cosas en cada roundtrip.Algo similar sucede en el cliente, ya que al obtener una respuesta más acotada desde el server, debe realizarse menos procesamiento en el cliente.Por otra parte, es más fácil de programar y resulta más intuitivo para el desarrollador, además de que le ofrece mayor control sobre la UI.
- El nuevo comportamiento será el default para nuevas KBs en GeneXus Tilo. Sin embargo, quienes se migren de versiones anteriores, podrán migrarse sin problemas ya que por default mantendrán el comportamiento anterior. Esto se podrá configurar mediante la propiedad “Web UserExperience” que se podrá configurar en el Environment o por objeto.Como se podrá configurar el comportamiento por objeto, quienes vengan de versiones anteriores podrán migrarse a Tilo con el comportamiento anterior y empezar a migrar sus objetos de a poco o encarar los nuevos desarrollos con la nueva propiedad.
- Lo que proponemos para GeneXus Tilo entonces es una innovación que nos permitirá tener mayor control en la forma en que se transiciona de una página a otra y nos permitirá optimizar recursos. Profundizando la utilización de AJAX, cuando un usuario navegue dentro de páginas de una aplicación, en lugar de dejar que el browser haga la carga tradicional, haremos la carga de la página destino mediante AJAX.Esto nos permitirá hacer algunas cosas interesantes. Por ejemplo, cuando dos webpanels compartan la master page y el usuario quiera navegar de uno a otro, en lugar de cargar toda la página destino, cargaremos mediante AJAX sólo aquellas partes que cambian al pasar de una a otra. Esto lo haremos con una ventaja adicional: la transición del contenido del contentplaceholder de la master page lo haremos utilizando animaciones CSS, con lo cual lograremos una experiencia de usuario mucho más elaborada y comunicativa.
- Incluso cuando las páginas no compartan la master page, la navegación se hará también utilizando AJAX, por lo que si bien no podremos aprovechar la reducción del tráfico, podremos hacer uso de los efectos CSS en la transición.Por úlitmo, vale aclarar que las páginas externas a la aplicación se cargarán normalmente.
- Esta nueva feature, para funcionar, depende de que el browser tenga implementadas algunas de las nuevas características de HTML5 como pushState, animaciones y transiciones. Si detectamos que el browser no soporta estas características, haremos un fallback al mecanismo tradicional de carga de páginas.Ya que menciono las animaciones y transiciones, por default las páginas se cargarán con una transición CSS que podrá ser completamente personalizada.Por otra parte, si bien hacemos un uso extensivo de AJAX para lograr este comportamiento, esto no afectará la posibilidad de que las páginas sean indexadas por Google, el mecanismo está pensado para ser completamente SEO friendly.
- Entre los beneficios de este nuevo mecanismo de carga de páginas están que existirá menos tráfico de bajada, ya que sólo viaja la diferencia entre la página origen y destino. También habrá menos carga en el servidor, ya que el código a ejecutar para dibujar la master page no se ejecutará y por último se logrará una experiencia de usuario muy superior.En particular, quienes desarrollan aplicaciones web pensando en dispositivos SD se verán muy beneficiados con este mecanismo, ya que podrán configurar transiciones que se asemejen a las transiciones de pantalla de las aplicaciones nativas.
- El primer cambio en GeneXus Tilo es que los web components se refrescarán de forma independiente. Esto viene relacionado con los cambios en el modelo de eventos que les contaba al principio. Cuando se ejecute un evento de usuario, salvo que se ejecute un Form.Refresh(), es decir, un refresh completo de la pantalla, los cambios sucederán únicamente dentro del web component. Lo mismo si se instancia un objeto distinto en un control web component previamente cargado. El resto de la pantalla permanecerá incambiado.Cabe mencionar que el refresh del web component ofrecerá feedback, mostrando un indicador de actividad y cargando el nuevo contenido utilizando transiciones y animaciones CSS, que se podrán configurar.
- En ocasiones puede suceder que los cambios dentro de un web component afecten a otros web components hermanos en la pantalla. El programador en ese caso, en lugar de ejecutar un Form.Refresh() para refrescar toda la página, podrá mandar a refrescar algunos de los web components hermanos.¿Cómo hará esto? Bueno, en GeneXus Tilo podrá definir grupos de web components. Un web component podrá estar en más de un grupo. Cuando se quiera refrescar varios web components “hermanos” al unísono bastará con configurarlos dentro del mismo grupo y mandar a refrescar el grupo.
- Aquí algunos de los beneficios se repiten, pero vale la pena mencionarlos. Nuevamente obtenemos una reducción del tráfico, al tener componentes independientes, va y viene del server aquello que tiene que ver con el web component únicamente.El procesamiento en el server y el cliente es menor por el mismo motivo, y gracias a las facilidades para agrupación de componentes se le da mayor control al programador sobre lo que pasa en la pantalla.La experiencia de usuario se ve mejorada gracias al feedback que ofrece el component, sumado a la posibilidad de configurar animaciones y transiciones para comunicar los cambios que suceden dentro del web component.
- En resumen,vimos algunas de las características que ofrecerá GeneXus Tilo para lograr las aplicaciones que demandan o demandarán nuestros usuarios finales. Las mejoras giran alrededor dos ejes fundamentales: lograr aplicaciones con una experiencia de usuario sobresaliente y una aplicación ágil y ligera.Además estas mejoras harán aún más fácil programar aplicaciones web y le brindarán mayor control al programador sobre la UI de la aplicación.Falta algo más para el cierre….