Soy desarrollador front-end en HotPads.
Como se menciona en otras respuestas, nuestra interfaz de mapa de búsqueda funciona con Google Maps. Tenemos un tema personalizado y marcadores personalizados para mostrar cada listado. Sin embargo, la tecnología llega mucho más allá de la interfaz de usuario front-end. Hacemos un par de mejoras para aumentar el rendimiento.
Procesamiento del lado del servidor : similar a Google Maps, utilizamos un sistema basado en quad para indexar nuestros listados. Nuestros servidores de fondo ejecutan Java Tomcat. Usando un índice invertido personalizado muy eficiente, podemos filtrar listados por área, precio, camas, palabras clave, etc. Los resultados de la búsqueda en el mapa se devuelven con solo los detalles necesarios para mostrar una vista previa en el mapa. Una vez que haga clic, haremos otra llamada para cargar los detalles del listado. Estas mejoras en el back-end aceleran nuestras llamadas api.
Almacenamiento en caché del lado del cliente : si va a otros sitios de búsqueda basados en mapas, lo más probable es que vea un cargador giratorio en cada movimiento del mapa. Esos sitios están haciendo llamadas del lado del cliente a su API. Mientras espera la respuesta, el usuario ve el diálogo de carga. En HotPads, almacenamos en caché los listados del cliente. Los listados de cualquier área que ya haya visto se cargarán casi instantáneamente. La llamada a la API todavía se realiza en segundo plano y los nuevos listados complementarán lo que ya ve en el mapa.
Aunque simple de decir, el almacenamiento en caché del lado del cliente es bastante complicado. Requiere lógica duplicada en el cliente. El cliente debe actuar exactamente como el servidor: mostrar listados dentro del cuadro delimitador con mascotas, menos de $ 2,000 y cualquier otro filtro, a un nivel de zoom particular. Tampoco puede olvidarse de implementar su filtrado de prioridad o agrupamiento en función de los niveles de zoom.
Optimizaciones de la interfaz de usuario : en el escritorio, cada vez que hace clic en una lista, llamamos a la API de detalles de la lista. Una vez cargado, mostramos ese listado. El usuario espera en esta llamada de API y, como resultado, ve un control de carga. En dispositivos móviles, sin embargo, optimizamos el flujo de la interfaz de usuario. Cuando el usuario hace clic en una lista, hacemos la misma llamada a la API para los detalles de la lista. Sin embargo, para el usuario simplemente mostramos una tarjeta de vista previa, que consiste en información ya disponible de la llamada API general de búsqueda de mapas. Una vez que el usuario hace clic en la tarjeta de vista previa del listado para obtener más información, mostramos la vista de detalles del listado. Aunque hay dos pasos separados, esta interfaz de usuario proporciona una experiencia más ágil para nuestro usuario.
Por otro lado, ahora estamos trabajando en reescribir nuestro sitio usando React and Flux. Estamos realmente entusiasmados con esta nueva arquitectura. No solo proporciona mejoras de rendimiento, ¿alguien dijo isomorfo? Sí, es increíble, también nos permitirá crear más funciones en menos tiempo. Acabamos de lanzar nuestra página de inicio Node / React / Flux, desde la cual hemos visto una caída del 10% (mejora) en la tasa de rebote. Pronto publicaremos algunas publicaciones de blog sobre el tema. (Me aseguraré de volver y actualizar esta publicación).
