The greatest challenges of modern frontend web development aren't CSS, accessibility, or web performance. Leveraging AI agents or mastering JS idioms aren't, either.
Constantly fighting deprecations, incompatibilities, and breaking changes is the greatest challenge of modern frontend web development.
npm install
Let's say you have finished a project.
Let one year pass.
Everything still works, as long as you don't change you existing node_modules folder.
Your IDE suggests to run npm install.
npm install
warning! warning! deprecation! no longer supported! error!!!
Note: the above image mixes two different screenshots, and the error messages show incompatibilites of a new project, not the breaking changes affecting a legacy project, as described above.
vibe coding
Now we've probably all heard that we're in the age of "forgetting about code", when "programming becomes prompting" and we "simply" talk to AI agents in "natural language", as if that made any sense in software development. When humans have failed mastering requirements engineering, agile sprint reviews, and maintaining documentation, and most customers still don't know what they need, how should LLM-based AI assistants trained on human language and code do any better?
But, hey, let's give it a try, forget about code and ask an AI what to do. As has been documented time and again, they will
- provide working solutions to simple tutorial problems
- suggest outdated and deprecated syntax
- use outdated and deprecated libraries
- try to use imaginary libraries that don't even exist
- mix mismatching syntax from before and after breaking changes much like clueless newbies would do after googling and copy-pasting from mismatching and outdated tutorials and StackOverflow answers.
worse than breaking changes
What's even worse than breaking changes?
- undocumented breaking changes
- breaking changes in minor version updates
- breaking changes without renaming a tool or package
- naming tools and packages so similar to others that everyone will mix up (like "Angular" vs. "AngularJS")
^ Screenshot of npm refusing to install an additional node core module because vite expects a slightly newer node version.
Making things worse, web development depends on third-party libraries, and different tools will require different versions of the same third-party libraries, also known as conflicting peer dependencies.
managing npm peer dependency conflicts
The npm package manager has become a lot better at managaing peer dependencies. We have a package-lock file, commands like npm view, npm list (ls) and info, and the option to "pin" peer dependencies to speicific versions in our package.json.
Many of the above solutions become disimprovements over time when you don't remember why you pinned a peer dependency version in the first place, new updates bring new deprecations, or a package doesn't support the node/npm version that you're using or vice versa. Of course, there is nvm, the node version manager.
one year later
Let another year pass.
Everything still works, provided that you don't change your existing node_modules folder.
IDE suggests to run npm install.
npm install
warning! warning! deprecation!
npm warn EBADENGINE Unsupported engine
no longer supported! error!!!
share your solution
What's your experience? How do you tackle breaking changes, deprecations and conflicting peer dependencies in your web projects?
If you never update anything, you'll never have breaking changes!
In all seriousness, I've just now started to run into that problem (both with NPM and other things). I normally just do whatever NPM advises and whatever sounds the least invasive. I gotta start considering the longevity of that gameplan though.