Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

Published in: Technology, Design

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 iframesLightweight, 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.nameIE 6-7 and other old school browsers
  • 8.● Allows us to send loads of data (~2mb) between frames.● Doesnt require a proxy iframe.● Full async, no polling anywhere.
  • 9.<script> var message = <?php echo json_encode(json_encode($arr));?>; if (typeof top.postMessage != "undefined") { top.postMessage(message, ""); } else { = message; //FOR IE7/IE6 window.location.href =; }</script>
  • 10. One small thing...we messed up with the back button.
  • 11. In house CDNno 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 CDNs geo-mapping screws up with GooglePublicDNS/OpenDNS.● Lessons learnt help us in tuning the overall network stack.
  • 13. Webfonts not so easy!
  • 14. Gotchas1. Subset the font. Adjust x-height. use- fontsquirrel.com2. 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 { font-size:11px;}.fk-font-normal { font-size:13px;}.fk-font-big { font-size:16px; }.rpadding5 { padding-right:5px;}
  • 20. CSS bloatIts 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 youmail: twitter: @_aakash