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?
Top comments (11)
I think most javascript code is still written with a disruption mindset, while it should be made with a calmer mindset.
When I do frontend programming, I try to use as less dependencies as possible. Even try to avoid compiling and bundling.
Less code and less cogs in the machine equals less problems.
Thanks for your comment! A calmer, or more stability-focused development mindset would help a lot. Take a Linux Mint distribution with an Xfce desktop manager for example, powered by a multitude of interdependent packages spanning decades of develeopment eras, but still it usaully works well without conflicts.
Avoiding compiling and bundling in web development isn't always the best choice, in my opinion, it depends on the use case. Classic, content-focused front-end websites can still be done with plain HTML, CSS, and vanilla JavaScript (with JSDoc, if we don't want TypeScript transpilation). Content management without relying or WordPress or other opinionated frameworks, thus JAMstack with Hugo, Eleventy, Astro etc. tends to bring a lot of npm dependencies with at, but at least mostly devDependencies that aren't deployed to the frontend, so we can keep calm about most security issues. Once we start with React, Svelte, or Vue for more interactive web apps with complex state management, we're exactly in the situation that inspired this discussion.
A real-life example from my current side project. No more conflicting peer dependencies, everything works now, apart from Tailwind styles in Storybook:
Integrating Astro 5, Storybook 9, Vite 7, and Tailwind 3 🐇🕳️
Ingo Steinke, web developer ・ Aug 8
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.
I remember PHP Symfony wasn't much better. Maybe we should learn a "dead" language like COBOL.
You can't have any dependencies if you do everything yourself. It would be so much simpler (but a lot more limiting, of course)
Yeah, but that sounds a little bit like a Roll Safe meme, like "the data can't be wrong if there's no data".
My solution is really a matter of mind-shifting: expect to maintain any code you write forever. Maybe even enjoy it!
The ecosystem will constantly change. Always has. We used to be a community of tinkerers, who could while away our time pruning old dependencies and refactoring things to get a little better at a time... now we've gone the way of society: make a quick buck and move on to the next thing.
The best way to deal with constant deprecations and breaking changes is to keep dependencies minimal, update them regularly in small steps, and document why versions are pinned. Using stable environments like Docker or version managers helps avoid unexpected conflicts. For simple projects, sticking to plain HTML, CSS, and vanilla JavaScript reduces risk. For complex apps, maintain a consistent stack, monitor semantic versioning, and rely on reproducible builds to keep things stable.
I've little knowledge about WordPress but now I want to learn coding.
So, from where I can start???
Can anyone guide me???
Do you want to learn WordPress or do you want to learn coding? WordPress doesn't require much coding to get started, but you can still use coding (HTML, CSS, JavaScript, PHP) to produce better themes or customize existing ones. However, if your want to learn coding, start with the basics. If your want to learn web development, learn HTML, CSS, JavaScript. There are many excellent tutorials and starting points, also here on DEV.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.