¿Qué pueden hacer los desarrolladores con 10KB de código y HTML5?

Algunas veces menos es realmente más, esa fue la premisa de nuestro recientemente concluido “Apartado de 10K”, un concurso sólo para desarrolladores, con el fin de ver que tan lejos podía llegar su imaginación usando tecnologías web modernas y tan sólo 10,000 bytes de código. Para ayudarte a visualizar cuantos son 10KB, aquí algunas comparaciones:

· El tamaño del logo de “Windows”, en esta pagina del lado superior izquierdo, es de 10KB.

· La versión sin comprimir de JQuery, una popular librería de Javascrip, pesa en un whopping 179 KB.

Eric Meyer, un evangelista de estándares web, fue cuestionado por las limitaciones que el concurso podía crear para la creatividad de los desarrolladores y el poder crear experiencias increíbles, a lo que respondió:

“Se dice que las limitaciones impulsan la creatividad, y la increíble creatividad demostrada por los desarrolladores en el Apartado de 10K, probó que eso es verdad”.

Una vista rápida a las 376 participaciones permite demostrar la gran habilidad que hay entre los desarrolladores web, a pesar de las limitaciones, el ganador del gran premio, fue un adictivo juego llamado “Sinuous” desarrollado por Hakim El Hattab.

Aquí la aplicación Sinuous ganadora del reto. http://hakim.se/experiments/html5/sinuous/01_mute/

Para entender cómo piensa un desarrollador y el cómo crear un juego completo en un espacio muy limitado, entrevistamos brevemente a Hakim (cabe señalar que la imagen de este juego en este blog post pesa tres veces más que la programación de él):

Microsoft: ¡Hola Hakim! Para todos los que este leyendo este post, ¿En donde y qué es lo que haces actualmente para vivir?

Hakim: Vivo en Stockholm y trabajo en Fi, una agencia de Web interactiva, como un desarrollador interactivo sénior, día a día mi trabajo envuelve de principio a fin proyectos interactivos de HTML

Microsoft: Como un desarrollador de primera línea, ¿Regularmente qué porcentaje de tu tiempo gastas en escribir diferentes códigos (HTML/JS/CSS) para soportar diferentes navegadores?

Hakim: En promedio, utilizo 20% del tiempo del proyecto. Ya sea luchando contra inconsistencias del Navegador y construyendo Fallbacks (mecanismo para llevar adelante las instrucciones de programación a pesar de fallo o mal funcionamiento e incompatibilidades del dispositvo o la aplicación donde corre).

Microsoft: ¿Cómo escuchaste del concurso 10K?

Hakim: Alguien lo menciono en Twitter e inmediatamente capto mi intención, una vez que leí más acerca del concurso, no tomó mucho tiempo antes de que me diera cuenta, que enviaría algo.

Microsoft: ¿Por qué te decidiste a participar?

Hakim: en ese momento estaba trabajando frecuentemente en mi experimento con HMTL5 Canvas, así que cuando el concurso fue lanzado encajo perfectamente para intentar algo nuevo. “Sinuous” es el primer juego que he construido en HTML5 y afortunadamente el limite en tamaño no era un problema dado que mi estilo es de graficas de procesos simples.

Microsoft: ¿Cómo se ocurrió la idea de Sinuous?

Hakim: la jugabilidad final de Sinuous no era lo que tenía en mente cuando empecé, comencé con una idea e inmediatamente salte al código, pero al final de la noche se me ocurrió algo nuevo, así fue como Sinuous nació.

Microsoft: ¿Qué características de IE9 y otros navegadores modernos hicieron posible a Sinuous?

Hakim: La más importante característica usada para construir Sinuous es el elemento canvas que utilicé para construir los visuales del juego, el rápido motor JavaScript de los navegadores modernos también es un elemento importante, de lo contrario el juego no hubiera funcionado suficientemente fluido para ser disfrutable.

Microsoft: ¿tuviste que hacer algo en especial para hacer funcionar a Sinuous en los principales navegadores modernos?

Hakim: Todos los navegadores modernos pueden mostrar el juego muy bien, así que eso no fue un problema, sin embargo cuando añadí una lista de puntuaciones empecé a notar que computadoras lentas (Baja FPS) tenían una gran ventaja sobre computadoras rápidas, para solucionar esto cree el juego más balanceado e hice la escala de puntuaciones de acuerdo a la velocidad a la que el juego corre.

Microsoft: ¿Qué tan importante es para ti el poder escribir el mismo código, tenías programado algún fallback para Sinuous para navegadores que no corrieran Canvas?

Hakim: es importante el ser eficiente, pero eso es imposible si tuviera que construir muchas soluciones de Fallback. Si la calidad de lo que estoy programando se pone en riesgo por el tiempo invertido en un Fallback, yo solamente reconstruirá toda la tecnología de los Fallback desde el principio.

¿Se imaginan que Hakim tuviera que incluir 20% de códigos Fallbacks extra para diferentes navegadores? Si así fuera tal vez ni siquiera podría haber entrado a la competencia en primer lugar. O el esfuerzo de incluir todos esos códigos extra hubieran terminado devorando el tiempo que él ocupo para hacer más divertido el juego. Es por eso que se trabaja duro para tener la misma marca dentro de nuestro proceso de ingeniería y participación en cuerpos estándar, para movernos hacia adelante y ayudar a los desarrolladores a recuperar ese 20%.