YUI Library Open RoundTable, 24 Apr 2014

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: YUI In The Wild #10 with Marco Asbreuk on Using Promises in Mojito

Description

YUI Open Roundtable is a forum for all things YUI, javascript, and other front end technologies.

A

All right all right, everyone welcome to the next and the latest yui open round table. We are continuing our in the wild series with marco asbrook he's going to talk today about um promises in mojito.

A

um I have a just a brief um just want to take up brief things. uh We've kicked off the latest sprint for yy. The dates are posted on github.

A

If you go to the yy3 github repo and go to wiki and go to development schedule, you'll see uh sprint again april 22nd um code, freeze will be may the code freeze will be may 9th. With uh the pull request deadline on may 6th.

A

The commit freeze is may 16th which doesn't really affect you guys out in the community, because this is just an internal thing. After we've branched the the the code we have like a week or so or we can check in some changes and then um on may 20th, we should have stable release. So that's my public service announcement and uh let me see if anyone is coming online.

A

So uh marco um feel free to go ahead and start. We've got a couple. People watching so far and we've got um gerhard. I believe is also he's just not on a video he's watching as well, so feel free to go ahead and start.

B

All right good, good afternoon, everyone good evening: it's uh 11 p.m. Here in the netherlands, so I'm going to talk to you about how we are using promises and promises inside molito because great framework we use for our web applications and our promises are- are inside the gui library for a while now and we are using them inside we use this does not support promises.

B

Just it does support promises because it supports the gui library, but out of the box, it doesn't use promises that much but.

C

What's the application, can you describe what you're the app that you're using with mojito.

B

Yeah, the application we built several applications at the moment using needle and by far the largest, is the one that you saw in my previous hangout, and that is the one that that is presenting data of a lot of devices.

B

There are in the in-field devices to send the data to the server the server and stores them in the data into database, and this is the point where we very use the process, so we normally you, you have a library that can access the database, we have mysql databases and they all work with callbacks out of the box, and promises are really great. If you want to to batch and change requests, queries to the to the databases, is it the daisy chain? Is that what you said to watching?

B

um Excuse me: what did it say? I.

A

Said um you said something it's really great. If you want to what.

C

C

Simultaneous simultaneous queries. I see essie okay, so you're sending off.

A

A bunch at once, and then you wait for them all to come back.

B

Yes, they all call asynchronous and they all call simultaneous simultaneously, that's the great power of using promises, but we use promises of both on the server side and we use promises on the client side. So what I want to do, I will start sharing the project, a sample project, not the big one I was referring to, but the sample project that we made that I made for you and let me see, sharing the screen.

B

Yes, all right, this right, you can see my screen at the moment.

A

Yeah we can now, there was just a little bit of a delay, but now we can all right.

B

Now this is my my sample I made so if anyone should be interested for the code later on, you can you can show it, you can view it on kitab.

B

In kira.com, it's ashbrook mojito promise and this is project, but I will show you the real mojito project over here.

A

C

B

Now um I won't go too into much detail in in how mojito works, because that will be a very large truck. It's not the main goal of this presentation, so I hope for everyone watching who is watching that they are a bit familiar with me or anyway. There are other hangouts or open round tables that discuss mojito.

B

So, to start with, um we need to use this modules modules that will present. They can present a lot of things, but in this case it will present a pace here. We are.

D

I'm still lagging, I think, a little bit we're still seeing the github screen.

B

You do yeah, okay, that's not a good thing!.

D

It's got a bit of a lag, I think.

B

All right, let me see how I can if I can see what you can see.

B

Yes, all right.

A

Are you sharing, like your desktop or just a window.

B

No, I share my my desktop. I share my desktop.

A

Yeah, you might try like going out of it and coming back in maybe.

A

That's interesting all right.

A

All right now we're back.

B

Oh, I see there's this is great the hangout she has different screens all right now. You should see it. You see now uh the the mojito project yeah now I can see it yeah.

A

Oh okay, yeah, you can choose to share a screen or you can share a desktop so that maybe.

B

All right, this problem.

A

It's off this phone.

B

Yeah, that's, let's see the screen, then that's better.

A

No, oh, it just takes a second. Let's give it there. That's good.

B

You see the screen now yeah.

A

We're good okay.

B

All right so now I can switch whatever I want to all right. So this is the mojito project we made and.

A

Again, it's really small in terms of fonts, though, if you had a way to bump that phone up.

A

You may it may be that you can only do it for the view.

B

So yeah there you go. This is better right, yeah, a bit more all right. What you see here is is the home page, so the home page meteor is serving their own place through the view- and this is just this- is data that I will talk to you later- how it gets this data. There are two buttons on it and two hidden containers, so the.

B

If you go to the home page and you run it, you will see just like this and.

D

Again, if you can zoom in a bit that would help a lot just more than you think you should.

A

Yeah, that's perfect.

B

Yeah, all right now the buttons are rendered by the view and the first content is actually coming from a database. So that is just like how any content management system would work accessing data from a database and put it into your your page. So we go to the mojito view. If you see that here are the two buttons here are the two hidden containers I'll continue later and here's the content, and what the idea is is that the controller.

B

Is running right here, the controller does actually the the the next steps, it will call the model name and it will run here your the promise and the promise that it runs will return with the data and as soon as it gets the data you can hear the fulfilled promise or either. If you reject, if the promise gets rejected, you get a reject, rejected promise. So the data is normally.

B

Normally is data if you run it from retail, you get it like this I'll uncomment. It.

A

If you had a chance to make your font just a big a little bit bigger that'd be great. It's like right on the threshold like if I can't see it, it's probably hard for.

B

This is better.

A

Yeah, that's good! That's good!.

B

All right, normally mojito is accessing the model like this and it will use the callbacks, as you can see here,.

C

There's callback and it will match it's just still,.

A

Using the batchers this this one at a time.

A

So is this still used, it's still fetching it via a batch and it's waiting, or is it still it's just one at a time uh I I not did not understand you're right. Whatever did you expect you're talking about this is helpful with with that batching up requests. So is this this example this is this.

B

Is just one one: this is just one one request batching will be done later on. I will. I will show you how that is done, just an introduction. How the promises were. Is that normally we need to use this callbacks and what we made was here. You are, and you have only one one single sentence here- one statement that will actually return the promise and this one is available by the module that we made at the bottom. You see here, this module is included and it is supplying the database example connection.

B

It is calling one promise of it and inside we just have the query right so so this means that I can very quickly. I can just just go in a very simple way: query: the mysql database, the controller over here here you are is right here it is calling the promise and it will return the resales in the response and the response is, is passed through the asa.done, and this goes into the view and the promised results have has one property named page content and this one is rendered, so we can see it on the.

B

This is how we set up set up the uh he promises I'll. I will show you at the end, because that is the most difficult part, how we manage to create promises on the mysql server, but what we, what I wanted to show you is how promises work in mojito, so I can use a model name, the promise and in the thenabol I have the the fulfilled promise or the reject promise. Now.

B

There's one thing you should keep in mind here is that you always have to meet your ass to to call asadon or error right and in identical. I have the fulfilled and I have the rejected methods. Functions calls I must say- and this seems okay, but there's one little bit for you. That is, if I do something like this.

B

Then I then have a problem, because some power is only fine. It's not part of the response, and this will throw an error so in the promises that have uh have left have the behavior that once they throw an error, they they you don't see the error, they just reject. You don't see it at that moment, but they throw it and you get into the in the rejected chain.

B

And actually what happens is that you jump into right here.

A

So if you get an error here, does it uh kill the app or what happens it'll go into the.

B

Well, what happens is that what happens is that uh it will actually write to the console that there is no. It will not write to the console, it will just the the promise. This is the promise that will be just rejected. It will jump right from here from here we'll jump into here at the end, so just get rejected, you get no arrows, you get nothing. Okay,.

A

It doesn't do that it doesn't do the rejected uh function right.

B

Right, so in what you, what you do see is, after one minute wiki was writing to the console that it is killing a potential zombie, and that is because neither I ac the don or noah ac was called so a better way to to use to use. This is by doing something like this.

A

So what you're saying before you get that far, is you just you can't just correspond the ac dot, dot and ac dot error with the promise, fulfill or reject.

D

A

It's not it's, not something you can just assume or.

B

A

Basically, you're saying that you can't just use ac.done and ac.error in the fulfillment and the rejection they're, not they're, not you can't.

B

Work, you can use it if you use it the way. I I'm showing right now, because what you see right now is that yeah, you call the promise like you do here and in idenable you have the fulfilled method when everything goes goes right.

B

I can do this with an inline function by the way, I'm I'm binding right now.

B

I could use the same inline function, I'm using right here, but here I'm binding by reference, calling ac dot done, and this is this is a better way because when, if at the end completely at the end, you have the dot catch that will catch. Every error error made every other that was made perhaps inside the original problems, but also when there is an error inside here. So.

A

Right because the error now is being caught by the cash statement, instead of the the promise.

B

Right yeah: if the promise itself gets a voice rejected, then it will also come into the catch, and if you make, uh if you have a bug inside here for some some reason, then you also go to the case, because catching catching is actually uh something like chaining. It's catching is actually catching is actually this.

B

This is actually what happens. This is the same. So this is the same code. Right right is what I was using.

B

Right together.

E

So yeah so cut is just like a short hand. Yeah, but.

B

You have to you have to. You always have to be cautious, that that you catch at the end, because an arrow can easily be can easily.

C

Appear and so and notice this isn't a try.

A

Catch this is a promise catch.

B

Yes, yes, yes, indeed, indeed, yes, it's a shortcut like I said this is like it's. It is like a general ball where the fulfilled is only fine, so it's leave intact. There's nothing be done and then the problem should be fulfilled.

B

Error to reject it is handled by the case, so the this code here is better than it's just.

F

Something you should be aware.

B

Of but this this this will do because I've only ac done here, there's probably no bug inside the uh the inline function right here, so it it will do but the code warfare. So this is just how how things can be used. This is a simple promise. You see here, relative, simple, simple promise. It's just one promise not not doing anything itself like batching, like I said this one.

B

I will show you in the page two and page three examples, but before this I will go to the code on the client, because everything you see right here is code that runs on the server where I have the model, the model that is just calling the mysql database and returns a promise, and I will show you now how I am using mojito at the client side, because at the client side we can probably are you yes.

B

At the client side, we can have javascript code that is uh part of the of the module itself and it the the that codes. You can you have to set up retail, but if you do the code you will you will find it in in the binder. So the binder is the obstacle of this specific white sheet that is running on the client side.

A

If people are watching this and they're not sure what mojito is check out, some of the videos that we talked about, one of the advantages of mojito is that you can have code that runs both on the client and the server and mojito will push that code. If you wanted to to the client side, which is what marco is doing,.

G

Yes, yes, yes exactly, and so these are binders right. Now, though, so this is the code. That's only running on the client.

B

Yes, true, yes, yes, the the budget. I named it home, it is running the controller. The controller is running the index, which is actually running the furnace on a cell.

B

This jumps to the client in the screen of the client, but also will be running code on the client and that is defined inside the binder, but the index.js of the binder and the binary itself like that is the javascript code that runs on the client and over here I have just some event: listeners on the bottom one and the button too, and what they actually do is that they run handle button one hand, metal, two and handle button one here you are.

B

This coat that will, in the end, will show the container, so the container will be fissure made visible and what all this go do I will show you in a moment, but before I do, I will just show you how it looks like. So this is the website on the client. I will press button one, and here you are so it will by pressing button one the container gets visible.

B

I will make it a bit.

D

Castle up, did you get the attendees you just put that in.

B

No no, no this this is. This is interesting because the these names are fetched by invoking. So I will I load these data, the three names from the server on, and I am loading this information through iql.

B

So this is exactly what I wanted to show you I do I make I make two requests actually right.

B

So what I do here this is handle button one and what I do is I will run two promises. One of them is invoking. Mojito itself has a method called info.

B

It is a way to execute a method on the controller and I can execute on the controller on a server here. You are, I don't load it from a database, but this method is called on the server and it returns the three every three names in the json structure- and this is.

C

Actually, what has been done in the client.

A

Side, it doesn't know that it just it's just a request and response. Yes, true yeah.

B

But normally you, if you do, if you do simultaneous asynchronous data, calls like I do here. I call info, but I call in full promise that is not part of magito out of the box. I made this by myself. I will show you how it looks like, but it's actually invoking, but returning a promise with the data, and I also do a iql call, which is also a promise.

B

It's the same as when you would do an iqr call in the traditional way where you get a callback as a return, but this this one is also made by promise. So now I can match them. I can match them using either promise at all doing two simultaneous promise class and when it's ready I will the either process of r is bound. This is not about it's put into a variable or actions, and the code is actually going top down straight ahead, so our actions is either not. These are asynchronous asynchronous methods.

B

So it's going right down right down to this, but the then ball is not ready. Yet the then ball is only ready, then either promise that all is ready. When those both promises are resolved only then we get into the the identical of the all actions and when we do, we we get the attendees that goes into the first result of the promises, and we get a record like your record. That comes from the second one.

B

So now I have I'm bashing, I'm batching in in a asynchronous way simultaneously and when the results come back, I will, I will uh put the result into the container node. I said hatching now here you are at these, and the weather is just this and when this is ready, we only then we remove the hidden glass, and this is great because if I go back to the to the view page, this is great because you don't want it. The user experience is very bad.

B

If you have, when one promise is fulfilled early, then the second one and you get it's rendered on a screen before the second one- is rendered it's much nicer to to make the container visible when all the data has finished here so instantaneously.

B

It looks like coming, but actually this one is probably sooner resolved than.

G

The ipl, well, it doesn't necessarily have to be right, because these run in parallel, when you do like promised on all you're letting like each of the individual, like async requests, run in pair uh run independently of each other right.

B

Yes, yes, that's right.

A

Right they could return out of order too. You could run that over and over again and the order could change, but it won't matter because there's.

B

A

Right order on the screen, yeah true.

B

I don't know if you could see it how how fast it it went, but you see they they resolve. They go simultaneously resolving their own in their own speed and when they both resolve, then the container gets fistful. I will click in three two one.

B

Oh I know that's.

D

Great, no that's good.

A

Yeah I mean one thing: you might try it just as a test is, you might put like a a timer like it's some kind of weight, sweet.

B

Okay, yeah yeah, yeah yeah, but okay, you can see but okay, but I I've.

F

Got a lot of things to tell so.

B

I will continue if you, if it's okay with you, but this is how it works um now, of course, things may go wrong, so in the end we also have a dot catch again and there is an error. Then the I made this one to show the error in the container.

B

So it's just how uh the way to uh to to do it, but you again, I I I always put a dot catch at the end, but this is uh this is right now I put it in your actions variable here, but I don't have to so. I could easily do.

B

B

So this is nicer code, but I was just showing you how how it was looked like now. I have cut the second one handle button, two that is made to do chaining, so I will show you what looks how it looks like when I call the second one.

B

So this is the second one.

B

No, it goes at the bottom.

B

So the second one is is here, and this one is chaining, so I will show you what's what what this does? Where are you here.

B

So it made a little bit. Difference is also calling the iq.

B

L promise here is the iqr promise, but the who id, that is the location that I put into the ipl in the first batch in the batch spawn. I knew it. I knew the the the uid that was that was location in sun valley.

B

In this example, it is a sample, I'm saying all right ask from the by using it for us from the server id and then you have the response that was the 2 5, 0, etc. They use the response and put it into your iqr promise. So I'm chaining right here and then I have this, then I I have to complete records and can render it on screen. So.

G

So it's one of these automate to get the id and then another async call to get the actual weather.

B

Yes, these are two. These are two async calls, but they are going. They are. These are changed so first, the first one and then the second one, because the first one is going to return the the.

A

Id boy d, yeah.

C

B

So all right, so so this is, uh but in order to in order to make this work.

B

So this is great, so we see how we see how we can how we can batch promises essay from as far as we can see how we can chain them like here and in order to make it work, we need to define the info promise info promise is not part of me or itself, so we have to write it, and here is the code.

B

So before I go explain it, I will delete something.

B

So here you are in full promise is just a promise. If I call it, then it will return a new promise and if you use promises like this, it's up to you in the in the callback. This is the callback right here.

B

It's up to you whether or when I must say when you execute the full fill to fulfill the promise or if you want to reject, to reject it now.

B

In the in the callback.

B

In the callback I use the traditional magic project.

B

This is a traditional way that is part of retail and the way the invoke method is using the callback, so actions is passed through, options is passed through and in the callback I either reject my promise. This is executing this one or I fulfill my promise.

B

Let's excuse this one, so this code, what you see here is just how we make a promise based on the traditional callback of info- and this is great now we can use info promise for our inside the binder of the magic.

B

One thing that is really important to say here is that it's another pitfall of promises is that a promise you see here, there's a function, call and inside function. Call this the context. This is: is the global window, and it's just in the nature of javascript and the, but the the pitfall you have is that you are easily wanted to do this.

B

This stop budget procedure invoke, and that will fail so to overcome this. You must at this stage you must bind this to. I call I always bind it to instance. Some people do that. Is this or me is this? Doesn't matter really, but you have to bind it and then you can use without what you project doesn't involve.

B

So something to be aware.

A

Of that always checks me out whenever I I use mojitos is finding out where the motor proxy is like. Where did it move? It's always.

B

This is one one last thing I wanted to say here, and that is I, I think, there's a bug in uh yeah. I think it's it's a design. Failure to. uh I promise at all. I've said it before, but I will say it again and I will show you later on how we made a workaround, but I promise that all is is made in a way that it only fulfills when every single promise you you put inside the array is fulfilled.

B

So if, if either one of these gets rejected, for whatever reason then the complete, I promise the dog gets rejected. And personally I think this is a design failure, because every single promise that you put inside they are not aware of each other, and you might be very well interested in the results of those who gets fulfilled.

B

So if the iqrf server is down, then the I promise at all gets rejected completely and it will go to the catch.

B

But perhaps I was interested in interested in in this promise and wanted to process the data, even if I did not have the iqr data, so I think it's not you're.

A

Saying it's like a partially fulfilled promise and you want to get the data from that partially fulfilled promise.

B

um Partially fulfilled.

A

Promise because, like you said some, some returned okay, but others didn't.

B

Yeah yeah, if you're partially fulfilled, if you, if you refer to the idol, promise a lot, then it's what you fulfilled yeah. That is true um for me. It isn't. This promise is completely fulfilled and this promise was completely rejected. That is the example that, uh but yes, yes, the batch, the patch where you talk about the best will be I'm interested in partially fulfilled fulfilled of the bets yeah. It's also a product yeah.

A

That's what you're saying so, if you do why promise all, even though the different promises you still get them a failed, if any of them fails that what you're saying.

B

Yeah I have I, I created the promise that I created either promise dot all uh resolved, and I will show you later on. uh I created some of the. I will jump into the ipo promise and in the in the in the in the ui modules that I open at the left right now there are here.

B

You see very interested, interesting modules I created, so they are on github for everyone who wants to use them, and I will show you how I created either promised at all resolved, which I'm going to use use later on in page three, but at this moment I will show you how I use how I created I dot iql promise. That was the so I showed you how the info promise worked, and I will show you now how the ico promise is designed.

B

So to do this, I I created this in in emoji to the the residue I underscore modules directory and over here you can create your own modules. There you go and based on the.

B

If you uh use it, if you name it dot server.js, it's only be running on the server, but client.js is only available on the client available and I should not say running, I should say available and if you use it dot, com and okay, if this is affinity, server, client or common comment means it is available on both on the server and on the client side. So this is a simple, simple promise I made everyone can use it as it is. As you see it right here, and it is transforming the traditional iql.

B

Here you are, it's transforming the traditional iq into a promise. The technique is actually the same, so I will delete just for a moment, so I created a I dot. Iqr promise that returns a new idle promise and inside the.

B

Here inside the function.

B

I will call create ipl request, also sent it and iql request has its own callback here we are and the callback will reject the promise that is executing this one.

B

A bit larger, yes,.

G

B

So so now we have, I got iq, it's just like iql.

B

The only thing you have to do is you have to.

B

To create to add the first uh parameter, that is your query. That's all, but you can promise so this is uh also very great uses, creating promises and use to to batch the process. Yeah, that's it, but that was.

F

B

Page I'll I'm running out of time, so close all files I'll code, I've actually made three three pages: the home page page two and page three. I will show you how page two looks like.

B

So so this is also a page I created and what is what is what you see here is that we have two news messages coming from from iqr. That's all! There's! No, no big deal page two.

B

The controller and the controller here is doing the same thing, but now before I call easy.

B

I had to fetch two to 2 models of mojito. The first one was the base content. I would jump to the does this. What you see here this is the page content. This comes from the mysql database and, and I have the news items themselves, but to speed things up. I will I need to to run the whole thing. The two promises I will run. I need to run them.

B

Simultaneously, so that's why I run to this the paste contents, the same thing again: the promise that calls the mysql database and the promise that.

G

And the functions in your models, they all return promises. Basically, every single every single function in your model will just return a promise, so you can just like change them as, however, you want.

B

Yes, yes, yes, true, yeah yeah, I'm looking at this.

B

Oh, this is sketch all right, your sketch, I did not see this one. I thought I thought it was not there, but it's not catch, because the font is a bit larger. Now.

B

B

So this is important what you see here so yeah so over here.

B

I I I was telling you I was excuse me. I was telling you that the data came from iql, but in fact it does not. It comes from the mysql database, but I I was calling the mysql database.

B

I was querying two tables in my sql database and I was querying them at the same time and this one is calling the records. But if there is a failure here, then I will return an error. That's why I call it top case, and that is because I created cat records. I created get records to reject.

B

Then there was and no records when there were no records. I rejected the the promise and in this particular case you want an empty hammer that really gets fulfilled, so I I catch it in case it gets reject and I return an area and what you see here is a great a great power of how promises work, because normally you have you return a promise, but instead of returning a promise, I manipulate it. I I can by catching uh I can do it, but I can also do it by inaudible.

B

I manipulated data. I will show you how that works. When I come to page three, but I manipulate the data and the manipulated data gas returns. This is actually the rejected chain which you see here and I make I make the rejection to fulfill again. So get items always return. Something- and here you are so to here you see to simultaneously cause my skill data table.

B

D

B

And when they're ready.

B

The first one, the page content one cuts into this one, the second one response is- is added to this property, and then we run into ac. To done, and ac done is this so face. Content is from the first mysql table and the news items called from the second mysql table, but you know the great thing is they they create at the same time, on the server side and then pass through to the client side. What you see here on the.

C

A

Yeah right, so the top half is the from the first query and the boxes are from the second query.

B

Yeah yeah- and this is how to speed of things the either promise at all is is made to is used by me to speed up yeah. It's made made to speed, speed things up, speed things up, fetching data simultaneously, that's what it does yeah. It is the same problem here. If, if it fails, it will jump to the catch yeah. If only one of those will fail, it will call to jump to the case. So this is not a great thing. I believe so I made page free here. You are page free.

B

I will run it on screen, so you can see how it looks like page 3. here you are so page. 3 is pretty much the same. I am I'm calling three person names and I'm also fetching data from iquil.

B

Well, how does this look like.

B

This is the controller.

B

This is my promise, and now you see I I have three.

B

I free similar see using simultaneously promises running the first two are calling the mysql data table and the third is calling the iql and ipo promises can available here at the bottom. I have included it there. You are, and it's part of the I t I underscore modules, because it's a command.gs so but either promise that all resolved is a bit changed. It is uh it's different from either promised only in a way that it will always resolve yeah and to make to make the response.

B

No I'll show you how it looks like I'll show you how it looks like I'll go to the audio.

B

This is the code, it looks a bit difficult, but it's actually the code I copy and paste from uh from who once either promised at all the non-native.

F

One um this one's all in all resolved. So um excuse me, hey what did you say? uh What's the difference between all and all results, yeah, the difference is. Is that the all.

B

If the dot, oh.

B

If the dot oh runs into a rejected promise, it will abort and return promise of rs as being rejected and what I do and what I do here. I I will.

B

I will here, I'm looking if it's, if it's a, if it's either fulfilled or rejected the if it is fulfilled or rejected, is coming through this second parameter here and I will not reject the promise. I will use the status either fulfilled object and it is passed through to to this area. So if it is a fulfilled one, then the value gets in the survey.

B

If it was a rejected one, then the index will have no value, and I also build up the rejected array. If it's fulfilled, it gets the null value. If it was rejected, then the value gets in. So there are two areas made: they all both have exactly the same number of items.

B

Only the fulfilled one has all the fulfilled promises and the rejected one has all the rejected promises results and in the end I always fulfill. So I never call reject.

B

I always fulfill and I pass through a fulfilled area and I pass through a rejected area the what quan does with either problem is that it either cause fulfill with the fulfilled array or it will reject right away if any of the promises gets rejected.

B

B

Where are you here? Are you here?

B

There are three promises inside and response comes back and responsible fulfilled is a heavy with three elements and they could be all fulfilled results the the value of all the promises that the cats fulfilled, but they also could have a no value in case they were rejected, and should I be interested in the rejected ones that I could do.

B

A

The case where you might like rerun those right you might dynamically refresh those like if they timed out.

B

Yeah, for example, yeah yeah, for example, yeah just just what you want to do with it, but they both in in either case whether or not there are any rejected promises the promise itself. The result always runs into the first.

B

The the fulfilled function call here in the fulfilled function. So now.

B

This is an array containing three items. The first one is this one, this page content record. I will show you on the screen how it looks on client that was just.

B

Hang out or hang out using promising retail, perhaps I'm not sure what came into the first products but yeah the hangout records was the three names that returned and at the bottom you see the iql, the icon and all the results I put into the ac done the base content title entity.

B

Now you have to be careful here because the page content records.

B

I'm calling fulfilled hash index 0 but, like I said, should the first promise gets rejected. Then the value of page content backup will be no. It is filled with no value so over. Here I must check. I must check. I cannot just do this. If I do this, then there might might in case of rejected promise it will. This will turn into a runtime error and the rental error will throw you back to the cache, always catch your final okay.

B

So here you are now just looking about how those individual promises look like they are coping from the page content. Here you are, you see just a single just a single statement. It's very clean.

B

It's very nice, very easy to access the the mysql data table. I will. I will enter my presentation in how I do this. How I set this up, but for the moment it's just nice to see how clean and easy it is. The hangouts are coming from here.

B

Look another promised dollar.

G

And so that lets you split up everything you have into like separate services and then the promises when you just do promise.all you can just hit whatever service. You want to get your data in and then mix them all together in, like the final callback in the final, like databall.

B

Yeah yeah exactly yeah and what is nice to.

G

F

Is that I've combined a.

B

Couple of things, because this I don't promise at all they'll, actually start three processes, three asynchronous processes simultaneously, but one of them this one is- is also using either promise at all. So actually, we did not initiate the free promises that we initiated five promises simultaneously.

B

A

You should talk to the search team at yahoo because they're they're, you know mojito and a lot of this stuff- is really relevant to search, because when you do a search query, you may get something called direct displays like, for instance, you search for a movie you'll. When you get the results back on the page, you they, they do a query to another service to get like movie data and they may show it on the screen.

A

You may show it in the results, but if it takes too much time, then of course they want to skip that and just send things back like the time's out or something so this kind of thing doing promises is really relevant to their um sort of process of displaying that so yeah. I first talked to the.

D

Search team guys.

B

Yes, good thing: you you get it all recorded right, yeah yeah I saw it. I saw the. I saw the presentation on the q icon and, um if I remember right there was, um I don't know if it's from the search stream, but I I I saw that at one application you were using either parallel and a parallel is also a way of of of simultaneously fetching data, but it's all based on the on the callback system. So it's it's really.

B

I think it's it's pretty difficult to work with.

A

If you want to add something or remove something, you've got to make sure your callback chain wasn't just messed up. Yeah.

B

Now, um but what is really what is also interesting here is that I I'm fetching three simultaneous calls to the dot to the mysql data table, but before returning them, I mix them up so going back to the server to the controller this one. Oh this now come on yeah this. This one is calling one promise, but it returns something that is uh some things like uh composite. It's com, it's composite what we say: it's composed, yeah composed composed no very composed, so I I call free free, free, mysql queries.

B

They all return back something and I processed them in the callback I processed them and in the end I return so in the return object. I have here the attendees, which is if this is an array, but the array is, is composed, composed with the data that that returned from the individual queries.

B

So it's just a way. I'm I'm running a bit out of time, but you can see it later on power or this.

B

I did this because I'm not sure I cannot I I did not did any benchmark if it's quicker, but the thing is that if you are accessing multiple tables in mysql and you can use inner joins right, you can use inner joins to combine fields of different tables, but inner joining in mysql is time consuming, especially when you have multiple inner joins.

B

So what what I do is I always do a single, a single query on one table like here. I call the person id from the attitudes and in another query I call the id and I combine them. I combine them. I don't have an inner join between this one and this one, but this one gives me back a completely area of all the persons and if it's, if it's the right way to do or not, it depends on the number of records that that are inside and.

F

The complicity.

B

Of your mysql query in case you should use inner joins, but anyway I I'm calling the completely persons right here here you are and I'm creating an object with the property.

B

Every person id is the property, so I can.

B

I can reference by property by object, property right away, which is very fast. If you have an object with properties, you can reference it very fast. It's just the way.

B

The basic idea that I want to show you here is just how you could manipulate the promise results in identical and in the end return it's something completely different that has perhaps extra extra fields extra properties created before you. In the end.

G

B

So that was actually uh most of the things I wanted to show you this be the last thing that was how the how the database, the database query, word worked.

B

So when you're using it is very straightforward, easy just one statement and you access the data table, and I won't go too in details that much, but here it is, I made I made a module, the db connector.

B

If you want more information, you could look at the domain. Slash node minus mysql from kit up here it is, but I think the thing is that um if you use non-mysql, you get callbacks the same thing it doesn't. It is not. It is not created to uh to work to in a promised.

D

B

B

So I created the query promise and it goes too much details to show you how it works. But you see there is a callback inside the callback. I will actually fulfill my promise or I will reject the promise.

A

And you said that uh zero results is still available.

B

Yeah yeah, true, you know, if you, if you use query promises, uh I I will. I will explain why I use it and how I use it. But if you use the query promise that was actually the one that I started with. It is how mysql nodemysql does it itself? It has a connection and it runs a query.

B

It always gets something back always it gets an object back here we are, it returns an object with property results. Results is always an array which can be an empty area and it returns the field property which gives you additional information, and my experience is that I wasn't very interested in the fields property at all. I was always calling the results property, so the next step I did was all right.

B

When I called the query promise I was always I had. I was always having the resolved response and was looking for the property result which might this could be an empty area or it holds it. The uh all the records right so.

A

Giving you any information, I mean it wasn't helping you out, you always had to look right.

B

Yeah, I was always doing this. I was all doing this. I was always executing the query promise and I was also always doing this. The response came back and I was looked at the results, so I created cad records and I also wanted to get the promise of the cat records I always wanted to. I also wanted to make it reject and there was nothing inside.

B

So if records are length is bigger than zero, then we could we return the responsive result. Otherwise we throw an error which makes the promise to reject- and I made another sugar method over here to get record if you, if you only are interested in the first one, if you only want to to to to to carry only one record, then let me get get record which is on his is calling cat records by itself but always returns. The first item of the of the query, but the nodemysql is quite complex.

B

If you look at my my module, you don't see that much code more comments, but it's quite complex because it has connection pooling under the roof and it has ways of handling those connections. So so this is quite even if it's is it's little coded. It's it's pretty complex.

D

And to set it up.

B

I created another here at the left. You can see it created another module to set it up. You just.

B

Call the class either database connection, which was in the what you just saw before over here. That was the database connection.

B

So for every every table for every table, I create a database connection database. The database is another table every database, the database name username password. There are more properties that you can pass through, but I bind it to a globo either snowball.

B

And it's it's ready to use so here you have the required primer to the module and he said his own module name so everywhere in my project everywhere. In my project, I only have to send here at the bottom. I only have to reference to include. I only have to include the module I created and this particular module is actually is delivering the the connection to the data table that I was defining in the specific in the specific mod deal.

B

Yes, so I only set it up once I only set it up once and I get it returned every time. I include this one I get a complete.

B

I get a complete handle to the database, which has connection pooling under the roof, and it also has um yeah a lot of a lot of error.

A

I have a question for you about about the code that you've written for the for the promised version of the connection. The mysql promise. um Is there a hard uh requirement for yui for that, or could you make that, like an npm module or something.

B

Yeah I was I was, I was looking, uh I'm not I'm. I don't have that much experience, yet I make it an mpm module and it never did where just a moment just a moment just a moment. Yeah am I back in the.

B

Yep right all right, so I'm quite new to npm, I'm um diving into it right now. So actually it is it. It would be a great npm model. Yes, but um I I don't have experience yet how to to to it's not difficult, but I I'm diving into how to do it. I never made an npm model yet so, but this is, it would be nice to be on. At the moment I made a gui module.

A

Feels like this kind of thing would be useful to lots of folks um across the net. You know just in general, not necessarily I mean why. Why specifically, but also, I think you made it available to anyone.

B

Yeah yeah yeah yeah, absolutely you're, absolutely right, yeah yeah, so that would be nice so, but at the moment, so as it is right now, it is great module and dot. Ui is available inside the ito on server side, so you can easily include the module and and and use it right away, yeah, and that and that's also the reason why I shared uh I shared the. Where are you.

A

That's really cool it's! It's amazing, the stuff that you've you've worked on and- and I really like how you've.

F

A

You've played off of uh promises, strengths in terms of uh rejecting a promise, sort of corresponds with uh an empty search result, empty sql, query um and, and also how you you've worked on. um You know the partially fulfilled promises where you can get back the list of the filled and unfulfilled. That's all really great yeah. That makes that.

G

White, like keep your code like not call back help basically.

B

Yeah yeah yeah. Absolutely it's a bit funny, because if you look at my code, this is it's it's almost like I I I use only promises. It's it's! It's! It's almost fifty percent of what god's promises, so it's fun! It's fun! You can do really amazing things with it with it. But you have to be able to be aware of the pitfalls uh that I told this station.

A

I've also heard that if you, if you have to mix promises with callbacks, that it's like worse than having either one of those like, if you have some callbacks and some promises, it's harder than having all promises or all callbacks.

B

So that is pretty much what I.

A

Want to show you yeah yeah, and this is all code that we can get from the mojito dash promise repo. Is that right.

E

Yeah yeah right yeah, it's shared at the next like yui weekly.

A

Do you have a like a sample, uh my sql database, in there too, or is that something that, how how would they get to that.

B

The um what example exactly do you mean.

A

The the sample database that you're querying do you have that also available or.

B

No, I could make it available, I I don't have it, you know. No, I don't have it available because I I, how should I share it? I don't know how to see it like. How should I share the lifestyle.

C

Table with you.

A

Isn't it just the way you you dump it or something or.

B

Yeah, I could dump it yeah yeah sure I can make it done. I can put it yeah yeah, it's just a good thing. I can make a dump and put it in the ketogen repo as well yeah. That is good thing. Yeah.

A

Like under var, or something.

B

No problem, I will do this and then you can, you can play around and see how I did it. I hope I hope some people can benefit from it. Yeah.

A

Oh yeah, this is really useful again um I'll. Definitely after after this round table I'll definitely send this video over to the search guys, because um either they're already doing something like this or they could be interested in some of that work as well, especially the the partially fulfilled stuff.

B

G

Pretty good all right cool thanks a lot for showing off everything you've done.

A

All right, yeah.

G

B

A

Work man, I can tell that you've you've spent quite a bit of time, plus you. It looks like you also have had time to like refactor it and make it clean and- and uh you know.

B

Yeah relationships yeah, it was fun to do to share so yeah all right.

A

Cool thank you for uh for coming today, and uh I appreciate you taking the time to come. Talk to us and anytime, you have any more amazing cool stuff. Let us know because we'll be happy to feature here.

B

All right, we'll do so: okay, so have a nice day. Bye.