Intro to Elm - RRuG 05/2016

An intro to the Elm programming languague

Transcript

1. Intro to Elm
   /
   Josiah Mory @kickinbahk
   

   View Slide

2. What is Elm?
   

   View Slide

3. Elm is a programming language
   -
   It compiles to HTML5: HTML, CSS
   and JavaScript and used to build web
   apps.
   

   View Slide

4. Similar to CoffeeScript or TypeScript,
   Elm Compiles to Javascript
   

   View Slide

5. Elm doesn’t replicate or try to mend
   the intricacies of JavaScript.
   

   View Slide

6. Elm is a language and ecosystem of its
   own, and it just happens to compile to
   JavaScript.
   

   View Slide

7. Evan Czaplicki - Creator of Elm
   

   View Slide

8. Inspired by the Kubler-Ross model
   

   View Slide

9. Syntax
   

   View Slide

10. Comments
    -
    - a s
    i
    n
    g
    l
    e l
    i
    n
    e c
    o
    m
    m
    e
    n
    t
    {
    - a m
    u
    l
    t
    i
    l
    i
    n
    e c
    o
    m
    m
    e
    n
    t
    {
    - c
    a
    n b
    e n
    e
    s
    t
    e
    d -
    }
    -
    }
    

    View Slide

11. Literals
    -
    - B
    o
    o
    l
    e
    a
    n
    T
    r
    u
    e : B
    o
    o
    l
    F
    a
    l
    s
    e : B
    o
    o
    l
    -
    - I
    n
    t o
    r F
    l
    o
    a
    t d
    e
    p
    e
    n
    d
    i
    n
    g o
    n u
    s
    a
    g
    e
    4
    2 : n
    u
    m
    b
    e
    r
    3
    .
    1
    4 : F
    l
    o
    a
    t
    '
    a
    ' : C
    h
    a
    r
    "
    a
    b
    c
    " : S
    t
    r
    i
    n
    g
    -
    - m
    u
    l
    t
    i
    -
    l
    i
    n
    e S
    t
    r
    i
    n
    g
    "
    "
    "
    T
    h
    i
    s i
    s u
    s
    e
    f
    u
    l f
    o
    r h
    o
    l
    d
    i
    n
    g J
    S
    O
    N o
    r o
    t
    h
    e
    r
    c
    o
    n
    t
    e
    n
    t t
    h
    a
    t h
    a
    s "
    q
    u
    o
    t
    a
    t
    i
    o
    n m
    a
    r
    k
    s
    "
    .
    "
    "
    "
    

    View Slide

12. Lists
    [
    1
    .
    .
    4
    ]
    [
    1
    ,
    2
    ,
    3
    ,
    4
    ]
    1 :
    : [
    2
    ,
    3
    ,
    4
    ]
    1 :
    : 2 :
    : 3 :
    : 4 :
    : [
    ]
    

    View Slide

13. Conditionals
    i
    f p
    o
    w
    e
    r
    L
    e
    v
    e
    l > 9
    0
    0
    0 t
    h
    e
    n "
    O
    V
    E
    R 9
    0
    0
    0
    !
    !
    !
    " e
    l
    s
    e "
    m
    e
    h
    "
    -
    - O
    R
    i
    f k
    e
    y =
    = 4
    0 t
    h
    e
    n
    n + 1
    e
    l
    s
    e i
    f k
    e
    y =
    = 3
    8 t
    h
    e
    n
    n - 1
    e
    l
    s
    e
    n
    

    View Slide

14. Functions
    s
    a
    y
    H
    e
    l
    l
    o n
    a
    m
    e = S
    t
    r
    i
    n
    g
    .
    a
    p
    p
    e
    n
    d "
    H
    e
    l
    l
    o " n
    a
    m
    e
    -
    - f
    u
    n
    c
    t
    i
    o
    n : S
    t
    r
    i
    n
    g -
    > S
    t
    r
    i
    n
    g
    s
    a
    y
    H
    e
    l
    l
    o n
    a
    m
    e = \
    S
    t
    r
    i
    n
    g
    .
    a
    p
    p
    e
    n
    d "
    H
    e
    l
    l
    o " n
    a
    m
    e
    -
    - f
    u
    n
    c
    t
    i
    o
    n : S
    t
    r
    i
    n
    g -
    > S
    t
    r
    i
    n
    g
    

    View Slide

15. Elm Architecture
    

    View Slide

16. Model
    t
    y
    p
    e a
    l
    i
    a
    s M
    o
    d
    e
    l = { .
    .
    . }
    

    View Slide

17. Update
    t
    y
    p
    e A
    c
    t
    i
    o
    n = R
    e
    s
    e
    t | .
    .
    .
    u
    p
    d
    a
    t
    e : A
    c
    t
    i
    o
    n -
    > M
    o
    d
    e
    l -
    > M
    o
    d
    e
    l
    u
    p
    d
    a
    t
    e a
    c
    t
    i
    o
    n m
    o
    d
    e
    l =
    c
    a
    s
    e a
    c
    t
    i
    o
    n o
    f
    R
    e
    s
    e
    t -
    > .
    .
    .
    .
    .
    .
    

    View Slide

18. View
    v
    i
    e
    w : M
    o
    d
    e
    l -
    > H
    t
    m
    l
    v
    i
    e
    w =
    .
    .
    .
    

    View Slide

19. Why Elm?
    

    View Slide

20. 1. Functional Reactive
    Programming
    

    View Slide

21. Functional
    Functions are First Class
    Pure Functions - always return the same value given the
    same arguments
    

    View Slide

22. Pure functions
    -
    always return the same value given the same arguments,
    with no side-effects.
    In essence, the function must not depend on anything else
    besides the arguments, and it must not mutate anything.
    

    View Slide

23. Reactive
    -
    something that a component can start listening for, and
    react to the events as it pleases
    In Elm, these listenable things are signals. The component
    using a signal knows how to utilize it, but the signal has no
    knowledge of the component(s) that it is affecting.
    

    View Slide

24. 2. General refactoring
    experience is:
    1. Make changes, any changes.
    2. The compiler tells what you missed.
    3. Go to 1.
    

    View Slide

25. 3. Strong static types
    Find errors fast with readable compiler messages.
    

    View Slide

26. 4. No n
    u
    l
    l or u
    n
    d
    e
    f
    i
    n
    e
    d
    Never miss a potential problem.
    

    View Slide

27. 5. Total immutability
    Focus on what you are writing right now without worrying
    about outer state.
    

    View Slide

28. 6. Purely functional
    Leads to decoupled and easily refactorable code.
    

    View Slide

29. 7. No runtime exceptions
    Gives incomparable reliability.
    

    View Slide

30. 8. Reactive by design
    FRP isn’t opt-in, it is baked right in the language.
    

    View Slide

31. What I think of Elm...
    

    View Slide