Reverse engineering Instagram in flight mode

Key Takeaways

what up y'all this is a st. also from I geometry where we're just go software engineering bikes on and today I'm gonna fly back to Los Angeles and I want to do something I wanted to do for a long time work with Instagram while it's offline and see how cool the user experience that that have been developed by those guys really so I'm actually amazed by these little things that improve the user experience from a user point of view and we don't really notice that much so let's get let's get it let's get to this right so I'm gonna play this video now and the first thing here in a few seconds I'm going to perform a like right so I'm gonna like this picture obviously there's no internet connection but see what happens here is like let me pause the video and I like that picture immediately that that heart I can changed and the likes count also changed so this indicates that obviously there's no way that this like actually persisted on the server right because what's happening here is for the sake of user better user experience what Instagram is doing is it's its first showing the user that hey I am gonna register your like as if it's gonna succeed anyway right because it has to do something at the back end right it has to send a rest request to the services that is responsible for the likes and then perform that like right whether registering that adding more data right adding any record to a table whatever that is right it needs to take some latency but they are absorbing that latency by showing you something at the user experience so this is kind of false advertisement here if you think about it because at the time you like this picture this actually did not like it's just queued up your requests and there is a chance that loot you like won't get registered but that's what they don't really care because it's like this is not a financial transaction right so it's like okay if you write is not really succeed i want i built this application to give you the bare best user experience right it's okay if you like did not register at the server oh we're getting looking some turbulence here all right so it's okay if you like to go register so so let's see what happens here after a few seconds after a few seconds since I don't have an internet connection that will undo so that operation got undone and I'm back to two eight four seven likes right so that tells me there is some sort of a queue or a stack at the client-side registered here god damn and that turbulence man whew heavy turbulence man alright so yeah that tells me there is a some sort of a stack and a client-side memory in the beautiful the beauty of this like I am seeing this picture right now this samurai right and I I was able to see that picture because I was browsing Instagram while I had internet connection and just disconnected so all of this is now cached and there is two got memory and guess what when I close and reopen Instagram I was able to see all that stuff so it's good let's go ahead and play the rest of the video what I'm about to do now here next is see their view all comments for comments what we know that there are four comments at the time of querying that pictures there were four common but for I would think for performance reasons those comments did not actually get retrieved right same thing with the likes this is just a count those if I I bet if you click on those likes nothing happens because it needs to query and view all these comments and view all these likes right let's go ahead and click on this view all four comments which will I get this wall any second now makes a request to the service to retrieve the number of comes there you go right so I'm clicking here and I am viewing all these comments the four comments I tend me to defuse the four comments that this picture has but look at that right nothing happens going back right so huge thing like why is this thing I was doing that why is not actually showing all this out or retrieving that comment at a time of coining that picture obviously if you think about it it's all about trade off right so you might want to pull all these comments but what if there are like thousands of comments right that the payload coming back from server will be really big and you don't want that because again poor user experience so let's go ahead and as what I'm gonna do next is here I'm trying to retrieve the feed that I have here but obviously there's nothing so look at that but and I'm getting a message no internet connection let's continue playing that what I'm gonna do here is like I'm gonna click on on the picture and the menu and all them to use one of these stuff right share to messenger so obviously Instagram is owned by Facebook so obviously there will be some sort of integration between Facebook and Instagram so I'm gonna I'm gonna click on copy link and I'm assuming this will succeed because the link is a cheap non expensive pieces of information that it will get back as a result of retrieving these pictures so copying the link to the clipboard is does not require us to query the service all right so it's like and as we expected it's actually succeeded that's good so worse man I'm feeling this the gum profile for the samurai ward that might actually work depend on at the time of querying these pictures it will retrieve some of the profile pictures and the stories for that account or not and it looks like we did not so or maybe we did but that cache got written off by others by other content so there's something called the least recently used cache algorithm where if if if if a certain cache is not used for a certain amount of time it will be overwritten by a newer content and this is what happens I think here going back again we get there no internet connection it's actually very cool that I'm still working with the application it's that picture doesn't hang doesn't crash look at that trying to view nothing in a while I go upstairs I've stairs you can't go up my feet and try to view another account right previously up there I'm trying yeah he remembers trying to re like this picture and you see as you can see that like failed there's another picture that has been previously that's another see there's a 2-1 picture or I think the two videos really and those videos are for I think it's only the first frame has been loaded and the actual video was not queried let's see what we're gonna do here yeah that's exactly what I suspected right it's only videos the video yeah this is actually interesting see what I did here the comment the original comment for that user for that picture was loaded but it was not shown it was actually trying hated but it was cached on this tegami more so when I clicked on view the whole comment I wish I can go back but yeah maybe I can't but yeah when I click on that video and I think really happen when I click on that comment it will show all that video right it's actually interesting view of the comment and we don't need to Quay the rest endpoint to view the rest of the comments that is so cool man yep nothing here I mean we're ending this video round yeah that is that is really cool so it's actually amazing how would the user experience look at I'm gonna like this 467 after a few seconds like 1 2 3 3 seconds and that we don't even get an error right that tells me that histogram is first purposefully hiding those errors for better user experience so if you're like failed you'll never know if you like the picture you'll never know that you actually like that like persisted or not see you're lurking again and fail but it fails silently look at that it just fails silently that is amazing man look at that nothing this is the end of a video yeah yep that's it yeah so guys this was like a quick react on an Instagram working offline how can I save this video I can upload it for you guys somewhere maybe this - this one is day I think alright guys you guys stay awesome hope you like this content let me know if you like this kind of content I'm gonna make more content like this if you really enjoyed we're gonna make more content like this and I like to just view this and just talk about how the user experience works versus the back end versus decisions that the developer makes to make the to make a trade-off between the better user experiences versus load and performance alright guys you guys stay awesome gonna see you on the next one good take care