Analizamos la nueva versión de Grooveshark un servicio online en el que podrás escuchar música al más puro estilo Spotify. Lo que en principio podría parecer flash no deja de ser una mezcla de javascript, css y html bien cuidado y pensado. ¡Atentos porque hay un montón de recursos open source!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Conociendo un poco sobre Grooveshark

Grooveshark

Como pequeña introducción acerca de Grooveshark simplemente comentar que es un servicio web que nos permite escuchar música de forma gratuita sin ningún tipo de instalación o registro. Algo así como un Spotify o Youtube (de la música).

Lo realmente impresionante de todo este rediseño de la interfaz como comenta uno de sus artífices es que han conseguido mucho con poco, gracias a la comunidad open source y a todo el trabajo anterior de mucha gente que ha compartido con la comunidad sus obras.

jQuery: básico para toda la interfaz

No se le escapa a nadie que jQuery se está convirtiendo en “LA LIBRERÍA”, hasta tal punto de que parece una especie de biblioteca estándar en el desarrollo web. Realmente ha mejorado mucho la forma en la que trabajamos con el DOM, la API poco a poco se está volviendo más madura y está siendo utilizada en sitios web de gran envergadura.

Para el rediseño el equipo de Grooveshark confió desde el primer momento en la potencia, velocidad y comodidad de jQuery.

La popularidad suele ser un arma de doble filo, para algunos jQuery es sinónimo de comodidad y calidad y para los más puristas, el que sea “usable por las masas” le resta por decirlo de alguna forma “glamour” y calidad… pero la realidad es que para el equipo de Grooveshark esto ha permitido que tanto el diseñador como el programador hayan podido trabajar de forma mucho más rápida y cómoda, desempeñando un trabajo más óptimo.

jQuery UI: facilidades y estandarización

Como ya comentaba en la introducción, a primera vista puede no parecer que se esté usando javascript, pero es que además también se está haciendo uso de jQuery UI para cosas tan clásicas y necesarias como:

  • Autocompletado
  • Controles “corredores” (sliders)
  • Selectores de fechas
  • Arrastrar y soltar
  • SlickGrid

La ventaja de todos estos añadidos es evidente, no se reinventa la rueda… pero personalmente la fuerza y reconocimiento de todo esto radica en que han sabido personalizarlo y adaptarlo a sus intereses, sin caer en ese “tufo” que dejan muchas webs y que nada más entrar reconoces los plugins que utilizan.

Grooveshark

Otra de las ventajas mayores a la hora de utilizar jQuery UI es que pudieron utilizar sólo lo que necesitan, la velocidad de carga e interacción era uno de los principales objetivos a la hora de afrontar el rediseño de la interfaz.

MVC: Modelo-Vista-Controlador en javascript

Grooveshark dispone también de su aplicación flash construída en una arquitectura MVC (Modelo-Vista-Controlador) y la intención era retener este paradigma para la versión javascript. Después de barajar diversas opciones se decidieron a utilizar jMVC.

Grooveshark

A pesar de proveer un montón de funciones y opciones trataron de ceñirse a lo básico, a las raíces más básicas de este nuevo planteamiento. En defitiniva lo que han hecho ha sido basarse en la herencia simple de javascript de John Resig (creador de jQuery).

Todo este planteamiento les ha permitido abstraerse de complejos sistemas de gestión de eventos, ajax y otros detalles que no traen más que dolor de cabeza. Una vez más el trabajo de la comunidad les ha permitido salvar estos problemas con cierta facilidad y solvencia.

SlickGrid para tablas

Si alguna vez os ha tocado desarrollar algún proyecto en el que el muestreo de información en tablas cobra mucha importancia SlickGrid es algo que os ahorrará mucho trabajo. Sólo basta con echarle un vistazo a sus ejemplos para darse cuenta de su potencia.

Este componente les ha permitido entre otras cosas:

  • Ordenamiento dinámico
  • Ordenamiento aleatorio
  • Arrastrar y soltar
  • Navegación mediante hotkeys de teclado

Dejando atrás estos efectos y funciones lo realmente importante de todo esto es que les ha permitido liberar mucha carga del lado del servidor. ¿Por qué? Pues muy sencillo no es lo mismo realizar un listado ordenado que ha seleccionado el usuario teniendo que pedirle los nuevos resultados a la base de datos que simplemente se ordenen en el lado del cliente, en el propio navegador mediante javascript.

Grooveshark

Si hubiésemos conocido esto en Cokidoo para el proyecto Cokisam nos habríamos ahorrado mucho trabajo… aunque para aquel entonces el componente estaba un poco verde :) .

jQuery-localize: multiidioma en javascript

Otro de los problemas que uno se puede encontrar a la hora de mantener un sitio web multiidioma es la propia localización en distintos idiomas. Ya hemos comentado alguna vez cómo podemos afrontarlo a nivel de programación en PHP.

Grooveshark

Pero… ¿qué pasa con javascript? ¿cómo cambio de idioma a nivel de javascript sin recargar la página completamente? La respuesta es utilizar el plugin jquery-localize.

Utilizando este plugin como punto de partida y con algunos retoques para idiomas con caracteres especiales han conseguido que el usuario pueda cambiar de idioma de forma dinámica sin prácticamente pestañear, toda la interfaz cambia de un idioma a otro.

Otras cosillas interesantes

Como podréis imaginar no hemos comentado todos sus cambios y curiosidades, pero podréis seguir indagando sobre otros aspectos que os listamos a continuación:

  • Store.js — almacenamiento de datos en local de todo tipo.
  • PubSub — comunicación entre diferentes secciones de la aplicación
  • jquery.hotkeys — atajos de teclado
  • jjmenu — menús contextualizados
  • JSON — realmente útil para el proyecto
  • Underscore — algunas funciones “pescadas” de aquí
  • Yaml — administración de dependencias y configuración
  • Rake — construye e implanta rutinas
  • Closure Compiler — minificación javascript
  • JSLint — poniendo bonito el código fuente
  • Smusher — optimización de imágenes sin instalar ImageMagick

Reflexión final

Lo hemos ido comentando a lo largo de todo el artículo, pero la realidad es que todos estos proyectos de la comunidad open source han salvado una ingente cantidad de horas de trabajo muy difícil de calcular.

Muchas veces no nos damos cuenta de que no es necesario reinventar la rueda y si algo podemos aprender de todo esto es que reaprovechar el trabajo de otros y no reinventar la rueda puede salvarnos muchas horas “inútiles” de trabajo, debemos investigar antes de actuar para ver si otras personas han tenido los mismos problemas y las soluciones que han aportado.

Espero que os haya gustado este pequeño análisis, si os gustaría que analizásemos otros proyectos que técnicamente os parecen interesantes simplemente comentadlo por aquí mismo.

¡Nos vemos en el próximo artículo!

Te sugerimos otras entradas relacionadas...

No hay entradas relacionadas para esta publicación.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (18 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Espero que os resulte interesante el ladrillo… a mí este tipo de posts me encantan y ayudan a encontrar un montón de plugins y herramientas útiles :)

ziberfrenico

Para quienes quieran integrar una potentísima librería en la vista con JSF de Java recomiendo Primefaces, basada en jquery. Impresionante.

Pedazo de post en el buen sentido. Me ha encantado. ¡Enhorabuena!

Buen aporte ziberfrenico!

Gracias por tus comentarios Limay :)

Daniel Nava

Interesante articulo, acaso fuiste parte del equipo de desarrollo de la aplicación?

Saludos

@Daniel no, pero entre firebug y el cotilleo de worklog de sus desarrolladores se puede sacar mucha información ;)

Muy interesante Adrián.

Directo a favoritos para cuando pueda poner en práctica todo esto.

Gracias!

Empecé a usar grooveshark desde hace 1 mes que salió la nueva versión.. y desde entonces escucho el 95% de mi música ahí…
Realmente parece una aplicación de escritorio.. El trabajo de programación es excelente.. :P

De la Cuesta

Gran artículo. Directo a favoritos y suscripción vía e-mail.

Saludos.

RamaNeher

Me pareció un artículo genial, hace rato que venía mirando a Grove y me preguntaba como fuck! podía haber tanto en tan poco!

Buenas a todos, un articulo tremendamente interesante la primera vez que me metí en groveshark me quede alucinado al ver como iba de fluido la aplicación.

también hay que recordar las donaciones a los desarrolladores de dichas librerías y Software Libre, y no solo de aprovecharse de su trabajo nada mas por que ya esta hecho.. recuerden pasar por las paginas oficiales y buscar un botón de donación….

también lo de hrs “inútiles” no creo que sean tan inútiles por que cuando creas soluciones es cuando mas conoces el lenguaje y eso te da una experiencia cosa que te mutila y obstaculiza el usar librerías que ya solucionen las cosas, no digo que no hay que aprovechar en ciertas ocasiones pero también digo que no es pecado crear una solución que ya esta hecha.. es una decisión personal o en casos profesionales del jefe de proyecto que en general estos caso ya sabemos que caeran al uso de librerias ya hechas pero si no estamos hablando de algo tiempo/$$$ creo que no esta de mas contribuir con una opcion si podemos crear algo que ya exista pero mejor, es algo que se debe ponderar al iniciar un proyecto sea de lucro o no, si nos vamos al uso intencibo de liberias ya de luego tenemos a los pseudodesarrolladores nada mas compiando librerias y semi-entendiendo JS y AJAX o pensando que programan en JQuery y creen q JS es otra cosa o q AJAX es cualquier modificacion al DOM o CSS lo digo por que infinidad de veces me lo he tomado expertos en copiar ejemplos de librerias pero de desarrollar nada mas nada si no lo encuentran posteado en internet namas son incmpases y si nada mas les salta un errorsito se ponen a llorar…. ademas que la primera solución no tiene por que ser la mejor y si nos estacamos en copiar y en “usar” lo que ya esta hecho, la elite de desarrolladores capaces de desarrollar algo fuerte se vera bastante pequeña que hoy en día ya es difícil encortar un buen desarrollador aunque hay depende del nivel que quieres alcanzar y de lo que te guste hacer… si te gusta solo cobrar y terminar pronto ps no hay mucho q hablar.. si te gusta conocer y crear nuevas opciones tambien ya saben que hacer… les recomiendo el podcat 98 de javahispano donde entrevistan a Oscar Toledo el 2do lugar del concurso Javascript 1K al final vienen algunas recomendaciones al respecto del uso de libreria y “recrear” la rueda… comparto mucho su idea a excepción de la doc en español q no esta de mas pero hay q aceptar que el ingles domina U.u… pero de alli en mas este si es un Master del JS… http://bit.ly/gPeR6Q recordar que JS se estanco mas de 10 años por solo hacer copy/paste de los validadores de formularios y de las animaciositas de tras del mouse U.u AJAX, CSS2, DOM y todo lo de web2.0 bien pudo existir hace 10 años pero JS no se tomaba en serio y nadie profundizaba en sus capacidades.. ahora sabemos que se puede lograr pero hay pocos que quieren profundizar en el lenguaje y se quedan en lo que sea mas facil….. solo defiendo la contra parte y a los que nos gusta desarrollar cosas aunque estas ya esten hechas por X o Y, que tampoco digo que la postura que menciona este mal al extremo pero también me gustaría que no trataran como tontos a los que nos aventuramos a crear nuestras propias soluciones pese a saber que ya existe alguna…

Hi jerod! It’s already linked in the first part of the article ;)

Alguien sabe que base de datos usan? y con que lenguaje hacen la conexión y las peteciones? Saludos

Joan

Muy bueno! Cada vez que lo usaba intentaba ir averiguando cómo estaba hecho porque me picaba la curiosidad, gran trabajo y muy interesante. Un saludo desde Barcelona!