301 Using external JavaScript libraries [1.5d]

Posted About 7 years ago. Visible to the public.

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.

Choosing and installing a JavaScript library

Take a look at the popular lodash Show archive.org snapshot library.

  • Try to understand what it does.
  • Why does it mention "x kB gzipped"? How is that important?
  • Try to add lodash to MovieDB
    • Use yarn add lodash, then import it in your compiler e.g. like this: import debounce from 'lodash/debounce'
    • Can you find a way to make use of it?
  • Often, JavaScript libraries come in "minified" versions. What does that mean? Is it important?

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.

Exercises

Adding a datepicker

In your MovieDB, add a "release date" field. Use Flatpickr to add a UI. Remember to use unobtrusive JavaScript.

Check it out on Bundlephobia Show archive.org snapshot .

Embracing ES6 Modules

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.

Henning Koch
Last edit
About 2 months ago
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra Curriculum (2017-02-03 16:05)