monolithic web application into a more modular architecture --- with the help of AI-based developer assistants. Our starting point is a simple dashboard, all crammed into a single index.html file. We'll walk through attempts to modify and maintain the code using two AI tools: Cline and Cursor. Finally, we'll break down the monolith into smaller parts to achieve a cleaner, more efficient structure.
The Starting Point: A Single-File Monolith
Our dashboard begins as one large HTML file containing everything: styles, scripts, and markup all mixed together. It's a classic example of a "monolith" that becomes hard to maintain, especially as the codebase grows.
Initial Monolith Dashboard
Attempting a Simple Change with Cline
We start by making a small, straightforward modification: changing the background to green. With the Cline tool, this process reveals a notable challenge.
Using Cline
Cline reads and rewrites the entire file for every change. For large files, this can be slow and cumbersome.
Modifying Background with Cline
The Problem with Large Files
As the file grows bigger, Cline becomes "lazy." Instead of showing the full modified code, it starts outputting placeholders like "the rest of the code remains the same." This poses risks:
- Saving these placeholders would break your code.
- If you're not paying attention, you might overwrite working sections with these stubs.
- Even if placeholders aren't used, Cline may try to shorten the output, rationalizing parts of the code and causing confusion.
Cline's Diff Limitations
Cursor to the Rescue
Let's try the same task with Cursor AI.
Top comments (0)