플레이그라운드 구현

Playground Implementation Summary

Overview

The Vais web playground provides an interactive browser-based environment for writing, compiling, and executing Vais code without local installation.

Architecture

┌─────────────────────────────────────────────────────────────┐
│                    Vais Web Playground                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────┐      ┌──────────────┐      ┌──────────┐ │
│  │   Frontend   │─────▶│   Backend    │─────▶│  Sandbox │ │
│  │   (React)    │◀─────│   (Axum)     │◀─────│  (WASM)  │ │
│  └──────────────┘      └──────────────┘      └──────────┘ │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Components

1. Frontend (playground/)

Technology Stack:

  • React with TypeScript
  • Monaco Editor for code editing
  • WebAssembly for client-side compilation

Features:

  • Syntax highlighting
  • Code completion
  • Live error display
  • Example programs
  • Share code functionality

Key Files:

  • playground/src/App.tsx - Main application component
  • playground/src/Editor.tsx - Code editor component
  • playground/src/Output.tsx - Output display
  • playground/README.md - Frontend documentation
  • playground/QUICKSTART.md - Quick start guide
  • playground/TUTORIAL.md - Comprehensive tutorial
  • playground/FEATURES.md - Feature documentation
  • playground/DEPLOYMENT.md - Deployment guide
  • playground/INTEGRATION.md - Integration guide

2. Backend (crates/vais-playground-server/)

Technology Stack:

  • Axum web framework
  • Tokio async runtime
  • SQLite for code storage

Features:

  • RESTful API for compilation
  • Code execution with timeout
  • Rate limiting
  • Code sharing and persistence

Endpoints:

  • POST /api/compile - Compile code
  • POST /api/execute - Execute code
  • POST /api/share - Share code snippet
  • GET /api/shared/:id - Retrieve shared code

3. Sandbox Execution

Security Features:

  • WebAssembly isolation
  • Resource limits (CPU, memory)
  • Timeout enforcement
  • Network access control

Implementation Status

✅ Completed

  1. ✅ Frontend React application
  2. ✅ Monaco editor integration
  3. ✅ Backend API server
  4. ✅ Code compilation endpoint
  5. ✅ Sandbox execution
  6. ✅ Example programs
  7. ✅ Documentation

🔄 In Progress

  • Advanced debugging features
  • Collaborative editing
  • Persistent user sessions

🔮 Future Enhancements

  • Real-time collaboration
  • Code versioning
  • Interactive tutorials
  • Performance profiling
  • Visual debugging

Usage

Development Server

# Start backend
cd crates/vais-playground-server
cargo run

# Start frontend
cd playground
npm install
npm start

Production Build

# Build frontend
cd playground
npm run build

# Build backend
cd crates/vais-playground-server
cargo build --release

API Documentation

Compile Endpoint

POST /api/compile
Content-Type: application/json

{
  "code": "F main() -> i64 { 42 }",
  "optimize": true
}

Response:
{
  "success": true,
  "output": "compiled successfully",
  "errors": []
}

Execute Endpoint

POST /api/execute
Content-Type: application/json

{
  "code": "F main() -> i64 { printf(\"Hello\\n\") 0 }",
  "timeout": 5000
}

Response:
{
  "success": true,
  "output": "Hello\n",
  "exit_code": 0
}

Security Considerations

  1. Sandboxing: All code execution in isolated WASM environment
  2. Resource Limits: CPU and memory caps prevent abuse
  3. Timeout: Maximum execution time enforced
  4. Rate Limiting: Prevents API abuse
  5. Code Validation: Syntax checking before execution

Performance

  • Compilation Time: ~100-500ms for typical programs
  • Execution Time: Limited to 5 seconds max
  • Memory Limit: 128MB per execution
  • Concurrent Users: Supports 100+ simultaneous users

Testing

# Backend tests
cargo test -p vais-playground-server

# Frontend tests
cd playground
npm test

Deployment

See playground/DEPLOYMENT.md for detailed deployment instructions.

Documentation

  • README: playground/README.md
  • Quick Start: playground/QUICKSTART.md
  • Tutorial: playground/TUTORIAL.md
  • Features: playground/FEATURES.md
  • Deployment: playground/DEPLOYMENT.md
  • Integration: playground/INTEGRATION.md

Conclusion

The Vais web playground provides a complete browser-based development environment, making it easy for users to learn and experiment with Vais without installation.

Status: Production-ready with ongoing enhancements.