How have frameworks changed programming?

A framework, at its core, is a software platform or library for the development of a product. Such libraries are aimed at solving a narrow task, such as, for example, writing a website interface. Frameworks are very popular when writing frontend.

Frontend (frontend) – the client part of the hardware and software service. In simpler words, frontend is the user interface of a web application. This part of the application is not related to the logic of the functionality. The basis of this side of the web application are three main components: HTML, CSS and Java Script.

Figure 1 – Visualization of the roles of HTML, CSS and Java Script in interface development

The fact that the frontend consists of several components listed above, and the fact that the interface of the sites is reproduced by browsers on various platforms indicate the complexity of writing a universal and user-friendly application. This at one time was the reason for the emergence of frameworks.

What problems did programmers face before the first frameworks appeared? The first problem that comes to mind is the display of certain elements in different browsers. This is one of the strongest headaches of programmers. There are many examples on this topic on the Internet. 

Figure 2 – Example of displaying elements in different browsers

Programmers had to struggle with adapting the entire page to each browser. It could often happen that a developer created a pleasant-looking page by testing in one browser without thinking about the problems, and then during the test everything could "break" when opening this page in another browser.

One of the attempts to simplify development was the appearance of jQuery. It appeared back in 2006 and quickly became very popular. jQuery is a set of JavaScript functions that focuses on the interaction of JavaScript and HTML. The jQuery library makes it easy to access any DOM element, access the attributes and contents of DOM elements, and manipulate them.

This framework has simplified the interaction between JS and HTML, which makes it easier to access this or that element. In the library code, you can find various methods for adapting elements to different browsers. And also the jQuery methods simplified the writing of some functions. For example, you can compare two scripts that perform the same role, but written with native JS and using jQuery. This is how it looks on JS: 

var t;

function scrolltop() {

  var top =

    Math.max(document.body.scrollTop, document.documentElement.scrollTop);

  if (top > 0) {

    window.scrollTo(0, Math.floor(top / 1.5));

    t = setTimeout("scrolltop()", 30);

  }

  else {

    clearTimeout(t);

  }

  return false;

}

And so on jQuery:

$("html,body").animate({scrollTop:0},500);

We should not forget that the framework has its own jQuery UI, which can also be attributed to the advantage. 

However, many different frameworks later replaced jQuery. One of the most popular is React. The capabilities of such a framework help programmers forget about the complexities of HTML and JS interaction thanks to JSX. JSX (JavaScript XML) is its own structure for building a document, which uses almost the same HTML, but under the control of JS. For a detailed description, it is worth considering a simple component of the reaction.

Figure 3 – Example of a React component

The JSX component is used in parentheses of the return statement. And the logic of this component can be written above it. The framework has various methods to work with the displayed elements. One such user component can contain other user components, they can exchange data and dynamically influence each other.

At the same time, there are no selectors in the reaction and the need to write the element search code to work with it. You can insert a variable or even a function directly in the component in curly brackets, the processing of which takes place over the return operator.

Frameworks have practically saved developers from having to worry about browser compatibility, the need to make up entire HTML pages, assign identifiers to elements so that they can then refer to them in the script. Now it has become easier to work with DOM elements, receive and transmit data to them.