Why You Should Learn JavaScript Principles First (Not the Hottest Frameworks)

Roberto Hernández
By Roberto Hernández

Don't just learn the leaves, know the roots!

No Winners in the Crazy Frameworks Race

In the last five years, I have been crazily chasing the hottest race between JavaScript libraries and frameworks. And probably at some point, all of us have asked ourselves which Javascript framework we should learn, evaluating the pros and cons, why this, why that, and so on. I have been a victim of that race, and probably you have too. Of course, I don’t know if this happens to you, but I have been chasing like crazy the hottest Javascript frameworks or libraries, looking for trends, comparisons, how to learn them since the industry is demanding them.

This crazy race has no winner at all since it is neverending. That’s it! Yesterday you were learning Backbone.js, jQuery, Knockout.js, Ember.js, then AngularJS and now ReactJS, Next.js, Vue.js, all Angular flavors. Today, up comes Ext JS and Aurelia, the new ones. And tomorrow another will come up. The framework array list is endless.

Please, please, please, don’t rush to learn. Don’t chase the hottest new JavaScript frameworks or libraries. First, invest your invaluable time in understanding and focusing on the engine: the core concepts and Javascript principles. We will discuss it throughout this piece, and I’ll give you some reasons, keys, and resources to help you get that master JS knowledge.

So I Shouldn’t Learn a JS Framework?

No, no, I’m not saying that. Actually, you should learn them — but without wasting most of your precious time on them. By this I mean that time is limited and we should invest wisely in what really matters. I know there is an insistent temptation to learn the more modern tools, frameworks, libraries, some of them listed above. This is because all the world — your colleagues, the forums, platforms, communities you follow — are bragging about the new cool stuff they have and how easily you can accomplish your development goals. Have you experimented with that? I think more than one of you have had that temptation and have fallen down on. I understand why this happens. As developers, we need to stay up to date with the technology.

I should recognize that some years ago I got carried away by this temptation. Remember, the purpose of a framework is to give you a real speed-up to your development journey, to gain velocity. It’s in charge of complexity and abstract things, offering you a shortcut to speed up the process of coding, among things. But that doesn’t mean you’ll master and become a strong, knowledgeable JS developer. It means you’ll know what to do but not why or how things work under the hood.

I also know that, like everything in life, there will be detractors and lovers of my point of view. This piece is just a guide, a piece of advice. It’s based on my personal experience and a huge number of complaints I have seen in the programming discussion platforms on LinkedIn, Reddit, Dev.to, Medium, Facebook groups, etc.

What Happens If You Don’t Understand How JavaScript Works

Perhaps you know your favorite JS framework very well. But, no lie, there are some days when things become dark as unexpected behaviors, errors, and exceptions start to come up. As my teammate Soham says, “This a really crazy thing man!” Hey! Houston, we have a problem — something doesn’t work as we expected! It’s time to spend a lot of hours googling, searching on pure JavaScript code, trying to figure out why that weird behavior is happening. So you start out digging in, and the time you saved learning in your cool framework will start to come down. Here is when a solid understanding of JS will save your day. Otherwise, you will be stressed out without any success in understanding why it’s happening.

What Really Matters? The JavaScript Core Concepts and Principles

I will touch upon just a few core concepts for the purpose of a good read. The rest of them I will just list so that you can keep them in mind. In my next pieces, we’re going to dig in to know what wraps each of them.

JavaScript Engine, Execution Context, and Call Stack

One of the main aims of the piece is to lead you to what really matters, the core JavaScript concepts, principles, and fundamentals. When I talk about fundamentals I am not just talking about knowing its syntax, variables, data types, loops, and functions. I’m really talking about that one and plus more complex concepts. So the first thing we should start to learn is how the JavaScript engine works, which steps it performs, what Lexing implies, parsing, code generation phases, and what the Execution context is (including its types, and how and when an execution context is created).

The above is just a little part of the core concepts we need to feel comfortable saying we’re masters in JavaScript. After that, we should focus on understanding the scope, global scope, local scope, function, and block scope. Knowing well how different types of scopes work and when to create them will allow you to predict and determine what the output will be in a given scenario.

A closure is simply a function inside of another function that has the ability to remember its execution context. This concept is pretty tricky even for seasoned and experienced JS developers. I have been trying to grasp fully concepts around closure for a long time. It might look easy, but it’s not. Sometimes we’re not even aware that we’re in front of a closure. If you have a good understanding of closures, you can read and understand more complex code. For instance, you can dive into the source code of your favorite framework and start to understand its code.

To get started, the above concepts are great. There is much more than that. As I promised you before, the next concepts will be given just to bear in mind. You should be able to understand how JavaScript engine treats asynchrony since, as you know, JS is a singled-thread programming language. In addition, other core concepts we need to be familiar with and confident of include prototype, inheritance, callbacks, promises, functional programming concepts, and function composition.

And, of course, you should also be caught up on the latest ECMAScript specifications: ES6, ES7, ES8, ES9, ES10, ES.next …and beyond.

Where and How to Master Those Concepts

This piece also aims to stop you from learning the hottest JavaScript frameworks and urges you to keep calm and learn the core JavaScript concepts instead.

As we have discussed before, new frameworks and libraries will come and then go away. That’s what we have been seeing in recent years. A good approach is to set up a good learning system if you want to catch up with the trends. It’s what’s called the 80/20 rule: Invest and focus 80% of your time learning core concepts, digging in more every single day. Then spend the remaining 20% investing in the hottest and coolest tool.

Instead of being worried about learning trends of JS frameworks/libraries, you should read the following resources. The most important thing about them is that some are free! So, no more excuses!

Reasons to Learn the Core Principles of JavaScript

If you are the master of the core and fundamentals of JavaScript, learning a new framework will be a piece of cake for you, because you’ll only need to learn its syntax and some internal features that you can digest easily. If you understand pure JavaScript, you don’t need kits of tools that maybe don’t fit with your long-term goals.

If you know how the engine works, how to predict how a function will behave in a given scenario, or how the scope works, I dare to say you’ll save time when things don’t work as expected. Also, you’ll have greater odds of creating better and higher code quality.

Thanks for reading!

About the author

Roberto Hernández

Graduated from Computer Science Engineering from Universidad Gerardo Barrios. Roberto has over 6 years of experience in Web Development. He’s currently a Frontend Developer at Applaudo Studios.