BARCAMP HRADEC KRÁLOVÉ 2016 - Představte si svět, kde neexistuje pád aplikace na "Undefined is not a function". Svět, kde se těšíte na refaktoring aplikace a nebojíte se dělat větší zásahy do kódu. To vše s možností používat stávající JS knihovny a infrastrukturu. Chci vám ukázat, že takový svět existuje. Elm mě nadchl svou jednoduchostí, s jakou představuje možnosti funkcionálního programování. I mě, zarytého odpůrce Lispu, Haskelu a dalších FP jazyků, dokázal nadchnout pro myšlenku, že ty funkce mají taky něco do sebe. Rád bych vám ve 20 minutách Elm představil, ukázal jak funguje, jaké má v dnešním světě webových frameworků místo, jaké jsou jeho silné a slabé stránky a jak se promítl na stylu, kterým dnes píši kód

1. ELM - FUNKCIONÁLNÍ NEBE
PRO WEBOVÉVÝVOJÁŘE
Tomáš Látal
Barcamp Hradec Králové 2016

2. CODERETREAT
• “Do příště se naučím nový programovaní jazyk”
• Funkcionální
• Clojure / F# / Elm

3. ELM - CO SE MI LÍBILO
• FP pro web - kompilace do JS
• Virtual DOM (React)
• One-way data flow (Redux)
• Typy

4. ELM - CO BYLO NOVÉ
• Pouze Immutable
• Pouze Stateless (Pure) funkce
• No Runtime Exceptions

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

6. ELM - ÚVOD

7. HISTORIE
• 2012 - Evan Czaplicky
• inspirováno Haskellem
• v0.17
• v0.18 (cca listopad 2016)

8. SYNTAXE
1 + 1 -- 2
8 - 1 -- 7
10.5 * 2 -- 21
33 / 2 -- 16.5 s reálným dělením
33 // 2 -- 16 s celočíselným dělením
not True -- False
not False -- True
1 == 1 -- True
1 /= 1 -- False
1 < 10 -- True
"Text"
'a'
"Ahoj " ++ "světe!" -- "Ahoj světe!"
https://learnxinyminutes.com/docs/cs-cz/elm/

9. STRUKTURY
["jedna", "dva", "fizz", "čtyři"]
[1, 2, 3, 4, 5]
[1..5]
List
("elm", 42)
Tuple (n-tice)

10. STRUKTURY
Record
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

11. ŘÍDÍCÍ STRUKTURY
if 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

12. FUNKCE
vynasob a b =
a * b
vynasob 7 6 -- 42
zdvoj =
vynasob 2
List.map zdvoj [1..4] -- [2, 4, 6, 8]

13. FUNKCE
objem {sirka, delka, hloubka} =
let
obsah = sirka * delka
in
obsah * hloubka
objem { sirka = 3, delka = 2, hloubka = 7 } -- 42

14. 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]

15. FUNKCE
List.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)

16. TYPY
5 : Int
6.7 : Float
"ahoj" : String
True : Bool
type alias Bod3D =
{ x : Float, y : Float, z : Float }

17. TYPY U FUNKCÍ
fib : Int -> Int
fib 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]

18. UNIONTYPY
type Smer =
Sever | Jih | Vychod | Zapad
naStupne : Smer -> Float
naStupne smer =
case smer of
Sever -> 0.0
Vychod -> 90.0
Jih -> 180.0
Zapad -> 210.0

19. ELM ARCHITECTURE
• Model - stav aplikace
• Update - aktualizuje Model
• View - vykresluje Model (HTML/SVG)

20. COUNTER - MODEL
-- MODEL
type alias Model = Int
model : Model
model =
0

21. COUNTER - UPDATE
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1

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

23. COUNTER - MAIN
main =
App.beginnerProgram
{model = model
,view = view
,update = update
}

24. DEMO

25. TOOLS
• Package manager
• Reactor
• Time-traveling debugger
• Elm format

26. 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ů

27. DÍKY ZA POZORNOST
http://elm-lang.org
@TomasLatal