Skip to content

Instantly share code, notes, and snippets.

@vvo

vvo/Yarn search meeting summary and actions.md Secret

Created May 28, 2017 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vvo/c801fb8b653eda9fb17de60987476b5e to your computer and use it in GitHub Desktop.
Save vvo/c801fb8b653eda9fb17de60987476b5e to your computer and use it in GitHub Desktop.
Download ZIP
Yarn search meeting summary and actions
Raw
Yarn search meeting summary and actions.md

Yarn search meeting summary and actions

This document is a meeting summary about search features in the Yarn ecosystem.

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.

Table of contents

Make package search reachable on every page

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

Faceting on search results

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

No results screen

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 :troll:).

📺 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.

Package detail page

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.

Documentation search on every 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.

Using React

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.

Explore page

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

Mobile

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.

Flames count

We need to find a way to explain the little flames counts icons in the result pages and package page somewhere on the website.

SEO

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.

Move algolia/npm-search to yarn/search-replicator

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.

yarn search should be ysearch for now

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

Blog post

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.

Dashboard

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.

Repositories

Only here for full transparency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment