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.
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.
Original | New | Improved | |
---|---|---|---|
CSS | 6.24k | 2.88k gzip | 54% |
JS | 269.38k | 44.65k | 84% |
Bound Events (JS) | 1 | 1 | 0% |
Images | 0 | 0 | 0% |
Requests | 11 | 3 | 68% |
Time To Fully Load | 0.50s | 0.17s | 66% |
both using new janrain
Original | New | Improved | |
---|---|---|---|
CSS | 99.64k | 31.21k gzip | 69% |
JS | 345.81k | 70k | 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% |
Decoded Parameters
/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%2Fnfl%3Ft%3D49r&key=A
SVG logo
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.
Delegation
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.
Uniform Action
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.
Data Translation
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.
Native 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.
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.