Deep Dive
What is CodeSandbox and how does it compare to traditional development tools?
CodeSandbox is an online development environment that allows users to start web development projects directly in the browser. It is similar to Google Docs, where users can share a link to a live, editable environment, eliminating the need for local setups.
Why did Ives van Hoorne start coding?
Ives started coding at around 10 years old to create a program that translated a secret language he and his friend used to write letters in class. This was his first interaction with programming, using Visual Basic to create a simple translator.
How did Ives van Hoorne's early coding experience influence his later work?
Ives' first coding project involved creating a program with input on the left and output on the right, a concept that mirrors the core functionality of CodeSandbox, where users write code on the left and see the result on the right.
What challenges did Ives face when transitioning from graphic design to coding?
Ives initially disliked graphic design because it was too subjective, with clients often requesting designs he didn't agree with. He found coding more appealing as it felt like solving puzzles with clear solutions, though he later realized coding also has subjective elements.
How did Ives van Hoorne's experience at his first job influence the creation of CodeSandbox?
At his first job, Ives struggled with sharing React code snippets over Slack, as it was difficult to debug errors without a live environment. This frustration led him to envision an online code environment where users could share running code easily, similar to Google Docs.
What was the initial tech stack of CodeSandbox when it launched in 2017?
The initial tech stack included Create React App for the frontend, Elixir with the Phoenix framework for the backend, Postgres for the database, and Redis for caching. The entire platform was hosted on a $20 VPS with 2GB of RAM.
How did CodeSandbox scale its database to handle half a billion files?
CodeSandbox stored all files in a Postgres database, with each file represented as a row. Despite handling over 500 million files, the database queries remained efficient, with sandbox loading times under 100 milliseconds due to well-indexed columns in Postgres.
Why did CodeSandbox introduce DevBoxes, and how do they differ from sandboxes?
DevBoxes were introduced to support larger projects that exceeded the 500-file limit of sandboxes. Unlike sandboxes, which run entirely in the browser, DevBoxes run on a server-based VM, allowing for full-scale development with features like lazy file retrieval and VM snapshots.
How does CodeSandbox handle security for its DevBoxes?
DevBoxes use Firecracker, a VM technology developed by AWS, which allows for secure execution of user code. Each VM runs as a separate Unix user, and a jailer ensures code remains within its environment, preventing unauthorized access to the host system.
What challenges does CodeSandbox face with crypto miners and phishing attempts?
Crypto miners often abuse CodeSandbox by running miners on VMs, while phishing attempts involve creating fake login pages. CodeSandbox uses detection heuristics and AI to identify and block malicious activities, though it remains a constant cat-and-mouse game.
How does CodeSandbox execute user code in the browser?
CodeSandbox executes user code by parsing it to create a dependency graph, transpiling the code, and then using JavaScript's eval function to run it. The require function is overridden to handle dynamic imports, creating a loop that allows for efficient code execution.
How does CodeSandbox handle dependency installations for NPM packages?
CodeSandbox uses an AWS Lambda service to install NPM dependencies, creating a dependency graph to determine which files are needed. These files are then bundled and cached in an S3 bucket, allowing for fast retrieval and installation of dependencies.
How does CodeSandbox integrate VS Code into its editor?
CodeSandbox uses the browser version of VS Code, emulating Node.js in the browser to run VS Code extensions. This allows users to have a familiar VS Code experience with features like type information and extensions, all within the browser environment.
What is Ives van Hoorne's vision for the future of CodeSandbox's infrastructure?
Ives envisions generalizing the Firecracker-based infrastructure to support not just development environments, but also CI/CD systems and deployments. This technology could significantly reduce setup times and improve parallelization in CI/CD pipelines.
Why does Ives van Hoorne enjoy playing volleyball?
Ives enjoys volleyball because it allows him to disconnect from work and focus entirely on the game. It is also a highly competitive and physically demanding sport, requiring short bursts of energy and strategic thinking, which he finds both challenging and rewarding.
- Founded in 2017
- Cloud-based development environment
- Allows users to work directly in their browsers
- Core functionality: code editor on the left, preview on the right
Shownotes Transcript