Geekly Articles each Day
📜 ⬆️ ⬇️

Elm. Comfortable and awkward

Let's talk about Elm .


Elm is a functional programming language for frontend development. The syntax is similar to Haskell, but much simpler and more specialized. The source code for Elm is compiled into native JavaScript. Compiled JavaScript contains application code that controls the subtree of the DOM.


Elm. Comfortable and awkward. Composition
Elm. Comfortable and awkward. Json.Encoder and Json.Decoder
Elm. Comfortable and awkward. Http, Task


The main element in the architecture of the Elm language is the application. In general, each application contains:


  1. Condition or model. Data describing the current state of the application;
  2. Many valid messages. Messages are sent when events occur (let's say a click on the button) and are delivered to the update function;
  3. The view function, which, based on the state, generates a new DOM tree;
  4. The update function, which accepts the model and the message, and returns the new model and the required effects;
  5. Function subscribe, subscribe to event notifications. In the core language there are subscriptions to the timer, WebSocket, and more.

Typing


Everything must be typed. As a result, static code consistency check. If compiled, it should work. But it will work as you expect or not - no guarantees. This greatly simplifies refactoring.


Model


The model is a custom type. Custom types are built from:


  1. Type Aliases to describe structures;
  2. Union Types for a description of valid type associations;
  3. basic types Int, String and others.

Union Types allow you to declare tagged types. Take for example the description of the User type:


type User = Anonymous | User String

The declared type contains information about the type of user and his data, if authorized. Otherwise, the user is anonymous.


The border


The border between Elm runtime and the external environment through decoders. Decoder (Json.Decode) is a function that accepts JSON as input and returns the Elm type. During the execution of Json.Decode.decodeString or Json.Decode.decodeValue , the input data structure and type matching are checked.


The decoder returns a Result type that contains the data, if successful, or an error.


View


A view is a state function that returns information for generating a DOM tree. Example:


 view : Model -> Html.Html Msg view model = case model.user of Anonymous -> Html.div [] [ Html.text “Anonymous” ] User name -> Html.div [] [ Html.text (“Welcome ” ++ name) ]

Functions are used to generate DOM nodes. In combat projects, view is a composition of more general functions. For example:


 view : Model -> Html.Html Msg view model = case model.user of Anonymous -> anonymousView User name -> userView name

anonymousView and userView are user-defined functions that generate small parts of the interface.


Mutations (update)


All events (user actions, network and TP) generate messages that are delivered to the function registered during initialization. By default, this function is named update. The function accepts the event and model, and returns the new model and commands. Commands are executed in Elm runtime and can also generate events.


For example, incrementing a variable when a button is pressed:


 update : Model -> Msg -> (Model, Cmd Msg) update model msg = case msg of OnClick -> ({model | clicked = model.clicked + 1}, Cmd.none)

Subscribe (subscribe)


Subscribing to events occurs at the start of the application and is re-called whenever the model changes.


In the event of an event, they are delivered to the update function.


For example, a subscription to a timer with a period of 10 seconds. When it reaches 10 seconds, a Tick message is generated and delivered to the update function:


 subscribe : Model -> Sub Msg subscribe model = Time.every 10 Tick

Sources



')

Source: https://habr.com/ru/post/424215/

More articles:


All Articles