What are front end frameworks (libraries*)

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.

Source: MDN

History of Front End Frameworks

all began 25 years ago, when Brendan Eich, then a software engineer for Netscape Communications Corporation, was tasked to develop a language on a tight schedule for the company’s 2.0 beta release of its Navigator browser. The language had to be lightweight yet powerful enough to enable more dynamic and interactive web pages. Faced with these constraints, Eich took inspiration from Java’s syntax, the object-oriented concepts of Self, and some of the constructs of C, Smalltalk, Lisp, and Scheme, to build the JavaScript language in only 10 days. Today, JavaScript is supported by most browsers and employed by almost every existing website. It was the most popular language used by GitHub repository contributors in 2019, when it also became the most commonly used programming language for the seventh year in a row, according to Stack Overflow’s 2019 developer survey. With the popularity of JavaScript comes the increase in the number of front-end frameworks, the most common of which are Angular, Ember.js, Preact, React, Svelte, and Vue.js. Based on results from Stack Overflow’s survey, the most broadly used of these frameworks include React, Angular, and Vue.js, with developers ranking React and Vue.js as two of the most loved and wanted frameworks. Svelte garnered the top spot in terms of interest on the 2019 State of JavaScript report, while Ember placed highly in the awareness category and React in the satisfaction category. Yet the front-end frameworks mentioned don’t make up an exhaustive list, as less-popular ones are also still in use. So why are there so many JavaScript front-end frameworks? Let’s take a look at what’s been behind this rise, the advantages that having multiple frameworks can bring developers (and the issues this can cause), and what to expect in the future.

Source: Welcome to the Jungle

Lets Break it down into simpler terms

The why is this: JavaScript is awesome but there are a lot of tedious things that you had to do when developing on the front end, and as humans, we like streamlining things. We like creating tools to make our lives easier... To that end jQuery was developed to handle some of the more common things when it came to making an interactive webpage, then came the start of the rise of the Single Page Applications, think Facebook, think Twitter, think down that line and you pretty much have got it.

To that end developers started to look for better ways to make UI/UX & front end components.

In October of 2010 Angular JS, developed by the Google team, hit the scene with its MVC styled development pattern. MVC being Model-View-Controller.

https://www.tutorialspoint.com/angularjs/images/angularjs_mvc.jpg

https://www.tutorialspoint.com/angularjs/images/angularjs_mvc.jpg

Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts − Model − It is the lowest level of the pattern responsible for maintaining data. View − It is responsible for displaying all or a portion of the data to the user. Controller − It is a software Code that controls the interactions between the Model and View. MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.

Source: Tutorialspoint.com

Facebook Flips the Script

Less than 3 years later Facebook hits the scene when one of their developers, Jordan Walke, dropped React.js.

Back in 2011, the developers at Facebook started to face some issues with code maintenance. As the Facebook Ads app got an increasing number of features, the team needed more people to keep it running flawlessly. The growing number of team-members and app-features slowed them down as a company. Over time, their app became difficult to handle, as they faced a lot of cascading updates. After a while, engineers at Facebook couldn’t keep up with these cascading updates. Their code demanded an urgent upgrade to become more efficient. They had the model right, but they needed to do something about user experience. So, Jordan Walke built a prototype that made the process more efficient, and this marks the birth of React.js.