Fast and Relevant

Who am I?

Tim Carry

Software Engineer

@pixelastic

Fast and Relevant

How search should be.

Algolia: Search as a Service

Frontend implementation

Search into all the

superheroes

[
  {
    "name": "Iron Man",
    "secretIdentity": "Tony Stark",
    "description": "Wounded, captured and forced to […]",
    "powers": ["Energy repulsors", […], "Super strength"],
    "teams": ["Avengers", […], "Stark Industries"],
    "adventureCount": 2903
    […]
  },
  […]
]

Dashboard or API

All actions

are doable either

through

the dashboard

the API

Pushing data with Ruby

require 'json'
require 'algoliasearch'

# Init Algolia index
Algolia.init(
 application_id: 'O3F8QXYK6R', 
 api_key: '476071478e45b023b7ff7d8ba8'
)
index = Algolia::Index.new('superheroes')

# Read files from disk
records = JSON.parse(File.read('./superheroes.json'))

# Push records to index
index.add_objects!(records)

Testing your queries in the explorer

Configuring your index

Fields to search

Order of importance

Ranking attribute

Filters

More...

index.set_settings!(
 searchableAttributes: [
    'name', 
    'secretIdentities',
    'description'
 ],
 customRanking: [
  'desc(ranking.comicCount)'
 ],
 attributesForFaceting: [
  'powers',
  'team',
  'authors'
 ]
)

Now with better relevance

Common components of a search UI

Searchbar

Results

Sort

Filters

Slider

Toggle

InstantSearch example

<body>
  <script src="./instantsearch.js"></script>
  <div id="searchbox"></div>
  <div id="teams"></div>
  <div id="hits"></div>
</body>

let search = instantsearch({
 appId: 'O3F8QXYK6R',
 apiKey: '78e45b023b7ff7d8ba88c59c9db19890',
 indexName: 'superheroes'
});

search.addWidget(
 instantsearch.widgets.searchBox({
   container: '#searchbox'
 })
);
search.addWidget(
 instantsearch.widgets.hits({
   container: '#hits',
   template: "{{name}}
{{description}}"
 })
);
search.addWidget(
 instantsearch.widgets.refinementList({
   container: '#teams',
   attributeName: 'teams'
 })
);

https://community.algolia.com/marvel-search/

InstantSearch