Share
Todos hemos estado allí. Hay ocasiones en las que simplemente quieres lanzar un poco de código JavaScript y ver cómo funciona. Claro, usted podría pasar por la molestia de:
Eso parece ser una gran cantidad de trabajo, simplemente hacer algunas pruebas simples de código. Afortunadamente hay herramientas que hacen que este tipo de trabajo sea trivial..
En este tutorial, me gustaría repasar una de mis herramientas favoritas para realizar pruebas interactivas de JavaScript, JSBin.
Como mencioné anteriormente, en muchos casos simplemente necesita probar un pequeño subconjunto de código JavaScript. La configuración de un entorno de desarrollo completo para este caso de uso, en la mayoría de los casos, 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 que necesite. Servicios backend para acceder exitosamente a la información..
Lo que ofrece JSBin es una interfaz de usuario basada en navegador donde puede ingresar:
… Y obtenga comentarios inmediatos basados en su código. Además, puede incluir opcionalmente cualquier número de marcos populares en su código en pantalla, lo que le permite aprovechar las capacidades del marco también. El principal beneficio es la retroalimentación en tiempo real que obtiene de las actualizaciones que realiza..
Veamos estas herramientas un poco más de cerca..
JSBin fue creado y es mantenido activamente por el respetado desarrollador Remy Sharp. La idea de desarrollarlo surgió de la necesidad de colaborar interactivamente con otros desarrolladores para depurar el código JavaScript. Desde entonces ha madurado hasta convertirse en una herramienta robusta que:
JSBin también es una licencia de código abierto bajo la licencia liberal del MIT, lo que permite a los miembros de la comunidad contribuir libremente a ella o crearla para crear sus propias soluciones personalizadas..
JSBin ofrece una interfaz de usuario sencilla que divide cada tipo de código en paneles verticales individuales.
Cada panel proporciona un mini-IDE que le permite ingresar el código y recibir comentarios inmediatos a través de Salida panel. Por ejemplo, si agrego el siguiente código a la HTML panel:
Rey bango
Inmediatamente veré el nuevo elemento y el texto renderizado en el Salida panel.
Por supuesto, puede agregar cualquier número de elementos al marcado, lo que le permite crear una página de forma rápida e interactiva. Ser capaz de diseñar su marca es igual de importante ya que, en algunos casos, el JavaScript que está probando está diseñado explícitamente para manipular los estilos y las reglas CSS aplicadas a sus elementos. Ahí es donde el CSS el panel entra. Ofrece capacidad completa de estilo CSS, por lo que puede diseñar sus elementos para satisfacer sus necesidades, incluso aprovechando las reglas CSS3. Entonces agregando el siguiente código:
div color: rojo; fuente: 20px Tahoma, sans-serif; borde: 1px negro sólido; ancho: 100px; margen: 30px; relleno: 10px; transformar: rotar (15deg); -webkit-transform: rotate (15deg);
… Proporciona los siguientes resultados:
Hasta ahora, el código ha sido simple, pero debo subrayar que lo importante aquí no es la complejidad del código, sino el hecho de que puede recibir una respuesta inmediata. Fácilmente podría tomar más código involucrado, como el de la demostración de Transiciones de CSS en la Red de Desarrolladores de Mozilla y agregarlo a JSBin para producir un efecto similar para mi código de prueba:
div color: rojo; fuente: 20px Tahoma, sans-serif; borde: 1px negro sólido; ancho: 100px; margen: 30px; relleno: 10px; -moz-transición: ancho 2s, altura 2s, fondo-color 2s, -moz-transform 2s; -webkit-transición: ancho 2s, altura 2s, fondo-color 2s, -webkit-transform 2s; -o-transición: ancho 2s, alto 2s, fondo-color 2s, -o-transformado 2s; transición: ancho 2s, altura 2s, fondo-color 2s, transformar 2s; div: hover background-color: #FFCCCC; ancho: 200px; altura: 200px; -moz-transform: rotate (180deg); -webkit-transform: rotate (180deg); -o-transformar: rotar (180 grados); transformar: girar (180deg);
Entonces, aunque estoy más centrado específicamente en el aspecto de JavaScript de JSBin, está claro que los desarrolladores web en general pueden beneficiarse de la naturaleza interactiva de la herramienta.
Para mí, el principal beneficio de JSBin es la capacidad de probar JavaScript rápidamente. Soy capaz de crear códigos rápidos y sucios que puedo probar y ajustar sobre la marcha sin la necesidad de crear un entorno de trabajo completo. Claro, la mayoría de los navegadores proporcionan herramientas para desarrolladores que ofrecen una consola donde puede ingresar fragmentos rápidos, pero aún no están en un punto donde puede probar grandes cantidades de código de manera interactiva, y mucho menos definir un marcado y estilo personalizados complementarios para la salida..
De JSBin JavaScript El panel es donde puedes definir tu código JavaScript personalizado. Como era de esperar, tiene acceso completo al idioma, así como a la API DOM compatible con el navegador. Esto significa que cuando escribo:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; eso:
div elemento que creé en el HTML panelLos resultados son inmediatos, lo que me permite depurar mientras escribo el código..
Tener acceso a JavaScript simple es genial, pero es muy común usar una biblioteca de utilidades de JavaScript como jQuery o un marco completo como Ember para abstraer las complejidades del desarrollo de varios navegadores o crear experiencias similares a las aplicaciones en el navegador. JSBin aborda esto al permitirle incluir la mayoría de las bibliotecas populares en su código de prueba.
Haciendo clic en el Añadir biblioteca La opción de menú proporciona una lista muy larga de bibliotecas compatibles que se pueden inyectar en su proyecto JSBin. Lo que esto hace es crear un guión etiqueta en su código que extrae el archivo JavaScript de un CDN. Seleccionando "jQuery 2.0.2"de la lista inyecta lo siguiente:
… Mientras selecciona Backbone agrega lo siguiente:
Observe cómo JSBin utiliza diferentes CDN en función de dónde están disponibles los archivos. La mayoría de los proyectos de grandes nombres están listados, incluyendo:
… y muchos más.
Al agregar jQuery, tengo acceso completo a todos los excelentes métodos y capacidades de ayuda de las bibliotecas. Puedo cambiar a usar su API bonita y concisa para acceder a elementos DOM y establecer valores en una línea de código bien encadenada:
$ ("div") .text ("Foo"); O, puedo llevarlo un poco más lejos y probar una solicitud de Ajax a la API de Flickr para retirar datos JSON y generar imágenes basadas en ella:
(function () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "cualquier ", formato:" json ") .done (function (data) $ .each (data.items, function (i, item) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); if (i === 3) return false;););) (); El código anterior se procesaría de la siguiente manera:
Tener todo el poder de estas bibliotecas y marcos realmente abre los escenarios de prueba que puede configurar con JSBin.
Nuevamente, esta es una lista de las bibliotecas y los marcos más populares disponibles y, claramente, algunos nichos simplemente no estarán en la lista. Si necesita agregar su propia biblioteca personalizada, la documentación muestra cómo puede agregarla usted mismo.
Considero que JSBin es invaluable para el desarrollo de mi escritorio y, al pasar a centrarme en los dispositivos móviles, me alegra ver que también podré seguir usándolo para realizar pruebas en esos dispositivos. A partir de la versión tres, JSBin ha incorporado una función llamada "representación en vivo" que actúa como transmisión simultánea en múltiples dispositivos conectados. Estos dispositivos no están conectados de forma explícita, sino que, en cambio, aprovechan una URL específica que les permite, esencialmente, representar los resultados al mismo tiempo. Puedes ver esta característica en acción en el siguiente video..
Otra característica importante es la capacidad de crear su propia cuenta JSBin donde puede guardar sus contenedores para futuras referencias y compartir. El registro es simple e incluso puede aprovechar sus credenciales de Github a través de la funcionalidad OAuth de Github.
El beneficio clave para el registro es la capacidad de mantener un historial de los contenedores que creas para que puedas revisarlos más tarde..
Para realmente sentir la amplitud de la funcionalidad ofrecida por JSBin, le insto a que vaya al canal de Youtube de Remy para JSBin, donde ha hecho un gran trabajo de creación de videos tutoriales que exploran todas las excelentes características del servicio. Las preguntas frecuentes también hacen un gran trabajo respondiendo preguntas comunes que pueda tener.
JSBin es una de mis herramientas más valiosas que he encontrado para el desarrollo de JavaScript. El hecho de que sea gratuito y de código abierto hace que sea fácil de agregar a cualquier conjunto de herramientas. Y el compromiso continuo de Remy con el servicio es encomiable. Todo esto combinado, me facilita la difusión de una herramienta tan excelente.
