Talking to JS Solution

[00:00:00]
>> Richard Feldman: All right so the first one is we're going to be sending stuff from Elm to JavaScript. So to do this we've already added our port module up at the top here which means that we are now allowed to use ports in this module. So we're gonna say port and again we have to make sure that our port names match up with what we're doing on the JavaScript side.

[00:00:19]
So because on the JavaScript side we are subscribing to a stored session that means our port on the own side also needs to be called Store session. So a store session is going to have a type that pretty much matches this one right here conveniently. So it's gonna accept a maybe string and then it's gonna return a command message.

[00:00:39]
Now ordinarily this would be where we implement the body of this if it were a normal function. But this is a port which means that we don't actually need to do anything else. Elm's just generate the implementation for us. So here, inside this function, which is being called elsewhere in the code, all we're gonna do is we're just going to handoff directly to the port.

[00:00:59]
So we're gonna say storeSession maybeAuthenticationToken, and that's it. So that should compile, oops, we wanna be pack in part9. Okay, that compiled. And so we will see if it actually works. I guess we should demonstrate the lack of it working. Actually now with half of it implemented it's going to partially work so maybe not.

[00:01:23]
We'll just come back and see the entire thing work momentarily. Okay, so that's the command side and then on the subscription side we're going to receive session from JavaScript. This is going to give us a function which takes a value. Now this value type refers to a Json value, which is to say it's in Json that we have not yet decoded.

[00:01:46]
It's not in the string form but rather it's in sort of a raw Java Script object that needs to be decoded before we can do something useful with it. But at this point it's just sort of undecoded and something that's just passing through our program. So in order to write a port for this, we're going to use a similar tactic to what we did last time.

[00:02:05]
We're gonna again go make sure that we use the same name as what we did in JavaScript, which is to say on session change and then it's going to take as its first argument a function that converts this incoming value to a message and then returns a sub message.

[00:02:19]
So I can say on session change passing to message and that should compile no problem. No, it did not? Right [LAUGH], I can't just put a type definition and have it work. I actually have to use the port keyword. Otherwise, it just looks like I'm just writing a weird function that I didn't actually define.

[00:02:38]
Okay, thanks compiler. So, based on that, I should now, theoretically, be able to sign out, sign up for a new account. And actually, let's put some console logs in here so we can actually see what's going on as we're doing this stuff. So inside here, inside storage session, I'm going to say console.log got a new session.

[00:03:00]
A new session and then when we actually set the session, in other words this is going to be sent into Elm through a port, we can say session changed.
>> Richard Feldman: And I don't need to recompile it because that's just raw HTML. Got this email and this username.
>> Richard Feldman: Have an extremely secure password because not even I know it.

[00:03:28]
>> Richard Feldman: You can zoom it a little bit so we can see that. By the way this is a little warning compiled in DEV mode. Follows advice for a better performance and smaller assets, which is basically tell us here is how you can enable the optimize flag to get better assets.

[00:03:40]
Okay, sure enough, we did in fact get a new session, which has some incredibly readable info here. And the session was changed, which led us to being logged in. Excellent, and putting those things together, we now have successfully communicated from Elm to JavaScript, and from JavaScript to Elm.

[00:03:58]
And that's all there is to it. Questions?
>> Speaker 2: So the port takes a signature, is that right?
>> Richard Feldman: Yes, the port keyword, yes. It does expect only a signature, yeah.
>> Speaker 2: That is odd for sure.
>> Richard Feldman: That is odd for sure. Yeah, I mean essentially it's code generation, right?

[00:04:18]
It's the compiler saying, well if there's only one possible implementation for any given type which is I'm gonna send that thing to JavaScript so it's as I'm just gonna implement it for you. One other note which is just sort of outside the scope of this workshop, there is one other way to do JavaScript interact with Elm which is through custom elements which are part of the web components spec.

[00:04:37]
We're not gonna get into exactly how to do that but Luke Westby gave an awesome talk on how to do this at Elm Europe. Okay, walks through the steps to do it. Basically that's a use case where you want to specifically embed some piece of JavaScript inside your view.

[00:04:52]
You have a third party widget or something like that, like a date picker or what have you and you want to just to be able to drop it in the middle of your view. Custom elements are a way that you can do that. So, not something we're gonna cover here but if you're curious about that and that sounds like it fits your use case I highly recommend checking out his talk which we will link to.