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

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

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 &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}} }

index.htm

l

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@DanielBeachOpenSource Connections