Confused between Different javascript frameworks? Understand the common part

Angular, Vue, React, Polymer... This list seems never ending. As a web developer, you might not want to miss any job opportunity, which these frameworks has to offer. But it's almost impossible to learn every concept, there is something always unique or weird. Luckily there are concepts which are accepted among web developer community, which makes it easy for us to switch the framework.

Component Based Architecture

Dividing your application in smaller components is a widely accepted approach. You divide your app in smaller entities, and in the end all comes together to make a large customer facing component.

So what to learn here, check each known library to identify, how it is dividing itself, whether it is returning a JavaScript object as a component or a html. How Inputs and Outputs properties are passed to a component? How to create a dumb and a smart component? How they are merged together? If you can get clarity on these questions, you will surely see that components architecture is very similar between frameworks, which you need to understand only instead of memorizing syntax.

ES6

ES6 is already built it's grasp in web development, we have already started to avoid var and other confusing concepts, and dealing with new keywords like let, const and class. All the major frameworks also evolved to incorporate these changes, so if you have a good knowledge about arrow functions, object oriented programming with ES6, it will be a cake walk to understand the concetps of a framework.

While angular is using typescript as syntactical language, you might need to cover typescript concetps as extra, if you want to use angular. In future, we are expecting typescript support also in major browsers.

Function Programming

From wikipedia definition, functional programming is a paradigm , where programming is done via function expressions and declarations instead of statements. It also avoid mutating the data. Latest framework accepted the functional programming paradigm, and using it orchestrate their data flow with redux and other patterns. Since this approach is accepted in industry as a new standard, so if you learn to implement it in react, then you won't have any hurdle to implement the same in angular and vue also.

I won't try to explain about functional programming here, as this article is about to list down the common concepts you need.

Redux

I mentioned redux in previous point, redux is part of functional reactive programming paradigm, and each framework has it's own implementation. But again, data flow and state immutability concepts are same , because redux itself is a pattern not a tool.

Routing and Lazy Loaded Modules

Routing is a integral part of a SPA framework, and it is implemented in every framework, so you need to understand how to divide your application into routes? how to protect your route? How to pass params to your route etc.

In Current versions, you can divide your application code into small chunks as per your routes, and these chunks won't be loaded in browser memory unless a route is hit, it improves performance of your first time page load, and the concept is implemented across frameworks.

Module Builders

You will need a module builder to compile your code into a single javascript file, as browser currently itself don't understand concept of modular application, that's why your components needs to compiled and folded into a single js file, that's where module builders like webpack comes into picture. It's very important to understand the concept of module builders, and what kind of transpilers will you need with each framework. Webpack seems most popular these days, so it can be a good starting point.

Template engine

Each framework has it's own template engine, you might need to learn everything, but concepts like dom manipulation, looping , form validations might be important to learn. Go through the architectural diagram to learn, where template engine will come into picture.

Performance and Security Measures

Before choosing a framework, you should ask following questions :

1. How complex is your application?
2. Do you have a performance budget ? it's very important to have performance budgets, depends on what kind of clients and platform your are supporting.
3. What is the learning curve for each framework,?
4. What needs to be done for OWASP top 10, security compliance.?

Better ask these questions sooner, because many times, you over-do and under-do things just to implement a new framework.

So If you are aware of all these concepts, you might write your own JavaScript framework soon :)

In the end , it's important not to forget about HTML, CSS, vanila javascript, browser compatibility.