Elm or functional programming for the web, understandable to the teapot

Recently, looking through interesting repositories on github in search of inspiration, I came across the Elm project - a functional reactive programming language created for the web, a descendant of ML and Haskell. I do not have much experience in functional programming, but after looking at the landing page, I was carried away by this creation for several hours, forgetting about work and the world around. I was immediately inspired by that simplicity, which, as it seemed to me before, is not inherent in functional programming languages.
I repeat once again that I am not strong in functional programming, I am not familiar with the mathematical concepts on which it is built, and I have not learned Elm, so far, not very much time. I think that it would have been better if someone else had written this article, who was more knowledgeable, but there were no such people, but until then, I decided to put this burden on myself, perhaps my article will help someone to discover the charms of the functional. programming for the web, or take a fresh look at the seemingly familiar things. Most of the materials presented in the article are taken from official documentation and translated in fairly free form. All strangers, please under the cat.


To begin with, let's write our first application on Elm and try to figure out what is happening. Without departing from tradition, let it be our greetings to the World.

import Html exposing (span, text) import Html.Attributes exposing (class) main = span [class "welcome-message"] [text "Hello, World!"] 

The first two lines connect the Html and Html.Attributes modules, thanks to which we can display and modify HTML elements and their attributes on the page. The exposing directive allows us to use the functions specified in the parameters directly, for example instead

 Html.span 

we can write just

 span 

')
main is a control construct that controls our application; most programs written in Elm will somehow contain this construct.

Line

  span [class "welcome-message"] [text "Hello, World!"] 

Generates a simple HTML code:

 <span class="welcome-message">Hello, World!</span> 

But all this is not very interesting, because in order to generate simple HTML code in one line, we had to write as many as 4 lines on Elm, which is not very impressive so far, but all we have to do is look into the basic concepts of the language architecture and everything falls into place.

All the logic of Elm programs is divided into 3 clear and simple parts, already, one way or another, familiar to many in web development:

• Model
• Update
• View

Model
I would characterize the model as the state of the application, which is different from what is meant by the model in the usual MVC. If to express my thought in more detail, the Model in Elm will contain all the models in the understanding of MVC that are necessary in this state for the application, if any. At the same time Model can be something much simpler. For example, in the following example, in which we make a simple counter, the Model will be a simple integer (Int).

Update
When it comes to updating a state, update comes into play. Everything is no more complicated here than with a model. Update is a function that says HOW we need to change the state of an application (Model)

View
Rendering is how we want to display the state of our application, that is, Model.

In the end, the application on Elm works as follows:
We receive a request from the outside world. We use it to update our model, decide how we want to display the result. Elm decides how to efficiently display our HTML.

Reading a dry text is quite difficult to understand what is happening, therefore, let's consider the promised example of creating a counter.

 module Counter where import Html exposing (..) import Html.Attributes exposing (style) import Html.Events exposing (onClick) import StartApp main = StartApp.start { model = 0 , update = update , view = view } -- MODEL type alias Model = Int -- UPDATE type Action = Increment | Decrement update : Action -> Model -> Model update action model = case action of Increment -> model + 1 Decrement -> model - 1 -- VIEW view : Signal.Address Action -> Model -> Html view address model = div [] [ button [ onClick address Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] countStyle : Attribute countStyle = style [ ("font-size", "20px") , ("font-family", "monospace") , ("display", "inline-block") , ("width", "50px") , ("text-align", "center") ] 

In this example, a rather important concept was added - Action (action). Actions allow us to respond correctly to requests received from the outside world. In this example, we have defined two types of actions - Increment and Decrement. And, depending on the received action, we decide how to change our model.

By the way, the developers have provided an online compiler , so that you can run one of the many available examples, or try to write something yourself. Try running this example and see what happens!

You can talk about the basic concepts of this language for a long time, but I think those who found the material presented at least a little interesting will go to the official website themselves and see everything that is called with their own eyes. And also, I urge those who are not interested in what I wrote, or did not like my writing style, to stop by and still look at Elm with my own eyes. In conclusion, I want to add a sample code from the official site that generates the ping-pong game in the browser, in my opinion, the elegance and simplicity of this language deserve attention from the elm-lang.org/examples/pong community