Sergio Xalambrí
Web Developer at Daffy.org
Functional Frontend con ElmLang
Sergio Daniel Xalambrí
JavaScript FullStack Realtime Frontend Developer at Platzi & Otaku & Dungeon Master & Argentino & Pochoclo lover
¿Qué es ElmLang?
Un lenguaje de programación funcional basado en Haskell orientado a desarrollo Frontend
¿Cómo se ve ElmLang?
import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)
main =
App.beginnerProgram { model = 0, view = view, update = update }
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]¿Quién usa ElmLang?
Diferencias con JS
**Number** = 3
**Decimal** = 3.14
**String** = "hello world!"
**Multine string** = """multiline string"""
**Character** = 'a'
**Boolean** = True
**List** = [1,2,3]
**Record** = { x = 3, y = 4 }
**Record property** = point.x
**Update record** = { point | x = 42 }
**Lambda function** = \x y -> x + y
**Function** = funcName x y = x + y
**Function usage** = max 3 4
**Map lists** = List.map sqrt numbers
**Condition** = if 3 > 2 then "cat" else "dog"
**String concat** = "abc" ++ "123"
**String + Number** = "abc" ++ toString 123
**Types** = type name = String
**Function types** = funcName : Int -> Int -> Int
**Type aliases** = type alias point = { x: Int, y : Int }Instalar ElmLang
Instalador de Mac
http://install.elm-lang.org/Elm-Platform-0.17.1.pkg
Instalador de Windows
http://install.elm-lang.org/Elm-Platform-0.17.1.exe
Instalador por npm
https://www.npmjs.com/package/elm
Desde el código fuente
https://github.com/elm-lang/elm-platform
Functional Frontend con ElmLang
By Sergio Xalambrí
Functional Frontend con ElmLang
Introducción a ElmLang.
