Machine-checked explicit state: An arrow in the heart of complex web apps | Hacker News Reader

Machine-checked explicit state: An arrow in the heart of complex web apps

blog.reifyworks.com

81 pointsmrbbk25 comments

I'm not sure that Elm architecture really solves the fundamental problem, so much as just moves it to another layer.

If you have a big global model, with messages modifying that model, then eventually you're going to notice that many places in that model are similar. E.g., widget state for identical widgets on different parts of the page. So you tag the messages that pertain to a particular widget with some kind of coordinate into the global model, and then you call generic widget code with the local widget state as an argument, and the message, to produce a new local widget state. Congratulations, you've reinvented objects.

I've looked into Elm a little bit, read the docs and watched the videos, and I tend to agree with the first paragraph. The architecture is mostly about how to handle updates to a single state machine and render it. There is no deep insight about how to compose stateful components into larger stateful components, and up and up, to build a sophisticated app without things getting out of hand, except: "A component is just a module with types and functions. Compose them however you want." As people build more and more sophisticated widgets with Elm, it pushes the state of the art in this respect, but the problem is still there as far as I can tell.

I think that Elm’s deep insight into composing stateful components is that if you keep important state hidden inside components, it will always hurt.

"Hidden" isn't the same as implicit. State might be hidden in the sense that it is encapsulated. For example, sometimes we want to treat a text field component as just an "editor for a string value," without worrying about the cursor and selection state, or the state of the autocomplete dropdown if there is one, etc. That said, in the fullness of time, you do eventually find yourself wanting access to this state for some purpose or another.

Every time you use an HTML input tag, you are using an abstraction over state, and the first time you need access to the input element's cursor and selection, you realize you've been pretending the element had less state than it had, which is a pretty useful thing to do.

If I can write a form component that needs an "editor for a string" component, specified as a type, and fill that need with a "fancy editor for a string" component that has a more elaborate model that I can abstract away, then I think we're in business, but I can't quite picture how that would work.

I like Elm and have been creating little side projects here and there but this is a pain point for me. Richard Feldman recently released an open source large Elm app to show how he structures his models, views, and update functions in a large Elm app. Other than that however, the resources don't exist quite yet - it seems like the Elm community is currently debating this however.

You make it sound like the Elm architecture us just OOP done wrong or by hand. It’s not. The big difference is who owns the state and who is allowed to change it. If anyone inside the object graph that makes up your app can own and freely change important state, we usually get the tangled mess we know so well. When you move the important state into a single place and only allow it to be modified by a privileged, specialized set of objects reacting to a well-defined set of messages, you get the state under much better control. Which sounds like a great proposition to me.

> Congratulations, you've reinvented objects.

Objects are opaque handles to a state machine which contains an undefined state, that's not what Elm is. Elm is pure, so you only define transformations, and compose them together. The runtime system keeps track of state, not you as the programmer. You just define transformations from one or more types to another one, compose them together to form descriptions of how to transform one, e.g., UI layout into another, connect it to user input, and everything is guaranteed to fit together (unless you ignore important warnings). You no longer keep track of state, you define functions that transform one piece of information into another, and define functions that render a static piece of information into a UI.

A lot of the influential developers in the Elm community argue against components keeping their own local state. In fact, if you try to do this in Elm, you'll run into a lot of pain. Instead, all state is stored in a global tree and is passed down to components as needed.

> state is the stuff that changes. In the Elm architecture, State has to be represented in code, in a very specific way, for it to be available in your application to your users.

I don't understand this. There's a lot of things that is "available in the application to your users" that is outside of the control of Elm - for example, the text selection, scroll position, window position and resolution...

> With Elm, there’s no place to "hide" state in your application that aren’t threaded through the type checker

State isn't so much hidden as collaborative. Multiple components participate and have a need to store independent UI state. For example, a table component might want to control scrolling, filtering, and selection state, while delegating populating the row data to the app.

Is it possible in Elm to allow separate software components to maintain their own independent states, without requiring some god-component to have global knowledge?

Detailed UI state like scrollbar position usually isn’t interesting in the sense that you would need to directly respond to it, share it, persist it, etc. That’s why you don’t usually include it in your application model.

State being collaborative is precisely the problem. If all the components owned important state, they would need to share it with each other. This gets real complicated very quickly, especially when multiple parts of the app need to change that state.

So the main proposition of Elm is exactly that separate components should not hold important state and whatever that needs to be shared should be centralized and modified in one place. Which sounds like the God Object antipattern, but is not, mainly because you can only change the state indirectly, by sending well-defined messages.

Maybe better titled "Type-checked explicit state" ..."?

Maybe! But I liked separating it from type-checking for the sake of the title.

I thought this article was about finite state machines at first!

Sounds a lot like Redux?

Yes - the creator of Redux, Dan Abramov, was inspired by the Elm Architecture in his design of Redux.

I think the ideas are similar, but does Redux have the statically checked component? That's the killer here.

If you use redux with a type checked language like TypeScript or Flow it does.

Not without conscious effort on the part of the developer. I almost wish there were a Typescript-first re-implementation of Redux.

Redux makes it a bit annoying with the actions/actions creators. I've switched my project (written in TypeScript) from redux to mobx and, since it's just calling normal functions, everything is typed without making any extra effort.

I was just wishing for the same thing myself.

Sounds like Elm! :-D

Redux is actually using a hybrid between message passing and FRP.

This doesn't make much sense to put in the view. The view is the state and the data that is not visual or the representations of the visual (checkbox :checked = 1 otherwise 0 in the model) isn't solved by this. You have now just made the whole view more complicated. Your webservices (or equivalent datasource layer) should have these guarantees about service availability and data formats checked by both sides. I don't understand how this is an innovation, since checking the contextual data representation in multiple layers does nothing to address the complexity. Also, testing is increased by spreading it over development time, to solve message format issues...leaving the sinister reality that models are often either mistranslated to/from visual elements or there are business logic conditions that are unaccounted for. Complex systems are named such, when you cannot remember every single control in every state. That only takes a few weeks of coding to achieve.

uhh so is this supposed to be web devs meet state machines?

I see they've invented a new name to label the innovation as such.

Yes, because of course every state machine use is the same thing, regardless of the domain and other considerations...

Reply on news.ycombinator.com