Am I ready to learn a framework?

Story Time

I remember when I started my journey into development back in 2017 (the before times) the framework wars were still raging pretty hard. The hardest question to answer as a brand new explorer into this world was which one to learn and how to go about learning it. As luck would have it be I received a lot of conflicting advice but one piece of advice stayed constant among all opinions, learn javascript first and understand the DOM and its APIs. So I did just that, I focused for the longest time on making pure JS apps. I actually did not learn a JS framework until 3 weeks before my first role (go Vue!). So with that being said, I give you the same piece of advice, get comfortable with JS and the web APIs you will be using.

Getting good enough at Javascript.

Javascript itself is rather simple. It has the same programming structures as many other dynamic languages such as arrays, objects, functions, etc. What gets confusing is going to be the Web APIs it interacts with and its event loop which gives it that asynchronous power.
Let's take a look at a few examples between pure JS and it interacting with browser APIs.

// Plain old Javascript
const sum = (a,b) => a + b; 

const randomNumber = Math.random() 

const me = {
name: 'German',
age: 25
}

me.age // 25 

// Javascript with browser APIs 

setTimeout(() => console.log('Hello World'))

const el = document.querySelector('my-class'); 

el.addEventListener('click', (e) => console.log(e))

So we can see that Javascript by itself is relatively simple, the real learning curve and where you will spend a lot of your time it's learning to interact with the browser APIs (API also means what is exposed to you by other libraries or environment, not just an HTTP request). The main one being the DOM which stands for the document object model. Which is the view of what you see in the browser. There is a myriad of ways to interact with elements and do everything from setting their styles, content, and adding event listeners. I recommend the videos below to get a good understanding which is important since this is what a frontend dev interacts with. Frameworks are just a layer on top of it.

There are other browser APIs to be aware of as well. Such as all the important ones that allow you to consume data from backends. Now, these APIs are the ones where we start to get into the whole asynchronous nature of javascript since they use the event loop to send messages back and forth from the browser's native code back to the place your javascript is executing in. Now there are browser APIs for pretty much everything from knowing how much battery the device has all the way to get the coordinates for that device. You don't have to learn all of them by heart. For the most part, you will be interacting with only about 20% of the whole thing.

The best resource to understand the whole event loop thing.

The whole 80/20

It seems like there is a lot to learn before diving into learning a frontend framework but in reality, you only need to know 20% of all the things available to you before you are ready. To recap that 20% is getting comfortable with basic Javascript, understanding the DOM, and the most popular browser APIs which will also introduce you to the asynchronous nature of javascript.

If you want to keep learning with us, subscribe to our podcast at https://www.codechefs.dev/.