 Hi everyone, I am Akansh Babna from Flipkart.com So I will be talking about front-end strategies when you face a Flipkart.com And how we tackle them I am the UI here at Flipkart.com by the way So just an overview of Flipkart front-end Before we get started with things We do like more than 4 million pages a day The good part is 40% of it comes from Chrome 26% is Firefox and 25% is IE All IE's And Flipkart ends with 16% of So 16% is IE Very less of IE, 6% and IE 7% So we use in-house media to serve standard files We will be talking about this in detail down-line So we use PHP for front-end And we use jQuery and its helpings for our client-side framework Here is what we are going to talk about today So these are some of the changes we face at Flipkart.com We wanted to make secure front-end files We wanted to serve the static contents In a way it's just effective for us And the latency also is down-line for the users Web concerts, again this was a big chance for us Scalable ceases code, again this was the big thing This ceases for our site as we test Flipkart.com And cleaning up code, this is really tough for us Because of the speed we are moving And the things are changing quite fast So first we look at graph-stabilization criteria So we started to build up this data server at Flipkart The requirement was that we wanted people to purchase songs From search pages, browse pages, anywhere on Flipkart.com These pages were our scdp domain And to do one click check-out on these pages We don't want to compromise on the security of the calls We wanted to sync the check-out to have a new security channel So we had to make calls between a scdp and a scdps domain This was really challenging for us because We are already targeting a bunch of js on the page And we don't want to use another level like xdm or another We are ready for consuming calls So we started to build a very thin, very lightweight consuming calls library We will be talking about this in more detail So the requirements were that we wanted to source requests between the scdp and the scdps pages And we never wanted the page to be revealed We wanted the guy to be on the same page when he makes a purchase When he makes a digital purchase It's cross browser, even iosics is supported We wanted iosics because we want people on iosics to be able to do turns to the very least This is used across a lot of places on Flipkart Your sign up, your login, your one click purchase for digital items And over the time this will be used a lot over Flipkart We wanted to be fast and lightweight We wanted to be able to transfer megabytes of data to the pages If we look at the approaches which are followed right now People use window location hash for transferring data Which has its own limitations We have to pull for it, we have to pull the hash And there is a limit on the size of the data you can transfer between the pages to that So these are the requirements we are building against So the reason is that window.postmessage is our friend So window.postmessage is available across Bystanders, i8 plus, 5.3.6 plus and all codes basically So this allows us to send data between frames One frame posts a message to another frame And the other frame listens for it But there is just one bit here That i8 will only allow you to transfer strings over it If we type the string, you give it We give it objects if we type the string So we had to actually do a two string on all the data we transferred Which was the frames So another thing is window.name So window.name is I think very less known method to transfer across frames This helps us transport megabytes of data across pages It's supported in i8, i7 and all the old school browsers So this allows us to send megabytes of data across pages Because it's window.name property, it's like sending a variable And reading it to the other side So it doesn't require proxy iframe, it doesn't require polling And it's fully async You'll see how the static code looks like when we setup it This was just a code Just this response to care of all of our cross domain needs So what we're doing here is We are json encoding the data twice to convert it to strings We convert an esp array to string And we're checking if postmessage is there We're using postmessage Otherwise we are simply setting the window.name And so the quick here is that Even if you set window.name You won't be able to read it to the other side To read it to the other side You need the frame to be on the same domain The best way you could take off it was You would redirect to salicon.ico Because that's always cash and you redirect the frame to that location The frame you redirect to that location But window.name would remain the same That way we can access the variable in the top frame So one small thing was that When you're doing this We messed up the back button of the browser Back the... I-frames don't like the back button When you make calls through I-frames It also creates a point in their history So this was really This was really serious for us Because people could redo transactions When they click the back button And solution as it turned out was very simple Once you're done with the request Remove the I-frame Remove the I-frame to yourself That's the history for that page There's no longer a request for the I-frame So in our CDN You might have heard of this A lot of sites are written We have our own CDN We don't use a third party CDN for our static files No packet for flipchat.com Those are our media The hi-hs are there So we can actually In runtime we can switch our CDNs Through configs So in case there's a high note Some CDNs have a non-performing There's a spike You can switch to an alternative provider Or you can put that kind of combination Through configs It gives us very high latency And it's very cost effective for us Because we're doing a whole new page recently And the CDN zoom mapping We learned that The CDN zoom mapping is true When people use Google DNS Or local DNS It no longer gives you The file from the latest From the nearest event And the lessons learned While we're developing this It helps us in fine-tuning The latest stack And it also helps us in Tuning other services also Using Google DNS What gives us true of the It happens actually in the state The Google DNS will map the packet To England and elsewhere And then it will come down So when we're launching The Flipkart digital store Or any downloads We wanted it to look jazzy We wanted it to have a different experience Apart from the rest of the Flipkart So we decided to use webpons But as it turned out That webpons are not that easy I mean They have a lot of quits Associated with them These are the webchams You should keep in mind When you are using webpons You should always subset your phone If you use a font directly As people get them It will be like 500 TVs And it will be downloading A lot of data on the client side Just for every request And another thing is That you need to adjust the Excite of the fonts So it turned out For us that when we started Using this font Our existing With our existing CSS Everything was sticking to top So because of the font's excite So it turned out that The font is like that only So we fixed it by adjusting The excite of the fonts It is a very good site Called fontsminute.com It does a lot of optimizations for you It does It is subsetting it It does excite for you It does everything for you You should be using it If you are using webpons On a page So another thing was People say that If you are using webpons You should use an excellent loader Like the Google webpons loader The Typekit loader Anything else But that required us to download Another 6-7 kbs of JS on every page It had this And we never wanted The packet to go out of the area We never wanted to Have just for fonts Another request And a 2-3 request for fonts So we set out To build a solution on our own And it turned out that It is not that difficult actually If you follow If you search around it For a bit So one thing was that I will not enter anything If there is a strip tag About the font So the page can be blocked People will see a white page This was critical for us Because we have people coming in from IE And there seems to be a white page And the font loads And this was Happening even in the latest eyes also You can see I'm there So you should always Place a font tag On the top of your page Before any strip tag Otherwise I will block it I will block it Since I will block the Download I will block the rendering of the page It turned out that Roman Firefox Downloads the font Only when the download text With that font So let's say if you have A dialog with that font in The dialog will be shown But there will be no text shown Until it doesn't say For downloads It also can download the font Only when it downloads it So the searcher for this Want to preload the font Using hidden spam tag On the top of the page Earlier So next here This is the OCS Vida OCS I mean I am not sure If you guys have heard of it OCS is a movement by Because even she does CSS consulting For big organizations Like Facebook and all And hypercom and CSS Optimization They do it If you start using it It's completely It's a new approach to CSS Writing CSS One area is using Less, less and these things This is using Existing CSS Class And adding it in a way That it's the element So OCS is a belief OCS says that You should always Separate skin and structure If I am defining a button The structure for the Button should be different And the skin for that Button should be different This is not the case You would always Find yourself duplicating the code You should always Separate your container And contain it So container will You should always have A great framework with you If you don't have a great Framework you will End up duplicating Containers everywhere Have containers And you should release And get it in them This results in Highly reusable CSS code But again It's non-semitic And there are You could argue that You have to tell your CSS best practices for this You have to put an aside If you are You know with this approach For writing your CSS So look at it Some of the CSS Bits So this is This is the great framework That you think It's very lightweight It's It takes care of All the cross browser tags We have put in And it's very lightweight It's really simple Use its cross browser And it's It's very accessible You can list The great units You can have The massage tag Whatever you want You can do with them This is the sort of This is an example Markup of a tag So if you Look at it This will be You know Brilliant for me And it's very Simple to It's very It's very easy to Maintain it this way Because if I Have to change the Size of the many of the units I just have to Change the size One of three One of two Or something And it Would be taken care of And this is Also answers Destined them And if you see Flipkart You will see them everywhere From Three column layouts To Your Product edits Everywhere You will see Mistakes Some more OCC examples We use Part We have declared Only one OCC That We should declare Things Only Buns And We should be Reusing them later on So These are the Some of the tags We have declared for Part We have declared them Buns Everywhere We are using them On the Semantic side If you look at this From Semantic side It's not very semantic But it Buns Whereas We put A Dungen Semantic Classy In case you find that It's going too much Non-semitic But we use a lot of Classes like this RK Function RK Function Normal RK Function Big For Having We have created A lot of function classes like R Padding This says that The element Have a Padding of 5 clicks from right For the We have We have 5, 6 Classes like this And it works for us It helps us not to Declare the Roots again and again This is Very This has worked out In a big way For us And we have Said a lot of Bites with this Ceases Load So It's A rich Today The People will not Go on Zero Lesson And How How What's The Teacher The Post Again It's Good People These Top Letters Subsequent There is just overrides one level overriding the other. The other reason is stale and unused selectors, people never delete rules, people will never delete rules from the CSS violence. This is what they found out. If we are to do it, we have to take one day out of our day-to-day-off and do it. It is very difficult to remove unused rules and you will never know that I delete this rule. We will come back to any other piece on the website. So we didn't declare rules. So we ran script around all of the CSS code and we found out that these were the most declared CSS properties in this order, explication, underlying, etc. We had not sent the anger tag execution properly. So we found out that people were overriding at a lot of levels and people were doing it quite often. We didn't use the recent CSS initially because the tag people were setting margin, see-go-part, padding, see-go-part, see-go-art and in a lot of CSS rules. Then again we had a lot of rules that looked like with 100% display tag, that's the part of 4 way code. This is the result of people using wrong tags for right, for different things. So with 100% user tag, display tag, people would have used a left, that's the point I think I would have used a right tag, hold by hold, they could have used a stronger read tag. This is what we found out that these were the most declared CSS properties in the code. And then we set up the extractor, we, our efforts got prepared towards having these, removing these and having a top-level rules which actually make, which actually make people not declared CSS again. So CSS cleaned up the root. So we have, so we have to clean the CSS code. People will not believe them manually because it's too much tedious. So we thought we'd write a code which will take a bunch of yarns, we'll take a bunch of CSS files and tell us that this CSS root is presented in this file a lot. So obviously Node.js was the way to go for that. It purchased a page with Node.js, creates a browser, simulates a browser with JS DOM and scopes and a season in it, passes the given CSS file and tests for the presence of the CSS selector which document got very selected. After that, it will rewrite the CSS file in the comment that the CSS root is used or not used or if it's used then what is, what, how many selectors are there which are using this root? If it's very specific, only one or two selectors are using that, are using that to them, we should probably factor it. This is how we're going with this. This is how we're cleaning up this experimental and it's, it's, it's, it's being done as we talk about actually. I'm done with this. Any questions? Yeah, any questions? So the question is that why CSS and not something like CSS. So one thing was we wanted, we have people, non UI developers also writing CSS code because we have a lot of things coming up each and every day. So not everything comes to UI developers for writing CSS. So getting them a whole lessons as would be difficult. They're all, they come, they all come from classical programming areas where the intent is reusing the code but it's actually not that in lessons as it will actually duplicate the code we do. So we had a, we had a create that which would actually written more good generated this way. But we are actually trying this and trying it for CSS properties because it's actually finding specific to the various properties and radiance each and every time. Let's say that you're actually not considering CSS animates as a mess, animates as a mess, animates as a mess. So you're not talking about that, but consider the redundancy that you have to deal with. Yes. Like if you create padding, large, large, large, which you actually have that they work with, they are more than provided. Also, if you, if you continue using that as a form that probably won't work in the scenario where you have to deal with all the redundancy. So 23 is a call initially making better. We spend time clearing our tools and radiance later on just because we have to make it accessible to our devs so that we can understand or do it more wisely. I like that. So the thing is that if you bump us clean up our tools because it's great, it's very down to like 80 kbs of season and every day we want to clean up first and then we would think about it re-actile it with or re-thinking it as a mess. Another thing is that even if you have margin padding with less people then simply iterate that and they will, they will not, they will not think that it's a reference. It will be actually a, one more collection of that property there. So you say that you write some architecture running already on your CSS and that's the way I call it, most CSS. Yes. But if we have to start from, let's say from the scratch, would you rather still not use less people? I think most CSS works for most of our things actually. You don't find that anything apart from this, the CSS tree will be able to bond with less people. Yeah, we do plan to contribute back. So the question is, are we planning to open source this CSS cleaner tool? We do plan to do it. We do plan to contribute back. I voted the code of a popular IHOP Saddam called CSS Destiny Senators or something. So I actually did that code and we did this. It's not there right now, but we do plan to put it out. What is your current font size? Pardon? What is your current font size? Yeah, so the font sizes, so the question is, what are our current font sizes? It's that. I'm really not sure of the font names, but I think it's 3D Sands. I think it's 3D Sands. Initially the font sizes, we got the sizes were like 200 kb's for strong, 200 kb's for a bold font. So we decided to find it around 500 kb downloading because it's a very payload. Then it came down to like just 40 kb's overall. Really powerful smartphones. You spoke about not using Google smartphones because it's a very domestic product and not today that is why it's so big. Still using smartphones does the animals know? If not, let's say using Android and Android 4.0 is real. So a person who does not access the website for the first time, unless that Android font has rendered or has actually come to a decision, people are not going to be able to access it. So there is a question of finding ways to see the translation as to see what will be the font. So that's the reason that it's still being developed? No, we don't use that. The only problem with that is the way we deal with the file is that we will not display the font. That's how browsers see data, that's how people recommend it because it fits the other way than the size of the area and the size of characters in the area that the font uses. So the page might jump a lot because the font is jumping. So we actually hide the font. We hide the text in the time the font goes. Anything else? So the question is, what are the files used for the font? So we use 5x1 to use this. There's a lot. So we use this. Actually, this is a very good developer tool which helps us profile our CSS. That means a lot. I think it's Firefly or something. It helps us profile the CSS and how much of it CSS enables. Anything else? I'm sorry? Yeah, please go. Pardon? Accessibility? No, not yet. Actually, we want to go into that. We are actually going to write a code in a much more... We actually want to write a code in a much more... We might take tags and we want to make it more... It's not that much right now, but we want to do it. So, what is the Indian Recon situation? Yes. What is it? Yes. And you are also a great client. Building things yourself? Yes. Yes. So if you are doing these two things, like building things yourself and supporting the activities of the situation as well, can you open source all this stuff? We don't want to do it. It's going to happen soon. So the question is, when do we plan to open source all the things we do ourselves? Again, we might have heard from news conferences, news speakers. We do plan to go to the back. There will be a point when we find them, these are ourselves, these two, they are not in its perimeter states. We will open source. We will do it. So, next week... I cannot do that. Okay. Anything else? Cool. Thank you. Thank you.