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.

2. CLIENT-SIDE SEARCH APPS
@DanielBeach
OpenSource Connections

3. World’s Data
Doubling Annually

4. Data Discovery
Increasingly Important

5. Client-Side
Search Applications

6. Database
Traditional Architecture
Server
Browser

7. Database
Server
Client-Side Architecture
JS App
and
Assets
Browser

8. Client-Side Benefits
•
•
•
•
Less Architecture Overhead
Smaller, Focused Teams
Faster to Develop
Application Speed

9. Speed Matters.

10. Case Study:
Global Patent Search Network
http://gpsn.uspto.gov/

11. The Challenge
•
•
•
•
4+ Million Patents
Terabytes of Data
Multiple Languages
All within a ~3 Month Timeframe

12. Our Solution:

13. GPSN: Homepage

14. GPSN: Search Results

15. GPSN: Expanded Result

16. GPSN: Search Controls

17. GPSN: Patent Detail Page

18. See it live:
http://gpsn.uspto.gov

19. Spyglass
Simple search results with Solr + Ember JS
http://github.com/o19s/spyglass

20. Spyglass Components
Search Input
Result Set
Searcher
Facet Group
Infinite Scroll
Facet
Facet State

21. 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"
}
});

22. 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}}

23. Spyglass Results

24. 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"
}
});

25. Adding a Facet Group: Step 1
}
app.js
App.facetGroup1 = SG.FacetGroup.extend({
searcher: App.searcher,
fieldName: 'abstract_en',
displayName: 'Abstract'
});

26. Adding a Facet Group: Step 2
}
index.html
<div class="sf-module">
{{view App.facetGroup1}}
</div>

27. Spyglass Facets

28. 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}}

29. https://github.com/o19s/Spyglass

30. Avoiding the Pitfalls.
(“OMG, Security!”)

31. Security.

32. Google Juice.

33. Solr Requests.

34. Minify All The
Things.

35. Pick the Best Option for
Your Project.

36. CLIENT-SIDE SEARCH APPS
@DanielBeach
OpenSource Connections