Very few languages exist in a self-contained, monolithic ivory tower. Almost always, especially with any modern language, third-party code is used in programs for added functionality. Using third-party code, such as libraries and frameworks, is also an integral part of working with JavaScript. Let's examine a few of the more popular open source tools in our toolkit.
The following topics will be covered in this chapter:
Be prepared to work with the code provided in the Chapter-8 directory of the repository: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-8. As we'll be working with command-line tools, also have your Terminal or command-line shell available. We'll need a modern browser and a local code editor.
One of the principal reasons for creating or using a JavaScript library is to ease repetitive or complex tasks. After all, you can't fundamentally change a language with a plugin or library—all you can do is augment or alter the existing functionality.
As we discussed in Chapter 1, The Entrance of JavaScript into Mainstream Programming, JavaScript's early history was a bit of a Wild West scenario. The browser wars were in full effect, features were not standardized, and even making an Ajax call required two different sets of code: one for Internet Explorer and one for the other browsers.
Enter jQuery in 2006, created by John Resign.
The lack of standardization across browsers was the impetus for creating jQuery. From DOM manipulation to Ajax calls, the syntax and structure of jQuery are a "write once, use in all browsers" paradigm. With the development of ES6 and beyond, JavaScript is getting more standardized. However, there's over a decade of...
Angular was created by Google as AngularJS. In 2016, it was rewritten as version 2, separating it from AngularJS. It's open source and a framework, versus a library, which now raises the question: what's the difference between a framework and a library?
A library is a toolkit to more easily write your code, for varying purposes. To use an architectural analogy, a library is like a set of bricks that can be used to assemble a house. Conversely, a framework is more aligned with the blueprints used to design the house. It may use some of the same bricks—or it might not! One of the main differences is that libraries, in general, allow you to write your code as you would like to write it without the library dictating opinions on how to structure your code. Frameworks, on the other hand, are more opinionated and ask you to structure your code in the best practices of that framework. It's a nebulous (and sometimes overloaded) term, so there's an understandable...
Originally created by Jordan Walke at Facebook in 2013, React has quickly evolved into one of the leading user interface libraries currently in use. In contrast with Angular, React does not seek to be a complete framework, but rather focuses on specific parts of the web workflow. Since web pages are inherently stateless (that is, no real information is transferred from page to page), SPAs aim to store certain pieces of state in JavaScript memory, enabling subsequent views to be populated with data. React is a prime example of how this type of architecture works while still not encompassing the entire framework paradigm. In MVC terminology, React deals with the view layer.
Since React itself only deals with views, it relies on other libraries to round out its feature set, such as React Router and Hooks. That is, the base architecture of React is designed to be modular and have add-ons used to do other parts of the workflow. At the moment, it&apos...
Another newcomer to the JavaScript framework ecosystem is Vue.js (more commonly referred to simply as Vue). Developed in 2014 by Evan You, it's another open source framework that's designed to provide advanced functionality for SPAs and user interfaces. Evan You felt that there were worthwhile parts of Angular worth keeping, yet room for improvement. It's an admirable goal! Some may say the project succeeded in doing just that, while others find other projects superior. However, the goal of this chapter isn't to pass judgment on any technology but rather to expose you to various extensions of JavaScript that will make your work easier and more adherent to modern standards.
Vue, unlike React, includes routing, state, and build tooling out of the box. It also has a learning curve, as do many similar technologies, so be sure to give yourself space and time to learn if you choose to explore Vue.
We'll be investigating the base example of Vue from the official...
Frontend frameworks are powerful tools, but they're not interchangeable. Each has its pros and cons and your use of them should not only be dictated by what's en vogue at the moment but also by the community support available, performance considerations, and longevity of the project. At the end of the day, choosing a framework is a nuanced process that requires careful thought and planning. At this point in time, React has quite the uptick in adoption, but as time goes by, all frameworks fall in and out of favor. What we've covered here only scratches the surface of each of these frameworks, so be sure to do your research before committing to one.
In the next chapter, we'll explore debugging JavaScript, because let's face it: we're going to make mistakes and we'll need to know how to fix them.
© 2020 Packt Publishing Limited All Rights Reserved
