Buenas prácticas para el desarrollo de aplicaciones web con Esri Leaflet y ArcGIS Online

Transcripción

1 Buenas prácticas para el desarrollo de aplicaciones web con Esri Leaflet y ArcGIS Online Arturo Torres Vázquez (CONABIO) Johanna van Rosmalen Farías (Profesional independiente) REUNIÓN DE USUARIOS SIGSA ESRI 2015

2 Buenas prácticas para el desarrollo de aplicaciones Web SIG Qué entendemos por buenas prácticas? Un conjunto de principios, arquitecturas y metodologías que han sido ampliamente probados y que pueden ser útiles para lograr un balance entre facilidad de uso, rendimiento, escalabilidad y un manejo eficiente de recursos Cuál es nuestro propósito? Cada proyecto tiene requerimientos particulares, por tanto no es posible ofrecer soluciones que funcionen para todos los casos, pero si existen principios generales, nuestro objetivo es ilustrar como se aplican en el ámbito de las aplicaciones Web SIG A quién va dirigida nuestra charla? Esencialmente, a responsables de proyectos y a desarrolladores de aplicaciones

3 Por qué se necesita seguir buenas prácticas? BIG DATA el concepto de Big Data aplica para toda aquella información que no puede ser procesada o analizada utilizando procesos o herramientas tradicionales (IBM, 2012)

4

5 CÓMO SE ACCEDE A INTERNET EN MEXICO En 2014, el 14,9% del acceso a Internet se realizaba mediante equipos diferentes al computador personal. Entre estos equipos prevalecía el teléfono móvil, seguido de las tabletas y otros La tendencia apunta a ubicar al teléfono móvil como la principal plataforma de acceso; entre mayo de 2013 y mayo de 2014 el acceso a Internet por medio de dispositivos móviles aumentó un 100% o más. (CEPAL, 2015)

6

7 Marco de referencia Optimizar Soluciones Estándares Web Aplicaciones de servidor Diseño de la aplicación Web Modelado de datos Tiempo de carga de la aplicación Caché local, HTML5 Caché (tiles), CDN, Balance de carga Clientes ligeros Caché local Desempeño de la red Caché local, HTML5 Caché local, Compresión de datos (tiles) Carga sobre demanda (tiles) Carga sobre demanda Desempeño del navegador Caché local, Conexiones Carga sobre demanda Compresión de datos (vectores) Desempeño del usuario Accesibilidad Rendimiento, Clústeres, Cómputo en nube Usabilidad, Utilidad, Ergonomía

8 Marco de referencia: Carga de la aplicación Optimizar Soluciones Estándares Web Aplicaciones de servidor Diseño de la aplicación Web Modelado de datos Tiempo de carga de la aplicación Caché local, HTML5 Caché (tiles), CDN, Balance de carga Clientes ligeros Caché local Desempeño de la red Caché local, HTML5 Caché local, Compresión de datos (tiles) Carga sobre demanda (tiles) Carga sobre demanda Desempeño del navegador Caché local, Conexiones Carga sobre demanda Compresión de datos (vectores) Desempeño del usuario Accesibilidad Rendimiento, Clústeres, Cómputo en nube Usabilidad, Utilidad, Ergonomía

9 Disminuir el tiempo de carga de la aplicación: caché

10 Disminuir el tiempo de carga de la aplicación: caché

11 Disminuir el tiempo de carga de la aplicación: caché (tiles)

12 Disminuir el tiempo de carga de la aplicación: content delivery networks 1 imagen servida de 8 fuentes distintas

13 Disminuir el tiempo de carga de la aplicación: content delivery networks

14 Disminuir el tiempo de carga de la aplicación: balance de carga

15 Disminuir el tiempo de carga de la aplicación: clientes ligeros En Internet Explorer, cuando un sólo script ha ejecutado más de 5 millones de sentencias

16 Disminuir el tiempo de carga de la aplicación: clientes ligeros

17 Disminuir el tiempo de carga de la aplicación: clientes ligeros

18 Marco de referencia: desempeño de la red Optimizar Soluciones Estándares Web Aplicaciones de servidor Diseño de la aplicación Web Modelado de datos Tiempo de carga de la aplicación Caché local, HTML5 Caché (tiles), CDN, Balance de carga Clientes ligeros Caché local Desempeño de la red Caché local, HTML5 Caché local, Compresión de datos (tiles) Carga sobre demanda (tiles) Carga sobre demanda Desempeño del navegador Caché local, Conexiones Carga sobre demanda Compresión de datos (vectores) Desempeño del usuario Accesibilidad Rendimiento, Clústeres, Cómputo en nube Usabilidad, Utilidad, Ergonomía

19 Desempeño de la red: disminuir el tamaño de los datos enviados t?f=json&text=mexico&maxsuggestions=100 Con compresión (gzip): 0.8 KB Sin compresión: 3.5 KB

20 Desempeño de la red: disminuir el tamaño de los datos enviados (tiles) Calidad alta (90%): 120KB Calidad media (50%): 51.3 KB

21 Desempeño de la red: disminuir el tamaño de los datos enviados (vectores) Generalización al vuelo Tiles de capas vectoriales

22 Desempeño de la red: carga sobre demanda (tiles)

23 Desempeño de la red: carga sobre demanda (tiles)

24 Desempeño de la red: carga sobre demanda (actualización del caché)

25 Desempeño de la red: carga sobre demanda (paginado)

26 Marco de referencia: desempeño del navegador Optimizar Soluciones Estándares Web Aplicaciones de servidor Diseño de la aplicación Web Modelado de datos Tiempo de carga de la aplicación Caché local, HTML5 Caché (tiles), CDN, Balance de carga Clientes ligeros Caché local Desempeño de la red Caché local, HTML5 Caché local, Compresión de datos (tiles) Carga sobre demanda (tiles) Carga sobre demanda Desempeño del navegador Caché local, Conexiones Carga sobre demanda Compresión de datos (vectores) Desempeño del usuario Accesibilidad Rendimiento, Clústeres, Cómputo en nube Usabilidad, Utilidad, Ergonomía

27 Desempeño del navegador: Conexiones (costo de una conexión nueva)

28 Desempeño del navegador: Conexiones (costo de una conexión reutilizada)

29 Desempeño del navegador: Conexiones

30 Marco de referencia: desempeño del usuario Optimizar Soluciones Estándares Web Aplicaciones de servidor Diseño de la aplicación Web Modelado de datos Tiempo de carga de la aplicación Caché local, HTML5 Caché (tiles), CDN, Balance de carga Clientes ligeros Caché local Desempeño de la red Caché local, HTML5 Caché local, Compresión de datos (tiles) Carga sobre demanda (tiles) Carga sobre demanda Desempeño del navegador Caché local, Conexiones Carga sobre demanda Compresión de datos (vectores) Desempeño del usuario Accesibilidad Rendimiento, Clústeres, Cómputo en nube Usabilidad, Utilidad, Ergonomía

31 Desempeño del usuario: rendimiento Demora ms La tarea es instantánea Percepción del usuario ms Pequeña demora perceptible ms La herramienta funciona 1,000+ ms Probablemente el usuario se distraiga en otra actividad 10,000+ ms La actividad es abandonada

32 Desempeño del usuario: computación en nube Los modelos de negocio basados en la computación en la nube permiten a las empresas disminuir los costos de adquisición y mantenimiento de equipos, utilizar esquemas de determinación de precios que posibilitan que el usuario pague según el uso, acceder a soluciones tecnológicas desde cualquier punto geográfico y escalar nuevos procesos sin grandes costos de infraestructura. (CEPAL, 2015)

33 Desempeño del usuario: computación en nube

34 Desempeño del usuario: computación en nube ArcGIS Online (Software as a Service): Hosted Services: Feature Service, Tile Map Service Content Services: Map Services (v.g. Image Services), Task Services (v.g. Geocoding, Routing) ArcGIS for Server Amazon EC2 (ArcGIS Server Cloud Builder) Microsoft Windows Server Red Hat Enterprise SUSE Linux Enterprise Server GIS software as a service ArcLogistics, Business Analyst Online, Community Analyst Mobile GIS service

35 Desempeño del usuario: clústeres Building ArcGIS Server to Scale on Linux ArcGIS for Server 10.1 and 10.2 VMware Deployment Guide

36 Demo Componentes de una aplicación web SIG Datos SIG Arcgis Server Arcgis Online REST API Arcgis FLEX API Arcgis Javascript API Arcgis Silverlight API Esri Leaflet (plugin de Leaflet API) Usuario Esri Leaflet permite usar los mapas base de Esri, los feature services, mapas de tiles, dinámicos y de imágenes alojados en ArcGIS Online o ArcGIS Server. Demo: Capas alojadas en la nube (Arcgis Online) Optimización de carga de capas muy grandes según niveles de zoom: - Combinación de capas de tiles pre-generados en el servidor con feature services - Cliente ligero personalizado con Esri Leaflet - Ejemplo: Capa de Secciones electorales de INEGI 2010 (>130 mb polígonos), Capa de Comercios al mayoreo del DENUE (>150 mil puntos), Capa de AGEB servicios DF - Autentificación de usuarios (Oauth) - Edición - Capas dinámicas de Esri

37 Recursos: Videos Aplicaciones ESRI ArcGIS API for JavaScript - Tips and Tricks for Developing and Debugging Apps Optimizing Your JavaScript App for Performance Web Mapping Application Interface Design: Best Practices and Tools Advanced Map Caching Topics Building ArcGIS Server to Scale on Linux Web Map Performance Strategies

38 Recursos: Videos Técnicas de optimización, estándares y herramientas Velocity 2014 Conference 1tHVCy High performance web sites The Perception of Speed Design + Performance

39 Recursos: Libros y documentos Aplicaciones ESRI ArcGIS for Server 10.1 and 10.2 VMware Deployment Guide (ESRI, 2013) ArcGIS Enterprise Deployment (ESRI, 2014) Best Practices for Creating an ArcGIS Server Web Mapping Application for Municipal/Local Government (ESRI, 2009) ArcGIS Web Development (Manning, 2014) Optimización de aplicaciones Web Pro HTML5 performance (Apress, 2012) High Performance Browser Networking (O'Reilly, 2013) High Performance JavaScript (O'Reilly, 2010) Designing for Performance (O'Reilly, 2014)

40 Recursos: Libros y documentos Uso de Internet, datos y tecnología La nueva revolución digital (CEPAL, 2015) Qué es Big Data? (IBM, 2012)