Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm

sporto
November 22, 2015

 Elm

Elm for building single page applications

sporto

November 22, 2015
Tweet

More Decks by sporto

Other Decks in Technology

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