Building Client-side Search Applications with Solr

3,949 views
3,625 views

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,949
On SlideShare
0
From Embeds
0
Number of Embeds
490
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×