Metarefresh

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 static files● PHP for frontend, jQuery and friends for clientside.

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

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.● Transfer megabytes of data easily.

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 polling anywhere.

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>

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 Latency, cost effective.● Other CDNs geo-mapping screws up with GooglePublicDNS/OpenDNS.● Lessons learnt help us in tuning the overall network stack.

Webfonts not so easy!

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.

We ♥ OCSS CSS is art!

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.

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;}

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>

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

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%● display:block● cursor:pointer● font-weight:bold

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.

Questions?

Thank youmail: aakash@flipkart.com twitter: @_aakash

Metarefresh

by Aakash Bapna

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Metarefresh Presentation Transcript

Metarefresh

by Aakash Bapna

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Metarefresh Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare