Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like:
We generally use the yarn add
command to add third party libraries to our application. It will persist the desired library version within the package.json
file and pin matching dependency versions at the auto-generated yarn.lock
file. You shouldn't ever have to manually edit the latter. Have a look at how to manage versions with a package.json.
Yarn gives us access to the NPM ecosystem. Take a few minutes to browse npmjs.com Show archive.org snapshot , the central registry. It is a great place to look up JS libraries with their dependencies and version history.
Take a look at the popular lodash Show archive.org snapshot library.
yarn add lodash
, then import it in your compiler e.g. like this: import debounce from 'lodash/debounce'
One more thing about Yarn / npm
There is one significant difference between JavaScript package managers and Bundler: In Ruby, only one specific version of a gem can be active at any one time. With Yarn or npm, if multiple packages depend on different versions of other secondary packages, they can receive different versions of those secondary packages at the same time.
You can read a little bit about it here Show archive.org snapshot . Note that:
- This is possible in ES6, but not in Ruby:
- Bundler enforces a single compatible version of each gem in the Gemfile.lock, which can later then be loaded to the current Ruby process. Every other dependency has access to the same loaded code
- Yarn on the other hand allows mismatching version constraints of the same dependency, and guarantees that each package receives a matching version of the same dependency.
- It can be useful as it allows you to include two libraries that would otherwise not be compatible, e.g. when one relies on jQuery 2 and the other on jQuery 3.
- Loading the same library twice can also be problematic: The bundle size increases and the two copies do not share any state.
In your MovieDB, change your "release year" field to "release date", now allowing precise dates. Use Flatpickr to add a UI. Remember to use unobtrusive JavaScript.
Check it out on Bundlephobia Show archive.org snapshot .
Change all your global JavaScript functions and classes so they export
ES6 modules. Any code that uses these functions and classes should import
the newly created modules. Your code should no longer define anything on window
.