Elm

Elm for building single page applications

Transcript

1. ELM
   @SEBASPORTO
   

   View Slide

2. LOOKING FOR
   BETTER WAYS
   JQUERY
   CANJS
   ANGULAR
   REACT
   ELM?
   

   View Slide

3. ELM?
   ‣FRP (functional reactive
   programming) language *
   ‣Statically typed
   ‣Compiles to JS
   

   View Slide

4. TRENDS IN
   FRONT END
   

   View Slide

5. DESCRIBE
   INSTEAD OF
   MUTATING THE DOM
   ▸ Complex interactions are easy
   ▸ Speed
   

   View Slide

6. DESCRIBE STATE
   1
   2
   3 1
   2
   3
   focus on the state
   not the changes
   jquery react
   

   View Slide

7. DESCRIBE
   STATE
   ▸ Complex interactions are easy
   ▸ Easier to model
   

   View Slide

8. UNIDIRECTIONAL
   DATA FLOWS
   ▸ Easier to understand
   ▸ Less complexity
   

   View Slide

9. FLUX
   View
   Dispatcher
   A
   c
   tion
   (E
   vent)
   Store Action (Event)
   C
   hange
   

   View Slide

10. IMMUTABLE DATA
    ▸ Confidence
    ▸ No side effects
    ▸ Dirty objects
    ▸ Undo
    

    View Slide

11. ▸ Seamless-immutable
    ▸ Immutable.js
    Mediocre solutions,
    JS will fight you all they way
    IMMUTABLE DATA in JS
    

    View Slide

12. DESCRIBE TRANSFORMATIONS
    IN APP DATA
    INSTEAD OF TRANSFORMING
    ▸ Easier to test
    ▸ Easier to compose
    ▸ Redux
    

    View Slide

13. PURE VIEWS
    aka STATELESS VIEWS
    

    View Slide

14. STATELESS VIEWS
    Same
    params
    Same
    Output
    View
    

    View Slide

15. STATELESS VIEWS
    ▸ Simpler to understand
    ▸ Easier to test
    ▸ No side effects
    

    View Slide

16. ALL STATE IN ONE PLACE
    

    View Slide

17. STATE IN ON PLACE
    Component
    Component Component
    Component
    Component
    Component
    State
    

    View Slide

18. ALL STATE IN ONE PLACE
    ▸ State consistency between views
    ▸ Undo
    ▸ Serialise / unserialise
    ▸ Easier to debug
    

    View Slide

19. THERE HAPPENS TO BE A LANGUAGE THAT
    EMBRACES ALL THESE
    

    View Slide

20. ELM
    ▸ Immutable
    ▸ One state tree
    ▸ Stateless views
    ▸ Describe transformations
    ▸ Unidirectional data flow
    

    View Slide

21. ML BASED (LIKE HASKELL)
    sum: Int -> Int -> Int
    sum a b =
    a + b
    

    View Slide

22. PROGRAMMING
    IN ELM
    

    View Slide

23. SIGNALS
    Mouse move
    24, 30 26, 32 28, 30 ....
    Constant flow of events
    

    View Slide

24. SIGNALS
    Mouse click
    Key press
    Merged signal
    

    View Slide

25. SIGNALS
    They come from everywhere
    - Clicks
    - Keyboard
    - Hash changes
    - Ajax request
    

    View Slide

26. TASKS
    Async ops, like promises
    Create
    Task
    Task
    finishes
    Create
    signal with
    result
    Run Task
    

    View Slide

27. KEEPING STATE - THE FUNCTIONAL WAY
    Initial state
    FoldP
    Update
    Signal
    with
    event
    Signal
    with
    updated
    model
    like reduce
    

    View Slide

28. THE ELM ARCHITECTURE
    Signal
    (event)
    mailbox
    Signal
    View
    FoldP Update
    Updated
    model
    

    View Slide

29. DEMO
    

    View Slide

30. WHAT ELSE?
    

    View Slide

31. WHAT IF
    WE HAD ALMOST NO ERRORS?
    

    View Slide

32. JAVASCRIPT IS FAMOUS FOR
    UNHELPFUL ERRORS
    UNDEFINED IS
    NOT A FUNCTION
    

    View Slide

33. ELM
    7| text (toString List.lenght things)
    `List` does not expose `lenght`. Maybe
    you want one of the following?
    List.length
    

    View Slide

34. WHAT IF
    WE HAD NO NULLS?
    

    View Slide

35. JAVASCRIPT
    var array = []
    var res = array[0] * 2
    NaN
    

    View Slide

36. RUBY
    undefined method '*' for nil:NilClass
    (NoMethodError)
    RUST
    panicked at 'index out of bounds: the len is
    1 but the index is 1'
    ELIXIR
    (ArithmeticError) bad argument in arithmetic
    expression
    GO
    panic: runtime error: index out of range
    https://gist.github.com/sporto/77db9de59f559e67b006
    

    View Slide

37. ELM
    list =
    []
    first =
    List.head list
    res =
    first * 2
    main =
    text (toString res)
    This won't compile
    

    View Slide

38. ELM
    list =
    []
    first =
    withDefault 1 (List.head list)
    res =
    first * 2
    main =
    text (toString res)
    

    View Slide

39. FLOW & TYPESCRIPT ARE GREAT
    BUT NOT AT THE SAME S
    Still plenty of error that can slip through
    

    View Slide

40. ELM == VERY RARE TO GET
    RUNTIME ERRORS
    

    View Slide

41. GREAT, TERSE SYNTAX
    

    View Slide

42. PIPE OPERATOR
    _.(collection)
    .filter(filterFn)
    .map(mapFn)
    .value()
    collection
    |> filter filterFn
    |> map mapFn
    JS
    ELM
    

    View Slide

43. CONTROLLED SIDE EFFECTS
    

    View Slide

44. IN JS SIDE EFFECTS CAN HAPPEN
    ANYWHERE
    ▸ Impossible to know what side effects this have
    without looking
    ▸ Mutation, sending ajax?
    ▸ Makes really hard to find bugs
    sort(collection)
    

    View Slide

45. IN ELM IS OBVIOUS
    sort: List String -> List String
    update: Action -> Model -> Effects Action
    

    View Slide

46. OTHER NICE THINGS
    ▸ Time travel debugger
    ▸ Enforces Semantic versioning
    

    View Slide

47. IN PRACTICE
    

    View Slide

48. ▸ Automatic compilation
    ▸ But doesn't play well with external JS
    ELM REACTOR
    

    View Slide

49. ELM MAKE
    ▸ Compile on demand - really fast
    ▸ Plays nicely with existing JS App (Embedded)
    

    View Slide

50. USING ELM
    ▸ Send and receive messages to JS
    PORTS
    JS ELM
    ports
    

    View Slide

51. NOT SO GREAT
    

    View Slide

52. JSON ENCODING / DECODING
    ▸ Bit awkward (as with any static language really)
    STRUCTURING AN APP
    ▸ Just different, takes time to understand
    FEW LIBRARIES
    ▸ Small ecosystem e.g. router, date picker, etc
    

    View Slide

53. WHAT I LOVE
    ▸Immutable data
    ▸Static types (Great refactoring)
    ▸Safety - No nils
    

    View Slide

54. WHAT I LOVE
    ▸Terse syntax
    ▸All the best practices
    ▸Decent learning curve
    

    View Slide

55. THANKS
    

    View Slide