DEV Community

Cover image for Why You Should Learn JavaScript Principles First (Not the Hottest Frameworks)
Roberto Hernandez
Roberto Hernandez

Posted on

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

Originally published on my blog MullinStack

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).

Scope

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.

Closures

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.

An array list of more JavaScript core concepts

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

Apply the 80/20 rule in your learning process
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!

Clean Code: A Handbook of Agile Software Craftsmanship
The Pragmatic Programmer: From Journeyman to Master
Programming JavaScript Applications
You Don’t Know JS Yet
JavaScript: The Good Parts

Reasons to Learn the Core Principles of JavaScript

You are the master of JS

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.

Better code

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! If this story turned out to be interesting, I’d really appreciate it if you like and share it with your friends. I hope to add a little bit more knowledge to you. Don’t forget to follow me on Medium and on my blog MullinStack

Latest comments (21)

Collapse
 
mjcoder profile image
Mohammad Javed

I've been developing for a few years now & still struggle to grasp JavaScript. Every developer starting out must grasp JS and make sure you are strong in that before diving into the many JS frameworks. I will get there, in the end, I'm stubborn as hell & won't rest till I conquer JS. 😂

Collapse
 
__orderandchaos profile image
Order & Chaos Creative • Edited

Learn language-agnostic principles: algorithms, design patterns, clean code and refactoring.

JavaScript is as good a place as any to do that.

Collapse
 
georgeoffley profile image
George Offley

Like all other languages which have a ton of available frameworks, learn the fundamentals.

Collapse
 
eaich profile image
Eddie

Thank you Roberto! I agree with you completely. I think many of us are experiencing "framework fatigue." Many frameworks started out as just someone's way to save time. It's their own abstraction, but they knew the pure underlying language first - A Framework Author's Case Against Frameworks

Learning the fundamentals allows you to learn other languages more efficiently. At the end of the day, a function is a function, a variable is a variable, etc. Excellent article!

Collapse
 
mzahraei profile image
Ardalan

Right data structure is one of the important things before trying to write javascript code. I love javascript l

Collapse
 
blarzhernandez profile image
Roberto Hernandez • Edited

Yes, of course, it is too. Thanks for reading!

Collapse
 
ziizium profile image
Habdul Hazeez

Thank you, Thank you. In addition

GitHub logo leonardomso / 33-js-concepts

📜 33 concepts every JavaScript developer should know.


33 Concepts Every JS Developer Should Know

33 Concepts Every JavaScript Developer Should Know

Follow me

Introduction

This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis and you can read it here.

🚀 Considered by GitHub as one of the top open source projects of 2018!

Community

Feel free to submit a PR adding a link to your own recaps or reviews. If you want to translate the repo into your native language, please feel free to do so.

All the translations for this repo will be listed below:

Collapse
 
bimlas profile image
bimlas • Edited

I highly recommend this video tutorial for beginners: udemy.com/course/modern-javascript...

Collapse
 
mpodlodowski profile image
Marcin Podlodowski

Great article, Roberto, thank you! I would say that it's perfectly valid for any given language.

The book list you provided (I especially like the second one) has broken links BTW.

Collapse
 
sudheervajrapu profile image
Sudheer

Programming JavaScript Applications link is not working.

Collapse
 
blarzhernandez profile image
Roberto Hernandez

It´s working. Check it again.

Collapse
 
iggredible profile image
Igor Irianto

Awesome article. I was in the same race until recently. First I did angular (1 😅), then react, then recently vue- after flirting with Svelte. In the end, if I can't ship any code with these frameworks, what have I accomplished? Nothing.
I absolutely agree. If you learn core JS, you can pick up hyped-framework-X in short amount of time, saving you time in the future!

Appreciate the book list btw.

Collapse
 
lbayliss profile image
Luke Bayliss

I find understanding the language first leads to the frameworks making so much more sense when used. Rather than knowing that A does B, you understand how A results in B; which can be incredibly useful.

Collapse
 
blarzhernandez profile image
Roberto Hernandez

Yes sure, Actually, we do the opposite for different reasons. Thanks for reading!

Collapse
 
deekshasharma25 profile image
Deeksha Sharma • Edited

I can't agree enough on this. Countless times, it is thought and assumed that the problem is arising because of a framework issue. But the real problem is the basic JavaScript concept which has absolutely nothing to do with framework. Thanks for writing this article!

Collapse
 
wagnerluis1982 profile image
Wagner Macedo

And sometimes it is really a framework issue, but we can't figure out because we don't know the basics.

Collapse
 
codemouse92 profile image
Jason C. McDonald • Edited

I don't do Javascript, but I can testify that this is excellent all the same!

You've described my entire philosophy of programming. Because I've spent so much time mastering the underlying concepts of software development, I can pick up any language quite quickly. Similarly, when I spend any meaningful time in a language, I try to master the entirety of its core before I worry about grokking various libraries, GUI frameworks, or what have you.

Abstractions should make your life easier, as long as you don't focus on the abstractions. Learn the underlying concepts, and you'll be able to pick up any abstraction at will.

Collapse
 
lockeag profile image
Adrian Galvez G.

this should be the name of a book: the underlying concepts of software development

Collapse
 
codemouse92 profile image
Jason C. McDonald

It very nearly is. I came across this new release from No Starch Press the other day. Looks promising...

How Software Works by V. Anton Spraul

Thread Thread
 
blarzhernandez profile image
Roberto Hernandez

Great. I will take a look at. Thanks for sharing!

Collapse
 
blarzhernandez profile image
Roberto Hernandez

Completely agree. Jason, thanks for reading.