El Desafío: El Código no vive en el Browser

La mayoría de los portafolios se limitan a mostrar capturas de pantalla. Pero, ¿qué pasa cuando quieres que el usuario interactúe con tu lógica de backend? El primer obstáculo es evidente: el navegador no entiende Node.js. Intentar ejecutar un require o un process en el cliente resulta en el fin de la experiencia.

En este artículo, desgloso la arquitectura que diseñé para andressy.dev, transformando un simple modal en una consola de comandos funcional y segura.

1. La Santísima Trinidad del Frontend: Xterm.js

Para que una terminal se sienta "real", no puedes usar un textarea. Implementé Xterm.js, el estándar de la industria (utilizado por VS Code). Esto permite manejar secuencias de escape ANSI, colores y, lo más importante, un buffer de entrada que procesa cada pulsación de tecla de forma individual.

2. El Túnel de Datos: Socket.io y el Streaming Bidireccional

El protocolo HTTP es de "un solo viaje", lo cual es inútil para una terminal interactiva. La solución fue establecer un túnel bidireccional con Socket.io.

  • Input: Cada tecla presionada viaja al servidor.
  • Output: El resultado de la ejecución fluye de regreso al monitor del usuario casi sin latencia.

Esto permite que, si un script pide un dato (readline.question), el proceso en el servidor se pause legítimamente esperando la respuesta del usuario desde cualquier parte del mundo.

3. Seguridad Nivel Sandbox: Worker Threads + VM

Ejecutar código de terceros en tu propio servidor es, por definición, peligroso. Para blindar la infraestructura, apliqué una estrategia de aislamiento en dos capas:

  1. Worker Threads: Cada ejecución nace y muere en un hilo separado del sistema operativo. Si el código entra en un bucle infinito, el hilo principal lo aniquila mediante un terminate() después de 5 segundos.
  2. Módulo VM: El código no tiene acceso al objeto global ni al sistema de archivos real. Redefiní los métodos de console y process para que el código "crea" que está en una terminal completa, cuando en realidad está en una cápsula digital controlada.

4. El comando ls y el File System Virtual

Para elevar la inmersión, no solo ejecutamos snippets. Implementé un Mock FS. Cuando el usuario escribe ls en mi terminal, el sistema consulta dinámicamente la estructura de mi portafolio, permitiendo al visitante "navegar" por mis proyectos y artículos como si estuviera explorando mis servidores personales.

Conclusión: El Futuro de la Interactividad

Construir esta terminal no fue solo un ejercicio de diseño, sino de estabilidad de sistemas. Demuestra que la web moderna no tiene por qué ser estática; puede ser un entorno de computación real donde la frontera entre el cliente y el servidor desaparece de forma segura.