 you know, there is some responsibility, some focus that, you know, some things that we have to do to make sure that our applications are form reality, for example, when we optimize fashion on these new, you know, for example, this machine is a dual core. Dual core seems very, you know, it's like the order of the day today. So, that means, you know, that has an implication on JavaScript as well, right. So, how do you write JavaScript code which can, you know, leverage the modern generation, the new hardware better. You know, fast fluid interfaces are absolutely critical today, right. Nobody wants to look at the applications of, you know, maybe five years ago, right. So, we want, you know, applications that respond to creating JavaScript code which can provide that compelling user experience is very, very critical. There we go. So, you know, ideally, you know, we should be able to delegate IO intensive and CPU intensive tasks to additional cores, probably not IO. IO can be done asynchronously, but at least CPU intensive task and we should be able to leverage additional cores and additional CPUs and so on. So, that's why async is important in the general sense, right. With JavaScript in particular, you know, what are some of the challenges when we are working with async code. Asynchronous code has this funny, you know, handling errors is extremely hard to do. The callback is, you know, it's very easy for us to try and adapt, you know, to code there and, you know, have one set of features that we can handle. That is not possible to do with callback. You would have to have a site that's pretty much invisible callback to have. It just makes the code really messy. And, you know, callback madness is something that's very, you know, very frequently it happens, right. You know, you do job one, job one gives you a callback and in response to that you want to do job two and that gives you a callback in response to that, you know. So, has anybody worked with index DB here, index DB HTML5 spec? Okay. So, you know, if you look at the index DB spec, that's like really, you know, it's like the extreme case of callbacks. You know, everything is a callback there, which is, you know, which makes sense because, you know, you're working with the database, everything is an IO operation. It doesn't make sense to block a UI thread. Therefore, you know, everything has to be a callback, but as a developer that makes your life really, really difficult. If we have time, which I doubt, I'll show you a little bit of, you know, index DB code to iterate through the records in an object store, which is the equivalent of a table. It's like, you know, unbelievably complicated. So, let's look at, you know, a couple of approaches. In fact, this is not a new concept. So, you know, folks who have used CommonJS and 1.5 onwards, you know, these libraries shipped with promises, they might use different names. For example, in jQuery, it's called as a deferred callback. In fact, internally, they use the term promise itself. CommonJS uses promises. So, we'll see what that is. In fact, most of the session is just going to be demos. So, let's straight away go and, you know, take a look at promises. Maybe what we'll do is we'll build a very simple, you know, promises framework and see how we can work with that. So, I'll just create a very, you know, let me just put that into... Maybe I'll call this promises 101, right? So, it's an empty web application. There's nothing in it. So, I'll go, you know, add a... Maybe I'll create a folder where I'll put my scripts there. So, I'll say, add new item. So, I'm going to call this promise.js, all right? So, a promise, you know, it's like a magic trick, right? So, when the magician shows it on stage, it looks like amazing. Wow, how did he do that? When he tells you what actually is the under the covers, it's like, what? That's it, right? So, it's the same thing happens here. When you look at the, you know, how promises work, it's like, it's like no big deal at all. So, basically how... Or let me show you how a promise is used first. So, I have a project here where... Let's see. So, this is basically a page. Hopefully, the internet connection is working. I'll just show you what it does. I have a data card connected here. Maybe it'll work, I don't know, if you're lucky. Great, works. So, basically what it does is it goes to Twitter, gets the, you know, top, the recent 10 tweets which have been tagged with JS2, right? So, these are some of the tweets that are happening right now. JS2 is so pretty awesome. So, great, people are liking it. So, if you look at the code for this, right? That's it. So, what I'm doing here is basically I have a very regular table here. I'm using jQuery templates to do the, you know, basically a client-side templating to... Oh, yes. Thank you. Forgot to do that. So, basically it's a regular table. I just populate that with the tweets. So, the code for getting the tweets is... That's it, right? So, what I'm doing here is there is this object called tweets. I'll show you what that object does. I have a method called get, and then I say then, and I pass a callback here. So, then is basically, you know, a method that encapsulates a continuation, right? If you're familiar with functional programming, a continuation is basically an object which represents a callback, right? So, basically what we're doing here is you're saying tweets.get. Basically, you know, it's a fluent API, right? So, you can say some object dot, some method dot, some method dot, and so on. And you can keep going like that. So, for example, here what I'm saying is I'm calling this API called tweets.get. I'm saying then, you know, run this function. And here, basically, I just get the data and apply the jQuery template and, you know, just goes into that table. Interestingly, you know, it gives you a very clean way of doing error handling as well, right? So, if you have, if something goes wrong, you know, you basically, you pass another, another function, a callback, which basically gets invoked if something goes wrong while invoking that particular tweet. Now, let's suppose that we want to do something more than that, right? So, we want to sequence this. We want to say, go get the top 10 tweets and then you want to do some processing. Maybe I want to store it in a database or I want to do some analysis on it, right? So, basically, how promises work is they compose, right? So, I can say then, and then I can keep going like that. So, I can say then, you know, go do this and then I can say then, you know, function, you know, go do something else and so on and so forth. So, basically, if you, you know, this style of programming kind of really, really helps when you are doing, you know, extremely, you know, asynchronous APIs. You're doing extremely asynchronous APIs. For example, when you're dealing with something like index DB or if you're doing Ajax calls as we are doing in this case, then it really kind of helps. So, if you take a look at the tweet.js file here, it's a, you know, that's it. That's all it does. So, what's happening here is basically, all this is the Twitter stuff. The interesting thing is over this, right? So, I create an object called promise here and what I'm returning from get is that promise instance, right? I'm not returning the data. I'm not doing anything because the data is going to come sometime in the future, right? And I'm returning an object which represents the continuation, which represents what is going to happen in the future. And here I basically use jQuery to do the actual call. So, make a JSONP call and the interesting things again are here. In the error and the success callback for Ajax, what I'm doing is I'm saying promise.resolve in case it goes fine, right? Again, this API doesn't care who is listening to or what's going to happen subsequently when the data has come. This is like the, you know, a clear separation of that, right? When I, I'm just dealing with the promise object, the API. The API simply says I'm done. I call reserve, resolve. Whoever is, if you are familiar design patterns, you might be familiar with, you know, this is basically an observer-observable pattern, right? In fact, we'll see that there are commonalities when we talk about RxJs as well, where the observer pattern, you know, plays a big role. So, that's what happens here. And in case of error, it's just a different signal, right? Here we say if something goes wrong, I say error and then the correct callback gets invoked. So, this is the idea behind promises. And now actually it's directed this particular way of, you know, doing asynchronous development is directly supported in JQuery. So, for instance, I can actually do away with this completely. So, this is a promise object that I have implemented. Instead, what I can do is I can simply say return $.ajax. So, I hope I have included the right versions. I have 1.6. So, this is supported from 1.5 and up. So, this actually returns a promise. For backward compatibility reasons, it also returns whatever, you know, you have all the APIs that you are used to having even before 1.5, like error, success, Ajax. I mean, all the regular JavaScript APIs are available. In addition, this is a promise as well. Yeah. Yes. In case of error, okay. This won't get called. No. Because the error actually ends that particular thing, right? So, in that case, it won't get called. So, what you can do is in this case, the error handling happens. And then let's assume that this was successful and then, you know, something went wrong here as a second optional argument. I can pass an error handler for the second asynchronous call and so forth. So, yeah, so I can simply do this and, you know, this code should exactly work as is or perhaps not. The reason is I've used my promise here, right? So, actually what I have to do is I have to create, in fact, let me not try to debug this online. I have a few snippets here that I have kept just for this case. There you go. It's supposed to create a... It's very similar code, right? So, instead of this, what I can do is I can say new jQuery.deferred and then instead of error, they call it reject and resolve is actually exactly the same. So, that's the jQuery version of it. So, you know, the exact thing works. So, basically, you know, just different syntax, right? So, I had used promise in jQuery. You say new jQuery.deferred. That's the only difference. But let's see what this promise actually looks like. So, let's go back to our promises 101. It's very, very straightforward, right? So, if I implement a promise object, so the idea is, or let's say, let's do this function that and yeah, yeah, yeah. Keep reminding me till it's like hammered into my brain. This dot... So, you can simply say this dot resolve or let's call it onResolve or something is null, this dot onError is this and then I can basically go and add stuff to the prototypes, right? I can say prototype.then equals function resolveError. So, those are two callbacks that I, you know, can receive here. So, in here, what I can typically do is I can simply say, you know, probably I'll also add promise.prototype.resolve equals function and promise.prototype.what is that? Error equals function. I guess I'll need the error here. I'll need the value here, right? And here all I need to do is I can simply say if this dot onResolve, I simply say this dot, whoops, this dot onResolve of v, right? And very similar code goes here. So, if the user has passed onError, then I simply say this dot, whoops, this dot onError of e, right? And then all I do is I simply say this dot onResolve equals that, this dot onError equals that. So, this is a very, you know, simplistic implementation of the promise, but you can kind of get an idea of what's really happening, right? So, when I write code like, you know, tweets.get.then or function, something, something, basically when I pass this, you can see what is happening. So, tweets.get is actually returning me a promise object. And in then, basically the internal onResolve gets assigned there. And subsequently when the, you know, when the Ajax response comes back, I call resolve, right? From the, we are the closure, I call resolve on the promise object. So, it's no black magic, right? So, when I call resolve, it sees it is there, it calls this and this particular callback gets invoked, right? It's really, really straightforward. Now, the only thing, additional thing that we do is, you know, to support chaining, right? So, this is basically, I can say then and that's it. I can't change it to the next then, right? So, one additional thing that you can do is, you can actually return another promise from here. So, I can say var new equals promise. So, I'll slightly change the implementation because I need to do something in response to, in response to resolve. So, I'll put that particular if check here. So, if I say, if this dot onError, I mean, sorry, onResolve, then great. Go and call onResolve on that. I guess I'll need the value here. And then, I'll also say promise.resolve, right? And then, I'll do likewise for this. Imagine that I just did all that. You know, I just did of E, if this dot onError, then this dot onError of this and promise.Error. And here I'll simply return promise. So, this is exactly the code that we did in tweets.get, right? It's nothing different. All I have done is, and then I've taken the code there and I've basically extended the idea to the next level. So, inside then, I create yet another promise and return that from then. The worst case that can happen is, you might create one extra promise object which never gets used. So, if you, if you, let's go back to our tweet solution. If you go here. So, I have tweets.then, right? So, then in turn, gives me a promise object. So, just as get return me a promise, then returns another promise. Therefore, that is why I'm able to do .then again. So, in fact, so this is the running code. So, with all the, you know, proper validation and everything. So, basically, you can see the exactly same things. I have resolved error. You know, promise.put it up then. I have onResolve onError. So, in this.resolve, I create my own handler because I need to do a chain invoke of another promise. Right? So, here I make that call to the, to the subsequent, you know, next object in the chain like this. And it keeps going, right? If I say another then, then it just works. Yes. So, that is right down here. So, when I say resolve, it basically calls this.resolve.call. So, in this case, this.resolve refers to my internal function here because that's what I have assigned to, right? This.resolve, I have said this function. That's what this is going to call. When the, so let's say, tweets.getCalls, promise.resolve, this.resolve is going to get called. My internal function is going to get called. Here, I'll just, you know, delegate that to the actual onResolve, which is the callback that the user supplies, and then I just chain it to the next one. If you are, if you, you know, if this seems a little confusing, what we can do is we can just, see, this is the problem with JavaScript. It's already 12.10. So, I'll just very quickly do a debugging here and show you what's going on. So, I'll put f9 here and just refresh the page. So, there we go. We hit that breakpoint. Now, if I say f11, we go into tweets.get. So, that's fine. I'll put a breakpoint here. So, f10, f10, you know, oops, wrong library. I think I'll have to go back to our promise object. So, that, this should be error, and everything else should just work. So, f12, script. I'm sorry if this is small. I don't think I have zoom here. So, what do you know? This is a JavaScript session and a night test field. So, I'll just refresh this. So, I'll say f11. So, I create the promise here. Nothing, you know, major. So, I'll put a breakpoint in the callback from my Ajax call. Sorry? Oh, yeah. Correct. Thank you. And I'll do that. And then we go back. And now, then it's going to get called right now, right? The callback is going to come sometime in the future, but then it's getting called right now. So, what did I just do? Yeah, I'm returning the promise. You know what? I'm just checking if you guys are paying attention. Looks like you are. At least one gentleman is. All right. So, nice. Remember the breakpoints. So, do we have everything? Yep. So, I'll just refresh the page. Hopefully, we'll get it right this time. So, I'll just come out of there. Now, I will go into then. So, basically, I create this, right? So, I'll put on a breakpoint there. And then let's just hit f5. So, basically, the success is, you know, the Ajax thing came back. We call resolve. Now, we come here. We go inside. So, you can see that this internal function is getting invoked. And we indeed do have an unresolved handler. So, I go there. Now, this is the handler that the user supplied. So, I do my jQuery template thing and, you know, put it on the user interface. And then here, you know, the next change resolve gets invoked. It goes back to resolve. You know, it's like it's a re-entrant call. And then, so now you can see that the next then got invoked after that, right? The change call happened. Obviously, I'm not doing anything there. So, that's basically the idea. So, yeah. So, we're already way past. I wanted to spend 15 minutes on promises and then jump into RxJS. I've taken 30 minutes. So, because RxJS is much more interesting. Let's quickly review what is RxJS. We have shifts with support for the real power of RxJS is in how it allows you to compose asynchronous operations in creative ways. So, we see there's a notion of a combination here which allows you to do this composition, right? I know that that sounds very confusing. But this is the basic fundamental idea behind all these asynchronous sources of information that you want to do. So, that's why I'm basically using RxJS. As we, you know, some of the demos that are not utilizing the source are just to make it easier. And it's a synchronous data from the asynchronous static data source which I used to, you know, build data in my pipeline. But the idea is there are objects which can be observed. And there are other objects which are interested in the things that are observable in RxJS, right? So, are observable in RxJS. So, it's very simple. RxJS has an observable object which is a class of an event source and that can modify stuff to are an impressionist. The idea of observer subscribes to is the observable that I use and impression in getting an image from you to give you an image, right? And whenever the interesting image happens it makes the following an observer and your code runs at that point. So, that's all the, all the PPT I have. So, let's quickly take a look at it. So, what I'm going to do is I have a little cheat sheet here which I'm going to, so this is my demo script. I wrote this so that I don't forget stuff. So, I have written a little eval console. In fact, that's not what I wanted to do. I have it hosted locally. I'll go to that one. So, basically this is a, let me just hide this toolbar here. Okay. You know, this is basically very, let me just quickly tell you what it does. I can type JavaScript. I can hit control enter and it'll run the JavaScript, right? So, I can, for example, say alert jsfoo, right? I hit control enter, it runs it. But instead of alert, you know, I have a console.log. I have a, you know, convenient function here. If I do, it'll basically print it on the right. You know, if I make errors, then it basically, the errors show up on the bottom right. So, that's what it does. There are some convenience functions here which I'll talk about as we get there. Maybe what I'll do is I'll zoom in a little bit. I know the error window doesn't show, but hopefully I won't make errors. There's one convenient function called clear which will clear the log and all that stuff. So, basically what I've done is, let me show you the source for this page. Rxjs, like any other js library, you know, just a bunch of js files, I just included two script SRCs here, right? So, I've downloaded the js, hosted it in my website and I've included it, rx.js, rx.html.js. So, I'm not using support for jQuery and all. So, basically, you know, this is the root js file that you have to include. And then, depending on what other support you want, there are additional modules that you can include as needed. So, if you want support for jQuery, then there is rx.jQuery.js, rx.dojo.js, and so on and so forth. So, basically, we can, you know, experiment with... You know, in this console window, we'll try to explore the rx framework. So, we talked about observables and observers, right? So, let's see how we can go ahead and create one. So, for example, I can say observer equals rx... Sorry, observable equals rx.observable.create and basically, I pass a callback to it. Now, the idea is this particular function is going to be responsible for raising the events. Whenever, whatever that event is, whatever that interesting event is, this function is responsible for raising that. It accepts one parameter, which is basically the observer, right? Who is the object that's interested in receiving the events that I'm going to raise? So, this is the simplest observable observer example that you're probably ever going to see. I'm simply going to say observer.onNext of, I don't know, 10. And I'm going to say observer.onCompleted and then I'm going to return a function from here. So, I'll tell you what all these pieces are. Let's go ahead and create an observer. So, I'll say varObserver equals, right? In fact, let me do it this way. I'll say observable.subscribe and pass an observer as a parameter here. And I'll say that is my value. And what I'll do here is I'll simply say print... I don't know, print value equals... So, one convenience function I have is... So, I started my career with C++. I love my sprintf. So, I got an sprintf port here. So, I can do something like value equals percentage d, v. So, when I run it, it prints value equals 10. So, what exactly happened here? So, as soon as I subscribed an observer, the whole process got kick-started. The observable got fired and this particular function got invoked and onNext is getting called. So, basically an observer is very simple. It has three methods on it. So, I get these terms... An observer is an object which has three methods on it. OnNext, onCompleted and onError, right? So, actually instead of giving it like this, I could have passed an object here. So, this is the common JavaScript options syntax, right? You can pass all kinds of things. The API will do the correct thing. So, if I pass an object like this, I can say onNext and pass that particular function here. I can say onCompleted. I can pass the handler here. Or I can say onError and I can pass a handler here. So, this is an observer. So, subsequently when we see more complicated examples, you know, just you need to remember that an observer is just this, right? Just three methods on that particular object. So, what's happening here is when I call onNext, basically the onNext callback gets called, right? OnCompleted, onCompleted gets called. So, for example, I can say printCompleted here. Maybe here I'll say printError and, you know, it's all really, really straightforward. Now, what is this additional thing that I'm doing here? So, this is a very interesting pattern in RXJS. One common problem. So, here the idea is the addObserver API will return an object which can be used to dispose or disconnect the connection. That's the idea. So, for example, here the idea is I can do cleanup here. So, I can say printDispose, okay? So, now if I run this, let me put a clear at the top so that we get a... So, when you run this, you say value equals 10, you get completed, and then you get disposed, right? So, who's calling dispose and all that? The RX framework is taking care of doing that, right? So, this particular, you know, observable sequence has completely executed. The onCompleted got fired. Now it can be discarded. Therefore, it calls this particular function to do cleanup. So, you know, it depends. Like, this is a completely useless observable where I don't do anything. But imagine that, you know, you might have allocated some resources here, right? You might have, I don't know, opened a connection to your indexDB. So, this is a good place to close it. So, that's the idea. So, this is the most basic example of, you know, how you can use observable and you can create an observer, and then you can hook them up and do interesting things with that. Now, the RX library ships with a bunch of, you know, useful so I'll just get rid of maybe not all of it. Let's see. But this is how you can do it if you want to create your own observer. So, there is one helper API like this. You can say return of 10. So, if I run this, you know, the exact same thing happens. My observer code doesn't change. Basically, you know, this is just a convenience routine which is exactly what we just did. So, it will simply say observer.onNext and it will pass the value that I pass here, right? So, nothing fancy. So, there are a few, you know, helper like this. For example, I can say range of 1, 10, right? So, here you can see that in this case what happened was it basically iterated from 1 through 10 and invoked my onNext in response to that, right? Again, I know, you know, are you guys thinking, okay, great. So, you've done, count it from 1 to 10. You know, not very impressive. Hopefully, as we keep going, you'll probably get to appreciate it. Another useful thing that I find that you can do with this is you can say from array and you can pass in an array. For example, I can say, you know, pass a bunch of numbers and if I do that, then it basically trades to that array and invokes your observer. Now, you can do stuff like this, right? So, let's say I have 1, 2, 3, 4, I don't know, 5, 6, 7, 8. Imagine that, you know, I'm interested only in, so this 1 to 10 that I've put, I've hard coded it here, but imagine that this is some event source which is coming from somewhere, okay? So, maybe it's coming from a web service call that you're making, right? You're making an Ajax call to some, you know, some service online that returns the data and now you can compose on top of this. So, for example, I can say, you know, for example, I can say, I don't know, I can say where function of that, we put that there, I'll say return V percentage 3 is 0. So, now you can see that my observer code doesn't, you know, change at all, but you can see that only odd numbers are getting printed now, right? Because basically I have, you know, added a composition on top of the previous observable, right? So, what is getting returned here is, basically you can think of it like a pipeline, right? So, the initial from array gives an observable which iterates through the elements in the array and then there is a where which composes on top of that observable, right? And then it does something extra on top of that and, you know, you can do interesting things like that. For example, you know, you can do, I don't know, so dot select, you can project it into in different ways. I can say return V star V, right? Now, here you can see that I'm getting the square of all the numbers, so maybe I'll get rid of this filter. So, here you can see that, no, basically every number got squared and then, you know, you can, you know, as before I can say where and, you know, do additional operations on top of that and it goes on like that. In fact, let me just open the, sorry, myself I'm kind of new to the library but I'm so excited about it, because I want to talk to you guys about that. I'll just open the, there we go. So, this is the documentation for this, you know, it's very, very detailed documentation available. So, these are some of the combinators. So, the select where that we just explored, these are called as combinators and look at the list of combinators that are available, right? It's like a very, very exhaustive list of operations are there to do all kinds of things. So, we'll look at a couple of slightly non-trivial demos to see how you can creatively combine all this and do interesting things but there's a whole lot of stuff that you can do. Now, so far in this sample, I was just using static sources, right? Either I just created one number 10 or I go through an array and so on. Let's do, you know, something more real world. So, let's suppose that, you know, I want to, I want to, the even source for me is the mouse, okay? So, turns out there is an observable that you can create for that as well. You can save from HTML event. This takes two parameters. The first one is the element that you want to, you know, observe, I'll say document.body and the second parameter is what is the event. So, in this case, I'm interested in mouse move, right? Maybe here, what I'll do is I'll change this slightly. I'll say sprintf %d, %d. I'll say v.x, v.y, close that, close that and that should do it. So, I've run it. Now, when I move the mouse, you can see that it's getting printed on the right, right? So, what is happening here? Basically, the mouse itself has been, you know, abstracted as an observable, right? And now you can compose on top of that and all of your entire list of combinators can be applied here, right? So, there are some interesting combinators that you can apply. For instance, this is too much, right? This is too much of mouse coordinates. Maybe I'm not interested in, you know, getting so much of data. What I'll do is I'll just refresh the page, otherwise that event binding, maybe I can do a dispose, right? But let's do that some other time. So, I'll just refresh that page and I can do some interesting things. So, for example, I can say, I think I forgot the name of that API. Okay, let's try this one first. So, I can say delay of 5,000 milliseconds, okay? So, now I'll just run this. Now, for five seconds as I move the mouse, nothing shows up, right? And then it starts showing up, right? So, that's a very simple, you know, combinator. It might not seem like much, but kind of gives you an idea of the kind of things that you can do, right? Now, I'll just refresh that. There are more interesting things like that. For instance, I can do a sample. So, what I can do is I can say, you know, I don't want it so frequently, I want the coordinates to come only every 100 milliseconds, right? Now, if I run this, now as I move the mouse, you can see that the frequency is much lesser now, right? I don't get every single coordinate. It samples the coordinate every 100 milliseconds, right? And you can obviously give different values there. So, this is basically a concept called a debouncing, if you are in the funny term. But basically what it means is, I'm interested, basically it's a sampling. Sample is a great term, right? I just want to get the information at specified durations. Another thing that you can do, another thing that you can do is, you can throttle the event source. I can say throttle. Let me just make sure I get the thing right. So, you can say, let's try 500 milliseconds. I'll say that. Not quite the effect I was expecting. Right, so, wow. That's very slow. I was expecting it to be milliseconds, but it's not 500 seconds, either. Okay, I don't know what's going on. Sorry? Exactly. So, that's exactly what's happening. It enforces an interval between two mouse moves to be half a second here, right? Maybe if I try this. Good idea. We'll do that as well. Let's put this here. How shall we do this? What prev is date.now. Here I can say that. I can say date.now. Oops. Minus prev. prev equals date. I missed something, no? Oh, yeah, 45 minutes is done. Okay, so we'll just do this one thing and we're done. Yeah. So, some funny business. I don't know. So, that's one thing. I wanted to show you some additional interesting demos which does something more fancy than do this. But you get the idea. Thank you, guys. Hope it was useful.