El blog tecnológico de Blag.: Mi primer post en Elm

Mirándo en mi lista de nuevos lenguajes a aprender...me encontré con Elm...programación funcional y reactiva en el browser...

No es eso impresionante? Por supuesto que lo es -:)

Bueno...Elm comenzó a existir a mediados del 2012...así que es relativamente nuevo...lo cual significa que no hay muchos tutoriales y que yo sepa ningún libro...pero...no dejes que eso te asuste...existen un par de asombrosos cursos dictados por The Pragmatic Studio que te ayudarán a estar listo y preparado -;)

Elm: Building Reactive Web Apps

Elm: Signals, Mailboxes & Ports

Ahora...para instalar Elm...si ya tienes instalado NodeJS entonces simplemente puedes utilizar npm que es yo pienso la manera más rápida y sencilla...

sudo npm install elm

De lo contrario puedes ir a la sección de download para los instaladores o para el código fuente para compilarlo...pero debes tener en cuenta que para compilarlo vas a necesitar tener Haskell instalado también...

En todo caso...vamos a ver como crear una aplicación de List Fibonacci en Elm... -:)

Crea una carpeta y llamala "Fibonacci_App" y entra en la carpeta desde el terminal...

elm package install evancz/elm-html

elm package install evancz/start-app

El primer paquete nos va a permitir generar código HTML y el segundo va a hacer nuestras vidas más sencillas...

Ahora...abre tu editor favorito y copia y pega este código...

Fibonacci.elm
module Fibonacci where import Html exposing (..) import Html.Events exposing (..) import Html.Attributes exposing (..) import StartApp.Simple as StartApp import String exposing (toInt) --MODEL type alias Model = { number: String, fibonacci: String } initialModel: Model initialModel = { number = "", fibonacci = "" } --UPDATE parseInt : String -> Int parseInt string = case String.toInt string of Ok value -> value Err error -> 0 type Action = NoOp \| Submit \| UpdateNumber String update: Action -> Model -> Model update action model = case action of NoOp -> model UpdateNumber contents -> { model \| number = contents } Submit -> { model \| fibonacci = fib (parseInt model.number) 0 1, number = "" } fib: Int -> Int -> Int -> String fib num a b = if a > 0 && num > 1 then toString(a+b) ++ " " ++ fib (num-1) (a+b) a else if a == 0 then toString a ++ " " ++ toString b ++ " " ++ toString(a+b) ++ " " ++ fib(num-1) (a+b) b else "" --VIEW buttonStyle: Attribute buttonStyle = style [ ("outline", "none"), ("border", "none"), ("border-radius","4px"), ("margin-right","5px"), ("padding","4px 10px"), ("background","#61a1bc"), ("color","#fff") ] divStyle: Attribute divStyle = style [ ("margin", "50px auto"), ("padding", "0px 50px"), ("text-align", "center") ] pStyle: Attribute pStyle = style [ ("font-size", "30px") ] pageHeader : Html pageHeader = h1 [ ] [text "Fibonacci List"] view: Signal.Address Action -> Model -> Html view address model = div [ divStyle ] [ pageHeader, input [ type' "text", name "number", placeholder "Enter a number", value model.number, on "input" targetValue (\v -> Signal.message address (UpdateNumber v)) ] [ ], button [ buttonStyle, onClick address Submit ] [ text "Submit" ], p [ pStyle ] [ text (model.fibonacci) ] ] main: Signal Html main = StartApp.start { model = initialModel, view = view, update = update }

Fibonacci.elm

module Fibonacci where

import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import StartApp.Simple as StartApp
import String exposing (toInt)

--MODEL
type alias Model =
  { 
    number: String,
    fibonacci: String
  }

initialModel: Model
initialModel = 
  {
    number = "",
    fibonacci = ""
  }

--UPDATE
parseInt : String -> Int
parseInt string =
  case String.toInt string of
    Ok value ->
      value
    Err error ->
      0

type Action = NoOp | Submit | UpdateNumber String

update: Action -> Model -> Model
update action model =
  case action of
    NoOp ->
      model
    UpdateNumber contents ->
      { model | number = contents }  
    Submit ->
      { model | 
          fibonacci = fib (parseInt model.number) 0 1,
          number = ""
      }

fib: Int -> Int -> Int -> String
fib num a b =
  if a > 0 && num > 1 then toString(a+b) ++ " " ++ fib (num-1) (a+b) a
  else if a == 0 then toString a ++ " " ++ toString b ++ " " 
                      ++ toString(a+b) ++ " " ++ fib(num-1) (a+b) b
  else ""

--VIEW
buttonStyle: Attribute
buttonStyle = 
  style
    [ ("outline", "none"),
      ("border", "none"),
      ("border-radius","4px"),
      ("margin-right","5px"),
      ("padding","4px 10px"),
      ("background","#61a1bc"),
      ("color","#fff")
    ]

divStyle: Attribute
divStyle = 
  style
    [ ("margin", "50px auto"),
      ("padding", "0px 50px"),
      ("text-align", "center")
    ]

pStyle: Attribute
pStyle = 
  style
    [ ("font-size", "30px") ]

pageHeader : Html
pageHeader = 
  h1 [ ] [text "Fibonacci List"]

view: Signal.Address Action -> Model -> Html
view address model = 
  div [ divStyle ]
    [ pageHeader,
      input
        [ 
          type' "text",
          name "number",
          placeholder "Enter a number",
          value model.number,
          on "input" targetValue (\v -> Signal.message address (UpdateNumber v))
        ]
        [ ],
      button [ buttonStyle, onClick address Submit ] [ text "Submit" ],
      p [ pStyle ]
        [ text (model.fibonacci) ]
    ]
    
main: Signal Html
main = 
  StartApp.start { model = initialModel, view = view, update = update }

Luego, solo debemos compilar nuestra aplicación -;)

elm make Fibonacci.elm --output Fibonaccci.html