Output text in a browser using the text function in Elm
This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.
[00:00] I'm going to make a new file here, and I'm going to call it main.elm. The very first thing I'll do is type the word "module" to make a new elm module, and then I'm going to type the same name of the file that we just made, module main. Then I'll type "exposing and ..," that just tells elm that everything inside this file will be exposed for import later.
[00:19] We don't really need it right now, but it's required, so you can just type it in and forget it. I'll define anew value here at the top level called main. This value can either be a function or a constant, and elm uses this to know how to start your program.
[00:32] Let's just pass in a string and see what happens. Hello. Save the file, and then over here on the right side, Elm's got a nifty little tool that comes with it, a dev server, and that's called Elm Reactor. You can see that it's listening on localhost:8000. Let's pop open Firefox here, and go to that address, localhost:8000.
[00:50] You can see that it's got a list of files, and main.elm is here. I'm going to click on it and see that Elm compiles my project as I wait. Uh-oh, it looks like we've got some errors. The main value has an unsupported type. It needs HTML, SVG, or a program, and we gave it a string.
[01:07] Let's actually pass in the HTML type, but in order to do that, we're going to have to get the HTML library downloaded. Let's stop Elm Reactor and type in "elmpackage install elm-lang/HTML." Hit enter, and it's going to ask you if that's OK and I'm going to say it is OK. Do I approve of this plan? Yes, I do, I always approve of this plan.
[01:30] Now let's start Elm Reactor again, and now let' go back to our code and import HTML. Now we're going to expose a function from HTML called text. This function takes a string and converts it into an HTML nod, which is what main wanted. Let's go ahead and type text, that's how invoke a function in Elm.
[01:47] Now we're going to pass it a parameter by putting in a space, and then putting in the string we want to pass to it. Let's modify this string to be a little bit more polite. Save the file and open up Firefox, reload, and there we go, we've got a string.
[02:02] Here's what we did. We defined a new module, we exposed all of the values inside the module for import elsewhere. We imported the HTML library after installing it, and we exposed the function text.
[02:12] Here we used the function text to convert a string into an HTML value and assigned that to the special main function. Then we saved our file and ran it with Elm Reactor, and got something beautiful in the browser.
Thanks for the feedback, Stephen. We were thinking it'd be a little "get your feet wet" before jumping into the technicalities of setting up. But sounds like we could certainly improve on the execution.
I agree that episode 2 is a bit useless, but it is a great introduction for me. I also agree it is confusing to follow, and needs some work. Maybe an episode on syntax before using string concatenation and backward function application. I was going to disagree with you at first typing this because you sounded cynical, but it truly is not useful in the current state.
All that's missing is some brief context about what Elm is about, a couple of key ideas, in a separate episode inserted before this one, then you can lead into this one as a taster showing how you can start writing Elm programs with very little boilerplate.
Thanks for the feedback!
I'm getting an error on the first line.
I ran into something unexpected when parsing your code!
1│ module Main exposing (..)
^
I am looking for one of the following things:
a listing of values and types to expose, like (..)
reserved word `where`
whitespace
I returned to this course to see if there were any improvements, but nothing has changed in 10 months, the code shown doesn't run either, so all I can say is I don't think the author really cares in the end. Ill be looking elsewhere. This should not be listed under "Full course" this is more like an eclectic mix of ELM, with no obvious path to follow.
This fist lessons poses far more questions than it asks. OK so setup is the following lesson, but I must say, watching this first lesson does not provide me with any insight whatsoever to this course, to ELM or related. What was the point, and how this sets up one for an ELM course, is beyond me. The Narrative is fast, confusing, and not at all useful at this point. In fact, it puts me off the rest of the course. Needs some revision, don't know why it was provided on Egghead in its current form.