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.
No hay comentarios:
Publicar un comentario