CLIENT-SIDE SEARCH APPS@DanielBeachOpenSource Connections
World’s Data Doubling Annually
Data Discovery Increasingly Important
Client-SideSearch Applications
Traditional ArchitectureServer
Browser
Database
Client-Side ArchitectureJS App andAssets
Browser
Database Server
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
SpyglassSimple search results with Solr + Ember JS
http://github.com/o19s/spyglass
Spyglass Components
Infinite Scroll
Searcher
Facet Group
Result Set
Facet Facet State
Search Input
Setting up the Searcher
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" }});
}app.js
Adding Custom Fields to the Search Template
{{#each results}} <li class="sr-item"> <h4><a href="{{link unbound}}">{{ title }}</a></h4> <div> {{{ description }}} </div> </li>{{/each}} }
index.htm
l
Spyglass Results
Setting up the Searcher
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" }});
}app.js
Adding a Facet Group: Step 1
App.facetGroup1 = SG.FacetGroup.extend({ searcher: App.searcher, fieldName: 'abstract_en', displayName: 'Abstract'}); }ap
p.js
Adding a Facet Group: Step 2
<div class="sf-module"> {{view App.facetGroup1}}</div> }
index.htm
l
Spyglass Facets
Spyglass Blank States
{{#if searcher.isSearching}} <p>Loading Results …</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}} }
index.htm
l
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@DanielBeachOpenSource Connections
Top Related