Before learning any Java Script Framework....

Are you planning to start learning any front-end framework and confused which one to pick? Then this article is for you.

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hey! What's going on guys.

In this article, I want to talk a little bit about learning a front-end JavaScript framework such as Angular, React or Vue. If you start learning web development, most probably, your road map would be learning HTML, CSS and Java Script first and immediately choose some front-end framework and proceed further. At this stage, there is a lot of confusion that you might face due to the available options in the market. We have Angular by Google, React by Facebook and Vue, which is somewhat less popular, but you get the idea. I am often asked by so many of my juniors who is about to learn them and they are very anxious about making a decision of picking a framework as if it is a life and death issue. They will even feel that it is a devastating mistake if they choose the wrong one.

The Reality

Hold up. Wait a minute! Let me spoil your anxiety and confusion right now. Because whatever you think is not correct. Believe me!

Even though there are different front-end frameworks, most of them do the same thing. In addition, yeah of course, every framework will do it in a different way, they have different syntax and different build process, but the overall concepts are pretty much the same. I will talk about it a little later but, I think the most important thing that you have to worry about is do you know enough Java Script? You need to focus on learning the core fundamentals of Java Script. I don’t just mean what a variable is and what a function is and what an array is, of course you need to know that but go further and learn at least ES6. You want to look at Promises, HTTP requests, higher order array methods like map, filter, reduce etc.

The reason I am saying this is when you talk about frameworks, they are basically Java Script frameworks so, JS is at its heart. I have actually written many articles explaining different high-level things in a very easy way. Here are the links:

  1. 8 Must Know JavaScript Array Methods - No Fuss!
  2. Let us finally understand var, let and const in JavaScript!
  3. Convert Your Traditional Functions into Arrow Functions in 3 Simple Steps
  4. Understanding Hoisting - A Weird Behavior of JavaScript 😬
  5. Looping over Arrays: for vs. for-in vs. .forEach() vs. for-of

The biggest Myth

Going back to the point, far too many people just jump into learning a framework too quickly and there are few problems with that, one of them is it is hard to distinguish what is part of a framework and what is actually Java Script. For example, the map() method which is a JavaScript high order array method that's used in react to basically loop through an array and then output a list in JSX. Many people that just jump into react too quickly think that map is part of react but it’s not, it’s Java Script.

Due to this, people think it is so important on which framework to choose because they think every framework is so different like if they learn react and somehow one-day react goes away, they will need to spend a year learning another framework like Angular. It is a myth. When in reality, if you just really know JavaScript well you can switch frameworks very easily and it's not a big deal so just keep that in mind. I know there are different videos in YouTube related to something like React versus Angular and what should you choose etc. They make drama out of picking a framework, it’s not needed. What's needed here is learning JavaScript and keep up to date with latest additions into the language every year.

Another way to really sharpen your skills is being good at algorithms. This is kind of optional in a front-end framework because not everyone like algorithms, even I don’t like them but I do see how they come in handy while writing logics in the most efficient way when there are multiple ways of achieving that solution.

What you should really care about

As far as a framework concerned, there are only two important concepts that you need to know about. Those are:

  • What is a component?
  • What is a state?

Components

Components are just encapsulated pieces of your user interface. For instance, if we want to build a home page containing a nav bar, body, some cards and a footer as shown below.

image.png

In a front-end framework, each of them are considered as a component of home page.

State and State Management

A state is a representation of a system in a given time. State refers to the data stored in Application in the form of a string, arrays, object, etc.

State management is a method of managing the state. As an application grows, so does the complexity of managing the state. In a big application where you have a good number of views/components, managing their state is a big pain. The main job of any UI Library or framework is to take your application state and turn it into DOM nodes, that's why arranging state in a better way lifts the overall health of the application.

I like to think of my application as a bunch of components and then a cloud that that kind of hovers above the components - that is my state and the state can rain down data into components that need it.

Conclusion

Therefore, the main conclusion is whatever the framework you want to choose, just choose it and start with it. However, the only rule is you need to be reasonably good at core Java Script. In addition, going forward, do not mind about what people are saying about the framework you pick up. Because as far as you understand core concepts of java Script and what does any framework do for you, it’s very easy to learn other one. So, that’s pretty much it for today. Hope you learned something new today.

Radhakrishnan Selvaraj's photo

Thanks for the succinct view on learning fundamentals of Javascript instead of focussing on surface-level details like Frameworks.

Devalla Sai Charan's photo

Exactly! Glad you found it useful.

shubham shekher's photo

Amazing article! Just loved it the way javascript has been given priority

Devalla Sai Charan's photo

Thanks. Glad you liked it.

Vandana Sharma's photo

This is a very useful guiding step!

Devalla Sai Charan's photo

Thanks. Hope you find it useful.

Sunny's photo

Hi nice article but can you guide me from where to learn js from any course or site

Show +1 replies
Sunny's photo

thank you so much, it really means a lot that you took your time and sort the resources for me thank you so so muchDevalla Sai Charan

Devalla Sai Charan's photo

Thats ok. Sunny Happy learning🎉