Framework

A framework, or software framework, is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform. For example, a framework may include predefined classes and functions that can be used to process input, manage hardware devices, and interact with system software. This streamlines the development process since programmers don't need to reinvent the wheel each time they develop a new application.

A framework is similar to an application programming interface (API), though technically a framework includes an API. As the name suggests, a framework serves as a foundation for programming, while an API provides access to the elements supported by the framework. A framework may also include code libraries, a compiler, and other programs used in the software development process.

Several different types of software frameworks exist. Popular examples include ActiveX and .NET for Windows development, Cocoa for Mac OS X, Cocoa Touch for iOS, Next.Js for React, and the Flutter Framework for Android and iOS development.

LIBRARY.

A "library" is a collection of program parts that do common and/or specialized things that save the programmer from needing to "reinvent the wheel" when writing software. It usually consists of functions to call and object classes you can instantiate. A common example might be functions that deal with dates and times, and a specialized one could be software for manipulating a smart thermostat (such specialized libraries are typically provided with a device purchase).

By using libraries, the programmer can concentrate on the unique aspects of the application being developed.

To help us have more understanding about why we need frameworks/libraries, let us understand the term "programming paradigm" and its types.

DEFINITION OF PROGRAMMING PARADIGM

A programming paradigm is an approach to solve a problem using some programming language or also we can say it is a method to solve a problem using tools and techniques that are available to us following some approach. There are lots of programming languages that are known but all of them need to follow some strategy when they are implemented and this methodology/strategy is paradigms. Apart from varieties of programming languages, there are paradigms to fulfill each and every demand. They are discussed below:

Types of Programming Paradigm

There are two types of programming Paradigm:

1. Declarative Programming, and
2. Imperative Programming.

IMPERATIVE PROGRAMMING

This is a programming paradigm(a paradigm is a way to organize your code and to write your code) that uses programming statements to tell the computer what to do, step-by-step.
Imperative programming is how programming started. The reason we program is to tell computers what to do to be able to help us, to display websites, and to help us with tasks.

As our programs get bigger, an imperative style of programming gives us a vivid understanding of what happens each step of the way. And because we have to tell the program exactly what to do, in what order, there's a lot of bugs/errors that can be formed.
Now, unless you have experience with or you've worked with large codebases, it will be hard for you to understand.

But trust me on this: the imperative style of programming, although very useful, can be bug/error-prone.
So what's the alternative?
ANS: Well, it is the Declarative style of programming. Now, it does not mean Declarative programming is better than imperative programming, it's just two(2) paradigms, two(2) ways of writing codes.

DECLARATIVE PROGRAMMING

Declarative programming is when you write your code in such a way that it describes what you want to do, and not how you want to do it. It is left up to the compiler to figure out the how. Declarative programming expresses logic without describing its control flow.
What do I mean by that?
ANS: With a declarative style of programming we tell the computer to say: hey, I want this to happen, and then the computer just knows how to go about it.
For example, HTML(HyperText Markup Language) is declarative: that is we do not need to tell HTML what to display on a page. There's no step-by-step output of doing this, do that, then do this, display the head at the title. No, it's declarative.
Hey, I want my document to look like this. And the computer figures out how to display this information based on some structure that we agree upon. In this case, It's HTML. So, HTML is very declarative.

function updateDOM(page) {
    // Get Favorites from local storage
    if (localStorage.getItem('nasaFavorite')) {
        favorite = JSON.parse(localStorage.getItem('nasaFavorite'));
    }
    // reset the DOM
    imagesContainer.textContent = "";
    const currentArray = page === "results" ? resultsArray : Object.values(favorite);
    // Loop through the resultsArray
    currentArray.forEach(result => {
        // Create the Card Container
        const card = document.createElement('div');
        card.classList.add('card');
        // Create the Link to the image
        const link = document.createElement('a');
        link.setAttribute('href', result.hdurl);
        link.setAttribute('target', '_blank');
        link.setAttribute("title", "View Full Image");
        // Create the Image
        const image = document.createElement('img');
        image.setAttribute('src', result.url);
        image.setAttribute('alt', result.title);
        image.setAttribute('loading', "lazy");
        image.classList.add('card-img-top');
        // Create the Card Body
        const cardBody = document.createElement('div');
        cardBody.classList.add('card-body');
        // Create the Card Title
        const cardTitle = document.createElement('h5');
        cardTitle.classList.add('card-title');
        cardTitle.textContent = result.title;
        // Create the Save Text
        const saveText = document.createElement('p');
        saveText.classList.add('clickable');
        // Changing the save text based on if the item is in the favorites or not
        if (page === "results") {
            saveText.textContent = "Add To Favorites";
            // Add save text to favorites
            saveText.setAttribute("onclick", `saveFavorite("${result.url}")`);
        } else {
            saveText.textContent = "Remove From Favorites";
            // Remove save text from favorites
            saveText.setAttribute("onclick", `removeFavorite("${result.url}")`);
        }
        // Create the Card Text
        const cardText = document.createElement('p');
        cardText.textContent = result.explanation;
        // Create the Footer
        const footer = document.createElement('small');
        footer.classList.add('text-muted');
        // Create the Date
        const date = document.createElement('strong');
        date.textContent = result.date;
        // conditionally add copyright
        const copyrightResult = result.copyright === undefined ? "" : result.copyright;
        // Create CopyRight
        const copyright = document.createElement('span');
        copyright.textContent = `${copyrightResult}`;
        // Append 
        footer.append(date, copyright); // Footer
        cardBody.append(cardTitle, saveText, cardText, footer); //CardBody
        link.appendChild(image); // Link
        card.append(link, cardBody); // Card
        imagesContainer.appendChild(card); // Images Container
    });
    window.scrollTo({
        top: 0,
        behavior: 'instant'
    });
    if (page === "results") {
        resultsNav.classList.remove('hidden');
        favoritesNav.classList.add('hidden');
    } else {
        resultsNav.classList.add('hidden');
        favoritesNav.classList.remove('hidden');
    }
    // Hide Loader
    loader.classList.add('hidden');
}

The above updateDOM() function is very Imperative.
Now, this is where libraries and frameworks like React, Vue, and Angular come into place. Because Imperative code becomes hard, to what we call reason about, or understand and keep track of in our mind, more bugs/errors are introduced. Then, Libraries and Frameworks like React, help us write more declarative programs. So, we do not have to worry about this If, Else statements, Else do this, then do that, then if this happens, do this. It is declarative.

For example: with React, the Idea of updateDOM() function above, we do not need to do it.
In React, we simply say: hey, I want this to display on a page, just like HTML, React is going to decide when that update to the DOM(Document Object Model) needs to happen.
When should we render or when should we update the content of the DOM? This is all done in React.
Yes, there is still programming! Yes, there's still Javascript! and we still have to give it instructions. But instead of step-by-step logic, React gives us a higher level of abstraction(selecting data from a larger pool to show only relevant details of the object to the user.). It takes away some of this programming complexity and effort, and it does it really well. Though, it still does imperative programming underneath the hood.

But for us as programmers, we are able to write declarative code like HTML. And even though we do not know underneath the hood exactly how HTML renders things on a page, we are able to declaratively say what we want to happen and the rest is taken care of by a computer.

So, frameworks like React, Vue, and Angular are able to do this declarative style of programming although not all the time.
Obviously, there are still ways to do both in each tool and library, and it depends on how you write.

This idea of a declarative style of programming where you tell it what you want the output to be and the computer does it for us is a nice way for us to avoid bugs/errors in the future.
Most people do not understand why we need tools like Frameworks and Libraries. And this is exactly the reason that why we want them.
Things like updating DOM should be something that a library does really well for us instead of having to write it one by one.

Lastly, As more and more complexities enter our code, there's more room for bugs/errors. That's when we want to start using Libraries and Frameworks that allows us to write more declarative code.