Oct 25

He leído “OpenLayers 2.10 Beginner’s Guide”

http://blog.sonxurxo.com/wp-content/uploads/2011/03/openlayers-beginners-guide.pngAcabo de leer OpenLayers 2.10 Beginner’s Guide 

OpenLayers es una librería javascript que nos permite hacer aplicaciones con mapas en nuestra página web. Los mapas pueden ser los de Google Maps, Bing, OpenStreetMap o servidor por cualquier servidor que cumpla los estándares OGC, como Geoserver. OpenLayers "traga" además otro montón de formatos para dibujar mapas directamente de ficheros.

El libro es muy básico, empieza desde el principio, tan desde el principio que incluso nos explica lo básico de javascript y qué son las clases, la herencia, los métodos y atributos. Por supuesto, no se entretiene demasiado en ello, una simple explicación para no pillarse los dedos según va avanzando en OpenLayers.

Si, como yo, has empezado con OpenLayers a base de ensayo y error, copy-paste de código en google y ya tienes algo de experiencia, este libro es muy básico, pero siempre acalara algún concepto que puedes no haber "pillado" en tus pruebas, ensayos, errores, copies y pastes.

Es ideal sin embargo para leer antes de empezar con OpenLayers, el libro va despacio, no es muy complejo lo que explica y va asentando bases antes de seguir. Cada apartado resulta un poco repetitivo porque primero te explica cómo funciona, luego te lo vuelve a explicar mientras te dice cómo codificarlo y finalmente te lo vuelve a explicar añadiendo un título "¿Qué acaba de pasar?" después de que hayas ejecutado el ejemplo que acabas de codificar. Lo dicho, ideal para quien no tiene idea del tema y le gusta asentar bien las cosas.

 

Mar 13

Extraños errores de javascript con Firefox y OpenLayers

 Estamos (seguimos) haciendo un mapa con geoserver en el lado del servidor y OpenLayers en el lado del navegador. Todo va más o menos de perlas dentro de lo que cabe en cualquier proyecto software, hasta que un cliente nos lanza la incidencia de que no puede ver el mapa con Firefox. Revisando veo que el mapa se ve perfectamente con Chrome, con Internet Explorer y con las versiones viejas de Firefox, pero no con las nuevas (de la 7 hacia arriba).

Saco la consola de errores y encuentro errores tan extraños como estos OpenLayers.Class is not a function, OpenLayers.Geometry is undefined, …

Por supuesto, no es problema de carga de librerías javascript, con otros navegadores funciona bien y no aparecen errores 404 de ficheros .js no encontrados.

Aunque desconcertante inicialmente, la solución fue sencilla. Hay algún tipo de incompatibiidad entre la versión de Openlayers que estaba usando (una del año pasado) y la interpretación de javascript de los firefox nuevos. No me he metido a ver cual era exactamente el motivo, pero bastó con actualizar la versión de OpenLayers a la más moderna.

Jul 14

Ajax, navegadores y la memoria

Antes de nada debe quedar claro que no he hecho pruebas en serio, lo que comento a continuación es simplemente lo que me he encontrado sin ir más allá.

Como he comentado en post anteriores, estamos (estábamos, ya se ha entregado) haciendo un portal web en el que hay varias cosas implicadas. El portal es de página única, es decir, entras en sesión y te muestra un mapa (geoserver/openlayers), unas tablas de datos y un chat. No cambias de página en ningún momento y todas las actualizaciones se hacen de forma automática y cada cierto tiempo con ajax.

Nuestro mapa se actualiza usando la librería openlayers. El chat está hecho con GWT, por lo que no hacemos nada de javascript a mano. Las tablas con una extensión de jQuery y se actualizan solitas con ajax. Todo funciona bien, pero hay las siguientes pegas con la memoria.

Por un lado, con internet explorer, si lo dejamos abierto y no tocamos nada, las actualizaciones se hacen solitas cada cierto tiempo y mirando el administrador de tareas de windows vemos que la memoria consumida por Internet Explorer no sube. Tras 24 horas abierto sin salvapantallas de ningún tipo, todo sigue correctamente. Pero ….. si trabajamos con la web (hacemos zoom en el mapa, creamos datos, borramos datos, chateamos, etc, etc, etc), la memoria consumida por internet explorer va creciendo a pasos agigantados. El navegador empieza a ir lento, luego deja de responder y en ocasiones, al final, incluso ha dejado de responder el PC y ha habido que apagarlo de malas maneras.

Por otro lado, con Chrome el comportamiento es bien distinto. Si lo dejamos 24 horas mostrando el portal sin tocar nada, la memoria va creciendo poco a poco. Desde unos 100 Megas en el arranque hasta 1 Giga o Giga y medio tras 24 horas. Pero a pesar de la memoria consumida, Chrome y la aplicación web siguen funcionando igual de ágiles que al empezar. Y si abres la web con Chrome y trabajas en ella, la memoria va crenciendo poco a poco, pero se va también liberando y el resultado final es que crece incluso de forma más lenta que si no tocas nada. Me da la impresión de que Chrome libera memoria según cambias de pestaña, lo minimizas, lo pones detrás de otras ventanas, etc, etc. Y en ningún caso, como en Internet Explorer, nos ha dejado de funcionar ni mucho menos nos ha colgado el PC.

Probando con otras web de las que hay por internet que tengan actualizaciones automáticas cada cierto tiempo (por ejemplo, la misma página de inicio de iGoogle con tus feeds mostrados), veo que también van consumiendo memoria del navegador poco a poco. No he probado a tenerla 24 horas abierta, así que no sé si se estabiliza o no.

Y buscando por internet cosas sobre "memory leaks" en javascript, gwt, openlayers, explorer, chrome … el resultado es desesperanzador. Por lo visto son problemas muy, muy habituales, que requieren una programación muy muy cuidadosa, en la que hay que saber miles de truquillos para hacerlo bien … y como siempre en estos casos, hay trucos específicos para cada navegador o incluso navegadores (internet explorer) que requieren una atención especial.

En fin, me temo que javascript/ajax/navegadores web no están pensados/preparados para aplicaciones web que deben mantenerse abiertas de forma permanente. Están más pensadas para abrir el navegador, ver la página, jugar un rato con ella (un minuto, una hora, dos horas,….) y pasar a otra cosa.

Y en el caso concreto de GWT me ha llamado la atención un comentario que encontré en un foro. Alguien con GWT tenía problemas de pérdida de memoria y buscando por internet encontró lo mismo que yo: "GWT está muy bien pensando y no tiene problemas de memoria", así que su comentario en el foro era el que podía haber escrito yo mismo: "Tengo una aplicación con GWT y problemas de memoria. Buscando en google la solución que encuentro es que GWT es maravilloso y no tiene problemas de memoria. Así que sigo teniendo problemas de memoria"

Jun 03

Chrome vs Explorer

 Como he comentado más veces, estamos haciendo un portal web con mapa (Geoserver + Openlayers). En ese mapa debemos pintar las posiciones de los barcos (algo similar a http://www.localizatodo.com/mapa/ ). Geoserver ofrece dos tipos de Web Service para obtener los barcos y poder pintarlos en el mapa. Ojo, Geoserver no sabe los datos de los barcos, simplemente los lee de su base de datos y algún proceso externo tiene que rellenar dicha base de datos.

Uno de ellos, WFS, consiste en que a través del WebService y en formato XML te da los datos de los barcos (posición, velocidad, rumbo, nombre del barco, tipo de barco, etc). Es el navegador con javascript (y en concreto la librería OpenLayers), la encargada de dibujar los barcos sobre el mapa.

Pues bien, con esta aproximación y con sólo unos tres mil barcos para probar (la base de datos contiene algo menos de treinta mil), Chrome funciona perfectamente. Se puede hacer zoom en el mapa, desplazarlo y jugar con él sin notar ningún retraso importante en los refrescos. Pero Internet Explorer es otra cosa. Con tres mil barcos…. se queda colgado el navegador entero. En cuanto haces zoom, intentas mover el mapa o cualquier cosa, deja de refrescarse, deja de contestar y ni siquiera puedes abrir otras pestañas, cerrarlas, o cerrar el navegador. En fin, una diferencia importante de eficiencia de javascript entre internet explorer 8 y Chrome.

La solución al final usar el otro Web Service que ofrece Geoserver, el WMS. En este Web Service es el mismo Geoserver (el servidor), el que hace unas imágenes jpg (o el formato que elijamos) con el mapa y los barcos pintados encima. Esta imagen se sirve al explorador cuya única tarea consiste en pintarla. Aun así, Chrome sigue funcionando perfectamente, mientra que con internet explorer ya se puede trabajar sin problemas, pero se le sigue notando más "pastoso" a la hora de mover el mapa y hacer zoom.

Una pena que al ser el navegador más usado por la gente profana, nuestro requisito sea que funcione bien con internet explorer.

Feb 18

Programando a ciegas

Nos ha caído un proyecto en el que nos toca hacer un portal web con mapa. Por ello hace tiempo me puse a jugar con GeoServer y OpenLayers. Pero ahora que nos ha caído realmente y me toca a mí desarrollar, llevo ya unos días programando y jugando en serio con estas herramientas, sobre todo con javascript y OpenLayers.

Por parte de GeoServer y OpenLayers he comenzado una serie de apuntes en la chuwiki sobre las cosas que voy descubriendo. Los enlaces a la chuwiki: GeoServer y OpenLayers.

Por otro lado he empezado con la programación en Javascript, lenguaje que nunca he usado más allá de alguna prueba simple, del que no tengo ni idea y del que ni siquiera conozco la sintaxis. Después de unos días de andar programando, buscando cómo hacer cosas concretas por Google, copy-paste, prueba y ensayo, ensayo y error y ver que las cosas misteriosamente funcionan o no funcionan sin tener muy claro por qué … me he decidido a empezar por donde debería haber empezado desde un principio: buscar un tutorial de javascript y leermelo, leerme la documentación de OpenLayers … e incluso la de jQuery, que también estamos empezando a usar.

No, si nunca aprenderé…. hay quien tropieza dos veces en la misma piedra y hay quien, como yo, se empeña en romper la piedra a cabezazos.