Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MAKE YOUR GUI SHINE WITH AJAX SOLRTroy D. Thomas Product Engineering ManagerKoorosh Vakhshoori Technical Architect
Make Your GUI Shine With AJAX SolrSetting the StageCompany BackgrounderProject HistoryBusiness & Technical RequirementsIns...
Company - BackgroundSynopsys25 year old company / 1.8B 2012 revenueElectronic Design Automation (EDA)Electrical engineers ...
Company BackgroundSolvNet ® - online knowledge base system used bycustomers and employeesDedicated engineering team20 year...
LuceneMoved to Lucene - 2005Custom tokenization helped results+delay_mode_zeroAutocomplete - 2008Custom Yahoo UI WidgetRel...
RequirementsVoice of the customerMake it fasterEasier to useBetter resultsCan you just use Google?Technical team concernsC...
Project InspirationAdvanced Full-Text Search CapabilitiesOptimized for High Volume Web TrafficStandards Based Open Interfa...
Solr 4SolrFaceting!Modernize GUIDeprecate custom code baseAutocomplete using Yahoo UIDid you mean?TikaExtractingRequestHan...
Front-EndScreenshot / Demo
Front-EndScreenshot / Demo / 2
RequirementsDynamic GUI Interface AJAX Solr / Solr 4FacetingAutocompleteSpell checkerDid you mean?Deeper search (attachmen...
Why AJAX Solr?Limited resources / no budgetNo GUI designers on staffLimited specialization“Enough” JavaScript – but not ex...
AJAX SolrModern StandardsJQUERY / JSON friendlyWidget FrameworkAutocompleteQuery submitSave settingsSort /display resultsP...
AJAX Solr DEEP DIVE
SolrSearch ServerOverall system architectureIndexBrowserClientProxyServerWebApplicationServer
Why AJAX Solr?• Dynamic GUI– Faceting– Autocomplete• Faster GUI– Less data traffic between server and client– Less area to...
What is AJAX Solr?It is JavaScript framework-agnostic, butrequires an AJAX implementation forcommunication with Solr. As s...
Intro AJAX Solr Framework• MVC on top of an Ajax framework– Our implementation uses Jquery• Main components– Manager– Para...
Search Query
Search Black Box ViewBrowserClientindex.jspsolr/select?...&q=clock%20tree%20power&..WebApplicationServerSolrServerSearch h...
Search Results Response (JSON){"responseHeader":{"status":0,"QTime":960,"params":{..."facet":"true","facet.field":[... "{!...
Autocomplete
Autocomplete Black box viewBrowserClientsolr/terms?...&terms.regex=.*[_-]clo.*|^[+|.|%60|-]?clo.*&...SolrServerautocomplet...
Autocomplete response{"responseHeader":{"status":0,"QTime":377},"terms":{"indexed_content":{"run_clock_create_tree":41,"cl...
AJAX Solr ArchitectureWeb BrowserWidget(View)Manager(Controller)ParameterStore(Model)SolrServerTheme(Helpers)
Manager• Set solrUrlManager = new AjaxSolr.Manager({solrUrl: http://www…com/solr/‘});
SolrSearch ServerMore on ManagerIndexBrowserClientProxyServerWebApplicationServerDirect or Proxy
Manager Life CycleManager ParameterStore WidgetWidgetWidgetOn index.jsp page loadInstantiatesetStore()InstantiateInstantia...
ParameterStore• Solr parameters– Single: q, start– Multi valued: fq• Methods– get, add, addByValue, …Manager.store.addByVa...
ParameterHashStore• Esoteric Requirements– Bookmarking– Back button– URL maskingManager.setStore(newAjaxSolr.ParameterHash...
Widgets• What is a Widget?• AbstractWidget– id, target• Derived Widgets– AbstractFacetWidget– AbstractTextWidget– Abstract...
AbstractWidgetAjaxSolr.AbstractWidget = AjaxSolr.Class.extend({ //Attributesid: null,target: null,//Methodsinit: function ...
Manager Life CycleManager ParameterStore WidgetWidgetWidgetOn index.jsp page loadInstantiatesetStore()InstantiateInstantia...
AbstractTextWidget• The widget that manipulatesthe ’q’ parameter• Example implementations:– TextWidget.q.js– AutocompleteT...
AutocompleteTermWidgetFirst term Two or more terms
AutocompleteTermWidgetAjaxSolr.AutocompleteTermWidget = AjaxSolr.AbstractTextWidget.extend({ //Attributesfield: null,token...
AutocompleteTermWidget• Suggestion algorithms– First term: TermsComponent– Second, third, etc. : facet.prefix• Analytics– ...
ResultWidget
ResultWidgetAjaxSolr.ResultWidget = AjaxSolr.AbstractWidget.extend({//Methodsinit: function () {//Event binding such manip...
ResultWidget• Function: Show the search results. Basedon tutorial example• Extends AbstractWidget• Analytics– Total hit co...
PagerWidget• Function: Pager footer for going to next,previous result pages, etc.• Extends AbstractWidget
PagerWidgetAjaxSolr.PagerWidget = AjaxSolr.AbstractWidget.extend({//Attributes…//Methodsinit: function () {//Empty},before...
AbstractFacetWidget• For implementingsearch faceting• Product, DocType
AbstractFacetWidgetAjaxSolr.ProdTypeWidget = AjaxSolr.AbstractFacetWidget({//Single vs. multiValue fqmultiValue: false…//M...
Theme• Separate presentation layer– Result widget: Display metadata andsummary– Facet widget: Attach click handlerAjaxSolr...
Other Requirements• Interaction with other applications– Third party JavaScript• Analytics, Survey– Backend applications• ...
Security concerns• Coarse vs. Granular– Proxy blocking– Role based filter• Session management– Error handling– Timeout
Debugging• Browser side debugging– Firebug on Firefox– Chrome developer tools• Raw Solr JSON/XML– Learn it!
Performance Tuning• Reduce Traffic between Server andBrowser– Filter on server– Minimize browser side computation– Solr sc...
Housekeeping• Jquery & Jquery-UI upkeep• Browser compatibilities– NO IE 6 support– IE 10– Plugins
Summary• Make your GUI Shine with AJAX Solr• Understanding of the Framework• Best practices• Challenge and possibilities
Acknowledgements• AJAX Solr creator James McKinney• Lucene / Solr community• SolvNet Development team
References• AJAX Solr Wikihttps://github.com/evolvingweb/ajax-solr/wiki• Google group ‘ajax-solr’https://groups.google.com...
CONFERENCE PARTYThe Tipsy Crow: 770 5th AveStarts after Stump The ChumpConference badge gets you inTOMORROWBreakfast start...
Make your gui shine with ajax solr
Upcoming SlideShare
Loading in …5
×

Make your gui shine with ajax solr

10,699 views

Published on

Published in: Education, Technology
  • Be the first to comment

Make your gui shine with ajax solr

  1. 1. MAKE YOUR GUI SHINE WITH AJAX SOLRTroy D. Thomas Product Engineering ManagerKoorosh Vakhshoori Technical Architect
  2. 2. Make Your GUI Shine With AJAX SolrSetting the StageCompany BackgrounderProject HistoryBusiness & Technical RequirementsInspirationDemoWhy AJAX Solr?AJAX Solr Framework DEEP DIVEThemesWidgetsChallengesQ & AAgenda
  3. 3. Company - BackgroundSynopsys25 year old company / 1.8B 2012 revenueElectronic Design Automation (EDA)Electrical engineers design computer chipsHigh level designSimulationTestPlace and routeIP blocksNearly every semiconductor built uses Synopsys softwaremicroprocessors, RAM, etc.Synopsys – What?
  4. 4. Company BackgroundSolvNet ® - online knowledge base system used bycustomers and employeesDedicated engineering team20 year history1993 Email1995 A “Patchy” NCSA Web server + PERL CGI1997 Verity Netscape search2001 Java – Netscape Iplanet Portal + Verity2005 Apache Lucene2007 Pure Apache2012 AJAX Solr / Solr 4Synopsys – SolvNet ®
  5. 5. LuceneMoved to Lucene - 2005Custom tokenization helped results+delay_mode_zeroAutocomplete - 2008Custom Yahoo UI WidgetRelatively ComplexTomcat w/ RMI callbackHTML parserPDF text extraction using PDFBoxGenerate Lucene documentsSeparate collections – Articles, Docs, etc.Open Source wins…
  6. 6. RequirementsVoice of the customerMake it fasterEasier to useBetter resultsCan you just use Google?Technical team concernsCustom codeLucene agingJSF foundation - GUI complexityBusiness / Technical
  7. 7. Project InspirationAdvanced Full-Text Search CapabilitiesOptimized for High Volume Web TrafficStandards Based Open Interfaces - XML,JSON and HTTPComprehensive HTML Administration InterfacesServer statistics exposed over JMX for monitoringScalability - Efficient Replication to other Solr Search ServersFlexible and Adaptable with XML configurationExtensible Plugin ArchitectureSolr Uses the Lucene Search Library and Extends it!A Real Data Schema, with Numeric Types, Dynamic Fields, Unique KeysPowerful Extensions to the Lucene Query LanguageFaceted Search and FilteringAdvanced, Configurable Text AnalysisHighly Configurable and User Extensible CachingPerformance OptimizationsExternal Configuration via XMLAn Administration InterfaceMonitorable LoggingFast Incremental Updates and Index ReplicationHighly Scalable Distributed search with sharded index across multiple hostsXML, CSV/delimited-text, and binary update formatsEasy ways to pull in data from databases and XML files from local disk and HTTP sourcesRich Document Parsing and Indexing (PDF, Word, HTML, etc) using Apache TikaMultiple search indicesApachecon 2010
  8. 8. Solr 4SolrFaceting!Modernize GUIDeprecate custom code baseAutocomplete using Yahoo UIDid you mean?TikaExtractingRequestHandler (Solr Cell)Extract more mime typesSolr 4 (Trunk)DirectSolrSpellCheckerMore like thisSynonym listFuture migration pathWhy?
  9. 9. Front-EndScreenshot / Demo
  10. 10. Front-EndScreenshot / Demo / 2
  11. 11. RequirementsDynamic GUI Interface AJAX Solr / Solr 4FacetingAutocompleteSpell checkerDid you mean?Deeper search (attachments) TikaBetter hit highlighter Solr 4Technical Translation
  12. 12. Why AJAX Solr?Limited resources / no budgetNo GUI designers on staffLimited specialization“Enough” JavaScript – but not expertsDynamic GUIs are commonplace (AJAX)AutocompleteFacetingAJAX Solr framework helps with all of theseConsiderations
  13. 13. AJAX SolrModern StandardsJQUERY / JSON friendlyWidget FrameworkAutocompleteQuery submitSave settingsSort /display resultsPaginationFacet by productFacet by doc typeChallengesSession managementStrength of community (Google Group)Proxy ServerBenefits / Challenges
  14. 14. AJAX Solr DEEP DIVE
  15. 15. SolrSearch ServerOverall system architectureIndexBrowserClientProxyServerWebApplicationServer
  16. 16. Why AJAX Solr?• Dynamic GUI– Faceting– Autocomplete• Faster GUI– Less data traffic between server and client– Less area to refresh– Less mouse clicks• Intuitive
  17. 17. What is AJAX Solr?It is JavaScript framework-agnostic, butrequires an AJAX implementation forcommunication with Solr. As such, you mayuse the library whether you develop usingjQuery, MooTools, Prototype, Dojo, or anyother framework.AJAX Solr Wiki
  18. 18. Intro AJAX Solr Framework• MVC on top of an Ajax framework– Our implementation uses Jquery• Main components– Manager– Parameters– Widgets– Theming
  19. 19. Search Query
  20. 20. Search Black Box ViewBrowserClientindex.jspsolr/select?...&q=clock%20tree%20power&..WebApplicationServerSolrServerSearch hitsJSONResponse
  21. 21. Search Results Response (JSON){"responseHeader":{"status":0,"QTime":960,"params":{..."facet":"true","facet.field":[... "{!ex=products}products"],..."fq":[... "{!tag=products}products:"Synplify FPGA""],..."q":"clock tree power",..."spellcheck":"true",....}},"response":{"numFound":12,"start":0,"maxScore":1.5953931,"docs":[{..."id":"913646",..."title":" Clock tree fan out using syn_maxfan",..."products":["Synplify FPGA"],"teaser":"... Question: I have a design and I am targettingSpartan devices. The clock is not meeting timing in a design,..."},...},"facet_counts":{..."facet_fields":{..."products":{..."Synplify FPGA":12,...}},....},"highlighting":{"913646":{"title":[" <em>Clock</em> <em>tree</em> fan out usingsyn_maxfan"],"indexed_content":["The <em>clock</em> is not meetingtiming in a design,..."]},...}},"spellcheck":{"suggestions":{}}}
  22. 22. Autocomplete
  23. 23. Autocomplete Black box viewBrowserClientsolr/terms?...&terms.regex=.*[_-]clo.*|^[+|.|%60|-]?clo.*&...SolrServerautocompleteJSON Response
  24. 24. Autocomplete response{"responseHeader":{"status":0,"QTime":377},"terms":{"indexed_content":{"run_clock_create_tree":41,"clock_crossing":15,"timing_crpr_remove_muxed_clock_crp":6,"report_clock_crossing":5,"crpr_remove_muxed_clock_crp":3,...}}}
  25. 25. AJAX Solr ArchitectureWeb BrowserWidget(View)Manager(Controller)ParameterStore(Model)SolrServerTheme(Helpers)
  26. 26. Manager• Set solrUrlManager = new AjaxSolr.Manager({solrUrl: http://www…com/solr/‘});
  27. 27. SolrSearch ServerMore on ManagerIndexBrowserClientProxyServerWebApplicationServerDirect or Proxy
  28. 28. Manager Life CycleManager ParameterStore WidgetWidgetWidgetOn index.jsp page loadInstantiatesetStore()InstantiateInstantiateaddWidget()For eachwidgetinit()init()init()For eachwidgetFor eachwidget doRequest() beforeRequest()executeRequest()For eachwidget afterRequest()Ajax call
  29. 29. ParameterStore• Solr parameters– Single: q, start– Multi valued: fq• Methods– get, add, addByValue, …Manager.store.addByValue(q, *:*);• Derived classes– ParameterHashStore– ParameterHistoryStore– ParameterYUIStore
  30. 30. ParameterHashStore• Esoteric Requirements– Bookmarking– Back button– URL maskingManager.setStore(newAjaxSolr.ParameterHashStore());Manager.store.exposed = [ fq, q, start, sort];Manager.init();
  31. 31. Widgets• What is a Widget?• AbstractWidget– id, target• Derived Widgets– AbstractFacetWidget– AbstractTextWidget– AbstractSpellcheckWidget– AbstractSpatialWidget– PagerWidget
  32. 32. AbstractWidgetAjaxSolr.AbstractWidget = AjaxSolr.Class.extend({ //Attributesid: null,target: null,//Methodsinit: function () {…},beforeRequest: function () {…},afterRequest: function () {…}}
  33. 33. Manager Life CycleManager ParameterStore WidgetWidgetWidgetOn index.jsp page loadInstantiatesetStore()InstantiateInstantiateaddWidget()For eachwidgetinit()init()init()For eachwidgetFor eachwidget doRequest() beforeRequest()executeRequest()For eachwidget afterRequest()Ajax call
  34. 34. AbstractTextWidget• The widget that manipulatesthe ’q’ parameter• Example implementations:– TextWidget.q.js– AutocompleteTermWidget.js
  35. 35. AutocompleteTermWidgetFirst term Two or more terms
  36. 36. AutocompleteTermWidgetAjaxSolr.AutocompleteTermWidget = AjaxSolr.AbstractTextWidget.extend({ //Attributesfield: null,tokenized: true,…//Methodsinit: function () {//Event binding such as Keydown, <CR> and Autocomplete.},beforeRequest: function () {//Example, blur & disable input field.},afterRequest: function () {//Example, enable focus input field.}}
  37. 37. AutocompleteTermWidget• Suggestion algorithms– First term: TermsComponent– Second, third, etc. : facet.prefix• Analytics– Search query– Autocomplete
  38. 38. ResultWidget
  39. 39. ResultWidgetAjaxSolr.ResultWidget = AjaxSolr.AbstractWidget.extend({//Methodsinit: function () {//Event binding such manipulating results, say hide details.},beforeRequest: function () {//Example task done here, loading image.},afterRequest: function () {//Main task of showing the hit results.}}
  40. 40. ResultWidget• Function: Show the search results. Basedon tutorial example• Extends AbstractWidget• Analytics– Total hit count– Which filters and facets– Selected content type
  41. 41. PagerWidget• Function: Pager footer for going to next,previous result pages, etc.• Extends AbstractWidget
  42. 42. PagerWidgetAjaxSolr.PagerWidget = AjaxSolr.AbstractWidget.extend({//Attributes…//Methodsinit: function () {//Empty},beforeRequest: function () {//Empty},afterRequest: function () {//Main task of building the pager.}}
  43. 43. AbstractFacetWidget• For implementingsearch faceting• Product, DocType
  44. 44. AbstractFacetWidgetAjaxSolr.ProdTypeWidget = AjaxSolr.AbstractFacetWidget({//Single vs. multiValue fqmultiValue: false…//Methodsinit: function () {//Initializes the facet field and related parameters.},beforeRequest: function () { //Empty},afterRequest: function () {//Setup click handler for the selected products.}clickhandler: function() { doRequest for selecting a product.}unclickhandler: function() { doRequest when deselecting a product.}}
  45. 45. Theme• Separate presentation layer– Result widget: Display metadata andsummary– Facet widget: Attach click handlerAjaxSolr.theme.prototype.facet_link =function (value, handler) {return $(<a href="#"/>).text(value).click(handler);};AjaxSolr.theme(facet_link, facet_value,facetHandler)
  46. 46. Other Requirements• Interaction with other applications– Third party JavaScript• Analytics, Survey– Backend applications• Recent searches• Personalized search profile• Error handling– Ajax Exception– Application logging
  47. 47. Security concerns• Coarse vs. Granular– Proxy blocking– Role based filter• Session management– Error handling– Timeout
  48. 48. Debugging• Browser side debugging– Firebug on Firefox– Chrome developer tools• Raw Solr JSON/XML– Learn it!
  49. 49. Performance Tuning• Reduce Traffic between Server andBrowser– Filter on server– Minimize browser side computation– Solr schema consideration– Compress JavaScript & CSS• Proxy Server Caching– JavaScript, CSS
  50. 50. Housekeeping• Jquery & Jquery-UI upkeep• Browser compatibilities– NO IE 6 support– IE 10– Plugins
  51. 51. Summary• Make your GUI Shine with AJAX Solr• Understanding of the Framework• Best practices• Challenge and possibilities
  52. 52. Acknowledgements• AJAX Solr creator James McKinney• Lucene / Solr community• SolvNet Development team
  53. 53. References• AJAX Solr Wikihttps://github.com/evolvingweb/ajax-solr/wiki• Google group ‘ajax-solr’https://groups.google.com/forum/?fromgroups#!forum/ajax-solr
  54. 54. CONFERENCE PARTYThe Tipsy Crow: 770 5th AveStarts after Stump The ChumpConference badge gets you inTOMORROWBreakfast starts at 7:30Keynotes start at 8:30CONTACT US

×