Introduction to Elm
8 likes2,081 views
This document introduces Elm, a functional programming language for building front-end web applications. It discusses that Elm is 4 years old, compiles to JavaScript, and focuses on simplicity and functional reactive programming. It notes Elm's characteristics like being functional, using ML syntax, immutability, and pure functions. It then compares using just JavaScript to using Elm and other options. It describes tools like the Elm compiler, package manager, and development environment. It also provides examples of Elm code for a counter app and discusses testing, effects, and JavaScript interoperability in Elm.
![13
RECORDS
carolina =
{ name = "Carolina de Jesus"
, age = 62
}
abdias =
{ name = "Abdias Nascimento"
, age = 97
}
people =
[ carolina
, abdias
]
carolina.name
.name carolina
List.map .name people
-- ["Carolina de Jesus", "Abdias Nascimento"]](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-13-320.jpg)
![-- UPDATE
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
case action of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ] 30
COUNTER.ELM](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-30-320.jpg)
![-- VIEW
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ]
, button [ onClick address Increment ] [ text "+" ]
]
countStyle : Attribute
countStyle =
style
[ ("font-size", "20px")
, ("font-family", "monospace")
, ("display", "inline-block")
, ("width", "50px")
, ("text-align", "center")
]
31
COUNTER.ELM](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-31-320.jpg)
![35
TASKS
getRandomGif : String -> Effects Action
getRandomGif topic =
Http.get decodeUrl (randomUrl topic)
|> Task.toMaybe
|> Task.map NewGif
|> Effects.task
randomUrl : String -> String
randomUrl topic =
Http.url "http://api.giphy.com/v1/gifs/random"
[ "api_key" => "dc6zaTOxFJmzC"
, "tag" => topic
]](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-35-320.jpg)
![39
ELM TEST
module Example where
import ElmTest exposing (..)
tests : Test
tests =
suite "A Test Suite"
[ test "Addition" <|
assertEqual (3 + 7) 10
, test "This test should fail" <|
assert False
]](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-39-320.jpg)
![40
ELM TEST BDD STYLE
module Example where
import ElmTestBDDStyle exposing (..)
tests : Test
tests =
describe "A Test Suite"
[ it "adds two numbers" <|
expect (3 + 7) toBe 10
, it "fails for non-sense stuff" <|
expect True toBe False
]](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-40-320.jpg)
![41
PROPERTY-BASED TESTING
module Example where
import ElmTestBDDStyle exposing (..)
import Check.Investigator exposing (..)
tests : Test
tests =
describe "A Test Suite"
[ it "adds two numbers" <|
expect (3 + 7) toBe 10
, it "fails for non-sense stuff" <|
expect True toBe False
, itAlways "ends up with the same list when reversing twice" <|
expectThat
(list -> List.reverse (List.reverse list))
isTheSameAs
(identity)
forEvery
(list int)
]](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-41-320.jpg)
![43
FROM JS TO ELM
port addUser : Signal (String, UserRecord)
myapp.ports.addUser.send([
"Tom",
{ age: 32, job: "lumberjack" }
]);
myapp.ports.addUser.send([
"Sue",
{ age: 37, job: "accountant" }
]);
JS](https://image.slidesharecdn.com/elm-160218002508/85/Introduction-to-Elm-43-320.jpg)
Introduction to Elm
- 2. WHAT IS ELM? 2 •4 years old language •Compile to JS •Front-end focus •Simplicity focus •FRP focus
- 3. CHARACTERISTICS 3 •Functional •ML syntax •Immutability •Pure functions •Strong type system, but: •No typeclasses •No higher kinded types •Functional reactive programming
- 4. 4 DO I REALLY NEED TO LEARN A NEW LANGUAGE? LET’S JUST USE JAVASCRIPT!
- 5. 5 Elm JS ES6 + Babel + Webpack + React + Redux + Immutable or Typescript or Brunch or Gulp or Grunt or Cycle.js + RxJS or seamless- immutableNot even close
- 6. 6 ELM MAKE The compiler that talks to you
- 7. 7
- 8. 8
- 9. 9
- 12. 12 A LITTLE MORE OBVIOUS SYNTAX -- isNotEven = not . isEven isNotEven = not << isEven isNotEven' = isEven >> not -- let lastChar = head $ toList $ reverse "foobar" let lastChar = head <| toList <| reverse "foobar" dot = scale 2 (move (20,20) (filled blue (circle 10))) dot' = circle 10 |> filled blue |> move (20,20) |> scale 2
- 13. 13 RECORDS carolina = { name = "Carolina de Jesus" , age = 62 } abdias = { name = "Abdias Nascimento" , age = 97 } people = [ carolina , abdias ] carolina.name .name carolina List.map .name people -- ["Carolina de Jesus", "Abdias Nascimento"]
- 14. 14 ELM REPL Just a regular REPL
- 15. 15
- 16. 16
- 17. 17 ELM PACKAGE The best package manager ever
- 21. 21 ENFORCED DOCS
- 23. ELM REACTOR 23 •Auto compile Elm •Hot-swapping •Time travel debugging
- 24. 24 EXAMPLE http://debug.elm-lang.org/edit/Mario.elm
- 26. 26 SIGNALS import Graphics.Element exposing (..) import Mouse main : Signal Element main = Signal.map show Mouse.position
- 28. 28 talk is cheap, show me the code
- 33. 33 side-effects
- 34. 34 EFFECTS type Action = RequestMore | NewGif (Maybe String) update : Action -> Model -> (Model, Effects Action) update action model = case action of RequestMore -> (model, getRandomGif model.topic) NewGif maybeUrl -> ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) , Effects.none )
- 35. 35 TASKS getRandomGif : String -> Effects Action getRandomGif topic = Http.get decodeUrl (randomUrl topic) |> Task.toMaybe |> Task.map NewGif |> Effects.task randomUrl : String -> String randomUrl topic = Http.url "http://api.giphy.com/v1/gifs/random" [ "api_key" => "dc6zaTOxFJmzC" , "tag" => topic ]
- 37. 37 try to escape the Elm Architecture, I dare you!
- 38. 38 TESTS Only for checking what the compiler can’t
- 39. 39 ELM TEST module Example where import ElmTest exposing (..) tests : Test tests = suite "A Test Suite" [ test "Addition" <| assertEqual (3 + 7) 10 , test "This test should fail" <| assert False ]
- 40. 40 ELM TEST BDD STYLE module Example where import ElmTestBDDStyle exposing (..) tests : Test tests = describe "A Test Suite" [ it "adds two numbers" <| expect (3 + 7) toBe 10 , it "fails for non-sense stuff" <| expect True toBe False ]
- 41. 41 PROPERTY-BASED TESTING module Example where import ElmTestBDDStyle exposing (..) import Check.Investigator exposing (..) tests : Test tests = describe "A Test Suite" [ it "adds two numbers" <| expect (3 + 7) toBe 10 , it "fails for non-sense stuff" <| expect True toBe False , itAlways "ends up with the same list when reversing twice" <| expectThat (list -> List.reverse (List.reverse list)) isTheSameAs (identity) forEvery (list int) ]
- 42. 42 JS JAVASCRIPT INTEROP Avoid it at all costs
- 43. 43 FROM JS TO ELM port addUser : Signal (String, UserRecord) myapp.ports.addUser.send([ "Tom", { age: 32, job: "lumberjack" } ]); myapp.ports.addUser.send([ "Sue", { age: 37, job: "accountant" } ]); JS
- 44. 44 FROM ELM TO JS port requestUser : Signal String port requestUser = signalOfUsersWeWantMoreInfoOn myapp.ports.requestUser.subscribe(databaseLookup); function databaseLookup(user) { var userInfo = database.lookup(user); myapp.ports.addUser.send(user, userInfo); } JS
- 45. 45 NATIVE JS INTEROP DON’T USE THIS
- 46. THANK YOU