¡Esta es una revisión vieja del documento!

Tabla de Contenidos

Elm

Elm

Starting

When starting a project you will launch the next command:

elm init

You can add Elm code to src folder. For example Main.elm:

import Html
main = Html.text "Hello world"

You can see its result with the next command launching the elm file.

elm reactor

After this you can create a public folder and put there the next index.html code file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MY COOL ELM APP</title>
</head>
<body>
    <div id="hello-world"></div>
    <script src="main.js"></script>
    <script>
        const myDiv = document.getElementById("hello-world");
        const app = Elm.Main.init({ node: myDiv });
    </script>
</body>
</html>

You can compile the elm file with:

elm make src/Main.elm --output public/main.js

Functional programming concepts

A higher order function is a function that operates with functions in a way that takes a function as an argument, or returns a function.

A combinator function is a function that only relies on those functions that are passed as arguments.

Basic

Type annotation

To declare a function (type anotation) that gets a number and returns an string:

checkStatus : Int -> String

If you write “checkStatus” it will return <function> : Int -> String.

It is something like this:

<function: add> : Int      -> Int      -> Int
| function name | type arg1 | type arg2 | type result |

Other ways to define a type:

coordinates : (Float, Float)
coordinates = (53.1201749, 8.5962037)

list : List number
list = [ 1, 2, 3, 4 ]

rect : { width : Int, height : Int }
rect = { width = 10, height = 20 }

Types

Something similar to an enum is this:

type UserStatus = Regular | Visitor

Where UserStatus only can have values Regular or Visitor.

type UserStatus
  = Regular
  | Visitor

type alias User =
  { status : UserStatus
  , name : String
  }

thomas = { status = Regular, name = "Thomas" }
kate95 = { status = Visitor, name = "kate95" }

Other way to the previous code:

type User
  = Regular String
  | Visitor String

thomas = Regular "Thomas"
kate95 = Visitor "kate95"

Lets see:

type User
  = Regular String Int
  | Visitor String
-- A regular user has name and age; a visitor, only name.
Regular
-- <function> : String -> Int -> User
Visitor
-- <function> : String -> User
Regular "Thomas" 44
-- Regular "Thomas" 44 : User
Visitor "kate95"
-- Visitor "kate95" : User

Type Aliases

A type alias is a shorter name for a type. For example, you could create a User alias like this:

type alias User =
  { name : String
  , age : Int
  }

-- WITH ALIAS

isOldEnoughToVote : User -> Bool
isOldEnoughToVote user =
  user.age >= 18


-- WITHOUT ALIAS. You would need to always manage the whole structure itself.

isOldEnoughToVote : { name : String, age : Int } -> Bool
isOldEnoughToVote user =
  user.age >= 18

As I understand you could pattern match a type, but not a type alias. We specify the type of functions like update and view with type aliases.

An Elm Program

There are two ways to insert an Elm program in your browser. As Browser.sandbox or Browser.element. The first one does not have external communication and is good to just create an Elm program that does not interlopes with the browser apart from creating html tags, the second one allows to access to REST services, time, random…

Program structure

The next code is basic program structure. It uses Browser.sandbox to create the end html. Browser.sandbox receives an init value (Which is the model), an update function, and a view function.

module Marcarrones exposing (..)
 
import Browser
import Html exposing (..)
import Html.Events exposing (onClick)
 
main = Browser.sandbox { init = 0, update = update, view = view }
 
-- Where we create a variable Model we are creating an Int
type alias Model = Int
 
-- Update is a function that receives two ints and returns an int
update : Model -> Int -> Int            
-- (Basic implementation) First int parameter is "inccrement", Second int is "model", 
-- update increment model = model + increment
-- Adding an "if expression"
update increment model = if increment == 0 then 0 else model + increment
 
-- This is the standard way of a view function 
view : Model -> Html Model
-- View receives a parameter Model called model; it returns an Html and the changed model
view model =                            
    div []
        [ 
            -- A button "object" with the onClick method (onClick calls update when the button is pressed)
            button [ onClick 1 ] [ text "Add" ],        
            div [] [ text (String.fromInt model) ],
            button [ onClick -1 ] [ text "Subs" ],
            div [] [
                button [ onClick 0 ] [ text "Reset" ]
            ]
        ]

Programming

Herramientas de usuario

Herramientas del sitio