Synchronous vs Asynchronous Applications (Explained by Example)


what’s up y’all this is Hussein Nasser
from IGeometry where we discuss software engineering by example and I’m
pretty sure you have searched a lot for an answer for synchronous versus
asynchronous you get all these definitions you get all these
theoretical explanation and you know you really wanted concrete example and you
came to the right place we discussed all the technological software engineering
counsel here and an IEEE geometry with an example with a real-life example and
I hope you find your answer here and then if you find this video useful
consider subscribing a look at the other contents of this channel so let’s get to
it let’s get a story so synchronous versus asynchronous clients by example
so notice that I added the word clients yarns this is very important this
synchronous and asynchronous e is a property of the client the front and the
front end is a synchronous or asynchronous right the server can be
asynchronous or synchronous as well but we’re gonna discuss that in another
video hopefully but let’s get to it right so that’s the first thing so what
is synchronous or what is the difference between synchronous asynchronous clients
Oh pretty sure you heard about that but in in a nutshell a synchronous client is
if I make a function call or if I made a method call whether this is a network
call or is it local call or a server fetching something if I decided as a
client as a front it to wait and tell I got a result back from the server or
from that method or from that function then I am acting as a synchronous client
so it’s like you know what it’s like I’m gonna go ahead and call this function
and I’m just gonna sit down here as a function or or another method I’m just
gonna sit down here I’m gonna wait for you I’m not gonna do anything I can’t
really move to the rest of the code the below me until I receive an answer from
this function that so that’s in a nutshell a synchronous at
synchronous clients right and the other an asynchronous client is when you when
you make a request and you say you know what this is a request and whatever you
ready whether you failed or success just call
this function I’m gonna give you a handle I’m gonna give you a call back
code and called call back and they’ll just call this function when you’re
ready let me let me go do my thing I have a lot of things to do I have a lot
of code to execute right so I’m gonna go ahead and execute it but I’m gonna call
you first and then just go ahead and execute I don’t wait so asynchronous
never Waits and anything resin wait for a call to come back in order to execute
the rest of that code so that’s just in a nutshell so there are advantages and
disadvantage of both and we’re gonna explain that in the next minute or so
alright so let’s start with asynchronous examples as synchro example what what
I’m gonna take an is-8 as an example here is a our friends here on YouTube
right so I’m gonna upload a video so that’s the concept here so I’m you’re
gonna use YouTube as it’s a very good example here so my little app your web
application or desktop application uploads a video that’s what it does
right so you specify the title you specify description I forgot to specify
the actual video right so let’s assume there is like a browse button where you
actually pick your mp4 video whatever and then you hit upload
so that’s your application and let’s say this is written in a synchronous way so
what how will it behave if it’s written in a synchronous way this is what you
get all right you will hit upload and that’s it your screen will be blocked
you cannot do anything you cannot you cannot just change the title sorry you
just say upload you have to wait you can’t do anything my thread my process
is busy doing your thing and what is it doing it’s calling a function and it’s
waiting right and so you can see out and everything is grayed out it means
it’s disabled essentially right so let’s take a look at the code here so that’s
the that’s the call and that’s the method I called when I had upload button
button so upload I’m gonna print uploading this is also synchronous call
and then you go and upload video and guess what I’m guys I’m gonna get stuck
here I’m just gonna wait and wait and wait and wait and wait and that thread
get executing that process it’s gonna freeze the UI so it’s a very bad user
experience as you can see right and the users can’t do anything just like gonna
wait once it’s done it’s gonna say okay I’m done success and it’s gonna tell you
whether that maybe it returns the video URL or whatever right so that’s a
synchronous example in a nutshell how it makes sense right so very so as you can
see benefits of this is let’s start with the benefits benefits very easy code I
can read it anyone can read it right just like you go from up to bottom print
uploading success you’re done right very simple very simple to read disadvantages
you’re blocking the UI users is not a very use good user experience maybe you
can get away with this ten years ago five years ago right wait when the web
is like you don’t mind anything I’ll just saw um I’m grateful that I have
internet I’m grateful that I have an app I built an app right but in these
smaller days like things are not very easy going right so that you get a grill
for any app you’ll write you have to be really good critiques users are very
good critiques and VC users of the recent era right so yeah
let’s move on asynchronous example so what is a nation for example so let’s
take the same application let’s say I hire some more really good asynchronous
author and programmer that he said you know what I don’t want my I want my
uploading I want to rewrite the Miss this application that we just upload my
video but I want to do in an asynchronous fashion let’s see what what
happens here so I’m gonna go ahead and upload
and guess what guess what the moment I hit upload what is that I got a URL back
wow that was fast but guess what my upload is not done yet it’s still
uploading but I got a URL back and that tells me that hey you know what you’re
ready go ahead and you can you’re unblocked you can go ahead and change
your title you can go ahead and change your description this works and you can
see if you work with YouTube or other uploading platform this is this is the
user experience today you can upload a video and you can still change the title
tags and do fancy stuff right because because of the asynchronous fashion
because of the asynchronous power that the user experience has right so that’s
that’s basically a difference between asynchronous and synchronous let’s take
a look at the code Oh suddenly now the code it looks doesn’t look at it so
simple does it right so there’s a function called upload
there is another function called low sixes Wow okay
I would guess if I click upload I’m gonna get a print uploading and then
upload video will basically take a function as an input which is basically
the callback function over JavaScript is this is much much better now it’s much
easier using the promises or even a weight and async async await is which
which acts like an asynchronous but it’s also acts like synchronous which is
which is really pretty cool design in the latest ACM is six so upload success
will be called only when upload video finish right so this is a very basic
example so it’s gonna be more complex than that so there there there will be a
you know what I should have returned the V here and actually I should have
printed the V which is actually the URL so upload video in this case what it
does is immediately write a quick record say say no give me a give me an ID for
this video I just want an ID don’t upload the video yet just give me an
idea to return the ID which is the URL and then you can just made
we printed so it’s still a synchronous call
it’s a synchronous call but it’s a very quick asynchronous call right it’s just
like the server still synchronous if you think about it right but it just
immediately gives me the result and then V is basically the video URL here which
we saw in the princi previous this right and that but if you think about it
upload videos still doing some churning in the backend it’s just there is a
thread executing and doing its thing right but the but however there you I
his unblocked so this is the in a nutshell this is the difference between
synchronous and asynchronous guys hope you enjoyed this video if you have any
questions put them in the comments below and what what do you think what is your
favorite mode of programming do you like synchronous programming you’re like
asynchronous program nothing wrong but both right it is disadvantage and it is
an advantage for both right so advantage before this is obviously you unblocked V
it’s like opposite of synchronous right you unblock the UI you can do a lot of
other things but the hard thing of this which becomes really easier these days
with the modern programming languages is it’s essentially the yeah it’s hard to
understand it’s a little harder now it’s becoming much and much easier with
especially JavaScript become really cool with with the asynchronous features like
a weight and an async features guys that’s it for me today hope you enjoy
this video if you enjoyed this video give it a like and subscribe if you want
to enjoy more software engineering videos in this channel to become a
better software engineer just shoot me an email my details are in the
description below and I’m gonna see you in the next one have a good day

20 thoughts on “Synchronous vs Asynchronous Applications (Explained by Example)

  1. Thank you so much for the 10K 🤩Here are few jump codes
    Introduction: 0:00
    Synchronous definition: 1:25
    Asynchronous definition: 2:20
    Synchronous Example: 3:10
    Asynchronous Example: 6:15

  2. Thank you for creating this, it's a very simple and straight forward explanation with good example. Constructive feedback: Cut down the beginning and end to 20s rather than (1min +).

  3. Hello, I have a question, Would you consider Uploading videos on Instagram is also Asynchronous? because when you upload a video Instagram, you can browse the app while the video is uploading. Did I get that right?

  4. Hey I am confused that async call uses threading(i know it doesn't but) because for it to callback a success function it needs to work somewhere in the background and how does it show the percentage without creating a thread

Leave a Reply

Your email address will not be published. Required fields are marked *