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
Top Related