ब्राउझरमध्ये संपूर्ण कोडिंग IDE: Monaco Editor आणि WebContainers चा प्रवास

नवीन कोडिंग शिकणाऱ्या विद्यार्थ्याला किंवा पटकन एखादी लायब्ररी टेस्ट करू पाहणाऱ्या डेव्हलपरला सर्वात मोठा अडथळा कशाचा येतो? तो म्हणजे डेव्हलपमेंट एन्व्हायर्नमेंट सेट करण्याचा! Node.js इन्स्टॉल करा, PATH व्हेरिएबल्स नीट करा, डिपेंडन्सी एरर्स सोडवा—या सगळ्यातच अर्धा दिवस निघून जातो.

या समस्येवर कायमचा तोडगा काढण्यासाठी मी GB Coder (https://gbcoder.ladestack.in/) ची निर्मिती केली. हे एक असे इन-ब्राउझर IDE आहे जिथे तुम्ही कोणताही सेटअप न करता थेट कोड लिहू शकता, npm पॅकेजेस इन्स्टॉल करू शकता आणि स्थानिक डेव्हलपमेंट सर्व्हर सेकंदात चालू करू शकता.

आर्किटेक्चरचे २ मुख्य खांब

GB Coder चे आर्किटेक्चर पूर्णपणे क्लायंट-साइड तंत्रज्ञानावर आधारलेले आहे:

१. Monaco Editor

VS Code च्या गाभ्यात असणारे हेच एडिटर आम्ही ब्राउझरमध्ये समाविष्ट केले आहे. यात सिंटॅक्स हायलाइटिंग, ऑटो-कम्प्लिशन आणि इंटेलिजन्स इन-मेमरी चालते.

२. StackBlitz WebContainers

WebContainers मुळे चक्क Node.js रनटाईम ब्राउझरच्या WebAssembly सँडबॉक्समध्ये चालतो! याचा अर्थ असा की:

• npm install कमांड थेट तुमच्या ब्राउझरमध्ये धावते.
• Vite किंवा Next.js चा डेव्ह सर्व्हर ब्राउझरच्या इन-मेमरी व्हर्च्युअल फाईल सिस्टिमवर सुरू होतो.
• सर्व्हरवर शून्य लोड पडतो, कारण संपूर्ण कम्प्युटिंग युझरच्या स्वतःच्या सीपीयूवर होत असते.

// WebContainer बूट करण्याचे साधे उदाहरण
import { WebContainer } from '@webcontainer/api';

async function launchWorkspace() {
  const container = await WebContainer.boot();
  await container.mount({
    'package.json': {
      file: {
        contents: JSON.stringify({ name: 'browser-app', dependencies: { chalk: '^5.0.0' } })
      }
    }
  });
  const installProcess = await container.spawn('npm', ['install']);
  return container;
}

या तंत्रज्ञानामुळे विद्यार्थ्यांसाठी कोडिंग शिकणे आणि डेव्हलपर्ससाठी प्रोटोटाईप बनवणे अत्यंत सोपे व वेगवान झाले आहे.