Should I start by learning vanilla Javascript or a framework?
This is a common question among new developers, and itâs a good one to think about. On one hand, robust applications are often built using front-end frameworks. If you want to start building robust apps, it would make sense to cut to the chase and learn the framework.
On the other hand, Javascript is the foundation of all of these frameworks. Maybe itâs good to have some knowledge of that foundation before you try to learn something thatâs built on top of that.
When I was getting started in web development, front-end frameworks didnât have the same mindshare they do now, but I did have to make a similar decision. I had to decide if I should learn vanilla Javascript or jQuery. Hereâs what I ended up doing and how it worked out for me.
My âCart Before the Horseâ Story
For anyone who doesnât know, jQuery is a library that makes working with the DOM (the document object model) in Javascript easier. It also smoothed over a lot of browser compatibility issues that were a real pain to deal with 5-10 years ago. Itâs not so relevant these days since we rarely need to support those old browsers with our new builds.
It was so widespread that, even today â well past the peak of its relevance â itâs estimated to be in use on 88% of the top 10,000 web sites. I was eager to get started building, so I decided to learn how to use jQuery with a very rudimentary understanding of Javascript.
This did allow me to get to work much more quickly. Since I could select elements and manipulate the DOM easily with CSS selectors and without having to worry about browser quirks, it let me dive right in. It worked out pretty well⌠until I had a problem.
An Incomplete Toolset
I didnât understand a lot of what jQuery was doing because I didnât have that foundational Javascript knowledge. Why am I calling methods by chaining them off the original element I selected (and how does that actually work)? What is this? If I select an element and assign it to a variable inside a function, why canât I use that outside the function?
So, even though my toolset seemed adequate while everything was working as expected, as soon as I went off-script, I would inevitably hit a problem I just didnât have the tools to solve. It meant I could code myself into a lot of problems that I couldnât get out of. It made me a worse developer because I was trying to take this shortcut to reduce the time it took me to become productive. Instead, it was reducing my productivity.
Righting the Wrong
When I recommitted myself to web development a few years later, I realized this decision had stunted my growth. At the same time, the browsers causing many of the issues jQuery solved were becoming obsolete. I decided to properly learn Javascript.
Not only did this make me a better jQuery developer, but it made me a better developer overall. I understand whatâs going on behind the scenes with jQuery, so I can much more easily debug and solve problems when I use it. I can also make a conscious choice not to use it when that makes more sense. Before, that wasnât an option for me.
What Should You Learn First?
I canât fault you for wanting to learn React, Angular, or Vue before you really have a good grasp on Javascript. After all, I did virtually the same thing years ago. It seems like youâll be able to get started on the projects you really want to work on. In practice youâre setting yourself up for a lot of frustration and ultimately failure.
What Iâd recommend instead is, if you have a project that you feel needs a framework, either scale back to a smaller project or build a smaller chunk of your existing project with vanilla Javascript. Youâll get your foundational knowledge, and you can always retrofit the project with the framework of your choice later.
Taking things a little slower now, at the beginning of your learning journey will pave the way for you to pick up serious momentum in a few months, once you have the basics down. For the impatient among us, it can be excruciating, but the payoff is worth it. Start with vanilla Javascript, and youâll be a better developer.