jueves, 3 de diciembre de 2015

My first post on Elm

Looking through my list of new languages to learn...I came upon Elm...functional reactive programming in the browser...


Isn't that cool? Of course it is -:)

Now...Elm came to life around 2012...so it's fairly new...which means not some many tutorials and no books that I know of...but...don't let that scare you away...there's actually a couple of awesome courses handled by The Pragmatic Studio that will help you to get up and running -;)

Elm: Building Reactive Web Apps

Elm: Signals, Mailboxes & Ports

Now...to install Elm...if you have NodeJS already installed then you can simply use npm which is I guess the preferred and easier way...

sudo npm install elm

Otherwise just go the download section for the installers or for the source code to build it...but keep in mind that to build it you will need to have Haskell installed as well...

Anyway...we're going to see how to create a Fibonacci List app in Elm... -:)

Create a folder a call it "Fibonacci_App" and the go into it from the terminal...

elm package install evancz/elm-html



elm package install evancz/start-app



The first package is going allow us to generate HTML code and the second one is going to make our lives easier...

Now...open your favorite editor and type this away...

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 }

Now, we just need to compile our application -;)

elm make Fibonacci.elm --output Fibonaccci.html



Now, we can just open that Fibonacci.html file and test our app -:D



Hope you like it -:) I will try to get my LED_Numbers app ready soon -;)

Greetings,

Blag.
Development Culture.