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
or
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' }) );
InstantSearch
Library of search UI
widgets
Algolia for Ruby
Fast and Relevant
Tim Carry
@pixelastic
www.algolia.com/css
Fast and Relevant
Tim Carry
@pixelastic