What is a JavaScript Framework?
Learn everything you need to know about JavaScript frameworks here!
JavaScript (JS) gives engineers access and control over nearly everything you see on a web page. JS can access the content, HTML, and CSS of a web page and the mechanisms behind the screen that communicate with the internet. JS enables engineers to create dynamic web pages.
JS libraries provide a collection of already JS-coded functions that perform most of the work for the engineers. They reference the functionality in a library as they build their applications.
A JS framework creates a structure that organizes a collection of JS libraries, giving developers a powerful and efficient coding environment to build dynamic web pages quickly and with rich user experiences.
JavaScript - Making the web dynamic
At its most basic, a web page is a collection of onscreen elements with shapes, formats, and a purpose. Text is an element with color, size, margins, and fonts. Buttons, menus, images, checkboxes, and so on come in all sizes and shapes and perform various actions.
A web page built by HTML and CSS without JavaScript is static. With a static web page, the text, buttons, and other elements appear and stay where they are until a new page replaces them.
Today, very few web pages are static. Instead, they are dynamic—their elements move, change, and refresh on the spot. That’s thanks to JavaScript. JS makes a web page come alive, instantaneously, directly on the client’s machine.
Vanilla JS—i.e., JS without libraries or a framework—gives engineers access to the buttons, checkboxes, text, images, layout, menus, and other onscreen elements. This control enables developers to perform actions based on what their users do, such as pressing buttons, scrolling, or typing in information. JS allows developers to add logic and database functionality.
Spotlight: page refreshes
A critical feature of JS is the page refresh. Engineers can use JS to change a web page’s content in real-time (think stock market prices or football scores). JS allows engineers to update the entire screen or only a part. In the early days, the whole screen had to change with every update, even if it was just a single number in the left-hand corner. Now, engineers can specify any part of the screen to refresh, and the rest stays the same. This is called a partial refresh.
As we’ll see, libraries and frameworks make all this easy.
JavaScript Libraries - Making JavaScript robust
So, what are JavaScript Libraries? And how do they make vanilla JS even better? Without JS libraries, engineers must code everything to provide simple and complex functionality. Libraries are pre-coded functionality; engineers simply incorporate a library into their code and tell it to perform a task.
One line of code by an engineer may execute 100s or 1000s of lines of code inside a library. For example, when engineers connect to a database and update a screen’s data, they may only have to add a few lines of code that tell the library the name of the database, the data it needs, and where to place the content on the screen.
Libraries like jQuery and the more framework-like React changed everything. They allowed developers to manage an application’s functionality without needing to code the complexities of accessing databases or refreshing screens. Libraries also managed real-time partial refreshes, complex menu behavior, and cross-browser support.
Spotlight: Cross-browser support
This latter—cross-browser support—is particularly demanding and fault-driven for developers. All browsers do the same thing—they execute the client-side software that interprets the HTML, CSS, and JS. Unfortunately, every browser requires slight variations of JS and CSS to perform these tasks. Libraries like jQuery and React hide the browsers’ differences, allowing, for example, one line of jQuery code to do the same thing regardless of which browser the client is using.
JavaScript Frameworks - Structuring JavaScript
So, what is a JavaScript framework?
A JavaScript framework provides engineers with a particular structure for coding. It is an opinionated way to use JS and its collection of libraries.
The framework constrains (in the positive sense of the term) engineers on how to display content on a screen or when to make a database call. Engineers can use any database they want and write any CSS with a framework (or include a CSS framework), but they can’t code these choices in any way they want. The creators of a framework provide a clear and binding opinion about how to do things with JS.
An analogy might help. JavaScript provides the bare bones of web development, much like the equipment in a kitchen. A chef cuts, measures, cooks, and cleans. That’s JS without a library. A library adds the workers who assist the cooks, helping them to cut, cook, and clean. The framework is a system. For example, some cooks prepare and cut all the ingredients before cooking; others cook as they cut the ingredients. A framework has an opinion about this, and once established, the kitchen and the code must follow the system.
Spotlight: Headless CMS
One JS framework may require an engineer to place all display code in a single application area, sometimes called the view. Another framework may allow modularization, where developers can swap components in and out of their applications. Headless applications, like headless API-first CMSs, incorporate component-based frameworks so that engineers can leverage the features and structuring benefits of React and Next.js. Combining a framework with a CMS enables fast delivery cycles and robust website development.
Popular Frameworks
Some frameworks—React, Vue.js, Svelte, and Angular—control the front end. React, for example, enables responsiveness, where web pages automatically change shape according to the dimensions of a device. React and other frameworks enable single-page websites that change refresh and change as the user scrolls. Angular and Svelte makes it easy for front-end developers to access the database.
Other frameworks, like Node.js and Express.js, provide full back-end processing. They replace PHP, C, and other standard programming languages. They act like servers, providing back-end developers with an environment to perform all application logic.
Finally, frameworks like Next.js and Meteor.js manage both the front and back end. Whether you use React or Next.js depends on your needs and your existing code base.
In all cases, JavaScript provides functionality for a website. Libraries package the functionality, and JavaScript frameworks provide engineers with a structure that enables them to build robust web applications using the most advanced web technologies.