Metarefresh

  • 1,319 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,319
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. window.name● Allows us to send loads of data (~2mb) between frames.● Doesnt 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 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 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 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: aakash@flipkart.com twitter: @_aakash