You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Implementing Pushdown on Naukri.com mobile site

Friday, September 4, 2015 | By
0.00 avg. rating (0% score) - 0 votes
Presenting quality jobseeker profiles to our recruiters is most important for us at naukri.com.
There was always a need of a system which can poke our jobseekers to keep their profile updated without disturbing them in their normal flow.
To address this need, we implemented pushdown a layer based profile completion system at naukri.com.
And here is what we achieved:
  • 10-15% increase in profile updates.
  • Secure profile updates in small chunks.
  • Pushdown is “made once integrate anywhere”
  • Open sourced drawer.js a core plugin used in pushdown layers.
  • Successfully made live on Naukri’s jobseeker dashboard and job description pages on mobile site.
That’s great isn’t it, let us go through some of the challenges we faced while implementing a layer based profile updating system and how browsers came to our rescue.
  1. Data security between client and server on different domains.
Pushdown has to be:
  • Asynchronous (Ajax)
  • Secure data transfer (Method POST)
  • Pluggable with any domain (same-origin-policy)
Traditionally we used JSONP to achieve cross-domain Ajax request but internally they all are GET request made using <script> tags.
To make a cross-domain Ajax POST request you need something more than that.
We used CORS; it is a specification that enables truly open access across domain-boundaries. If you serve public content, please consider using CORS to open it up for universal JavaScript/browser access.
Things to note:
  • CORS does not send cookies with request by default; you need to do extra handling.
  • If you support non-CORS browsers like opera and IE<9 do. You have to resort to old <iframe> hack.
For more details check out CORS presentation at Naukri.com.
  1. Controlling different pushdown layers from common code:
Adding new layer to pushdown is now a 3 step easy process:
  • Make a new template
  • Writing a controller
  • Write a model
Example

We powered pushdown layers using component based approach, where each layer can specify the component it requires.
Pushdown component parser renders components (Suggestions, Toggle or dropdown) as per requirements provided in controller files.
 
  1. Reduce response payload and maximize cache.
HTML5 Pushdown is based on Naukri.com IMS (Intercept management system).
IMS does it all for you, it let you specify in response:
  • HTML of template
  • URL of JS and CSS files required
Payload is reduced, by
    • Keeping header and footer separate from layer content.
    • Bringing minimal HTML which can be parsed to render custom components.
Caching
    • Controller and model for layer are merged into single JS file using GRUNT
  1. Keeping the same experience across mobile devices.
We have to implement pushdown layers as sliding drawers with a black transparent background. But we haven’t implemented any such plugin on mobile yet.
Making a new plugin required lot of engineering and testing effort.
So we re-structured our existing light Box.js code and it gave birth to model Window.
Model Window is a single code that powers lightbox.js and drawer.js
For performance optimization on mobile we did following tweaks:
    • Used GPU accelerated translation.
      • We found animating CSS transition property is much faster than animating left and right properties.
    • Prevented z-index and opacity changes.
      • These are CPU intensive processes and showed serious lags on iPhone Safari old phones.
      • We prevented these in drawer.js without affecting the look n feel of our product.
Posted in General