When comparing Component vs Yarn, the Slant community recommends Yarn for most people. In the question“What are the best open source front-end package managers?” Yarn is ranked 3rd while Component is ranked 10th. The most important reason people chose Yarn is:
One of the most important aspects of Yarn is determinism (predictability). The lock file ensures that the same dependencies will always be installed in the same way and order regardless of the machine for a given repository.
Ranked in these QuestionsQuestion Ranking
Pros
Pro Vertically integrated with the build process
Component handles more than just package management; it also deals with the build process and bundling, so you don't have to find and manage a separate solution. This lets you get up and running faster with less to worry about.
Pro Also manages non javascript components
Components can be html snippets or css in addition to Javascript, and are treated as first class objects by being converted into Javascript modules that load styles and markup as strings.
Pro Components are more structured and thus have more inter-compatibility
Components can be javascript, style and markup, they are bundled in a way that makes it possible to load in entire UI chunks. This means less flexibility, but the components that are available are easier to work with.
Pro Designed with ES6 modules and Web Components in mind
Component is designed as a current-day solution for the currently proposed ES6 modules and Web Components, making it more in-line with the direction the web is going in the future.
Pro Encourages simpler and smaller components
Components are encouraged by convention to be small and single-use, meaning that the packages in the community's ecosystem are easier to use and combine together. More complex components use dependency resolution to compose smaller components so that components stay limited in scope.
Pro Easy dependency management
Component provides you with a flat dependency tree. This results in easy dependency management. A flat dependency tree is important for file size optimization, so you don't end up loading multiple copies of the same library, or deeply nested dependencies that bloat up.
Pro The same results will be yielded every time yarn is run in a repository
One of the most important aspects of Yarn is determinism (predictability). The lock file ensures that the same dependencies will always be installed in the same way and order regardless of the machine for a given repository.
Pro Can tell you why a package was installed
yarn why <query>
can tell you why a package was installed and what other packages depend on it.
Pro Good network performance
Yarn efficiently queues up requests and avoids request waterfalls in order to maximize network utilization.
Pro Offline mode
If you've installed a package before, you can install it again without any internet connection.
Pro Flat Mode
Resolve mismatching versions of dependencies to a single version to avoid creating duplicates.
Pro Multiple registries
Install any package from either npm or Bower and keep your package workflow the same.
Pro Network resilience
A single request failing won't cause an install to fail. Requests are retried upon failure.
Pro Good documentation
It looks like it has good documentation.
Pro Security is put at the forefront
Even though it's still in its early stages of development, security is one of the core values on which Yarn is built. It uses checksums to verify the integrity of every package before executing its code. This also helps avoiding errors related to faulty caching or captive portals.
Further steps are also being taken to improve the security of Yarn which will be implemented in the future.
Pro Built by the community for the community
Even though it's backed by Facebook, Yarn is built as a community project first and foremost. It's completely open source and hosted on Github. It's released under a standard open source client and has its own GitHub organization and set up to work under the same governance model that other successful projects have used in the past, such as Rust and Ember.
All of this means that both existing and new contributors will always work together to improve the product and introduce new features while also keeping in mind suggestions coming from the community.
Pro Backed by Facebook and Google
Was created in a collaboration of Facebook with Exponent, Google and Tilde.
Cons
Con No longer maintained
Component is no longer being developed/maintained, so there will be no new features or bug fixes.
Con Cannot add modules that are not on Github
While using Github as a backend database for Component makes things a lot easier, as there's no need to add other authorization credentials to use modules, it means that modules that aren't on Github cannot be added.
Con Takes up disk space
Yarn adds to your disk space usage since it stores dependencies locally.