CLIENT-SIDE SEARCH APPS
@DanielBeach
OpenSource Connections
World’s Data
Doubling Annually
Data Discovery
Increasingly Important
Client-Side
Search Applications
Database

Traditional Architecture
Server

Browser
Database

Server

Client-Side Architecture
JS App
and
Assets

Browser
Client-Side Benefits
•
•
•
•

Less Architecture Overhead
Smaller, Focused Teams
Faster to Develop
Application Speed
Speed Matters.
Case Study:
Global Patent Search Network
http://gpsn.uspto.gov/
The Challenge
•
•
•
•

4+ Million Patents
Terabytes of Data
Multiple Languages
All within a ~3 Month Timeframe
Our Solution:
GPSN: Homepage
GPSN: Search Results
GPSN: Expanded Result
GPSN: Search Controls
GPSN: Patent Detail Page
See it live:
http://gpsn.uspto.gov
Spyglass
Simple search results with Solr + Ember JS
http://github.com/o19s/spyglass
Spyglass Components

Search Input

Result Set

Searcher
Facet Group

Infinite Scroll

Facet

Facet State
Setting up the Searcher

app.js

}

App.searcher = SG.SolrSearcher.create({
url: "http://your-solr-url.com/solr/collection...
Adding Custom Fields to the Search Template

index.html

}

{{#each results}}
<li class="sr-item">
<h4><a href="{{link unb...
Spyglass Results
Setting up the Searcher

app.js

}

App.searcher = SG.SolrSearcher.create({
url: "http://your-solr-url.com/solr/collection...
Adding a Facet Group: Step 1

}

app.js

App.facetGroup1 = SG.FacetGroup.extend({
searcher: App.searcher,
fieldName: 'abst...
Adding a Facet Group: Step 2

}

index.html

<div class="sf-module">
{{view App.facetGroup1}}
</div>
Spyglass Facets
Spyglass Blank States

index.html

}

{{#if searcher.isSearching}}
<p>Loading Results &hellip;</p>
{{/if}}
{{#if searcher....
https://github.com/o19s/Spyglass
Avoiding the Pitfalls.
(“OMG, Security!”)
Security.
Google Juice.
Solr Requests.
Minify All The
Things.
Pick the Best Option for

Your Project.
CLIENT-SIDE SEARCH APPS
@DanielBeach
OpenSource Connections
Building Client-side Search Applications with Solr
Upcoming SlideShare
Loading in...5
×

Building Client-side Search Applications with Solr

3,039

Published on

Presented by Daniel Beach, Search Application Developer, OpenSource Connections

Solr is a powerful search engine, but creating a custom user interface can be daunting. In this fast paced session I will present an overview of how to implement a client-side search application using Solr. Using open-source frameworks like SpyGlass (to be released in September) can be a powerful way to jumpstart your development by giving you out-of-the box results views with support for faceting, autocomplete, and detail views. During this talk I will also demonstrate how we have built and deployed lightweight applications that are able to be performant under large user loads, with minimal server resources.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,039
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Building Client-side Search Applications with Solr"

  1. 1. CLIENT-SIDE SEARCH APPS @DanielBeach OpenSource Connections
  2. 2. World’s Data Doubling Annually
  3. 3. Data Discovery Increasingly Important
  4. 4. Client-Side Search Applications
  5. 5. Database Traditional Architecture Server Browser
  6. 6. Database Server Client-Side Architecture JS App and Assets Browser
  7. 7. Client-Side Benefits • • • • Less Architecture Overhead Smaller, Focused Teams Faster to Develop Application Speed
  8. 8. Speed Matters.
  9. 9. Case Study: Global Patent Search Network http://gpsn.uspto.gov/
  10. 10. The Challenge • • • • 4+ Million Patents Terabytes of Data Multiple Languages All within a ~3 Month Timeframe
  11. 11. Our Solution:
  12. 12. GPSN: Homepage
  13. 13. GPSN: Search Results
  14. 14. GPSN: Expanded Result
  15. 15. GPSN: Search Controls
  16. 16. GPSN: Patent Detail Page
  17. 17. See it live: http://gpsn.uspto.gov
  18. 18. Spyglass Simple search results with Solr + Ember JS http://github.com/o19s/spyglass
  19. 19. Spyglass Components Search Input Result Set Searcher Facet Group Infinite Scroll Facet Facet State
  20. 20. Setting up the Searcher app.js } App.searcher = SG.SolrSearcher.create({ url: "http://your-solr-url.com/solr/collection/select", params: { "fl": "title_field, description_field, link_field", "q": {}, "fq": [], "start": 0, "rows": 10, "wt": "json" } });
  21. 21. Adding Custom Fields to the Search Template index.html } {{#each results}} <li class="sr-item"> <h4><a href="{{link unbound}}">{{ title }}</a></h4> <div> {{{ description }}} </div> </li> {{/each}}
  22. 22. Spyglass Results
  23. 23. Setting up the Searcher app.js } App.searcher = SG.SolrSearcher.create({ url: "http://your-solr-url.com/solr/collection/select", params: { "fl": "title_field, description_field, link_field", "facet": true, "facet.field": ["facet_field1", "facet_field2"], "facet.limit": 5, "q": {}, "fq": [], "start": 0, "rows": 10, "wt": "json" } });
  24. 24. Adding a Facet Group: Step 1 } app.js App.facetGroup1 = SG.FacetGroup.extend({ searcher: App.searcher, fieldName: 'abstract_en', displayName: 'Abstract' });
  25. 25. Adding a Facet Group: Step 2 } index.html <div class="sf-module"> {{view App.facetGroup1}} </div>
  26. 26. Spyglass Facets
  27. 27. Spyglass Blank States index.html } {{#if searcher.isSearching}} <p>Loading Results &hellip;</p> {{/if}} {{#if searcher.noResults}} <p>No results were found. Try broadening your terms.</p> {{/if}} {{#if searcher.allResultsLoaded}} <p>All Results Loaded</p> {{/if}}
  28. 28. https://github.com/o19s/Spyglass
  29. 29. Avoiding the Pitfalls. (“OMG, Security!”)
  30. 30. Security.
  31. 31. Google Juice.
  32. 32. Solr Requests.
  33. 33. Minify All The Things.
  34. 34. Pick the Best Option for Your Project.
  35. 35. CLIENT-SIDE SEARCH APPS @DanielBeach OpenSource Connections
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×