Recently, I took over a front-end project for an official website. Although it's called a website, it's actually a web application rather than a marketing site, so it does have a certain level of complexity.
These past few days have been a whirlwind of debugging and getting familiar with the code logic. I didn't expect it to be such a hot potato. The previous developer left me a mess—frankly, I don't think they were much more than intermediate level. 😖
You might think I'd be overwhelmed and frustrated by this pile of mess, with my mind racing like a herd of horses across the Hulunbuir Grasslands. But no! You're mistaken! In fact, I'm quite excited!
Don't get me wrong—I'm not some kind of masochist. It's just that projects like this are like touchstone tests, proving my worth as a true gem, a hidden treasure, and the ultimate myth—after all, I'm a seasoned "front-end poop shoveler"! 😄
Alright, enough with the backstory. Let's get down to business.
This official website project is built with Next.js, and its directory structure is pretty standard, offering little constraint for development and maintenance.
The core issue with the project is the lack of abstraction. The code is like a jumbled mess of cables in an unorganized server room, with poor reusability and maintainability.
What about robustness? What's that?
I once wrote an article titled "Patterns of Directory Structure in Front-end Projects". The directory structure of this project, like most front-end projects, falls into the "wild" category mentioned in the article—it's part of the problem!
As I mentioned at the beginning, this project is a web application, which means it can largely benefit from domain modeling. This also implies that if I want to clean up this mess, the first step is to reorganize the directory structure using a "modular" approach, similar to the annual organizational restructuring at a company.
Due to the limitations of Next.js, the app folder must replace the entry folder.
Ideally, apart from the app folder, the shared and domain folders should be free from Next.js constraints and will carry the bulk of the application's logic—always ready to break free from Next.js's grasp! 😜😜😜
The ideal is full, but the reality is quite 💀.
Since this project is plagued with issues, it can't be fixed all at once. After today's refactoring, I had to leave some remnants for now, but I'll eliminate them one by one in the coming days!
Now it looks much cleaner and more organized. I'm feeling great! 😄😁😆
Top comments (0)