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.
Mohd Saeed Khan (Naukri FED)
suggest.js
Agenda
● What is suggest.js ?
● Glimpse of features
● What is Prefetch library ?
● Architecture overview
● How prefetch li...
Suggest.js (suggestion engine) is robust, flexible, and
offers advanced functionalities such as :
● Fast lookups (Autocomp...
Glimpse of AutoComplete
Glimpse of Related Concept
Glimpse of AutoCorrect
Glimpse of Recent Searches
Will appear automatically on
click or focus inside the
suggestor region
Demo
Architecture Overview
Q: How prefetch Library works ?
Ans: Prefetched data is fetched and processed on
initialization. If the browser supports l...
Resp
Success
Get data against
user query from L.S
e.g. “java”
user wants to
search “java”
Requests same query to
server fo...
How is prefetch library updated…?
Update/Merge prefetch
data with response
data object
New Request for prefetch
data
Just chill, &
enjoy with
cached data
TT...
What is data personalization?
Data-Personalization ensures that the data
shown to the user should based on user ID or
rece...
Data Personalization works on the basis of 5 cases
A prefetch hit goes to server with blank
parameter values
Keyword Blank
Segments Blank
UNID Blank
Response
e.g. http://sug...
A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword JAVA, PHP
Segments @all|1
UNID Blank
Re...
A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword JAVA, PHP
Segments @all|1
UNID 76549798...
A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword blank
Segments @all|1
UNID 765497987
Re...
A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword blank
Segments blank
UNID 765497987
Res...
Implementation
HTML
Call Structure...
$('.suggest').suggestor({
domain: "http://suggest.naukimg.com/demo", // mandatory parameter
category: { ...
Parameters
● url
autoComplete
relatedConcept
checkVersion
prefetch
● appId
● category
● grouping
● multiSearch
● maxSugges...
Compatible with jQuery & Zepto
Browser Support
● Internet Explorer 8+
● Chrome 10+
● Firefox 3.5+
● Safari 4+
● Opera 11+
...
Dependencies
cookie.js : 745 bytes 395 bytes
JSON Error Support : 1.76 KB 1.09 KB
ncCache : 5.79 KB 1.99 KB
Total minified...
Current Usage
1) Naukri India
a) HTML5 Mobile Sites
b) Jobseeker (Homepage, SRP, Advanced Search, CJA, Apply, QUP, MNJ, GN...
What to be next
1. Add custom template support
2. backfilling with remote data. (when number of suggestion insufficient
in...
Documentation and Demo also available on GilLab
Fork on GitLab
Suggest.js
Upcoming SlideShare
Loading in …5
×

Suggest.js

411 views

Published on

Suggest.js (suggestion engine) is robust, flexible, and offers advanced functionalities such as:

Fast lookups (Autocomplete)
Related Concepts
AutoCorrect
Recent Searches / Search history
Prefetching (Powered by localStorage)
Data merging
Intelligent caching(URL caching)
Personalised Search (Recent Search/User Based)

Published in: Technology
  • Be the first to comment

Suggest.js

  1. 1. Mohd Saeed Khan (Naukri FED) suggest.js
  2. 2. Agenda ● What is suggest.js ? ● Glimpse of features ● What is Prefetch library ? ● Architecture overview ● How prefetch library update ? ● What is data personalization & it’s use cases. ● Compatiblity matrix and size ● Dependencies ● Current usage ● What next ?
  3. 3. Suggest.js (suggestion engine) is robust, flexible, and offers advanced functionalities such as : ● Fast lookups (Autocomplete) ● Related Concepts ● AutoCorrect ● Recent Searches / Search history ● Prefetching (Powered by localStorage) ● Data merging ● Intelligent caching(URL caching) ● Personalised Search (Recent Search/User Based) What is ‘suggest.js’?
  4. 4. Glimpse of AutoComplete
  5. 5. Glimpse of Related Concept
  6. 6. Glimpse of AutoCorrect
  7. 7. Glimpse of Recent Searches Will appear automatically on click or focus inside the suggestor region Demo
  8. 8. Architecture Overview
  9. 9. Q: How prefetch Library works ? Ans: Prefetched data is fetched and processed on initialization. If the browser supports localstorage, the processed data gets cached there, to prevent additional network requests on subsequent page loads and user query.
  10. 10. Resp Success Get data against user query from L.S e.g. “java” user wants to search “java” Requests same query to server for “A.C” data Requests for version 1 2 12 5 2nd call hits the server for prefetch library Get Resp. & Stores prefetched data in L.S if prefetch data does not exist or exists with expired TTL If response, then stores version object in L.S against a version key Init Call Get Response 3 4 6 7 8 9 11 13 14 15 Fail 10
  11. 11. How is prefetch library updated…?
  12. 12. Update/Merge prefetch data with response data object New Request for prefetch data Just chill, & enjoy with cached data TTL expire ? Get TTL of prefetch object from L.S Response Init Call 21 7 9 8 4 5 6 3 Success Fail Yes No Prefetch library updates on the basis of TTL ?
  13. 13. What is data personalization? Data-Personalization ensures that the data shown to the user should based on user ID or recent searches he does.
  14. 14. Data Personalization works on the basis of 5 cases
  15. 15. A prefetch hit goes to server with blank parameter values Keyword Blank Segments Blank UNID Blank Response e.g. http://suggest.naukri.com/prefetch?&0.44103118497878313& keywords=&segments=&unid= &callback=suggestInfoEdge Case 1(not-Logged In): if user visits first time. Stores response against “__infoEdge/prefetch” key
  16. 16. A prefetch hit goes to server with parameter values as shown in the table. Keyword JAVA, PHP Segments @all|1 UNID Blank Response e.g. http://suggest.naukri.com /prefetch?&0.44103118497878313 &keywords=JAVA,PHP &segments=@all|1 &unid= &callback=suggestInfoEdge Case 2 (not-Logged In): if user searches something and Suggestor gets Recent Searches from cache. Get data stored against prefetch key from L.S. Stores Merged Response against the same key 1 2 3
  17. 17. A prefetch hit goes to server with parameter values as shown in the table. Keyword JAVA, PHP Segments @all|1 UNID 765497987 Response e.g. http://suggest.naukri.com/prefetch? &0.44103118497878313& keywords=JAVA,PHP &segments=@all|1 &unid=765497987 &callback=suggestInfoEdge Case 3(logged-In): if Recent Searches exist. 1 Stores data against “infoedge/prefetch/765497987” key this response contains only user specific data not whole library
  18. 18. A prefetch hit goes to server with parameter values as shown in the table. Keyword blank Segments @all|1 UNID 765497987 Response e.g. http://suggest.naukri.com/prefetch? &0.44103118497878313& keywords= &segments=@all|1 &unid=765497987 &callback=suggestInfoEdge Case 4(logged-In): if Recent Searches does not exist. 1 Stores data against “infoedge/prefetch/765497987” key this response contains only user specific data not whole library
  19. 19. A prefetch hit goes to server with parameter values as shown in the table. Keyword blank Segments blank UNID 765497987 Response e.g. http://suggest.naukri.com/prefetch? &0.44103118497878313& keywords= &segments= &unid=765497987 &callback=suggestInfoEdge Case 5 (logged-In): if Recent Searches & segments does not exist. 1 Stores data against “infoedge/prefetch/765497987” key this response contains whole library
  20. 20. Implementation HTML
  21. 21. Call Structure... $('.suggest').suggestor({ domain: "http://suggest.naukimg.com/demo", // mandatory parameter category: { // mandatory parameter 'location': "Locations" } }); //where Locations --> heading/title and location --> bucket/category and Implementation
  22. 22. Parameters ● url autoComplete relatedConcept checkVersion prefetch ● appId ● category ● grouping ● multiSearch ● maxSuggestions ● onSelect ● relatedConceptsCategory ● relatedConceptsLimit ● sourceId ● startSearchAfter ● showRelatedConcept ● suggestOnClick ● trackUserInteraction ● whiteListSpecialChar ● scrollStyle // accepts class name
  23. 23. Compatible with jQuery & Zepto Browser Support ● Internet Explorer 8+ ● Chrome 10+ ● Firefox 3.5+ ● Safari 4+ ● Opera 11+ Size ● Production with gziped: 5.50 KB ● Production (minified): 15.38 KB
  24. 24. Dependencies cookie.js : 745 bytes 395 bytes JSON Error Support : 1.76 KB 1.09 KB ncCache : 5.79 KB 1.99 KB Total minified size = suggest.js(15.38KB) + dependencies(9.2KB) = 24.58 KB Gzip size = suggest.js(5.50 KB) + dependencies(2.84 KB) = 8.34 KB minified gZipped
  25. 25. Current Usage 1) Naukri India a) HTML5 Mobile Sites b) Jobseeker (Homepage, SRP, Advanced Search, CJA, Apply, QUP, MNJ, GNB, Registration) c) Recruiter Profile d) FastForward e) CSM f) Referral g) Resdex (Advanced Search, GNB, CV preview) 2) Naukri Gulf a) Resdex (almost on every page) It is almost implemented on every page of Naukri Apps
  26. 26. What to be next 1. Add custom template support 2. backfilling with remote data. (when number of suggestion insufficient in prefetch library then an additional call will go to server for remaining suggestions.) 3. Default suggestions can be shown for empty queries response 4. RTL Support (can be used in Naukri Gulf)
  27. 27. Documentation and Demo also available on GilLab Fork on GitLab

×