Adding modern JavaScript to legacy projects
Here’s a question for ya:
Do you need to be working with a blank slate to adopt a new front-end framework like React or Vue?
Many of the resources you’ll find about these technologies are written with the assumption that you’re starting a brand new project. While that’s helpful when you have the opportunity to start a project from scratch, the reality for most teams is a bit more complicated.
Here’s the reality for most of us:
- We have lots of old projects sitting around with aging jQuery scripts that handle form submissions, sliders, YouTube videos, etc.
- We want to learn new technologies and best practices, but our existing projects still need maintenance and new features
- It’s not really practical to revamp our existing toolchains/build processes on these old projects for the sake of modern JS
- Our customers’ needs and priorities change as our projects age, which sometimes means developing new features and functionality quickly
In that context, does it make sense to add modern frameworks to old projects, or should we just pile a few more noodles onto that delicious, delicious jQuery spaghetti? (Everybody does it, DON’T YOU ACT LIKE YOU DON’T. 🍝)
This is a question that only you can answer, as your users’ and clients’ needs are totally unique. But I’d argue that in some circumstances, it makes perfect sense to introduce a new framework like React or Vue, or any of the other super hip frameworks du jour, to an old project.
In fact, once you learn some basics, frameworks can help you get more work done at higher level of quality than if you’d piled on yet another jQuery plugin. (Side note: If we write jQuery spaghetti, what does that make jQuery plug-ins? jQuery meatballs? ¯\_(ツ)_/¯
)
It might make sense to add a new framework into the mix as soon as your client requests any functionality that involves lots of state.
So how can we add new functionality based on new frameworks without breaking existing code, or otherwise making a mess of things?