Podcast Summary: CodeSandbox with Ives van Hoorne

Podcast: Software Engineering Daily
Host: Josh Goldberg
Guest: Eves Van Hoorn, Co-Founder of CodeSandbox
Release Date: December 4, 2024

1. Introduction

In this engaging episode, Josh Goldberg interviews Eves Van Hoorn, the co-founder of CodeSandbox, a prominent cloud-based development platform. They delve deep into the inception, evolution, and technical intricacies of CodeSandbox, providing listeners with valuable insights into building scalable and efficient development tools.

2. Origins and Early Days of CodeSandbox

Eves Van Hoorn shares the foundational story of CodeSandbox, highlighting his early interest in programming driven by a desire to create a tool for translating secret messages with a friend. This initial foray into coding, using Visual Basic, laid the groundwork for his future endeavors.

Eves Van Hoorn (00:02:00):
"I initially started with coding not because I wanted to learn coding, but because I had a need... that was my first interaction with coding."

Transitioning from graphic design to coding during his gap year, Eves was motivated by the challenge and problem-solving nature of programming. His experience with Ruby on Rails and the emergence of React inspired him to create a more efficient code-sharing platform.

Eves Van Hoorn (00:04:00):
"I started moving to coding, thinking it's like solving puzzles, and there's only one solution... That's when I started thinking that it would be very cool if they could just send me running code."

The first version of CodeSandbox was launched on April 2, 2017, initially serving a niche use case of sharing runnable code snippets for job interviews and bug reports.

3. Technical Architecture

a. Backend: Postgres, Elixir, Phoenix, Scaling

Eves elaborates on the backend stack, emphasizing the robustness and scalability of Postgres combined with Elixir and the Phoenix framework.

Eves Van Hoorn (00:08:28):
"The stack was Create React app, frontend, Elixir backend, Postgres database, Redis... we deployed all of this to a VPS on DigitalOcean for about $20 per month."

Remarkably, this setup handled up to 500,000 monthly users without significant performance degradation. The decision to store files directly in Postgres, treating each file as a row in a table, proved both simple and effective.

Eves Van Hoorn (00:10:00):
"We store everything in Postgres so every file would just be a row in a Postgres table. When you press fork, we copy all the files with selects and inserts in Postgres... and it never hit limits."

b. File Storage and Management

The innovative approach of storing sandbox files in Postgres facilitated seamless forking and sharing, maintaining high query performance even with over 500 million files.

Eves Van Hoorn (00:12:13):
"Postgres has exceeded my expectations time and time again. If you have a good index on multiple columns, then the performance is incredible."

c. Frontend: React, Monaco Editor

On the frontend, CodeSandbox leverages React and later transitioned to the Monaco Editor, the core of Visual Studio Code, to enhance the user editing experience.

Eves Van Hoorn (00:35:11):
"Monaco is essentially the VS Code editor, but exposed as a library. It doesn't have all the fancy things from VSCode like extension support, but it works really well."

This shift allowed for a more familiar and efficient editing environment, aligning with developers' expectations from popular coding editors.

4. Dev Boxes: Expansion and Scaling with VMs

As CodeSandbox grew, the introduction of Dev Boxes addressed the limitations of the initial sandbox model, which was primarily suited for small projects.

Eves Van Hoorn (00:15:41):
"Dev Boxes became a more sophisticated way to retrieve files, running projects on the server instead of the client, facilitating full development environments."

Dev Boxes leverage virtual machines (VMs) to handle larger projects, enabling users to clone and manage environments efficiently. The adoption of Firecracker by AWS significantly enhanced the scalability and performance of these VMs.

Eves Van Hoorn (00:18:34):
"Firecracker allows us to pause and resume VMs seamlessly, enabling efficient scaling and quick cloning for user projects."

5. Security Challenges and Solutions

Running user code in a cloud environment introduces significant security concerns. Eves discusses the measures taken to secure Dev Boxes against malicious activities like crypto mining and phishing.

Eves Van Hoorn (00:23:44):
"We use the same techniques that AWS Lambda uses. Every VM has its own Unix user and we use a jailer to ensure isolation."

To combat crypto mining and phishing, CodeSandbox employs detection heuristics and interstitial warnings, effectively reducing abuse without severely impacting user experience.

Eves Van Hoorn (00:28:30):
"We show an interstitial warning to users accessing standalone previews, informing them of potential phishing attempts and ensuring legitimate use."

6. Handling Dependencies and Bundling

Managing npm dependencies efficiently is crucial for a smooth developer experience. Eves explains how CodeSandbox handles dependency installation and caching to optimize performance.

Eves Van Hoorn (00:40:03):
"We created a separate service using AWS Lambda to install dependencies and only include necessary files, reducing bandwidth and improving load times."

By caching common dependency combinations in S3 and leveraging Cloudflare, CodeSandbox ensures rapid installation and loading of frequently used packages, enhancing overall responsiveness.

Eves Van Hoorn (00:43:15):
"If you're using common combinations like React and React DOM, the installation is near-instant because it's pre-bundled and cached."

7. Future Directions and Innovations

Eves shares his vision for leveraging Firecracker's VM capabilities beyond development environments, such as in CI/CD systems and large-scale deployments. The potential to streamline continuous integration processes by cloning VMs efficiently could revolutionize how development workflows operate.

Eves Van Hoorn (00:55:33):
"We could use snapshots of VMs for CI/CD runs, allowing parallelization and significantly reducing setup times for test suites."

Additionally, he contemplates modernizing the bundler to utilize native ES modules and service workers, aligning with the evolving landscape of browser technologies.

Eves Van Hoorn (00:53:50):
"If I were to rebuild CodeSandbox today, I would leverage ES module capabilities and service workers to handle bundling directly in the browser."

8. Personal Insights: Volleyball and Balance

Balancing intense technical work with physical activity, Eves discusses his passion for volleyball. He highlights how the sport serves as both a physical workout and a mental reset, emphasizing the importance of maintaining health alongside a demanding career.

Eves Van Hoorn (00:59:54):
"Playing volleyball helps me forget everything else and focus entirely on the game. It's a great way to stay fit and clear my mind."

His dedication to the sport underscores the value of integrating physical activities to sustain long-term productivity and well-being.

Key Takeaways

• Simplicity in Design: Leveraging straightforward solutions, like storing files in Postgres, can lead to scalable and efficient systems.
• Scalability Through Innovation: Utilizing technologies like Firecracker enables rapid scaling and efficient resource management.
• Security is Paramount: Implementing robust security measures is essential when running user-generated code in cloud environments.
• Optimizing Dependencies: Efficient handling and caching of dependencies enhance performance and user experience.
• Continuous Improvement: Adapting to evolving technologies and reimagining core components can drive significant improvements.
• Work-Life Balance: Engaging in physical activities like volleyball is vital for maintaining mental and physical health amidst a demanding career.

For more information about CodeSandbox and to explore its features, visit codesandbox.io or follow Eves Van Hoorn on Twitter.