Questions tagged [elm-architecture]

Use for questions relating to The Elm Architecture, whether implemented in [elm] proper, or in the many implementations in other languages and on other platforms. Do NOT use this tag for questions relating to general architecture as applied to Elm code.

The Elm Architecture is an architectural pattern for developing user interfaces, similar to Model-View-Controller and the like, but distinguished primarily by being purely functional in nature. The pattern originates in but has since been adopted by libraries on many other languages and platforms.

The fundamental building blocks of The Elm Architecture are:

  • The Model -- comprising the state of your application
  • The update function -- a pure function from the current state to the next
  • The view function -- a pure function from a given state to HTML

update is triggered by events attached to the HTML in the view function and are accompanied by a message describing which event occurred. The update function will then, given the message and current state, return the next state, which is in turn passed on to view to render the state`s corresponding HTML.

update may also be triggered other non-user events such as commands and subscriptions, which might fetch data from the server or just emit trigger an update every second. These kinds of updates are also accompanied by appropriate messages, and follow the same flow as events triggered from HTML. They're just initiated elsewhere.

Implementations

25 questions
19
votes
1 answer

How to handle multiple subscriptions in the elm architecture

I am working through the elm guide. In the effects subchapter there is an example with a Time-subscription subscriptions : Model -> Sub Msg subscriptions model = Time.every second Tick and an example which handles…
DanEEStar
  • 6,140
  • 6
  • 37
  • 52
19
votes
2 answers

Elm - Turn Msg into Cmd Msg

I'm trying to modify a simple app from the elm-lang tutorial to first update the model, then trigger another update. update msg model = case msg of MorePlease -> (model, getRandomGif model.topic) NewGif (Ok newUrl) -> ( {…
steel
  • 11,883
  • 7
  • 72
  • 109
11
votes
2 answers

why the Elm Architecture is called TEA?

I've seen this TEA acronym (?!) in many places all over the web - means elm architecture - but i don't understand what each initial stands for. Thanks.
AIon
  • 12,521
  • 10
  • 47
  • 73
5
votes
1 answer

Type Mismatch - 1st argument to sandbox is not what I expect

I am trying to add subscriptions as I have a dropdown, this helps ensure that the dropdowns automatically close when you click outside of them. On doing so, I had to change the model as well as my update. This link (will take you to the Elm…
Trevor
  • 7,777
  • 6
  • 31
  • 50
5
votes
3 answers

Sequence Http.get in Elm

Below I have a button that attempts to load remote content ... import Post exposing (Post) import Html exposing (..) import Html.Events exposing (..) import Http import Json.Decode as Decode type alias Model = { posts : List Post } type Msg …
Mulan
  • 129,518
  • 31
  • 228
  • 259
5
votes
1 answer

How can the `Msg` type be separated into many types in Elm?

The standard way to use model and update in Elm is to define the Model and Msg types, and the update function: type alias Model = { ... } type Msg = Msg1 | Msg2 | ... update : Msg -> Model -> (Model, Cmd Msg) ... When the application grows, all…
TPJ
  • 291
  • 1
  • 4
  • 10
4
votes
1 answer

Is there a nice pattern for dealing with lots of input fields in elm?

Is there a pattern in elm for avoiding writing lots of messages just to update individual fields on child elements of your model? At the moment I'm ending up with code as below, with a message for every input that changes and then a bunch of update…
Okkio
  • 147
  • 11
4
votes
3 answers

Composing Programs in the Elm Architecture

Suppose I want to create a webpage with two components, say a Navbar and a Body. These two components do not interact with each other and can be developed independently. So, I have two elm files which have the following components in each of…
4
votes
3 answers

What is the meaning of `Cmd msg`?

I'm trying to use ports to pass an URL to Javascript in order to redirect the user to another page. I wrote a port module to contain all the ports needed for my project : port module Utils exposing (..) port changePage : String -> Cmd Event Then, I…
Algorythmis
  • 642
  • 1
  • 7
  • 19
4
votes
1 answer

How to call a parent msg from component in Elm?

I have a modal window that can display different components inside it. Each component has it's own updater and messages, but I want to share a close button between them. Thus I can't call "CloseModal" directly from my children — Elm doesn't allow me…
Eugene Matveyev
  • 161
  • 1
  • 2
  • 14
3
votes
1 answer

What is `init : () -> (Model, Cmd Msg)` annotation?

In official Elm website there is a init function definition I don't understand: init : () -> (Model, Cmd Msg) init _ = ( Loading , Http.get { url = "https://elm-lang.org/assets/public-opinion.txt" , expect = Http.expectString…
user6435535
3
votes
2 answers

How can one page emit a message to navigate to another page in Elm?

Here's how my Elm app is currently structured: Types.elm: import Pages.Login.Types as Login import Pages.Dashboard.Types as Dashboard type Page = LoginPage | DashboardPage type Msg = LoginMsg Login.Msg | DashboardMsg…
Saurabh Nanda
  • 6,373
  • 5
  • 31
  • 60
2
votes
1 answer

How to wait for the first arrived result on the thenable chain?

We can use Promise.race to wait for the first arrived result on the thenable chain. The Task module doesn't seem to support it yet, Task.sequence is only the equivalent to Promise.all. Non-thenable Solution demo: import Process import Task init ()…
sof
  • 9,113
  • 16
  • 57
  • 83
2
votes
1 answer

Elm, how is the model kept synchronised with the subscriptions?

When you look at this excerpt of "An Elm introduction": subscriptions : Model -> Sub Msg subscriptions model = Time.every 1000 Tick The model parameter passed to the function subscriptions must correspond to the current model of the app, i.e. if…
2
votes
2 answers

How to batch multiple http calls together?

I have a report which I'm using as a basis to perform a number of Http calls to get details for each row. LoadReport -> ( model , Http.toTask (loadReport model.token model.page) |> Task.andThen (\report -> …
mfilimonov
  • 587
  • 4
  • 18
1
2