Add a guide article for the Elm architecture (#19042)

* Add architecture stub and link to it in language intro

* Add Elm architecture initial article

* Add wrap up section to architecture article

* Add link to official elm guide
This commit is contained in:
Daniel Oliveira
2018-10-16 00:25:46 -03:00
committed by Quincy Larson
parent 0bae15e8c3
commit 6f4e23bf55
2 changed files with 28 additions and 1 deletions

View File

@ -0,0 +1,25 @@
---
title: Architecture
---
## Architecture
The Elm architecture was the inspiration of the state-of-the-practice architecture in many web applications developed nowadays. It's based on some principles that are inherent to Elm itself, like immutability. The Elm architecture is sometimes referred to as MVU (Model-View-Update). You can read more about the Elm architecture in the [official language guide](https://guide.elm-lang.org/architecture/). Let's explore each of the elements in this definition:
### Model
The Model represents the **whole** state of the application, centralized as a single immutable piece of data. In the TodoMVC sample app, you would find in the Model not only the list of todos, but also the current state of the todo creation form and the view-filtering options.
### View
The View represents the user interface presented in the web browser. In Elm applications, there is a very important aspect of the View: it is a pure function that receives the Model as input.
If you look at the type for the Elm elements in a web application, `Html.Html`, you'll notice it is a parameterized type (you'll usually see something like `Html a` or `Html Msg`). The type parameter here is used to tell the Elm compiler the return type of the event handlers for the elements, if any. We usually call this type Message, and Messages returned from event handlers are dispatched to the Update function much like Redux actions.
### Update
The Update part is another pure function. It receives the current Model and a dispatched Message, returning a new Model as a result. In more complex applications, the Update function can also return Commands, which represent side effects that may later result in more Messages being dispatched.
### How all of this fits together
The three elements mentioned above interact in a predictable way during all of the application's life cycle. The initialization of an Elm application receives as one of its arguments the initial state, which is a value of the Model type. Based on that, the first View render is computed and presented in the web browser. Whenever some user interaction or another side effect results in the dispatch of a Message, the Update function is called. If the resulting Model is different from the previous, the View function is called again.

View File

@ -4,3 +4,5 @@ title: Elm
## Elm
Elm is a domain-specific, purely functional programming language that compiles into Javascript. This programming language is statically typed, and was developed with an emphasis on usability, performance, and robustness. Elm was built by Evan Czaplicki in 2012, and was influenced by Haskell, Standard ML, and OCaml among others. It also helped to inspire the popular state management tool, Redux.
Elm presents itself as a very opinionated solution to building web applications. This is clearly noticeable as it basically forces you to follow its prescribed [architecture](architecture). This is not a bad thing per se, and a significant upside of having to follow "the Elm way" is that it's a very consistent language: as you understand it more deeply, you become able to get productive when contributing to an Elm-based project very quickly.