Elm - Funkcionální nebe pro webové vývojáře

ELM - FUNKCIONÁLNÍ NEBE PRO WEBOVÉ VÝVOJÁŘE

Tomáš LátalBarcamp Hradec Králové 2016

CODERETREAT

• “Do příště se naučím nový programovaní jazyk”

• Funkcionální

• Clojure / F# / Elm

ELM - CO SE MI LÍBILO

• FP pro web - kompilace do JS

• Virtual DOM (React)

• One-way data flow (Redux)

• Typy

ELM - CO BYLO NOVÉ

• Pouze Immutable

• Pouze Stateless (Pure) funkce

• No Runtime Exceptions

POROVNÁNÍ RYCHLOSTÍhttp://elm-lang.org/blog/blazing-fast-html-round-two

ELM - ÚVOD

HISTORIE

• 2012 - Evan Czaplicky

• inspirováno Haskellem

• v0.17

• v0.18 (cca listopad 2016)

SYNTAXE1 + 1 -- 28 - 1 -- 710.5 * 2 -- 21

33 / 2 -- 16.5 s reálným dělením33 // 2 -- 16 s celočíselným dělením

not True -- Falsenot False -- True1 == 1 -- True1 /= 1 -- False1 < 10 -- True

"Text"'a'

"Ahoj " ++ "světe!" -- "Ahoj světe!"

https://learnxinyminutes.com/docs/cs-cz/elm/

STRUKTURY

["jedna", "dva", "fizz", "čtyři"][1, 2, 3, 4, 5][1..5]

List

("elm", 42)

Tuple (n-tice)

STRUKTURYRecord

pocatek = { x = 0, y = 0, z = 0 }

{ x = 3, y = 7 }.x -- 3 .y { x = 3, y = 7 } -- 7

Přístup k datům

{ osoba | jmeno = "Jiří" }

Změna hodnoty

ŘÍDÍCÍ STRUKTURYif n < 0 then "n je záporné"else if n > 0 then "n je kladné"else "n je nula"

case seznam of [] -> "prázdný" [x]-> “pouze s jednou položkou " ++ toString x x::xs -> “více prvků, první je " ++ toString x

FUNKCEvynasob a b = a * b

vynasob 7 6 -- 42

zdvoj = vynasob 2

List.map zdvoj [1..4] -- [2, 4, 6, 8]

FUNKCE

objem {sirka, delka, hloubka} = let obsah = sirka * delka in obsah * hloubka

objem { sirka = 3, delka = 2, hloubka = 7 } -- 42

FUNKCE

fib n = if n < 2 then 1 else fib (n - 1) + fib (n - 2)

List.map fib [0..8] -- [1, 1, 2, 3, 5, 8, 13, 21, 34]

FUNKCEList.filter (\num -> num < 15) (List.map fib [0..8]) -- [1, 1, 2, 3, 5, 8, 13]

[0..8] |> List.map fib |> List.filter (\num -> num < 15)

TYPY5 : Int6.7 : Float"ahoj" : StringTrue : Bool

type alias Bod3D = { x : Float, y : Float, z : Float }

TYPY U FUNKCÍfib : Int -> Intfib n = if n < 2 then 1 else fib (n - 1) + fib (n - 2)

List.map : (a -> b) -> List a -> List b

List.map fib [0..8] -- [1, 1, 2, 3, 5, 8, 13, 21, 34]

UNION TYPYtype Smer = Sever | Jih | Vychod | Zapad

naStupne : Smer -> FloatnaStupne smer = case smer of Sever -> 0.0 Vychod -> 90.0 Jih -> 180.0 Zapad -> 210.0

ELM ARCHITECTURE

• Model - stav aplikace

• Update - aktualizuje Model

• View - vykresluje Model (HTML/SVG)

COUNTER - MODEL

-- MODEL

type alias Model = Int

model : Model model = 0

COUNTER - UPDATE-- UPDATE type Msg = Increment | Decrement

update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1

Decrement -> model - 1

COUNTER - VIEW

-- VIEW

view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]

COUNTER - MAIN

main = App.beginnerProgram {model = model

,view = view ,update = update }

DEMO

TOOLS

• Package manager

• Reactor

• Time-traveling debugger

• Elm format

CO MI ELM DAL

• Píšu víc Pure funkcí

• Snažím se pokrýt rovnou všechna větvení programu

• Z funkcí nevracím null

• Nebojím se FP jazyků

DÍKY ZA POZORNOST

http://elm-lang.org

@TomasLatal