Check out a free preview of the full Advanced Elm course

The "Opaque Types Exercise" Lesson is part of the full, Advanced Elm course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to make Cred an opaque type, then fix the resulting compiler errors.

Preview
Close

Transcript from the "Opaque Types Exercise" Lesson

[00:00:00]
>> Richard Feldman: So we're gonna start off in this advanced directory here. So you should have the workshop checked out, and you should be inside the advanced directory. If you look inside the directory, you'll see a variety of other directories and a README. So the README sort of describes general instructions for getting set up with this which hopefully you've already gone through.

[00:00:17]
At the end there are some links. And then the server holds on to the back-end, which you should already have up and running over to the side in some different tab, which we'll leave running throughout the course of the workshop, because we're gonna be hitting it on every exercise.

[00:00:30]
So we're gonna start with part one so we'll cd into there. Inside this directory we can see we've got a README, a source directory and elm.json and some compiled stuff. You actually may not have the compiled stuff, because I have this from the last time I ran through this.

[00:00:44]
But you may not see the elm.js or elm stuff, but let's fire up our editor of choice. I'm gonna be using Adam, but any editor you like to use should be totally fine. And we're gonna take a look at the README for part one. So it starts off by just giving me some basic build instructions.

[00:01:02]
So we're going to elm make src/Main and output it to ../server/public/elm.js. That way it ends up in the assets directory of the server. And no matter which part we're in, this will jam it into the correct place in the server. And then when we bring up localhost:3000 in the browser, we will be able to see the results of what we've done.

[00:01:21]
Having said that, in general these exercises, they pretty much tend to be about making the code compile again. So probably don't need to do a whole lot with the browser, except when we get to the decoding section. And so we can start off by making sure it compiles to begin with, which it does, great.

[00:01:39]
And the excercise itself has to do with src/Viewer/Cred.elm. So let's take a look at that. Okay, so here's our TODO, it says basically, make Cred an opaque type, then fix the resulting compiler errors. Afterwards, it should no longer be possible for any other module to access this token value directly.

[00:01:59]
So this token refers to the access token that we're going to attach onto HTTP requests. And one of the things that I wanted to guarantee about these credentials is that that token is an implementation detail that is opaque to the rest of the world. None of the other modules outside of Cred get to know what that token's format is.

[00:02:15]
Which means that if the server, the back-end team decides they want to change from JWT to something else. I can say, not a problem, just tell me what the format is, I will change it in this module. And I can guarantee that that will not cause any regressions on anyone else's code.

[00:02:28]
Because guess what, nobody else's code outside this module could possibly be relying on it, they don't have access to it. So that's what we want to get to. Right now, this is exposed to the whole world. Anyone can say cred.token and access it directly, because we've just done a type alias.

[00:02:41]
So what we want to do is use the techniques we just talked about to convert this into an opaque type.

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