This document is a meeting summary about search features in the Yarn ecosystem.
- When: February 1, 2017
- Where: Facebook London offices, 10 Brock St, Kings Cross, London NW1 3FG, UK
- Who:
- Algolia: Sylvain Utard, Kevin Granger and Vincent Voyer
- Facebook: Christoph Pojer and Konstantin Raev
- What: Algolia proposed http://yarnpkg.com/search end of 2016, it got merged and both parties wanted to share ideas and plans as to how to bring better search to the JavaScript and yarn community.
We wrote a bit about how the search is working here: https://discourse.algolia.com/t/2016-algolia-community-gift-yarn-package-search/319.
📺 Visual proposal are "private" (no login required) links to InVision, a tool to display and comment on UI proposals.
- Make package search reachable on every page
- Faceting on search results
- No results screen
- Package detail page
- Documentation search on every page
- Using React
- Explore page
- Mobile
- Flames count
- SEO
- Move algolia/npm-search to yarn/search-replicator
yarn searchshould beysearchfor now- Blog post
- Dashboard
- Repositories
We want to allow people to search for packages no matter the page they are in, instead of having to click on "Packages" in the header.
📺 Visual proposal: https://invis.io/AXAC7142R
We want to allow people to refine on:
- popular (static list) libraries: babel, webpack, react..
- other tags from the package results
This should provide better discovery and ultimately we would like to incentive contributors on adding keywords to their modules.
📺 Visual proposal: https://invis.io/96AC74V5R
We want to provide a custom "no results" screen with an illustration from Shitty Watercolour.
This screen could link to an explore packages page as a way to reduce frustration on the user side when not finding what he wants (if that ever happens 🧌).
📺 Visual proposal: https://invis.io/AUAC73KE2
James Kyle is the right person to reach as for the feasibility of such illustration. He is in contact with Shitty Watercolour.
As proposed on GitHub previously we too think that a package detail page would enhance the search experience instead of only linking to the npm website.
We also think that the current npm detail page for packages are not that easy to grasp as for "Should I use this package?". We constantly found ourselves juggling with three different opened tabs to answer this question.
📺 Visual proposal: https://invis.io/W9AC7GNV8
Some of the data inside this proposal is not trivial to get (like size), for now we should avoid spending too much time on very hard to get data that is not critical for a first iteration of a good package result page.
There's already a documentation search available on https://yarnpkg.com/docs, we want to make it accessible on every page like other community projects (http://facebook.github.io/jest/).
📺 Visual proposal: https://invis.io/HDAC7IBBT
This is a trickier subject than it seems, given the spoken language the website is in the header may have very limited space available. So an iteration on the header is also necessary.
Adding the package page will require a fair amount of frontend code and templating. We propose to add babel and React to the yarn website stack and reorganize some already present code in a module way.
There's an already opened issue: yarnpkg/website#330
Once we have this setup we can also move the search to React InstantSearch.
The current search homepage is a static list of modules.
We want to provide a better /packages page where each week we showcase packages that are "trending".
First we must define trending and then design a good explore page.
📺 Visual proposal: https://invis.io/39AC7PG2Z
Ensure all search related features are working well on mobile too.
We might need to do a design pass with Kevin Granger on the subject.
We need to find a way to explain the little flames counts icons in the result pages and package page somewhere on the website.
Creating those package result page we should take great care of the markup and how google see it. It would be nice ultimately to have them in Google if it adds value.
Make this happen and you win $drink_of_your_choice times 10.
algolia/npm-search is the project responsible for synchronizing the npm registry to Algolia.
It would be more transparent for the community to put this project under the yarn organization.
We are not yet sure it makes sense to add a yarn search
command line directly inside the yarn client. It would
be better to first iterate with a standalone command
line client and see if people are actually using it.
If that command line client is good then we might
want to advertise for its installation when people
try to yarn search ....
Here's a proposal UI for a ysearch command line: https://gist.github.com/vvo/4d0ce1cf5103119bc1629e79361a0b29
There's an already opened PR as for a POC yarn search, we might want
to close/update it when working on this: yarnpkg/yarn#2323
Since we are gonna do a lot of changes to the search, we should also take this opportunity to speak about the search changes and new features. Either on Algolia or Yarn blog.
We should give access to the yarn team to the Algolia index dashboard so that they can see metrics about searches and have full power on it.
At the same time internally for Algolia we have a dashboard to measure our progress on making good search available in many places. And a good measure of the impact of our enhancements to yarn would be to show the number of searches being done month over month.
Sync with @bobylito on this.
Only here for full transparency.