Check out a free preview of the full Introduction to Elm, v2 course

The "Talking to JS Exercise" Lesson is part of the full, Introduction to Elm, v2 course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students set up ports to send and receive data to localForage.

Preview
Close

Transcript from the "Talking to JS Exercise" Lesson

[00:00:00]
>> Richard Feldman: Which brings us to the exercise in localForaging, Part 9.
>> Richard Feldman: All right.
>> Richard Feldman: Okay, so if we look at intro/server/public/index.html. We can see how the localForage ports are hooked up on the JavaScript side. So this is the one time where we actually need to dive out of port 9 and into server.

[00:00:27]
Because this index.html file lives in the server, and is not particular to any one of these exercises. So inside the public directory, we can open up, yeah, index.html. And inside of here, we can see a bunch of random stuff, that's just like the fav icon, and the fonts.

[00:00:47]
And the style sheet, and all that good stuff, here's the script importing localForage, and elm.js. Which is our compiled Elm code, I put a little. [LAUGH] A little welcome here, in case people looked into this earlier on the exercises.
>> Richard Feldman: But basically, on the Elm side, all we're gonna need to do is make changes to stuff on the part9 directory.

[00:01:06]
This is really just for our reference, so we can see in here. We're doing initially, localforage.getItems ("session"). And we're using that to kick-off this initial flags value we're passing into Elm. Saying, okay, this is the initial section value, then we're setting up a subscription here. Sorry, we're doing app.ports.storeSession.subcribe, which is to say.

[00:01:26]
Every time Elm sends us a command through a port-named store session. We wanna run this function that receives the new session, and sets it in localForage. And then, finally, after we get the new session, we're going to just call, app.ports.onSessionChange. And send the new session to that, such that, it will now receive that session through the subscription.

[00:01:50]
And can update things accordingly, so the critical thing here is the two names. storeSession and onSessionChange, those are the two things that need to line up on the Elm side. With whatever they are going to be on the JavaScript side. Okay, so that's all we need to do on the JavaScript side, that's already all done for us.

[00:02:09]
We just need to remember the names, so the exercise is to add the corresponding ports to Session.elm.
>> Richard Feldman: Okay.
>> Richard Feldman: So we have a pair of TODOS in here, first one, is we're going to send a session to JavaScript. So, this is sort of a do-nothing command, that is sort of wired up to not be interesting.

[00:02:30]
What we wanna do is replace this with a port, so define the port, and then call it from this function. Such that, it actually sends that token out to JavaScript. The other thing we need to do is do the same thing on the reverse side. Bringing data in from JavaScript, via this subscription, which is, receiveSessionFromJavaScript.

[00:02:51]
Once we've got both of those implemented, everything should work, and we should once again be able to sign up.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now