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 on Elm is compiled into native JavaScript. Compiled javascript contains the application code that controls the DOM subtree.


    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:


    typeUser = 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.userof 
    Anonymous ->
      Html.div [] [ Html.text “Anonymous” ]
   Username ->
      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.userof 
    Anonymous ->
      anonymousView
   Username ->
      userView name

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


    Mutations (update)


    All events (user actions, network and etc.) 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 a new model and command. 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)
updatemodel 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


    Tags:

    Also popular now: