From the course: Learning App Building with Vanilla JavaScript

Libraries, frameworks, and vanilla JavaScript - JavaScript Tutorial

From the course: Learning App Building with Vanilla JavaScript

Start my 1-month free trial

Libraries, frameworks, and vanilla JavaScript

“

- When you're building a web application, it's common to use libraries and frameworks. Both consist of pre-written code you can include in your app that makes it easier to perform common tasks. You can write vanilla JavaScript code in an app that uses libraries and/or frameworks. Any combination of these can coexist in the same code base. There are some fundamental differences between libraries and frameworks, and it's important to identify the difference before you can decide how you might go about simplifying your code base. You integrate a library into an existing app simply by importing it into your code base and using any of its convenience methods as you wish. When using a library, your app comes first. You organize your code however you want and you simply integrate calls to the library's convenience methods to make your coding easier or more concise. By contrast, building an app using a framework requires you to use a structure prescribed by the framework. So instead of building an app and adding the framework to your code, as you do with a library, you instead build an app using the framework structure and then add your own code onto that. A common shorthand for thinking about the difference between the two is that your code calls a library, while a framework calls your code. In contrast to both libraries and frameworks, vanilla JavaScript is code that is part of the JavaScript language and that is recognized by any JavaScript parser, including a browser or a runtime environment, such as Node. Note that we sometimes refer to vanilla JavaScript as vanilla JS, but it's not a special library or framework. This term merely refers to the core JavaScript language supported by browsers. Writing an app purely in vanilla JavaScript requires only your code. Using either a library or a framework means you need to include one or more JavaScript files containing the code for the library or framework, in addition to your own code. The more additional files your app contains, the longer the app can take to download and render for an end-user and the more memory it can require on the user's device. For this reason, developers regularly work to optimize apps by simplifying them and removing unnecessary code. If your app uses a library, especially if your app was written a number of years ago, you may find that you can rewrite all the code that uses the library in vanilla JavaScript instead and remove the library entirely from your app. This makes the app leaner and is likely to make everyone involved happy, including end-users. If you're using a framework, rewriting your app without the framework can be a major undertaking. It can have a major payoff if it doesn't require a huge bloat in your app's core code. However, such a rewrite is not something to be undertaken lightly. We're going to rewrite an app that uses the jQuery library and the React framework to instead use only vanilla JavaScript. Now just removing the linked files that contain the code for the library and framework themselves isn't enough. It would be like removing the tablecloth on a table, set with eclectic well-worn plates and mugs, only to find that the clean modern table underneath doesn't really go with the dishes. To make everything work together, I need to swap out each piece with something that does the same job, but works with the new base. In the metaphor, my clean white table, and in my app, the browser, which will be the only parser for whatever code I deploy.

Contents