Slide 1

Slide 1 text

SHORT INTRO TO ELM

Slide 2

Slide 2 text

WHAT IS ELM? Elm is a domain-speci c programming language for declaratively creating web browser-based graphical user interfaces. Elm is purely functional, and is developed with emphasis on usability, performance, and robustness. Tools elm repl : repl elm reactor : development server elm make : compiler elm package : package manager

Slide 3

Slide 3 text

IN PRACTICE Null safe(No runtime error. 'unde ned is not a function' can't happen) Compiler Errors for Humans Mostly one way to do it(Hard to write bad code) All in one (redux/ramda.js/ ow.js/data.maybe/immutable.js ...)

Slide 4

Slide 4 text

EXAMPLES Examples Mario elm-todomvc

Slide 5

Slide 5 text

ELM ARCHITECTURE Model - the state of your application Update - a way to update your state View - a way to view your state as HTML

Slide 6

Slide 6 text

http://elm-lang.org/examples/buttons import Html exposing (Html, button, div, text) import Html.Events exposing (onClick) main = Html.beginnerProgram { model = model, view = view, update = update } -- MODEL type alias Model = Int model : Model model = 0 -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1

Slide 7

Slide 7 text

TYPES type Message = Increment | Decrement type Message is either Icrement or Decrement. type User = Anonymous | Named String Type User is either Anonymous, or String Named is also a constructor, and used for creating the value(Named "John") type Tree a = Empty | Node a (Tree a) (Tree a) represents a binary tree type Tree is Either Empty, or a node of kind 'a' (convention for any type)

Slide 8

Slide 8 text

RECORD { title = "Steppenwolf", author = "Hesse", pages = 237 } Labeled light weight structure type alias Point = { x : Float , y : Float } Type alias to de ne record structure { point2D | y = 1 } -- { x=0, y=1 } { point3D | x = 0, y = 0 } -- { x=0, y=0, z=12 } { steve | name = "Wozniak" } -- { name="Wozniak", age=56 } Update elds

Slide 9

Slide 9 text

PATTERN MATCHING type Message = Increment | Decrement | Restore Int | NoOp case msg of Increment -> "increment" Decrement -> "decrement" Restore count -> toString count _ -> "" _ to capture the other patterns Compiler detects non-exhausive conditions type alias Coupon = { id: String, expireDate: Maybe String } let coupon = { id = "abc", expireDate = Just "2016-12-12" } in case coupon.expireDate of Just date -> date Nothing -> "" -- (oneliner) Maybe.withDefault "" coupon.expireDate

Slide 10

Slide 10 text

PATTERN MATCHING maximum : List comparable -> Maybe comparable maximum list = case list of x :: xs -> Just (foldl max x xs) _ -> Nothing Destructure list element and assign variables(x for rst elment, xs for the rest elements) Elm Destructuring (or Pattern Matching) cheatsheet

Slide 11

Slide 11 text

EFFECTS Commands A Cmd lets you do stu Subscriptions A Sub lets you register that you are interested in something

Slide 12

Slide 12 text

COMMAND type Msg = Click | NewBook (Result Http.Error String) type alias Model = String update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of Click -> ( model, getWarAndPeace ) NewBook (Ok book) -> ( book, Cmd.none) NewBook (Err _) -> ( model, Cmd.none) getWarAndPeace : Cmd Msg getWarAndPeace = let request = Http.getString NewBook "/" in Http.send request Pass commands to elm runtime When a command nishses, update is called with Result type

Slide 13

Slide 13 text

TIPS

Slide 14

Slide 14 text

SPLIT NESTED CONDITIONS INTO MODULES type Msg = .... | OrderList | OrderDetail String | OrderSearch String update: Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of ... OrderList -> ... OrdersDetail orderId -> ... OrderSearch productName -> ... branches gets longer and longer

Slide 15

Slide 15 text

SPLIT NESTED CONDITIONS INTO MODULES(COND) type Msg = ... | OrderMessage Order.Msg update: Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of ... OrdersMessage subMessage -> let (orderModel, orderMessage) = Orders.Update.update subMessage model. in ({model|order=orderModel}, Cmd.map OrdersMessage orderMessage) Split branches into sub modules

Slide 16

Slide 16 text

USE INFIX OPERATORS TO IMPROVE READABILITY ngon 5 30 |> filled blue |> move (10,10) |> scale 2 forward function application == cleaner than below scale 2 (move (10,10) (filled blue (ngon 5 30))) args comes rst(left side), and |> is left- associative(meaning a |> b |> c |> d is ((a |> b) |> c) |> d ) That's why we don't need to specify precedence with parentheses

Slide 17

Slide 17 text

USE INFIX OPERATORS TO IMPROVE READABILITY(COND) leftAligned <| monospace <| fromString "code" backwoard function application == leftAligned (monospace (fromString "code")) is right-associative(meaning is a )