Component Architecture Q&A

[00:00:00]
>> Mike North: Did anybody have any questions about we just did, yes.
>> Speaker 2: So currying data into those functions, those actions, you had an action you defined the parent, you passed it into the child then you wrapped it in an action the child had handled the dollar event itself.
>> Mike North: Yeah.

[00:00:20]
>> Speaker 2: You could have just passed the-
>> Mike North: Test that value.
>> Speaker 2: Value into, yeah.
>> Mike North: Absolutely.
>> Speaker 2: And then handled the event, the DOM stuff up its parent, is there a reason why you wouldn't do that?
>> Mike North: Absolutely, and so you might read in some places that currying is one argument at a time.

[00:00:41]
And I think we're talking about partial application here, is that fair? It's like passing one or more arguments to a function and kinda creating a new function with less arguments that we can invoke easily.
>> Speaker 2: I'm not entirely sure what you're asking.
>> Mike North: Got it, you stop me if I start deviating from what you have in mind here.

[00:01:05]
So what Seth is getting at is that there's another way, and let's focus on the channel footer component. There is another way that we get the template and the js module, could have avoided this potentially. We could have avoided pulling the value off of the event. Is that what you're getting at, or maybe you meant-

[00:01:34]
>> Speaker 2: I meant that and-
>> Mike North: This here, where we're calling send message.
>> Speaker 2: Yes.
>> Mike North: So let me show you what this would look like and then show you where we would have lost the opportunity to do something. So if I comment out handle submit, and over here, we could do something like this.

[00:01:52]
We could invoke handle submit, but when we wanna pass it, body. We can use a Handlebars helper, well, part of Ember and not part of Handlebars but it’s called function. It’s basically invoke a function and we can pass it this dot body and it would almost get us what we want.

[00:02:16]
Let's see, sorry, it's not handle submit, it would be,
>> Mike North: Let me triple-check here, send message, right? Ultimately, we wanna call the send message arg.
>> Mike North: Okay, test passing, good sign.
>> Mike North: So I could add something here. Looking for developer with twenty-two years of type script experience.
>> Mike North: And I could hit, let me clear out, console and hit send.

[00:02:57]
>> Mike North: So if I refresh this, actually, it's still there. We got the refresh. We lost the opportunity to call prevent default.
>> Speaker 3: But you can do that in the parent action by-
>> Mike North: By receiving the event-
>> Speaker 3: [CROSSTALK] is the second parameter.
>> Mike North: By receiving the event as the last perimeter.

[00:03:16]
I could, but I would definitely have lost the ability to zero out this dot body, right? So to your point, sometimes you can get away with that. But in this case, we kinda had a little last lingering thing that excluded that, that didn’t give us an opportunity to insert our own logic.

[00:03:39]
But very good to point that out, so and let me just finish the thing you just proposed here. If we went to our channel container and our create message function took an event arg, right? We actually get the DOM event as the last argument to an action no matter what.

[00:03:57]
We could have done something like if the event is defined,
>> Mike North: Prevent default on the event. And that would let us do something like this where it’ll clear out and we hit send and it’s a live update for sure, right, it’s almost there but how do I clear this out?

[00:04:22]
Cuz control is now, it’s all the way up at the container and my presentation component doesn't really have what it needs. Now we could've made it so the container actually owns that message body, and it passes it into the footer. And the footer kinda binds all the way out.

[00:04:39]
And that might've gotten us to a point where we could've had the presentation component do even less. But this is the kind of thing you have to think about. And It's more about what needs to happen, if it's just that the function needs to be invoked and passed this argument, you're good.

[00:04:55]
If it's a lot of state management locally and remotely, you might have to rearrange things so that you can get what you need. But it's very good to be aware of that as an option so just to put that on the screen so we don't overlook it. We're using the on helper, we're listening for the submit event and this is what is being called, it is invoking the send message function, passing it this.body.

[00:05:27]
So we're getting the body of the message and this does almost everything we need it to do. The only thing that stops us is, this doesn't automatically get cleared out. And how could it, right? Cuz by the time that fires, it's gone. We don't have a reference to that action.

[00:05:44]
We couldn't even wait something that's a sync with it. So if a local thing needs to be updated, we might need to make it local.
>> Speaker 4: Can you have more than one handler?
>> Mike North: That's exactly what I was going to ask.
>> Speaker 4: One to clear one and-
>> Mike North: No.

[00:06:01]
Right, you could do something and I- You're going to regret even saying that.
>> Speaker 4: [LAUGH]
>> Mike North: Composible helper, it's library out there has a function called Pipe. And it lets you kinda create a pipeline functions, that doesn't belong in a template. Let me be really clear about that, templates are declarative.

[00:06:24]
When you're talking about a function pipeline, that is imperative. There is nothing more imperative than that. It is a procedural sequence of instructions to invoke, not just I want things to be in this state. That's all you want your templates to look. So having a little action handler that sorta delegates and then does the local work as well.

[00:06:49]
A very common thing to do and also, you're not gonna confuse anyone, right? Keep it simple.
>> Speaker 5: So, this might be off topic or too deep, but the function handler is not required, the function helper is not required at this point? Will it be at some point? Cuz right now, I can just do it by passing two parameters, one submit and send message this body, it works.

[00:07:12]
>> Mike North: So the function helper is not required.
>> Speaker 5: Take away the function helper.
>> Mike North: Yep.
>> Speaker 5: And it still works in the same way. Is that going to change at some point?
>> Mike North: Let's affirm that you're correct here. I don't know for sure, but there it goes. Yeah, I don't know, to be honest.

[00:07:34]
>> Speaker 5: Okay, action helper, you can pass the arguments as-
>> Mike North: Yep.
>> Speaker 5: The next parameter.
>> Mike North: So I do know that if we were to have done something like this, which I don't recommend,
>> Mike North: And we could have partially applied this way. That's where the function helper's the only option.

[00:07:56]
Yeah, that's a good point. Either way seems to work. I would have to check the RFC to understand exactly what's going on. I do know that there's really no harm in doing this. And it's very explicit that send messages being passed this argument and you're good to go.

[00:08:15]
Especially if we wanted to do something like I'm from the outside in channel HPS, we could partially apply at this level, right? So by the time the component receives send message, we've already baked in some arguments. It's the equivalent of doing a function bind and then not worrying too much about this, but passing other arguments along the way.

[00:08:43]
And that's partial application there. That's where this shines really nicely. Yep, and no on modifier, for sure. All right.
>> Speaker 6: So, just to clarify, the ROC does say that that should not work, but the extra-
>> Mike North: On multiple arguments.
>> Speaker 6: Yeah, the extra parameters will be ignored in order to pass a value to the function, an extra value to the function, you should use the function-

[00:09:06]
>> Mike North: There we go. So it happens to work, possibly by accident.
>> Speaker 6: [LAUGH]
>> Mike North: But what you see on the screen here and what my initial answer to your question, this is the recommended way of doing it. Thank you for backstopping with RFC.