Browser-Search: the library for in-browser documents search
What is Browser-Search ?
Browser-Search is a plain typescript library which makes it easy to create a documents-search feature on your website, entirely powered by front-end technologies.
It provides you with the capabilities to build a great search page UI. Among the features further described in the readme documentation, Browser-Search enables to quickly and efficiently:
- operate a search feature with dozens of filters
- change or adapt your filters during runtime
- combine filters using any combinations of disjunction (||) / conjunctions (&&)
- sort documents on any field
- paginate your results
The demo here shows you an example of a search page. It features an employee database that’s randomly generated. The UI invites you to add / filter / sort documents and navigate through the filtered out data.
Where does it come from ?
The challenge started when I used to work for an experience-gifts company. The search page was, in my opinion, quite improvable:
- There were few filters for users to find exactly what they were looking for
- The page was fairly slow even though there were some cache layers, and the total numbers of documents relatively small
- The indication numbers of documents matching each filter was not always correct
Since the number of products was fairly small (~ 1k), I knew I could build something faster, more exhaustive and with a better user experience !
The idea came to build a library that makes it easy to build an optimised search page, with any number of filters, while giving you indications of:
- How many documents match a filter you have on
- How many documents will remain if you add a new filter
- How many documents will be added if you add a new filter which is a disjunction (||) of an already set filter
How was it built ?
The library internally makes use of IndexedDB, the in-browser document database to store the data + retrieve which documents match each individual filter.
Furthermore, every computing-intensive operation is executed on a web worker, to keep the UI responsive.
It has very few dependencies, among which we count ramda and purify-ts, since a functional programming style was used, along with yup for schema validation.
For React users
Browser-Search comes with a peer library, react-browser-search, that you are highly encouraged to use if you rely on React.
This will provide you with a set of hooks making it easy to plug in the library to react, alongside a couple remarkable capabilities:
- cache layer built in react-context
- automatic re-query on a store mutation
In fact, the demo aforementioned was built using both browser-search and react-browser-search. That’s why you can notice an automatic sync when adding new documents to the store.
When do you want to use it ?
Browser-Search is especially suitable when:
- You have a small number of documents (up to few thousands)
- Your users rely on good hardware and latest browsers
- The documents on your search page does not change often
- You want a POC up and running quickly
