Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like:
- General support libraries like Lodash Show archive.org snapshot
- Frontend Frameworks like Unpoly Show archive.org snapshot
- Wysiwyg (What You See Is What You Get) HTML editors
- Datepickers
- Sliders
- Tooltips
- Dialogs
- ...
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.
How to chose a new technology
Read the card "Choosing the right gems for your project" and the article " Choose Boring Technology Show archive.org snapshot ".
When you add a new library - be it JavaScript, Ruby or anything else - you should first get a general overview of the most popular solutions. To chose a single "best" of those, ask yourself questions such as:
- Is the library still maintained? When was the last commit? Are new issues being answered? Note that some projects are rightfully "feature complete", so not having any recent commit can be okay at times.
- Is it rather popular? If yes, there is an increased likelihood that common edge cases were already adressed and that someone would keep maintaining the library if the original author stops doing so.
- Does it contain tests? The code quality of our libraries should generally be around the same level of our own standards.
- Does it have a ton of dependencies? Fewer is better, in this case.
Sites like the Ruby Toolbox Show archive.org snapshot (only for gems) or npm compare Show archive.org snapshot may help you filtering out libraries as they try to combine similar statistics in a single score.
Exercise: Evaluate searchable selects
Research solutions for a “searchable select” JS-component for your MovieDB. Filter results based on the abovely mentioned guideline, and grade them for their
- GitHub star/issue ratio
- Compatibility with your frontend build pipeline
- Size
- Browser Compatibility
- Features
- Developer Experience
- Customizing optics
Timebox Show archive.org snapshot : 60 minutes. Don't add the searchable select component to your MovieDB.
Exercise: A closer look at lodash
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?
- Look at The cost of JavaScript ( 2019 Show archive.org snapshot , 2023 Show archive.org snapshot ) to figure this out.
- Understand the service Bundlephobia Show archive.org snapshot
- 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?
- Use
- 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.
Exercise: Adding a datepicker
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 .
Exercise: 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.
