// CASE_FILE > JS_VERSE

Frontend · Herramientas2024

JavaScript-Verse

Probar JavaScript o React suele significar montar un sandbox. Construí un playground en el navegador que ejecuta código real, módulos npm reales y React, sin instalar nada.

100%
En el navegador, sin servidor
0
Instalación requerida
1
Clic para ejecutar
humblef0ol.github.io/javascript-verseFEED//LIVE
> run main.jsx
[ok] babel transpile
[ok] npm module resolved
[ok] iframe sandbox
preview .............. live
status: RUNNING
$

// 01 > CONTEXT

JavaScript-Verse es un entorno de ejecución de código basado en el navegador y un editor de markdown para escribir y ejecutar JavaScript y React, con documentación en paralelo, una hoja de referencia y exportación de código.

// 02 > THE_PROBLEM

Experimentar con JavaScript o React significaba una cadena de herramientas local o un sandbox limitado que no podía traer módulos npm reales ni renderizar componentes.

Ejecutar código no confiable en el navegador de forma segura, transpilar JSX y sintaxis moderna, y resolver imports sin un servidor son cada uno no triviales, así que la mayoría de los playgrounds dejan de lado uno de ellos.

Antes

Montaje local para experimentar · sin módulos npm reales · JSX no soportado

// 03 > APPROACH

Resolví la ejecución segura con aislamiento por iframe, la sintaxis avanzada con transpilación de Babel en el navegador, y los imports con empaquetado en el navegador.

Ejecución en sandbox

El código se ejecuta dentro de un iframe aislado con vista previa en vivo, así que es seguro ejecutar código arbitrario.

Módulos reales + JSX

Babel en el navegador transpila JSX y sintaxis moderna; el empaquetado en el navegador resuelve cualquier import de npm.

React.jsTailwind CSSBabelWebpackNode.js

// 04 > THE_RESULT

Cualquiera puede escribir y ejecutar JavaScript o React en el navegador, traer módulos npm reales y exportar su código, sin nada que instalar.

Antes

  • Cadena de herramientas local requerida
  • Sin soporte de módulos npm
  • Sin renderizado de JSX / React

Después

  • Se ejecuta en el navegador, sin instalar
  • Cualquier módulo npm en runtime
  • JSX + React, en sandbox
La forma más rápida de aprender algo es ejecutarlo. Quería JavaScript y React reales, módulos reales, sin nada que instalar primero.
AAmit RanaAutor, JavaScript-Verse

¿Tienes un problema similar?

Reservar una llamada de 20 min