Advanced Elm

Creating Constraints Exercise

Richard Feldman

Richard Feldman

Vendr, Inc.
Advanced Elm

Check out a free preview of the full Advanced Elm course

The "Creating Constraints 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 convert a Task to a Cmd using Task.attempt or Task.perform.

Preview
Close

Transcript from the "Creating Constraints Exercise" Lesson

[00:00:00]
>> Richard Feldman: All right, let's move on to the exercise. Cd into part3, open up the old editor. Okay, and in readme it says, I'm gonna open up src/page/article.elm. And resolve the TODOs there. Okay, so here we have some tasks that are not commands. They're supposed to be commands because we're passing them to Cmd.bash.

[00:00:28]
But they haven't been converted to commands yet. So what we're gonna do here is we're gonna use task.attempt and task.perform to make this code compile. And we're going to choose which one to use based on whether or not we can use task.perform. So task.perform only works if it's going to be something that, a task that can never fail, otherwise we have to use a temp that specify both the error case and the success case, how to turn both of those into a message.

[00:00:55]
So you can see elsewhere in the file the types for a message, you can see right here we have the documentation for attempt as well as perform. And between the two and this code right here and compilers we should be able to figure out how to resolve these such that all of these become commands.

[00:01:11]
Quick note on what these are doing, so article.fetch is essentially saying I want load this the http data for this particular article. Comment.list is doing the same thing except for comments on that article those are both loaded asynchronously and concurrently. Time.here is the task that returns the current time zone, we're gonna use that because wanna display for the comments we wanna display the user local time down so this is a task that will just go and get that for us.

[00:01:41]
And finally we have Loading.slowThreshold. So this is a task that essentially just waits for, I think it's 500 milliseconds, and then fires a message saying hey, we have now passed the slow loading threshold. And what that does is, once we get past that threshold, if we still have not loaded, either the comment or the article, we show a loading center for those.

[00:01:58]
So essentially if it loads within 500 milliseconds, we don't bother showing a spinner. If we pass that threshold then it's like okay, now it's time to show a spinner because this is taking a while and we wanted the user to be aware that it's not errored out, it's just taking a while.

[00:02:11]
So those are our four tasks and we're going to convert them to commands using one of those two.

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