Herramientas JavaScript del oficio: JSBin

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Todos hemos estado allí. Hay momentos en los que simplemente deseas lanzar un código JavaScript y ver cómo funciona. Claro, podrías pasar por la molestia de:

Configurar un directorio dedicado
Crear un archivo con marcado
Encontrar la última versión de tus bibliotecas favoritas, descargarlas e incluirlas en tu código
Creando tu hoja de estilo
Configurando tu servidor web

Parece una gran cantidad de trabajo solo hacer algunas pruebas de código simples. Afortunadamente, hay herramientas que hacen que este tipo de trabajo sea trivial.

En este tutorial, me gustaría repasar una de mis herramientas favoritas para las pruebas interactivas de JavaScript, JSBin.

El caso de JSBin

Como mencioné anteriormente, en muchos casos simplemente necesitas probar un pequeño subconjunto de código JavaScript. Configurar un entorno de desarrollo completo para tal caso de uso, en la mayoría de los casos, realmente no tiene mucho sentido a menos que exista una clara dependencia del hardware (por ejemplo, WebRTC) o la dependencia de una API o producto de terceros donde lo necesite servicios de back-end para acceder con éxito a la información.

Lo que JSBin ofrece es una interfaz de usuario basada en navegador donde puedes ingresar:

Marcado HTML
CSS
JavaScript

... y obtener comentarios inmediatos basados en tu código. Además, opcionalmente puedes incluir cualquier cantidad de marcos populares en tu código en pantalla, lo que te permite aprovechar también las capacidades del marco. El principal beneficio es la retroalimentación en tiempo real que obtienes de las actualizaciones que realiza.

Veamos estas herramientas un poco más de cerca.

Conociendo JSBin

JSBin fue creado y es mantenido activamente por el respetado desarrollador Remy Sharp. La idea de desarrollarlo surgió de la necesidad de colaborar interactivamente con otros desarrolladores para depurar el código JavaScript. Desde entonces ha madurado hasta convertirse en una herramienta robusta que:

Permite que grupos de desarrolladores trabajen juntos para resolver problemas de código
Sirve como una especie de contenedor que los desarrolladores pueden volver a consultar
Hace que compartir código y soluciones sea increíblemente fácil

JSBin también tiene licencia de código abierto bajo la licencia liberal MIT, lo que permite a los miembros de la comunidad contribuir libremente o bifurcarlo para crear sus propias soluciones personalizadas.

JSBin ofrece una interfaz de usuario sencilla que divide cada tipo de código en paneles verticales individuales.

Cada panel proporciona un mini-IDE que te permite ingresar código y recibir comentarios inmediatos a través del panel Salida. Por ejemplo, si agrego el siguiente código al panel HTML:

1	<div>Rey Bango</div>

Inmediatamente veré el nuevo elemento y el procesamiento de texto en el panel Salida.

Por supuesto, puedes agregar cualquier cantidad de elementos al marcado, lo que te permite crear una página de manera rápida e interactiva. Ser capaz de diseñar tu marcado es igualmente importante ya que en algunos casos, el JavaScript que estás probando está diseñado explícitamente para manipular estilos y reglas CSS aplicadas a tus elementos. Ahí es donde entra el panel CSS. Ofrece una capacidad completa de estilo CSS, por lo que puedes diseñar tus elementos para satisfacer tus necesidades, incluso aprovechando las reglas CSS3. Entonces agregando el siguiente código:

div { 
  color: red; 
  font:20px Tahoma,sans-serif; 
  border: 1px solid black; 
  width: 100px;
  margin: 30px;
  padding: 10px; 
  transform:rotate(15deg);
  -webkit-transform:rotate(15deg); 
}

... proporciona los siguientes resultados:

Hasta ahora, el código ha sido simple, pero debo enfatizar que lo importante aquí no es la complejidad del código, sino el hecho de que puede recibir comentarios inmediatos. Podría obtener fácilmente un código más complicado, como el de la demostración de CSS Transitions en la red de desarrolladores de Mozilla y agregarlo a JSBin para producir un efecto similar para mi código de prueba:

div { 
  color: red; 
  font:20px Tahoma,sans-serif; 
  border: 1px solid black; 
  width: 100px;
  margin: 30px;
  padding: 10px; 
  -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}

div:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

Entonces, aunque estoy más específicamente enfocado en el aspecto JavaScript de JSBin, está claro que los desarrolladores web en general pueden beneficiarse de la naturaleza interactiva de la herramienta.

Usando JavaScript

Para mí, el principal beneficio de JSBin es la capacidad de probar JavaScript rápidamente. Puedo crear un código rápido y sucio que puedo probar y ajustar sobre la marcha sin la necesidad de crear un entorno de trabajo completo. Claro, la mayoría de los navegadores proporcionan herramientas de desarrollador que ofrecen una consola donde puedes ingresar fragmentos rápidos, pero aún no están en un punto en el que puedas probar de forma interactiva grandes cantidades de código, y mucho menos definir un marcado personalizado complementario y un estilo para la salida.

El panel JavaScript de JSBin es donde puedes definir tu código JavaScript personalizado. Como se esperaba, tienes acceso completo al idioma, así como a la API DOM admitida por el navegador. Esto significa que cuando escribo:

1	var myDiv = document.querySelector( "div" );
2
3	myDiv.innerHTML = "Foo";

eso:

Me permite crear una variable local
Proporciona acceso al elemento div que creé en el panel HTML
Cambia el contenido del elemento.

Los resultados son inmediatos, lo que me permite depurar mientras escribo el código.

Tener acceso a JavaScript simple es genial, pero es muy común usar una biblioteca de utilidades de JavaScript como jQuery o un marco completo como Ember para abstraer las complejidades del desarrollo entre navegadores o crear experiencias similares a las aplicaciones en el navegador. JSBin aborda esto permitiéndote incluir la mayoría de las bibliotecas populares en tu código de prueba.

Al hacer clic en la opción de menú Agregar biblioteca se proporciona una lista muy larga de bibliotecas compatibles que se pueden inyectar en tu proyecto JSBin. Lo que esto hace es crear una etiqueta de script en tu código que extrae el archivo JavaScript de un CDN. Al seleccionar "jQuery 2.0.2" de la lista, se inyecta lo siguiente:

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
2	<meta charset=utf-8 />

... mientras seleccionas Backbone agrega lo siguiente:

1	<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
2	<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>

Observa cómo JSBin usa diferentes CDN en función de dónde están disponibles los archivos. La mayoría de los proyectos de renombre se enumeran, incluidos:

jQuery
Dojo
Modernizr
Bootstrap

... y muchos más.

Agregar jQuery me da acceso completo a todos los excelentes métodos y capacidades auxiliares de las bibliotecas. Puedo cambiar a usar su API agradable y concisa para acceder a elementos DOM y establecer valores en una línea de código bien encadenada:

1	$( "div" ).text( "Foo" );

O bien, puedo llevarlo un poco más lejos y probar una solicitud de Ajax a la API de Flickr para extraer datos JSON y renderizar imágenes en función de ello:

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "div" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

El código anterior representaría lo siguiente:

Tener todo el poder de estas bibliotecas y marcos realmente abre los escenarios de prueba que puedes configurar con JSBin.

Nuevamente, esta es una lista de las bibliotecas y marcos más populares disponibles y, claramente, algunos de los nichos simplemente no estarán en la lista. Si necesitas agregar tu propia biblioteca personalizada, la documentación muestra cómo puedes agregarla tú mismo.

Características y recursos adicionales

Encuentro que JSBin es invaluable para mi desarrollo de escritorio y, a medida que me enfoco en dispositivos móviles, me alegra ver que podré continuar usándolo para probar también en esos dispositivos. A partir de la versión tres, JSBin ha incorporado una característica llamada "representación en vivo" que actúa como una transmisión simultánea a través de múltiples dispositivos conectados. Estos dispositivos no están explícitamente conectados, sino que aprovechan una URL específica que les permite representar esencialmente los resultados al mismo tiempo. Puedes ver esta función en acción en el siguiente video.

Otra característica importante es la capacidad de crear su propia cuenta JSBin donde puedes guardar tus contenedores para futuras referencias y compartirlos. El registro es simple e incluso puedes aprovechar tus credenciales de Github a través de la funcionalidad OAuth de Github.

El beneficio clave para registrarse es la capacidad de mantener un historial de los contenedores que crees para que puedas volver a visitarlos más tarde.

Para realmente tener una idea de la amplitud de la funcionalidad ofrecida por JSBin, te insto a que vaya al canal de YouTube de Remy para JSBin, donde ha hecho un gran trabajo al crear videos tutoriales que exploran todas las excelentes características del servicio. Las preguntas frecuentes también hacen un gran trabajo al responder preguntas comunes que puedas tener.

JSBin es una de mis herramientas más valiosas que he encontrado para el desarrollo de JavaScript. El hecho de que sea gratuito y de código abierto hace que sea fácil de agregar a cualquier kit de herramientas. Y el compromiso continuo de Remy con el servicio es admirable. Todo esto combinado, hace que sea fácil para mí correr la voz acerca de una herramienta tan genial.