If you're anything like myself, you may have gotten confused at the concept of what a framework is compared to a library at some point. Seeing as though they are used in similar contexts, it's quite easy to confuse the two. Frameworks and libraries are both tools that are commonly used to create applications. So, let's explore what they are and why it's important to separate the two. First, let's discuss frameworks.

Frameworks
Frameworks, can almost be thought of as a blueprint. Meaning, that they are designed to build apps with a very specific structure, along with a specific set of directions. It's like having the blueprint to a house and being given a list of directions on how to build it step by step along with a specific set of tools. Therefore, each framework has it's own unique set of rules that is meant to distinguish itself from other frameworks out there.

An example of a framework would be Angular.js. Angular.js
has a specific structure that you must stay within as you are building. It has it's own way of passing "props" in a sense from one component to another by using the $ctrl tool that is required to reference any other variables from an outside component. Angular.js also requires the use of directives which is their own way of performing general actions. For example, to make a component dynamic, Angular requires the use of the ng-repeat directive to essentially perform a loop within the framework guidelines.

Frameworks also dictate the flow of our applications as well. What that means is that they typically organize how our application, and it's components should talk to one another. If you try to cheat the system, you're pretty much cheating yourself. So when dealing with a framework, it is imperative to have that frameworks documentation somewhere close by to avoid long hours of just trying things out.

Libraries
Libraries on the other hand, offer the developer a bit more freedom when it comes to the process of application building. For one, they aren't as strict as frameworks. Remember, Frameworks tell you how to build the house and what tools to use when building it. No exceptions. Libraries however, allow you to build the house with whatever tools you like. Libraries just so happen to have a ton of tools for you to choose from. They are reusable components that offer specific functionality. Thus, giving you the option to choose when and when not to use a specific tool.

For example, let's examine JQuery. JQuery as a whole, is considered a library. It provides tools that allows us to manipulate DOM/HTML elements to our liking. All while remaining inside a JavaScript file. So, instead of having to update our HTML manually each time we want to add/remove/manipulate a DOM element, JQuery provides a toolset that allows us to reference a specific element and more.

Typically, the syntax for selecting a DOM element must always begin with the $('DOMelementName'). Once you select the DOM element you'd like to alter, we would then chain a method that JQuery offers as well to actually perform the manipulation. For example, let's say we wanted to add a button to the page using Jquery.

When you've injected Jquery to your code, in order to use it on a Javascript file you must prepare the document using a built in Jquery method called ready. Once it's ready, we can now create the actions that we want our callback function to return. Let's try adding a button to the page for fun.

Here, we are using JQuery to prepare the document so that it knows we're gonna be manipulating DOM elements while in a JavaScript file. If we wanted to create a button, we must first reference the body of the document using the correct selection syntax. Notice that we are still using JavaScript to save variable name's like normal. From there, we can repeat this similar logic to create a new DOM element. Which is exactly what we did to create a new button. Finally, we used the built in append method that JQuery provides to actually add the button to the document. That way, we can see our button appear on the screen. Like so:

There are many other libraries out there to choose from. Another commonly used Library in today's world is React. React is known for it's ability to use tools such as props to pass properties from one component to another. Props in React however, can be named whatever. Unlike having to use $ctrl in Angular.js to perform similar functionality. React also offers a tool to help manage your application's state and listen for any changes. It is not considered a Framework because it offers different approaches for you to choose from, and isn't as strict. For example, you can choose to make a functional or class component when building the application.

In closing, Frameworks and Libraries are similar in regards to helping the application building process run smoother. The difference is that Libraries allow the developer to be a bit more flexible in there approach, whereas if you try to deviate outside of the guidelines of a framework, if the docs doesn't support your approach, neither will your application respect it. Unless you stay within the guidelines of how to perform that action while using the framework you chose. I've only given examples of front-end frameworks. But once you get to backend, you'll learn that it also has its own set of frameworks to choose from! Express.js being my favorite so far.