Introduction to Elm

Introduction to the Elm language, principles, ecosystem and architecture

Transcript

1. 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-
 immutable Not even close
6. 6 ELM MAKE The compiler that talks to you
10. NO RUNTIME EXCEPTIONS 10
11. NO RUNTIME EXCEPTIONS 11
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
17. 17 ELM PACKAGE The best package manager ever
18. 18 ENFORCED SEMVER
19. 19 ENFORCED SEMVER
20. 20 AUTOMATIC CHANGELOG
21. 21 ENFORCED DOCS
22. 22 ELM REACTOR Awesome development flow
23. ELM REACTOR 23 •Auto compile Elm •Hot-swapping •Time travel debugging
24. 24 EXAMPLE http://debug.elm-lang.org/edit/Mario.elm
25. 25 THE ELM ARCHITECTURE
26. 26 SIGNALS import Graphics.Element exposing (..) import Mouse main : Signal Element main = Signal.map show Mouse.position
27. 27 Update Model View action signal mailbox
28. 28 talk is cheap, show me the code
29. 29 module Counter where import Html exposing (..) import Html.Attributes exposing (style) import Html.Events exposing (onClick) -- MODEL type alias Model = Int -- UPDATE type Action = Increment | Decrement update : Action -> Model -> Model update action model = COUNTER.ELM
30. -- 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
31. -- 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
32. 32 MAIN.ELM import Counter exposing (update, view) import StartApp.Simple exposing (start) main = start { model = 0 , update = update , view = view } http://evancz.github.io/elm-architecture-tutorial/examples/1
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 ]
36. 36 invention or discovery?
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