This document summarizes challenges faced by the Flipkart frontend team. It discusses how they handle over 4 million pageviews per day across browsers using an in-house CDN. Key challenges include secure cross-domain calls, scalable CSS, and cleaning up old code. Techniques used include iframes, window.postMessage(), and window.name for cross-domain transport. The document also covers their approach to webfonts, CSS architecture using OCSS, and an experimental tool to clean up redundant CSS declarations.

1. Frontend Challenges
@Flipkart
-Aakash Bapna

2. Flipkart frontend - overview
● >4M pageviews a day.
● Browser share- 40% Chrome, 26% FF,
20% IE.
● In house CDN to serve static files
● PHP for frontend, jQuery and friends for
clientside.

3. Challenges we face
● Secure cross domain calls.
● Static content.
● Webfonts.
● Scalable CSS code.
● Cleaning up old code.

4. Cross domain transport
with iframes
Lightweight, very fast and cross browser

5. Requirements
● Do POST requests between http and https.
● Cross browser- IE6+, Chrome, FF.
● Fast, lightweight.
● Transfer megabytes of data easily.

6. window.postMessage()
IE 8+, FF 3.6+, Chrome 1.0+

7. window.postMessage()
IE 8+, FF 3.6+, Chrome 1.0+
window.name
IE 6-7 and other old school browsers

8. window.name
● Allows us to send loads of data (~2mb)
between frames.
● Doesn't require a proxy iframe.
● Full async, no polling anywhere.

9. window.name
<script>
var message = <?php echo json_encode(json_encode($arr));?>;
if (typeof top.postMessage != "undefined") {
top.postMessage(message, "http://www.flipkart.com");
} else {
window.name = message; //FOR IE7/IE6
window.location.href = 'http://www.flipkart.com/favicon.ico';
}
</script>

10. One small thing...
we messed up with the back button.

11. In house CDN
no packet goes out of India!

12. Highlights
● Runtime switching of static servers by
config.
● Fallback to alternative CDN when traffic
spikes.
● High Latency, cost effective.
● Other CDN's geo-mapping screws up with
GooglePublicDNS/OpenDNS.
● Lessons learnt help us in tuning the overall
network stack.

13. Webfonts
not so easy!

14. Gotchas
1. Subset the font. Adjust x-height. use-
fontsquirrel.com
2. IE doesn’t render anything in the page until
the font file is done downloading if there is a
SCRIPT tag above the @font-face
declaration.
3. Chrome, FF download the font file only when
they encounter text using the font. The text
is hidden while the font is downloading.

15. We ♥ OCSS
CSS is art!

16. OCSS in brief
● Separate structure and skin.
● Separate container and content.
● Results in highly reusable(but non-
semantic!) CSS classes.
● Selectors - CSS architecture.
● Against most CSS best practices.

17. OCSS grids (css)
line, .lastUnit {overflow: hidden; _overflow:visible;
_zoom:1;}
.unit {float: left; _zoom:1;}
.unitExt {float: right;}
.size1of1 {float: none;}
.size1of2 {width: 50%;}
.size1of3 {width: 33.3333%;}
.size2of3 {width: 66.6667%;}
.size1of4 {width: 25%;}
.size3of4 {width: 75%;}
.lastUnit {float: none; _position:relative; _left:-3px;
_margin-right: -3px;width:auto;}

18. OCSS grids (markup)
<div class="unit size1of2">
<div class="unit size1of3">
<p>Lorem</p>
</div>
<div class="unit size1of3">
<p>Ipsum</p>
</div>
</div>
<div class="unit size1of2">
<div class="unit size1of4">
<p>Lorem</p>
</div>
<div class="unit size3of4">
<p>Ipsum</p>
</div>
</div>

19. OCSS examples
.fk-font-small {
font-size:11px;
}
.fk-font-normal {
font-size:13px;
}
.fk-font-big {
font-size:16px;
}
.rpadding5 {
padding-right:5px;
}

20. CSS bloat
Its unavoidable, tedious to cleanup.

21. Why bloat?
1. Bad code- override, overrides & overrides.
2. Stale, unused selectors.

22. Redundant declarations
● text-decoration:underline
● text-decoration:none
● margin:0 padding:0 border:0
● width:100%
● display:block
● cursor:pointer
● font-weight:bold

23. CSS cleanup tool (Experimental)
● Runs on Nodejs.
● Fetchs pages, simulates a browser with
JSDom and Sizzle.
● Parses given CSS file(s).
● Tests for presence of selector in pages with
document.querySelector().
● Rewrites CSS file marking unused selectors
in comments.

24. Questions?

25. Thank you
mail: aakash@flipkart.com
twitter: @_aakash