Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:elm:basic [2020/05/09 08:04]
alfred creado
+++ wiki2:elm:basic [2020/05/09 09:25] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Basic Elm ======
-===== Starting =====
-When starting a project you will launch the next command:
-<code>
-elm init
-</code>
-You can add Elm code to ''src'' folder. For example ''Main.elm'':
-<code>
-import Html
-main = Html.text "Hello world"
-</code>
-You can see its result with the next command launching the elm file.
-<code>
-elm reactor
-</code>
-After this you can create a ''public'' folder and put there the next ''index.html'' code file:
-<code>
-<!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>
-</code>
-You can compile the elm file with:
-<code>
-elm make src/Main.elm --output public/main.js
-</code>
-===== Basic =====
-==== Type annotation ====
-To declare a function (type anotation) that gets a number and returns an string:
-<code>
-checkStatus : Int -> String
-</code>
-If you write "checkStatus" it will return ''<nowiki><function> : Int -> String</nowiki>''.
-It is something like this:
-<code>
-<function: add> : Int      -> Int      -> Int
-| function name | type arg1 | type arg2 | type result |
-</code>
-Other ways to define a type:
-<code>
-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 }
-</code>
-==== Types ====
-Something similar to an **enum** is this:
-<code>
-type UserStatus = Regular | Visitor
-</code>
-Where ''UserStatus'' only can have values ''Regular'' or ''Visitor''.
-<code>
-type UserStatus
-  = Regular
-  | Visitor
-type alias User =
-  { status : UserStatus
-  , name : String
-  }
-thomas = { status = Regular, name = "Thomas" }
-kate95 = { status = Visitor, name = "kate95" }
-</code>
-Other way to the previous code:
-<code>
-type User
-  = Regular String
-  | Visitor String
-thomas = Regular "Thomas"
-kate95 = Visitor "kate95"
-</code>
-Lets see:
-<code>
-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
-</code>
-==== Type Aliases ====
-A type alias is a shorter name for a type. For example, you could create a User alias like this:
-<code>
-type alias User =
-  { name : String
-  , age : Int
-  }
--- WITH ALIAS
-isOldEnoughToVote : User -> Bool
-isOldEnoughToVote user =
-  user.age >= 18
--- WITHOUT ALIAS
-isOldEnoughToVote : { name : String, age : Int } -> Bool
-isOldEnoughToVote user =
-  user.age >= 18
-</code>
-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...
-{{ :wiki2:elm:modes.png?direct&600 |}}
-==== 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.
-<code>
-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" ]
-            ]
-        ]
-</code>
-===== Deprecated =====
 ==== Basic actions ====
 <code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página