 Oh, yeah, yeah. Thank you. I'm going to take a look at it. Hello. Oh, so they won't be able to hear it, so the mic is just for the laptop. Okay, okay. Oh, hello everybody. Yeah, thank you for coming here today. So, can you actually see what is behind me? Okay, so I'm Phat Pee Hoang. Just call me Harry. And currently, I'm a front-end developer as I go motion. And today, because it is Singapore ZS, so I'm going to talk about the JavaScript, a synchronous code. So, the agenda of this talk is how we're going to deal with a synchronous code in JavaScript. So, how many people in here know about code back in JavaScript? Can you raise your hand? How many people know about promise button in JavaScript? And how many people know about a scene away? Okay, so that should be fine. Yeah. Okay, so why we need a synchronous code in JavaScript? Because JavaScript is a single thread language. It means it only gets a single code stack, and it can only do one thing at one time. So, because of that, if you do make too much things in JavaScript, it's going to block the browser, and it's going to hang the browser, and at the result, we've got a very lucky UI. So, for example, I will just run a little in-nose code in JavaScript. You see, it's a really simple five-potency, and for a value like 20, it should be five. But let's say if I increase it to 42... Oh, sorry. 42, it's going to hang the browser you see here. Because JavaScript is only a single thread. So, in that case, let's say if we do it not a synchronous, when we try to call a request in HTTP, or load the image, it's going to block the thread, and the user gets a very bad user experience because everything is blocked. That's why we have to make a synchronous code in JavaScript, and to do that, we have to use callback, and that's either easiest way to make a synchronous code in JavaScript. So, it's an innocent callback. So, I guess many people know about callback already, so I just try to repeat it again. In JavaScript, function is our first-class object, so function is also an object, and then a function can be passed as an argument to another function, and the passed argument can later be skewed. So, the sample code is this one. It's a really easy Z-wary. So, let's say the document is ready, it takes in a callback, it is a function, and when you click on a button, it also takes another callback, and this one is a guess reason. So, when we try to make a code request to a network, we're going to make a callback after the data is returned. So, it's not going to block the JavaScript thread, and I make a simple one with Z-wary. So, when you click this button, it's going to call JavaScript and get a gift of the cache, and the code is a symbol we call the JavaScript gate, and on the callback, when we got the data, we make the callback to the image URL, and then in here, we just set the attribute to the URL. And in this way, you see, while I click on this one, the URL will not block it with the callback. So, the callback shows the problem with a synchronous call, but why we don't use this? Because of the reason. It's called the callback hell, because when you try to do the callback and you want to continue sequentially, you have to wait for the first thing to be done, and you get put in another callback, and if you put many callbacks, you got something called callback hell, and it's really horrible not from the code point of view, but when you try to debug it, when you try to debug or when you try to lock something, and when you try to cut the errors, it looks very tedious. So, I got another example. This is a callback hell. So, let's say in my case, I don't want to just load one cat, but I want to load one cat, one dog and one fish, and sequentially. So, you see here, if I want to do it sequentially, here you can see over here, the code looks a little horrible. I have to put a callback here, and after I find the image of the dog, I have to put another callback, and after I set it, I have to put another callback when I get the fish, and later if we want to do something like set interval, we got more callback, and in this code, I haven't checked the case where the network erodes, or we got some exception in the code, but it already looks a little complex and very difficult to read. That's why. So, that is the downside of callback. It makes the code really difficult to maintain and to debug, and the next thing with the callback is sometimes we don't use the function name, but we just use inline function, like this one. And when we got a rotten exception, if we read the log, it will be really hard to know what is the exception and where it comes from. So, that is the reason why we move to the next stage, I mean the promise. So promise is just a pattern, and the pattern is so some of the problem of the callback, and so a promise is an object. So instead of a callback with return and promise, and the promise is to represent the result of an asynchronous operation. So a promise can get three stage pending, fulfilled and rejected. So it will be easier if I show it in the code, so you can see. So let's say instead of a callback, I return a promise and a promise. When it first created, it got the stage pending, and when we call the result here, it stays trying to resolve it, and when we reject it by some errors, it will become rejected. So what is the point of using the promise? So I want to try to make the old code but with different kind of styling. So this one. So instead of callback, now I return a promise, and the first you see here, for the function, I don't need to put in a callback anymore. So let's compare the new function with the old function. So with the old function, I need to put in a callback in the parameter, but now while writing using promise, I don't need to put in a callback anymore, and what I return, I return a promise. So in this case, the first one I return a promise, and after the promise is solved, I'm going to get the result and then put it in the image. So the code assemble like this one. And the good thing with promise is we can change the code. So you see here, if we got some result, if we got some errors during the code, we can cast the error in the console log here, and the promise, it got the function 10 and cast. And the problem, the promise, so when we want to make a sequential code, it is really easy because the promise can be changed. So let's say I can make a promise here, and the result of this promise will be, when we return this one, this will become the result of the next promise. So for example, yes, another code. You see here, now we don't have the code back anymore because this function can be changed from the last promise and from the last promise. So if I run this one, we can see it runs sequentially. But now, even if we add more, we just add the code. It looks cleaner because they are all in the same indent. So the other reason why using the promise is we got the cast here. So we can change many functions, but if in one promise, we got an error, the error will be in the cast statement here. So when we read the error message, we can know which promise returned the error and it makes the error handling easier too. So this one, before we use the code back, we got the code back here. And when we do the promise, with the code, it looks easier to read and it can be easy to cut the error too. But still, somebody might say, what if I want to make many codes at the same time? So promise, it provides some function code from its own and what this function do is it's gonna try to run three function codes at the same time and when all three function codes are finished, it's gonna be resolved and turned into one promise. So another example. So in this case, the code is not sequentially, but it's a parallel. So you see here, I try to make three codes with doc, cast and fix at the same time. We can see the next work tab. So you see here, we make three at the same time and when we got the result, the promise gonna be resolved into this. Yep. We can reload again. So, yeah, this is the assemble code and when I click this one, it's gonna make three at the same time and we got another image. Okay. So, this is just my experience. Some of my friends already use promise but they make some peaceful like this. So instead of changing the promise, we use the code back in the den. That's why we got the promise hell and it's the same as the code back hell. So if you make it erotically, return the promise and change it properly, don't use this kind of code back and the den function. And another one, at the first time when promise is released, we don't use the cast, but for the den, we can got some function code result. This function will be called when the promise is fulfilled and the reject here, it's gonna be called when the promise is rejected. But if we use quite a lot of code like this, in some case where we got some erot in this function, this cannot be cast. We have to add another code cross here so it will cast the erot in the den function. So, because at the first, I know that everybody already know about promise and code back, so the next one to write why will you promise? Because next we will talk about a sin away and promise, a sin away is based on promise. So you need to have a good understanding on promise to use a sin away. So this is the reason why will you promise? It makes the code more clean. So we don't actually need to put in the code back anymore and the function will be easier to write to test and for chaining up promise, we don't have the code back here anymore. So the next thing need to mess it up a sin away. So why I call it mess it? Because if you read the property, each change function return promise and if they were synchronous. So the thing need we are making, we are writing a synchronous code but the code look like synchronous. So just come back to the code. I have changed nothing but now you see here the code look like I will try to find an image for the cache and then set it to an image. And the code look synchronous it means I'm going to wait for this and I'm going to do this after I got the image. But this code will not block the browser at all. So if we do it like this one. So I'm going to wait. It means this one is still return a promise but with a sin away. It will choose this one as the synchronous function. So yep another cat. Okay so this one is either call back hell and now if we do it with a sin and away we get the code for sequentially with a call away away away. We don't need any way call back or any then any cache promise. And error handling in a way, a sin away is really simple. You put it in the try tag and during the synchronous call here if we got any errors it's going to throw an exception and we can show an exception here. So if we want to write the code sequentially with it away it's called and if we want to make parallel code it treat the promise as an object so we await for the promise on here. So yeah so to make it easy I prepare more demo. So this one, yep the first one let's compare this one it's gonna get the image of the cast image of the dog and the fish and it is sequentially but it doesn't block the UI as own so if we check the network here it's gonna check the, yep you see it doesn't block the UI because own the code are a synchronous code but with a sin away it looks like a synchronous code so it makes our code really easier and cleaner and what if we want to make parallel code is it the same we make instead of code from its own then we just await the promise. So this one, yep we make three code at the same time and now we got pocket and the last one is the loop this is really interesting because even with promise and code back it's really hard to write the code for the loop so let's say if you have one to write a loop with from it you have to do then and then assign a new from it with another dance but in here I can make a simple code like this so before when you set time out you will need to put in a code back but I change it to from it so now when we set time out it's gonna return the from it and it will be so after the time we specify and now so the code here is gonna run for five time and we gonna get an image add an image to the, assign image to the HTML so I'm gonna, so you can read the code first so you see here all the code here because I don't use away so it's actually a synchronous so if I click this one you can see we can read the begin, run, dog, run, cat run because these two functions it do not block so we got this one first and in here I use away so after they run on the loop it's gonna run on the loop finish yeah so with assign away we can miss the synchronous and synchronous code and it look really clean and simple but the trade off so everything look synchronous but assign away key work is only available in an assign function so let's say if I don't, if I remove this one we gonna get a syntax error because it is a normal function and they don't understand what an away so I have to add the assign key work and assign key work here let's say if I return some function return the value this one is gonna return a promise so we can actually see it let's say assign test this one is not gonna return five but it gonna return a promise so I'm gonna try to see okay assign function okay here is not a promise and we have to wait for the promise to be resolved yeah that mean if we assign away in one playoff or code I mean later or sooner we have to put assign away in every place but it's a trade off and we have no more code back no more there, no more cast and it look synchronous code so it really clean and easier to debug so just come back to this one let's say for the see went only here we can easily put a debug in here to check it is the right one so I can try put a debug here and run it so we see I can already get the code it look really like synchronous code hmm oh something oh sorry because I still keep the debug in running okay yeah but one of the problem with assign away isn't support in own browser so if you go to KNIU you can see it isn't support in IE in the old version of S and in Opera Mini so what should we do in this situation we can use PayPal Transpiler and yeah it can transpile into ES5 and it's gonna put in some polyfill for generator so the code will be able to run in IE and S but the trade off is the code might get a little bigger because people gonna add in some plug in and if you want to know what assign away do behind the scene don't think it matters it's just some kind of it's gonna transpile into some kind of like stain machine yeah it's quite complicated so I'm not gonna go into detail but you can try to read the code and they said later so looking back so from the first I observe a script we have a code a long way for asynchronous code before we use code back then Angular appear and we begin to move to promise and now everybody know what is promise and we can move to assign away but still we cannot remove code back completely because we see you code back for event and subscribe and unsubscribe so my advice you assign away if possible so if your job you don't have to support own browser like IE6 or IEA so if you can just develop application for Chrome or Node.js 7 or Apple feel free to you assign away but you should have a good understanding and promise and one of the combo I like to you if anybody here write code in use Node.js yeah so sum up the function in Node.js they use the code back model like it's gonna code succeed a lot when it's finish getting the file so we can use the blue button to promise this one and it's gonna become a promise and then if we combine with assign away we got on the code look a synchronous but actually we got the benefit of a synchronous code so yeah that is so thank you for listening and so if everybody here any questions wait for whole session seem to be doing Ajax course yeah just share some of production so we use this production in the level so one tricky part we realize is sometimes developers forget to wait before the function so it becomes executing as asynchronous call when you go to debug you'll find out oh we have it before the error function why my code is still asynchronous cause we forget to put away that's why maybe tricky part doing that but overall it's still good and one thing all of the all of the T9 demo is on the web but asynchronous is available for Node.js version 7 and a bow so if you Node.js you can begin to assign away any more questions if you don't by doing promise because I want to debug at the time of one point of time to another another asynchronous so I don't understand your question so can you repeat your question suppose I do multiple tasks promise different promise when I debug at one point of time I want to debug the other part of code after that I mean to be honest you have to run after that one because JavaScript is single trace so let's say even if you got many code so some will be before the order so after that one you cannot switch you have to run that function and bug the debuger for another function comment about you are trying like doing parallel program so some of involves like testing in terms of like parallel programming testing can get a bit tricky at this point especially because you cannot even predict whether the actual sequence that will happen takes place during when you are actually running the program okay so I guess that should be enough thank you