Interaction Review & Q&A

[00:00:00]
>> Speaker 1: Does Elm have anything like the React component life cycles?
>> Richard Feldman: Does Elm have anything like the React component life cycles? No, so in React you have a notion of local component state. This is essentially an object oriented idea where you have mutable state coupled with methods that work on that state, so components or objects.

[00:00:21]
Elm actually doesn't have objects, which means that it doesn't have stateful components either. Basically, everything in Elm is derived from the application state. And when you build out your Elm application, it's a matter of slicing up that application state and passing it to playing functions. In the advanced workshop, we'll talk about specific techniques for doing that.

[00:00:40]
But, the short answer is imagine, if you're coming from React, what if everything was a stateless functional component? That's sort of what you have at Elm. So, just like those who don't have any life cycle methods in React, in Elm all you're working with is pure functions rather than stateful components.

[00:00:57]
So, there are no life cycle methods there, either.
>> Speaker 1: What about CSS?
>> Richard Feldman: So CSS, there's a couple of ways to do it. The way that we're doing it in this application is essentially decoupled from the Elm architecture. We're just using a static style sheet. So one of the things we could choose to change in our view is class name, for example, which could make it refer to different CSS.

[00:01:19]
Which would make it appear differently on the page, but there's other ways to do it sort of in line in our view function. So the Elm CSS library I mentioned earlier, that's one example of a way to incorporate your styles into the view and actually change them at runtime.

[00:01:34]
So that's something like if you've ever used styled components in React, or I think Glamorous maybe also does this. But yeah, there's different ways to do it, and you don't have to choose one particular approach. CSS, there are actually a few different alternatives with different tradeoffs depending on your use case.

[00:01:54]
Let's do a quick review of Part 3. So first we learned about records. So here's an example of a record, it's got some syntactic differences with JavaScript objects. But also quite a bit of semantic differences. It's not just the equal sign, but it's also that they're immutable, that they don't have prototypes.

[00:02:08]
That they don't have this, they're just plain immutable data. We also learned about record updates syntax, which essentially is a way of saying, start with this record and give me back a new record that's exactly the same as the old one except I've changed one field or maybe a couple of fields.

[00:02:22]
Talked about Booleans and all the fun different ways to combine them. And finally, we learned about the Elm architecture, including model, view, and update, and how those interact with one another to create interactive application.