What is a framework in programming
Framework is a large amount of ready-made code, which includes a certain set of functions and architecture. The developer can immediately use the functions themselves out of the box, without wasting time creating their ready-made counterparts. The main need for using a framework is the desire to speed up development.
Let’s take an example. Let’s say a programmer needs to write a function that will make a request to the server to get some data. It will cost you 10 lines of code to write this yourself, but with a framework or library, this can be solved in 1-2 lines of code, because there is already a ready-made code for these tasks.
Naturally, a normal programmer will not install a framework for 10 lines of code, but when it comes to 10,000 lines, it’s better to install the framework than to write your architecture from scratch. Naturally, all frameworks are written by other programmers and are made publicly available (sometimes sold).
“Reactivity” or why Vue.js is needed
Reactivity is a programming term that explains how an application works, in which a program monitors changes in its data on its own in real time.
For example, you have some data that is displayed in the browser window (on the page). For any data manipulation, the application tracks all actions with them and changes, compares them with what is “rendered” in the browser and makes the necessary changes in the rendered part to fully match the text in the browser and the data in the source code. And all this happens without reloading the page.
With “reactivity” you can create lightning-fast interfaces that load instantly and provide a better user experience. For example, take a look at the response rate (transition between pages) for a regular site:
If you take a closer look at the upper left corner, you will notice how the browser constantly “reloads” the page, which means that it constantly re-renders (renders) the entire document coming from the server.
Now look at the same thing, but on a site using Vue.js. It works twice as fast, and there is still no “reloading” of pages by the browser (redrawing the document).
And the beauty here is that when you change some data inside the source code of the site / application, they can instantly “automatically” change on the site itself in the browser.
Pros of reactivity
Speed. With the help of reactive frameworks, you can create impressive and lightning-fast interfaces that do not require a lot of development.
The secret to speed lies in the browsers themselves. Rendering, or in other words, the process of rendering the HTML code of a website by a browser that came from a server is the most expensive process for your computer and phone.
In the case of regular sites, rendering occurs every time you move through the pages. In the case of reactive sites, the entire site is rendered once the first time you visit the site. Further, only small and necessary pieces are drawn.
Maintaining a site in Vue.js, if done correctly using server-side rendering, is a complex, time-consuming and expensive task that requires normal programmers. That is, a person who is used to writing in JQuery and WordPress is unlikely to suit you. And half of them are on freelance exchanges and in Russian Internet agencies and web studios.