Introduction to Elm

Elm is a strictly typed functional programming language which compiles to JavaScript. This talk is aimed to get familiar with the language and what features and promises it guarantees.

Presented at "ReactJS and Friends" meetup in Pune - https://www.meetup.com/ReactJS-and-Friends/events/242517825/.

Footer links on the slides:
- Blog post about type and type alias - https://blog.bigbinary.com/2017/07/12/difference-between-type-and-type-alias-in-elm.html
- Examples on "Road to Elm" repository - https://github.com/bigbinary/road-to-elm
- Introduction to Elm by Richard Feldman https://www.youtube.com/watch?v=zBHB9i8e3Kc

Transcript

1. elm Introduction to Vishal Telangre / @suruwat / BigBinary
2. Catch errors before you ever run your code !
3. ✓ Functional ✓ Strictly Typed ✓ Type Inference ✓ Immutable ✓ No Side Effects ✓ No Runtime Exceptions ✓ Enforced Semantic Versioning ✓ Virtual DOM ✓ JS Interop and many more…
4. It is like . Babel helps to write next generation JavaScript, today.
7. Ohh !
10. Elm Architecture View A way to view your state as HTML Model The state of your application Update A way to update your state
11. main : Program Never Model Msg main = Html.beginnerProgram { model = model , view = view , update = update }
12. Redux is inspired by Elm architecture !
13. Type annotations documents your code. pluralize : String -> String -> Int -> String pluralize singular plural quantity = if quantity == 1 then singular else plural
14. > [] [] : List a > [2, 45, 35] [2,45,35] : List number > ["foo", "bar", "baz"] ["foo","bar","baz"] : List String ?
15. > pluralize singular plural quantity = | if quantity == 1 then | singular | else | plural | <function> : a -> a -> number -> a
16. type and type alias > type Status = Active | Inactive > Active Active : Status type alias UserInfo = { name : String, age : Int } getUserAge : UserInfo -> Int getUserAge userinfo = userinfo.age > 4 4 : number > "hello" "hello" : String > Nothing Nothing : Maybe.Maybe a In Elm, everything has a type. Even “Nothing” has a type! Defining a new type is easy. A type creates a new type whereas a type alias is just a wrapper around existing types. A type alias does not create a new type. Instead of accepting/passing in a record as below. { name : String, age : Int } You can define a type alias and use it as follows. > sam = UserInfo "Sam" 24 { name = "Sam", age = 24 } : UserInfo A type alias can be used as a constructor. Read more at: https://blog.bigbinary.com/2017/07/12/difference-between-type-and-type-alias-in-elm.html
17. Union Types An union type defines a type with different possible values. type alias Action = { actionType : String , incrementAmount : Int , decrementAmount : Int } type Action = Increment Int | Decrement Following type could be cumbersome to pass in around and maintain. So we define an union type which is much easier to maintain. Moreover, each possible value can be constructed with multiple values.
18. Why type annotations look like this pluralize : String -> String -> Int -> String and not like this? pluralize : (String, String, Int) -> String
19. Currying pluralize : String -> (String -> Int -> String) pluralize : String -> String -> (Int -> String) pluralize : String -> (String -> (Int -> String)) pluralize : String -> String -> Int -> String Following all type annotations are valid !
20. Currying pluralizePeople : Int -> String pluralizePeople = pluralize "person" "people" pluralizeWith : String -> Int -> String pluralizeWith = pluralize “person" > pluralizePeople 3 "people" : String > pluralizePeople 1 "person" : String > pluralizeWith "humans" 2 "humans" : String > pluralizeWith "humans" <function> : Int -> String
21. There’s no null or undefined in Elm.
22. > [1, 2, 3][0] 1 > [][0] undefined > [][0] || “One” “One” > List.head [1,2,3] Just 1 : Maybe.Maybe number > List.head [] Nothing : Maybe.Maybe a > Maybe.withDefault 42 (List.head []) 42 : number > Maybe.withDefault 42 (List.head [1,2,3]) 1 : number > List.head [1,2,3] == Nothing False : Bool JavaScript Elm
23. > max 5 2 5 : number > max 5 (Debug.log "second arg is" 2) second arg is: 2 5: number Debug.log : String -> a -> a
24. Don’t use Debug.crash in production!
25. Effects Instead of just producing Html, we can produce commands and subscriptions as well. • Commands A Cmd lets you do stuff: generate a random number, send an HTTP request, etc. • Subscriptions A Sub lets you register that you are interested in something: tell me about location changes, listen for web socket messages, etc.
26. type Result error value = Ok value | Err error Result A Result is the result of a computation that may fail. A Result is either Ok meaning the computation succeeded, or it is an Err meaning that there was some failure.
27. Let’s see some examples on — • Writing HTML markup in view • Making HTTP requests • Decoding JSON All examples are available at: https://github.com/bigbinary/road-to-elm
28. http://debug.elm-lang.org Pause, rewind, and replay programs. Debug by changing history. Time Traveling Debugger
29. $ elm package diff elm-lang/core 4.0.0 5.1.0 Comparing elm-lang/core 4.0.0 to 5.1.0... This is a MAJOR change. ------ Added modules - MINOR ------ Tuple ------ Changes to module Basics - MAJOR ------ Added: never : Basics.Never -> a Removed: fst : (a, b) -> a snd : (a, b) -> b ------ Changes to module Bitwise - MAJOR ------ Added: shiftLeftBy : Int -> Int -> Int shiftRightBy : Int -> Int -> Int shiftRightZfBy : Int -> Int -> Int Removed: shiftLeft : Int -> Int -> Int shiftRight : Int -> Int -> Int shiftRightLogical : Int -> Int -> Int ------ Changes to module Json.Decode - MAJOR ——— […] Enforced Semantic Versioning It is not allowed to push breaking changes to Elm packages unless bumping its MAJOR version. No more surprises in PATCH releases!
30. Thank you ! Vishal Telangre / @suruwat / BigBinary Inspired by “Introduction to Elm - Richard Feldman” (https://www.youtube.com/watch?v=zBHB9i8e3Kc)