Modular, Fast, Lightweight: How to Build a Server-Rendered IDE

Existing IDEs concentrated complex branching logic in upper-level components to handle language-specific settings, which led to code bloat and difficulties in maintenance.

To solve this, Repl.it newly designed a lightweight core of about 3,000 LOC. This core functions as a window manager and event broker, and implements all components in the form of plugins.

The key features of the new architecture are as follows:

• Plugin-based structure: Every component is a plugin, independently handling state management (reducer) and event processing (receiver).
• Server-side rendering (SSR): SSR was essentially adopted to guarantee fast loading even on slow network environments.
• High extensibility: Since there are no direct dependencies between plugins, specific features can be easily replaced or extended.
• Ease of debugging: State changes can be tracked using Redux, making time-travel debugging and production error tracking easy.