hand Inicio
hand JSBloqs
hand GutenBloqs

Mejores editores online o playgrounds para testear nuestro JavaScript

Te hablo de los distintas alternativas de playgrounds de JavaScript y de por qué son tan útiles

Prólogo

Cuando queremos preguntar (por ejemplo a stack overflow) alguna duda de código que no nos funciona o no entendemos, lo suyo es utilizar algún tipo de playground para reproducir nuestro código y que quien quiera ayudarnos pueda ir allí directamente y evaluar / proponer su solución

En esta entrada discuto las diversas alternativas que tenemos a nuestra disposición

Playgrounds con entornos completos

Los he separado en dos categorías:

  • Aquellos playgrounds que te permiten escribir código con las funcionalidades habituales (color, sangría, inclusión de librerías, etc)
  • Y aquellos otros que te permiten recrear entornos completos como si tuvieras un ordenador delante

Empezando por estos últimos

Repl.it

image

Del acrónimo REPL (Read Eval Print Loop) nace un entorno completo para el programador con el que puedes desarrollar y ejecutar aplicaciones enteras desde la nube y gratis (el código será público)

Stack Blitz

image

Un entorno online basado en Visual Studio Code orientado a crear proyectos en React y Angular y que se pueden compartir con un sólo click

Sigma

image

Un entorno completo que se ejecuta enteramente en tu navegador y que facilita el deplyoment a servidores AWS de Amazon

Glitch

image

Como dicen en la presentación, te permite crear "cualquier app que puedas imaginar", lista para compartir y para ejecutarse, y moviendo el paradigma de la programación de los entornos individuales que van colaborando via git a entornos de comunidad con ediciones de archivos en paralelo

Coding Gound

image

Otro entorno completo para cualquier lenguaje, más dirigido a guiar los primeros pasos en aprender programación

Playgrounds con entornos simples

Y luego están los playgrounds que se especializan en escribir, ejecutar y compartir código sin necesidad de servidor

Code Pen

image

Tremenda comunidad, tremendos pins que sirven de inspiración y aprendizaje, uno de los sitios de referencia

Js Fiddle

image

Simplicidad por delante de todo, diseño minimalista, ultra-conocido editor online

Js Bin

image

Muy similar a jsfiddle pero aún más minimalista, con una versión alpha en ciernes que promete un diseño más actual

Live Weave

image

Muy similar a los anteriores, con un diseño menos minimalista y con capacidades para compartir pantalla

Dabblet

image

Otro entorno simple y sin florituras para poder compartir código, pero que no incluye JavaScript, sólo css

Plunker

image

Un histórico, con un diseño un tanto desfasado que quizá lo deja un escalón por detrás de desarrollos más actuales

Jsitor

image

Muy similar a jsfiddle o jsbin, con funcionalidades parecidas a codepen y un diseño también minimalista y actual, pero bastante menos conocido

Ideone

image

Otro entorno online para compilar en una miríada de lenguajes, quizá menos adecuado para lenguajes web

Html Pen

image

Definitivamente un diseño antiguo per funcional, aunque no parece que pueda competir con las referencias existentes

Web Maker

image

Otro entorno para desarrollar en tu navegador, con un desarrollo activo aunque poco conocido

Resumen

Hay muchos entornos online que nos permiten trabajar offline, compartir, explorar y utilizar para preguntar, aprender o enseñar, que proveen del tooling necesario para que los programadores se puedan centrar más en la lógica de los programas y menos en las estructuras necesarias para que estos funcionen

Sin duda, una época fantástica para aprender y seguir aprendiendo a programar 🙃

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto