Partner Header

fsdnav-top

We plan to embed the 'GlobalNav' into Fantasy sports pages. To do that we encapsulated the nav and its features including a multi-layered menu, and integrated third-party modules for 'search' and janrain.

Encapsulation enables us to render the nav, alone, to almost any document. An empty document, a CQ document, a Fantasy document - any document. Partner Header and screenpop (popup used for janrain) are non-trivial ui components with encapsulation.

Credit to Ravi Dev, Penny Hinojosa, Lance Cameron, Nick Perdomo, Amy Huang, Chris DePauw.


Facts

An analysis of Janrain and Partner Header improvements. 'Old' and 'new' janrain and nav sources compared. note: janrain iframes use an un-necessary 44.6kb request at this time (to be resolved next sprint). The 44.6kb request is subtracted from the infromation shown here.

An empty test page was used for each test. Only janrain and partner header markup and support files were used for each.

bem

Janrain

Original New Improved
CSS 6.24k (gzip'd) 2.88k (gzip'd) 54%
JS 269.38k (gzip'd) 44.65k (gzip'd) 84%
Bound Events (JS) 1 1 0%
Images 0 0 0%
Requests 11 3 68%
Time To Fully Load 0.50s 0.17s 66%

Partner Header

both using new janrain

Original New Improved
CSS 99.64k (gzip'd) 31.21k (gzip'd) 69%
JS 345.81k (gzip'd) 70k (gzip'd) 80%
Bound Events (JS) 12 13 8%
Images 5.21k 12.18k -30%
Requests 14 9 36%
Time To Fully Load 0.34s 0.19s 45%

Overview

  1. Decoded Parameters

    fsdnav-form

    /login?fu=foxsports.com/fantasy/nfl?t=49r&g=1
    /login?fu=foxsports.com/fantasy/nfl?t=49r&g=1&key=A

    These paths have parameters which are themselves urls with parameters. Deserialising causes data loss -Does key belong to /fantasy or /login? This scenario caused redirect problems at signin. Resolved for standalone signin page which expects encoded parameter values:

    /login?fu=foxsports.com%2Ffantasy%2Fnf%3Ft%3D49r%26g%3D1&key=A

  2. SVG logo

    fsdnav-form

    Partner Header uses an SVG logo. SVG images are resizable with full quality. They are easier to manipulate with browser scripts and styles. Older browsers without SVG support continue using the png logo.

  3. Delegation

    fsdnav-form

    Partner header uses event delegation to reduce the number of listeners it adds to the document. After opening 'watch' the production nav uses a total of 29 listeners. Partner header uses 16 listeners and handles a wider range of events (click/mouseover/touch).

    Event delegation. A 'Listener' on the parent catches events from multiple child links then delegates to begin next actions. The opposite. Each link has a Listener to begin an action. More links require more Listeners. Listener response slows as more are added to the document.

    This script used to collect listeners from the document.

  4. Uniform Action

    fsdnav-form

    Partner Header's nav has the same action in every browser with no special case behaviour.

    It has no style definitions for iPad, IE9 or 'mobile'. It's script does not reference the browser UA string. It does not check the window for a certain url or other parts of the document for certain classNames. It has no special behaviour.

  5. Data Translation

    fsdnav-form

    For SEO, JSON used to create nav items like NBA is obfuscated and unstructured. Partner Header translates that data to a usable form. The resulting data is template-friendly.

    Partner Header could render Sports > NBA > Teams. This would be difficult to do with the production nav.

  6. Native Form

    fsdnav-form

    Production's nav search input is scripted to behave like a form. Partner Header's search is a form and so provides at least the same behaviour with no scripting.

  7. BEM

    bem

    Partner Header uses the 'BEM' technique from Russian search company Yandex.

    Using BEM the nav is a self-contained block. Styles and elements it needs are located within it. With unfixed position it is reusable on any page in any context any number of times. Arbitrary content (like ads) are easily embedded to the nav since nav styles do not affect un-related child elements.

    Other style conventions summarised here.