Home > NERDNESS OF > Tips and Tricks > When You Should Start learning JavaScript framework?

When You Should Start learning JavaScript framework?

javascript framework

Okay first things, JavaScript is a scripting language often abbreviated as JavaScript, that enables you to create dynamic content in the web pages, whose implementation allows a client-side script to interact with the user. Before you start to learn Javascript framework, you need to know about what is javascript framework?

So now what does the javascript framework mean? 

Okay let me give you example, think of building a websites or apps likes making a PIZZA, when you want to make pizza you can actually make every ingredient by yourself but that’s time consuming and does not make a sense isn’t it. So, it’s more likely you will buy pre made pizza base, cheese from the shop and then make your PIZZA.  

Suggested Topic: Top 10 Best Sites To Watch Anime For Free (Latest)

Coding is very similar. When you set out to code a website, you could code every aspect of that site from scratch, but there are certain common website features that make more sense to apply from a template—if you need a gadget, for instance, it’s a lot more sensible to buy one than it is to reinvent it. And that’s where JavaScript frameworks come into play.   

JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow. A library offers functions to be called by its parent code, whereas a framework defines the entire application design.  A developer does not call a framework; instead, the framework calls and uses the code in some particular way.

source – Wikipedia

Some of the top used JavaScript frameworks are Vue, React, Angular, and so on.

NameTypeShadow DOM EcmasScript 6+
ReactLibrarySupported
AngularFrameworkSupported
EmberFrameworkSupported
VueLibrarySupported
BackboneFrameworkSupported

So, before you start to learn javascript framework you need to know some Prerequisites.

They are:

1) HTML CSS

2) Basics JavaScript

Well you need to understand these major

  1. Syntax
  2. Variable
  3. Arrays/Functions
  4. Events
  5. Functions
  6. Loop
  7. Conditionals
  8. DOM Manipulation

So, if you have learned the basics of Html, CSS and JS, 

What NEXT? Is that all you need to learn?

No right, you can’t do a service without not knowing some advanced features of JS. So, kind of don’t jump into framework right after learning the basics.

NOTE: YOU NEED TO UNDERSTAND BETWEEN VANILLA JavaScript AND THE FRAMEWORK.

3) Advance JavaScript

3.1) High order array method 

High order array method are the high order functions that operate on other functions, either by taking them as arguments or by returning them. So we need to learn:

  • For Each
  • Map
  • Filter
  • Reduce
  • ETC

3.2) Arrow functions 

Arrow functions allow us to write shorter function syntax. For example

3.3) THIS

In JavaScript THIS keyword This refers to the current execution context. For example

3.4) ES6 JavaScript modules  

You need to learn ES6 modules using import export function.

3.5) Promises 

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.

what is Promise
source: MDN WEB DOCS

3.6) Destructing  

Destructing is the way of writing cleaner and flexible code. for example

3.7) Classes

A lot of the programming language uses classes. So, this is not a unique concept. So you need to understand how classes are structure, how they use Constructor, Methods/Properties, Instantiation, Extending classes.

4) SEPARATION 

This is the concept of keeping things separate. In general, we like to keep our HTML, CSS, JS in separate files.

Frameworks use a similar concept by keeping the components separate. So, you may have a navbar component, menu components, and main components. 

And all components will have the state.

State is usually a data or a component its state of being. 

An example will be a tracking whether a menu is opened or closed. 

 NOTE: IF YOUR APPLICATION IS LARGE YOU MAY NEED STATE MANAGEMENT, IN THAT CASE YOU CAN USE REDUX FOR REACT, VUEX FOR VUE AND NGLRX FOR ANGULAR.  

5) SPREAD OPERATOR 

Since we were talking about state, a state is usually immutable. So, you can’t simply change it. You need to make a copy. 

So here we have some state object with name data. 

If you want to add ID data to the state, you need to make a copy of the state data using a spread operator then add the age data, then u can update the state using the provided methods from the framework. 

There are also few Miscellaneous items. 

You need to learn typescript when learning angular. 

You also need to learn how webpack and babel work. You don’t need to have any advanced knowledge of these but at least the basic understanding of how they work. Hope above information will definitely help you to learn javascript framework learn JavaScript framework

NOTE: FRAMEWORK ARE NOT WRITTEN ON A WAY THAT BROWSER UNDERSTAND. FRAMEWORKS ALLOWS US TO WRITE THE SAME CODE WE WOULD WRITE IF WE WERE USING VANILLA JS BUT IN A WAY THAT IS MORE EFFICIENT AND EASIER TO MAINTAIN. SO WEB PACK AND BABEL HELP US TO TRANSLATE OUR CODE INTO SOMETHING READABLE BY THE BROWSER. 

Some reference links: w3schools, mdn web docs

Leave a Reply