This is Hussein Nasser where we discuss software engineering by example and welcome to
another software engineering react series so for those who are new to this
channel this series is about I will pick an application an app and
will basically comment on the user experience and try to use it and try to
guess the code and the calls and the requests that are being made and the
decisions that the developer made in order to make a better user experience
and I think it's it's a it's been fun so we have done an Instagram offline
experience for a while I was on a travel and a plane back to LA from Bahrain and
it was it was fun for me and I wanted to do another video
let me guys know what other apps you want to check out so today I will - I
want to do an Instagram just the feed I will go through my feed and just talk
through the feed and see the comments and the likes and how the calls are
being made like from a software engineering point of view does that make
sense let's go to it so I made a new account I didn't want to make up my
personal account because I had a lot of private following a lot of private
accounts here so as you go ahead and open Instagram here the first thing I
had literally I just opened - I just opened - I just followed actually two
people on instagram gary vaynerchuk and the a ESRI account on Instagram here and
the moment I opened that as you can see what what what happened here so looks
like we got the feed we got a notification if you noticed right here
someone at the heart button I can't actually touch that but we got a
notification so the moment I open Instagram there was a call to get all
new friends or followers or the comments and the like I didn't I didn't have any
pictures so I think it actually likes or comments but if I did I would have
gotten a notification so that's the first thing I noticed right so that was
a call to get the all the notifications right that I have so that will be the
likes that commands and any new followers that have been following you
and I would guess since I am a user of Instagram and you guys know that it only
shows you the followers and the new notifications since the last log n so
since the last time you open the app it will not show you for example if 50
people followed you the first day and the 50 people followed you the second
day and you open the app in the third day it won't show you hundred it will
show you basically what since the last time you followed since that last time
you open the app how many people followed your and how many likes and
comments and and that if you think I was just just taking that we can talk a lot
through it right just think about it guys there is a request being made so
there must be some sort of a bit that is stored either on the server all in the
client telling me hey that was the last time this user used the app and I am
betting that this is on the server stored and the morning you close the app
or just minimize it maybe right it's not active the server will say okay that guy
last time any interested with the app was for example an hour ago and then
since that time that query will be made and the difference will be basically
displayed for a user we can we can go on just for that but let's just let's
actually work with this application here so I
have the story God loaded here and garyvee only have the the story nobody
else has any stories here let's take a look at this picture just this picture
right so I don't know how many pictures got loaded but I can see them right so I
don't know I I can't tell and Instagram I actually you know what I take this
back if you notice on the right if I hold that there is like a little scroll
ball telling me how many pictures are they you can kind of have an indication
here it's okay look at that top right there's a scroll
bar here right there telling you that there's like this much has been loaded
I would I would imagine maybe like the ten pictures right and for this tune
picture is what got loaded what do we see here we see the number of likes we
see the first comment for Gary Vee have fun with your content right we see the
actual picture what we see we see the last two comments and these were picked
right if you think about it this were picked very specifically so I'm guessing
that Gary Vee obviously he they displayed a comment force for Gary
itself himself and then al Harrington so I'm guessing if I click this this is
like a some famous person right he has like maybe ten thousand or more
followers because Instagram will only show you either people who are following
you or are you following them they will show their comments because they want
they want say hey this guy interacted with this picture like you notice that
some likes so it's too bad that I don't have
anyone I'm following here so you not see that you'll you'll notice that for
example person Mary and Tom and reg and twenty three thousand and eighty two
like this picture right so that's another thing here we only get a calm
because mister gun doesn't have a lot to work with with my profile in general so
what do we have here we have a number the total number of comments and just
few comments right because it's just not realistic to list all comments here so
what we got is around ten pictures all right the number of likes for each
pictures the number of comments for each picture and few comments maybe three I'm
seeing three in here so that's if you think of this as a JSON response like
there will be a function called get pictures and there have been a number
ten the top ten pictures right and my feed there this the the JSON response
will be what would be their likes the picture itself maybe a URL will be the
actual binary of the image itself it could be alone I don't think the images
are returned the URL may be returned because if you work offline you
sometimes you see the loading of the picture so you see the comments you see
the number of likes but you don't see the picture until later on so that's
actually interesting so yeah you get Benham the number of comes but you don't
get all that comments so it's just like think about who designed this
application they thought about this really well right so they can just
explain umber all the people who like the app Ryan in general go
like the picture so what happened if I clicked on the number of likes here see
that was a quick query I had to load because that's another request to the
server says hey I am clicking this give me for this picture who liked this
picture right and obviously the same thing here so these see how small is the
scroll bar I'm guessing this is like a hundred I would say this is 100 or maybe
more look at that that's a small scroll bar so as I scroll because this is cheap
right this request is it's really cheap to return so I think Instagram just to
retire maybe 500 or 600 whatever right so as you scroll down real quick
Instagram will make another request I'm assuming look at that that's not 20,000
that can't be right okay I should have requested the rest
maybe this is we were just went through 20,000 record Caribbean and I really
doubt it something is off here but yeah so this request just pulled all the what
230,000 ad that can be 230 man yeah yeah looks like it looks like a bug guys this
because we're gonna stick around they didn't fill that hey this is guy again a
query and and just view all the twenty three hundred two hundred and thirty
thousand people right so you can see and it's not refreshing so it's clearly a
bug that can't be all the people that like the picture so yeah so look at that
but I'm guessing this is only maybe three hundred people right 300 riders
and you can return 300 because what are you
10 100 you throw in the name and you return the thumbnail of that user I
guess right that's not so bad I'm guessing but if I am I'm following
one of those users I will also get back whether or not this person I'm following
or not so this will they detected that I'm not following any of those guys so
that that decision or that query must have been done on the server they
intersected the this list with my fellow wing and they say hey these people
you're not following these people so that that what happened that's what's
happened here I guess right so that's that explain why when we clicked that
loading see that request that's a slightly expensive request especially if
you have I would imagine if you have a lot of follow words because I don't have
any followers right so what do you have here if you go back here no I don't have
I have fuck five followers yeah if iPhone was actually following me now I
just greater than I kind of literary now that's weird
okay thank you guys but yeah if I click on comments same thing right we scroll
all the way and I think this is sort these comments are sorted by date of
posting or date created or eight posted all right and you can interact with
every comments you can like every comment so what do we have here so it is
showing me if I'm not mistaking the last one two three four five six seven eight
nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen
nineteen twenty nine twenty or twenty one so to show me the last the last
20 comments again it's expensive right it's almost like view program overriding
application you always think limits always think limit and histogram
obviously those guys know that right they can just load you with all this
stuff if you want to see all the comments you will have to collect load
more comments which will load I would believe another 20 comments right
because only that what do we have here you have the comment you have the person
who commented and you have another thing here a piece of information that I
believe is this likes and that is slightly painful for for the server let
me explain so for each comment show me how many likes that's easy right so so
let's get it come and see this comment got a 1 like for example right one right
and I think it's ok especially if it's like a Xiaomi hey how's this picture has
this comment has 2 likes right so this comment this comment had two like so
it's ok I guess right if you click on this show me that who like this and
that's again the same query that we talked about but that's interesting but
but I guess what what is in my opinion slightly expensive is this the fact that
if I liked a comment then Instagram has to make some sort of a joint at the
server side saying ok not only show comments also determine if I have liked
any of these comments right I just liked this comment
now and now the that sent a request to the server and Instagram saying hey I
want to like this comment it come and must have an ID I I believe and it's
linked to a picture and that will create some sort of an overhead so it's really
interesting so if we came back and we clicked here and let's take a look
does the Instagram remembers that I liked some of these pictures should have
that heart as a solid red that means because I like this picture but oh yeah
that was that look at that so it wasn't that wasn't that bad the quitter made
has made really quick but
you