Frontend Challenges     @Flipkart     -Aakash Bapna
Flipkart frontend - overview● >4M pageviews a day.● Browser share- 40% Chrome, 26% FF,  20% IE.● In house CDN to serve sta...
Challenges we face●   Secure cross domain calls.●   Static content.●   Webfonts.●   Scalable CSS code.●   Cleaning up old ...
Cross domain transport     with iframesLightweight, very fast and cross browser
Requirements●   Do POST requests between http and https.●   Cross browser- IE6+, Chrome, FF.●   Fast, lightweight.●   Tran...
window.postMessage()  IE 8+, FF 3.6+, Chrome 1.0+
window.postMessage()   IE 8+, FF 3.6+, Chrome 1.0+      window.nameIE 6-7 and other old school browsers
window.name● Allows us to send loads of data (~2mb)  between frames.● Doesnt require a proxy iframe.● Full async, no polli...
window.name<script>    var message = <?php echo json_encode(json_encode($arr));?>;     if (typeof top.postMessage != "unde...
One small thing...we messed up with the back button.
In house CDNno packet goes out of India!
Highlights● Runtime switching of static servers by  config.● Fallback to alternative CDN when traffic  spikes.● High Laten...
Webfonts not so easy!
Gotchas1. Subset the font. Adjust x-height. use-   fontsquirrel.com2. IE doesn’t render anything in the page until   the f...
We ♥ OCSS  CSS is art!
OCSS in brief● Separate structure and skin.● Separate container and content.● Results in highly reusable(but non-  semanti...
OCSS grids (css)line, .lastUnit {overflow: hidden; _overflow:visible;_zoom:1;}.unit {float: left; _zoom:1;}.unitExt {float...
OCSS grids (markup)  <div class="unit size1of2">       <div class="unit size1of3">           <p>Lorem</p>       </div>    ...
OCSS examples.fk-font-small {   font-size:11px;}.fk-font-normal {   font-size:13px;}.fk-font-big {   font-size:16px; }.rpa...
CSS bloatIts unavoidable, tedious to cleanup.
Why bloat?1. Bad code- override, overrides & overrides.2. Stale, unused selectors.
Redundant declarations● text-decoration:underline● text-decoration:none● margin:0 padding:0 border:0●   width:100%●   disp...
CSS cleanup tool (Experimental)● Runs on Nodejs.● Fetchs pages, simulates a browser with  JSDom and Sizzle.● Parses given ...
Questions?
Thank youmail: aakash@flipkart.com    twitter: @_aakash
Upcoming SlideShare
Loading in …5
×

Metarefresh

1,535 views

Published on

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,535
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Metarefresh

  1. 1. Frontend Challenges @Flipkart -Aakash Bapna
  2. 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. 3. Challenges we face● Secure cross domain calls.● Static content.● Webfonts.● Scalable CSS code.● Cleaning up old code.
  4. 4. Cross domain transport with iframesLightweight, very fast and cross browser
  5. 5. Requirements● Do POST requests between http and https.● Cross browser- IE6+, Chrome, FF.● Fast, lightweight.● Transfer megabytes of data easily.
  6. 6. window.postMessage() IE 8+, FF 3.6+, Chrome 1.0+
  7. 7. window.postMessage() IE 8+, FF 3.6+, Chrome 1.0+ window.nameIE 6-7 and other old school browsers
  8. 8. window.name● Allows us to send loads of data (~2mb) between frames.● Doesnt require a proxy iframe.● Full async, no polling anywhere.
  9. 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. 10. One small thing...we messed up with the back button.
  11. 11. In house CDNno packet goes out of India!
  12. 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. 13. Webfonts not so easy!
  14. 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. 15. We ♥ OCSS CSS is art!
  16. 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. 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. 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. 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. 20. CSS bloatIts unavoidable, tedious to cleanup.
  21. 21. Why bloat?1. Bad code- override, overrides & overrides.2. Stale, unused selectors.
  22. 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. 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. 24. Questions?
  25. 25. Thank youmail: aakash@flipkart.com twitter: @_aakash

×