Hace poco una aplicación de mis favoritas, Grooveshark sufrió un cambio bastante notorio. Por las redes sociales (principalmente en Twitter) surgían comentarios como “Que bueno, Grooveshark ya es HTML5 porque no usa Flash”, o “Ahora Grooveshark es mejor sin Flash”, inclusive algún usuario con el cuál intercambie algunas opiniones dijo lo siguiente:
Y esa es una de las razones principales por lo cuál escribo este texto, para dejar clara mi posición en este debate y tratar de mitigar ese buzzword impuesto por Jobs al decir que Flash era una tecnología mala, y después referirse así de otras cuantas tecnologías.
Revisaré cada uno de los puntos importantes en este cambio y los invito a compartir alguna reflexión en el hilo de mensajes de este post.
¿Es o no es HTML5?
Desde cualquier navegador al ver el código fuente la primera línea de código que nos encontraremos es la siguiente:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd«>
Lo cuál implica que se esta utilizando una versión de HTML llamada XHTML estricto, que dentro de otras cosas es bastante “dura” con los navegadores viejos o con aquellos que no son del todo compatibles con los estándares web, al ser basada totalmente en XML. XHTML no es del todo malo, al contrario provoco que los diseñadores y/o desarrolladores web hicieramos los sitios con menos errores, sin embargo provocó también una severa laguna de compatibilidad hacia el contenido ya existente en Internet.
Y si seguimos analizando un poco más el código de Grooveshark encontraremos que no hacen uso de ninguna de las nuevas etiquetas semánticas (nav, section, aside, header, footer, etc…) ni mucho menos de las etiquetas de Media como <audio> o <video>, lo que si están haciendo es explotar bien recursos como CSS y Javascript.
Por lo que como diríamos los mexicanos “a ojo de buen cubero” el nuevo Grooveshark NO es HTML5, siendo esto último solo un pecado para los puristas new age de la web y para el resto de los mortales creo que es algo un tanto menos complicado. Sus razones tendrá el equipo de Grooveshark para no hacer uso de las APIs disponibles dentro de HTML5 (si acaso localStorage en el core de la aplicación).
Nueva Interfaz ¿Mejor Experiencia de Usuario?
Desde el punto de vista de un servidor, que me considero un usuario promedio de la aplicación la nueva interfaz creo que no mejoro mucho con respecto a la versión anterior, de hecho algunos detalles empeoraron y aquí mis razones…
Interfaz de Búsqueda
Uno de los detalles más importates dentro de Grooveshark. Como podremos ver dentro de las capturas de pantalla al realizar una búsqueda se sigue conservando un detalle tan socorrido hoy en día en las interfaces de usuario como el “search as you type”, sin embargo anteriormente esas búsquedas permitían distinguir claramente los términos relevantes, cosa que hoy no sucede del todo claro.
Quizá algunos lo consideren un pequeño detalle pero al momento de estar realizando una búsqueda actualmente es un must, si no me creen? pregúntenle a los chicos de Google Instant 😉
Interacciones de Drag & Drop
Si Grooveshark es la primera aplicación RIA que utilizamos tal vez no lo notemos mucho, sin embargo con el paso del tiempo al utilizar aplicaciones como Aviary, Picnik, Lovely Charts, etc. es una exigencia común de los usuarios tener una interacción de drag & drop lo más natural posible, similar a un aplicación de escritorio. Y esto es algo que en la nueva interfaz no se han conseguido del todo.
Si probamos hacer ciertos drags entre componentes de la aplicación, hay ciertos drags que se comportan erráticos en la nueva versión, sin mencionar que dejaron fuera una interacción de drop-zone para eliminar selecciones ráidamente de un playlist.
Estaciones de Radio
Esta es una de mis opciones favoritas dentro de toda la aplicación, básicamente sirve para descubrir nuevas canciones y agregarlas a nuestros playlists. Cada que Grooveshark hace una recomendación tenemos la posibilidad de hacer un like al estilo Facebook.
Si miramos ambas funcionalidades, no es difícil saber que antes tenía un diseño más limpio e integrado a la interfaz.
Canción Actual
Cuando estamos en modo de reproducción un detalle que extraño de la versión anterior era que directamente sobre la barra para hacer scrubbing aparecía un componente que facilitaba la integración con las demás redes sociales. Actualmente ese componente esta ausente y hay que dar unos cuantos clicks extras para poder compartir una canción y unos muchos más para poder importar algún contacto de otro de nuestros perfiles (Facebook, Twitter, etc…)
Si bien es cierto que la interfaz ha quedado un poco más “limpia” como podemos ver hay algunos detalles que se olvidaron de implementar en esta nueva versión y no detaca algún control y/o contenedor por su innovadora funcionalidad en la aplicación.
Desempeño y Tiempo de Desarrollo
Este será quizá el punto más debatido por todos. ¿Qué es mejor? Performance a costa del Time to Market o lo opuesto?
Los puristas del código: hackers, ninjas y presuntos implicados dirán que hay que optimizar al máximo el desempeño de los algoritmos y gastar lo menos posible los recursos de la computadora del usuario. En el otro lado los puristas de negocio: entrepeneurs, marketeros y demás dirán que lo más importante es lanzar el producto y hacer dinero. ¿Cuál de ellos tiene la razón? ambos! en cierto sentido y hay que encontrar ese “balance entre código y dinero” para que un producto como Grooveshark sobreviva al emprendiemiento y logre madurar su fase de start-up si es que ese es su propósito.
Alguna vez tuve oportunidad de platicar con Andrés Barreto (co-fundador de Grooveshark) y recuerdo que le pregunté ¿por qué habían elegido Flex como tecnología para el desarrollo? él me respondió de lo más natural, que pusieron a dos equipos a desarrollar el producto, uno con AJAX y otro con Flex y el equipo de Flex terminó primero.
No voy a discutir si una tecnología es mejor que la otra, simplemete cada una tiene sus pros y sus contras y al final del día para este proyecto resulto ser más rápido el desarrollo con Flex y por ende pudieron liberar el producto y dar a conocer Grooveshark.
En esta nueva versión decidieron cambiar de tecnología de presentación de una basada en Flash a una basada en HTML, CSS y Javascript. De esta decisión cada quién tendrá sus opiniones al respecto, y podremos suponer algunas cosas, sin embargo nadie sabrá realmente la razón más allá de los cuarteles de Grooveshark, y para el resto de nosotros quiero compartir un pequeño análisis que hice con respecto al desempeño de una versión y otra para que cada quién saque sus propias conclusiones.
Grooveshark Nuevo
Uso promedio del CPU 15.95% del proceso Chrome incluyendo el subproceso gcswf32.dll que es el Flash Player incluído en el navegador.
Grooveshark Retro
Uso promedio del CPU 15.93% del proceso Chrome incluyendo el subproceso gcswf32.dll que es el Flash Player incluído en el navegador.
Los screenshots anteriores fueron realizados en una laptop Dell con 1.8 GHZ AMD Turion X2, 2GB RAM con Windows 7, la prueba consistió en buscar una canción de mi grupo favorito Soda Stereo 😉 y reproducirla por aproximadamente minuto y medio. Elegí Google Chrome para realizar las pruebas puesto que me pareció el ambiente más “justo” para ambas tecnologías puesto que viene incluído Flash Player de una forma más directa y es el que hasta ahora tiene el motor de Javascript más rápido V8.
Como podemos observar no hay gran variación en el uso de procesamiento entre una y otra versión. Lo siguiente que hice fue analizar los recursos utilizados por Grooveshark en cada una de sus versiones, esto se puede hacer con alguna herramienta como Firebug o las herramientas de desarrollo de Google Chrome. El resultado fue igual de interesante…
Grooveshark Nuevo
Velocidad de Carga 14.20 segundos
Tamaño de los Recursos 1.32 MB
Grooveshark Retro
Velocidad de Carga 18.21 segundos
Tamaño de los Recursos 2.72 MB
El nuevo Grooveshark tiene la mayoría de sus recursos concentrados en archivos de Javascript y HTML miéntras que en la versión anterior la mayor parte de la carga de la aplicación se la llevaba el SWF principal que contenía la mayor parte de la aplicación. Las hojas de estilo CSS estan presenten en ambas versiones al igual que los elementos externos como librerías de Analytics o de integración con un servicio de Last.FM llamado AudioScrobbler.
¿Sigue usando Flash?
Esta es la primera pregunta que muchos nos hicimos cuando vimos la nueva versión de Grooveshark, y la respuesta es afirmativa: El Nuevo Grooveshark sigue usando Flash como podemos comprobarlo en la siguiente imagen:
Las razones para esto son variadas, Flash les permite manejar DRM cuestión importante si estás en el negocio «legal» de la música en línea. Además sus advertisers siguen utilizando Flash para sus anuncios como podemos ver en este bonito fondo de Victoria’s Secret. Y si en un futuro Grooveshark quiere incursionar en algún otro tipo de negocio, por ejemplo podría ocupar un lugar bastante interesante entre ShoutCast y las Redes Sociales sin lugar a dudas Flash es una buena opción que les permitiría llevarlo a cabo.
Conclusiones
Si has llegado hasta este punto no me queda más que darte las gracias e invitarte a dejarme un comentario en este hilo de mensajes o en mi twitter @edgarparada.
Yo seguiré disfrutando de esta fenomenal aplicación porque al final del día lo importante es el contenido, y claro seguiré apostándole a Flex como tecnología para hacer RIA y a HTML5 otro tanto para complementar mi caja de herramientas personal, y compartiendo mi conocimiento claro esta en Activ, RIActive y demás lugares.
edgarparada.mx 
Excelente trabajo, muy clara la explicacion a ver si nos ponemos a desarrollar lo nuevo y dejamos de estar en discuciones infructiferas. Mis felicitaciones
Muchas gracias Luis como siempre un placer 🙂
Toda la razón… la primera vez q vi el nuedo diseño del grooveshark me quede embobado por lo limpio de lo gráfico, aunque su distribución de elementos es muy parecido al anterior. Pero conforme mas lo usaba me incomodaba que el drag & drop no fuera tan intuitivo como la version anterior.. aunq yo siendo un enagnado de que lo que escucho pueda hacerse scrobbling al last fm esta version creo que se apendeja menos que la anterior.. claro que hay muchas cosas que mejorar pero creo ( mas bien espero) que conforme vaya pasando el tiempo vayan actulizandolo.
Esperemos que saquen próximamente actualizaciones para recuperar al menos esa experiencia que ya habían ganado, gracias por el RT
Todo este efecto mediático que rodea al html5 me recuerda a la idea que algunos tenían de que tu sitio web se volvía «web 2.0» con que le pusieras efectos glossy jeje.
Queda claro que no es para nada html ni en el doctype y no está mal. un sitio migrará si los beneficios que obtenga lo justifican ¿no?
Lo que sí se me hace interesante es por qué habrán migrado una aplicación de Flex a XHTML (más si consideramos que hay una versión nueva de Flex y una nueva de HTML).
Ese caso es un misterio que solamente el equipo de Grooveshark sabe, quizá están pensando en alguna estrategia para IE7 LOL
Creo que es un buen avance para Grooveshark.
Mi parecer es que no deben usarse tecnologías propietarias cuando existan tecnologías abiertas que cumplan el mismo propósito. HTML 5 es un auténtico Flash killer en sus respectivas formas actuales. En 2002 la única forma de poner en el Web una app con ventanas múltiples era Flash o DHTML, pero este último aun no era muy eficiente. Hoy Flash debe ser capaz de presentar nuevos trucos, porque ventanitas, mp3, video y animación ya no sorprenden a nadie.
¿Qué sorpresas traerá Flash CS6?
Oscar, seguramente Flash nos sorprenderá en próximas ediciones con 3d nativo bajo la manga y exportación directa hacia HTML5 y de nueva cuenta la herramienta tendrá una posición interesante para los diseñadores y desarrolladores web.
A mi lo que no me queda del todo claro es por qué utilizar HTML + JavaScript + etc… para todo el front y seguir usando Flash para cargar el streaming de los audios (sin tomar en cuenta el carrusel del background ya que podría resolverse fácilmente con otras tecnologías) ? No lo digo por el streaming en sí, lo digo por qué «para qué permitir visualizar la app en, por ejemplo, un iPad (ya que no tiene flashplayer instalado) si de todas formas no se puede utilizar». Supongo que es por el hecho de preparar la app lo más que se pueda sin depender del plugin del FlashPlayer para cuando resuelvan lo del streaming del audio sin el FlashPlayer. No se me ocurre otra razón.
Qué opinan ustedes ???
Albert, lo primero que hice después de enterarme del cambio fue intentar visualizar Grooveshark en el iPad y oh sorpresa! posiblemente están evaluando diferentes tecnologías de streaming alternas a Flash para poder abarcar el jugoso mercado de las tablets, pero si ellos no lo hacen estoy seguro de que alguien más lo hará.
La nueva interface tiene muchos fallos.. mi hablar.. espero que madure (el tiempo dira)…
Yo espero lo mismo, así como también espero que pronto salga el próximo Grooveshark, Picnik o Buzzword mexicano!
upsss.. algo que es real y que desde mi perspectiva logro notar es que Flex esta perdiendo mercado en el desarrollo de aplicaciones tanto de nivel empresarial como de entretenimiento… rayos que lastima por que soy Flexero.. pero es lo que se ve….
Mike, creo que Flash seguirá vigente como Plataforma al menos unos años más sin embargo Flex necesita reinventarse y lo esta haciendo. Pero claro el que pega primero pega dos veces y Apple lo hizo muy bien aunque en el camino esta perdiendo importantes aliados (Google y Adobe). Algo crucial para la plataforma estará en el terreno de dispositivos móviles e integración con Cloud, se vienen tiempos interesantes para ser Flexero así como HTMLero también 😉
solo voy a dejar esta imagen la tome hace unas horas, si desarrollan en flash no creo que realmente haya muerto, como dicen muchos, veo muchas paginas hechas en flash para la plataforma del google TV
http://twitpic.com/3e8kbm
hola, tengo un problema con la pagina, es que se ve pequeña. es decir que no puedo ver con claridad las letras de ningna de las secciones. uso chrome en la ultima version.
espero me ayudesn… gracias!
Una disculpa por responder tan tarde este comment, debió traspapelarse entre los ToDos de diciembre. Si tienes broncas con el tamaño de la letra ya probaste en el browser usar el shortcut Ctrl+ hay veces que funciona muy bien 🙂
No hay problema, sabes que intente con Ctrl+ pero me descompagina aun mas la pagina…
La barra de la izquierda donde esta «Mi musica», «Playlist», etc. apenas se ven esas palabras, lo mismo pasa con la barra de reproduccion, tengo un monitor de 1920×1080, pero no cero que sea por eso… Lo extraño es que entro a Musicuo (que es parecida) y no tengo este problema.
Gracias por responder!
Ah ok pero el problema es con Grooveshark, yo pensé que era con el blog jaja bueno y ya has intentado preguntarles en su cuenta de twitter @grooveshark o en su blog? http://blog.grooveshark.com/
ahh… gracias por el consejo, no me avive de preguntarles a ellos…
hey we.. yo acabo de hacer una fiesta en casa con mi mac mini ppc g4 y corrio a la velocidad de la luz, ademas dan al menos tres opciones esta muy muy cool !!! se bien que siguen usando un plug in de flash peroWTF funciona!!love it y todo
Yo también soy fan de utilizar Grooveshark en las fiestas, porque luego cuando no hay gente con gustos similares es difícil encontrar algo que se adapte pero con la aplicación puedes sugerirle a tus invitados que armen un playlist colaborativo y se pone bien el ambiente!
No importa si es o no es HTML5, aunque estás en lo cierto al comentarle a tu amigo que no es propiamente HTML5.
El detalle a considerar siempre es que como desarrolladores, no tenemos que estar peleados con algunas tecnologías solo porque usamos otras, además no siempre es lo mas correcto utilizar una sola tecnología para un solo proyecto, lo mejor es saber hacerlas trabajar en conjunto. Me parece que Grooveshark acertó precisamente en esto último.
Un saludo desde Morelia, te felicito por tu blog, yo acabo de empezar el mío, aquí esta el enlace por si deseas darte una vuelta:
http://prodriguezdlt.wordpress.com/
Pavel Rdz
salu2