Declarative UI in Elm (2026) @ Elm Camp

Transcript

1. 2026 by Anton Kotenko a.k.a. shamansir a.k.a. Elektrokiłka a.k.a. Ulric Wilfred a.k.a. ZokotuhaFly a.k.a. tungusso a.k.a. didsomeonereaditatall a.k.a. fi llthespacetothever DECLARATIVE UI IN ELM In Theory and in Practice of Declaring UIs in Different Projects… Such As Generative Art or Railroad Simulators or Whatever… It’s not That Html a is not Declarative… We’ll Discuss That in Few Minutes… UNTALK CERTIFIED UNPRESENTATION CERTIFIED UNSLIDES CERTIFIED ALLOWED TO BE USED AT UNCONFERENCES
4. Html a
5. ├── div a │ ├─── span a │ ├─── form a │ │ ├─── input a │ │ ├─── select a │ │ │ ├─── option a │ │ │ ├─── option a │ │ │ ├─── option a │ │ │ ├─── option a │ │ ├─── toggle a │ │ ├─── button a
6. ├── div () │ ├─── span () │ ├─── form (myFormData :: FormData) │ │ ├─── input (“Vorname”:: String) │ │ ├─── select (opt3 :: SelectVal) │ │ │ ├─── option (opt1 :: SelectVal) │ │ │ ├─── option (opt2 :: SelectVal) │ │ │ ├─── option (opt3 :: SelectVal) │ │ │ ├─── option (opt4 :: SelectVal) │ │ ├─── toggle (true :: Boolean) │ │ ├─── button ()
7. ├── div () │ ├─── span () │ ├─── form (myFormData :: FormData) │ │ ├─── input (“Vorname”:: String) │ │ ├─── select (opt3 :: SelectVal) │ │ │ ├─── option (opt1 :: SelectVal) │ │ │ ├─── option (opt2 :: SelectVal) │ │ │ ├─── option (opt3 :: SelectVal) │ │ │ ├─── option (opt4 :: SelectVal) │ │ ├─── toggle (true :: Boolean) │ │ ├─── button ()
8. ├── div () │ ├─── input (2 :: Int) │ ├─── form (myFormData :: FormData) │ │ ├─── input (“Vorname”:: String) │ │ ├─── select (opt3 :: SelectVal) │ │ │ ├─── option (opt1 :: SelectVal) │ │ │ ├─── option (opt2 :: SelectVal) │ │ │ ├─── option (opt3 :: SelectVal) │ │ │ ├─── option (opt4 :: SelectVal) │ │ ├─── toggle (true :: Boolean) │ │ ├─── button ()
9. ├── div () │ ├─── input (2 :: Int) │ ├─── form (myFormData :: FormData) │ │ ├─── input (“Vorname”:: String) │ │ ├─── select (opt3 :: SelectVal) │ │ │ ├─── option (opt1 :: SelectVal) │ │ │ ├─── option (opt2 :: SelectVal) │ │ │ ├─── option (opt3 :: SelectVal) │ │ │ ├─── option (opt4 :: SelectVal) │ │ ├─── toggle (true :: Boolean) │ │ ├─── button ()
10. https:// package.elm-lang.org /packages /miniBill /elm-html-with-context /latest
12. https:// sharkdp.github.io /purescript-flare/
13. https:// sharkdp.github.io /purescript-flare/
14. https:// sharkdp.github.io /purescript-flare/
15. https:// sharkdp.github.io /purescript-flare/ greet <$> (string “Your name:” “Nemo”)
16. https:// sharkdp.github.io /purescript-flare/
17. https:// sharkdp.github.io /purescript-flare/ coloredCircle <$> (numberSlider “Hue” 0.0 360.0 1.0 140.0) <*> (numberSlider “Radius” 1.0 45.0 0.1 25.0)
18. https:// sharkdp.github.io /purescript-flare/
19. https:// sharkdp.github.io /purescript-flare/ foldp <+> 0 (button “Increment” 0 1)
20. https:// sharkdp.github.io /purescript-flare/
21. https:// sharkdp.github.io /purescript-flare/ plot <$> (intSlider “Leaves” 2 10 6) <*> (boolean “Shadow” false) <*> (lift animationFrame)
22. https:// sharkdp.github.io /purescript-sparkle/
23. https:// sharkdp.github.io /purescript-isometric/
24. https:// sharkdp.github.io /purescript-isometric/ myPlot <$> (intSlider “Points” 0 60) <*> (intSlider “Wave” 0 60) myPlot <$> (intSlider “Rotation” 0 60) myPlot <$> (color “Cone Color” #CCEEDD) <*> (color “Cube Color” #CCEEFF)
25. https:// sharkdp.github.io /purescript-sparkle/
26. https:// sharkdp.github.io /purescript-sparkle/
27. https://cai.jetbrains.com/
36. Tron a
37. ├── Tron.root () │ ├─── Tron.int 0 100 (2 :: Int) │ ├─── Tron.nest (myFormData :: FormData) │ │ ├─── Tron.text (“Vorname”:: String) │ │ ├─── Tron.select (opts :: Array SelectVal) │ │ │ ├─── Tron.opt (opt1 :: SelectVal) │ │ │ ├─── Tron.opt (opt2 :: SelectVal) │ │ │ ├─── Tron.opt (opt3 :: SelectVal) │ │ │ ├─── Tron.opt (opt4 :: SelectVal) │ │ ├─── Tron.toggle (true :: Boolean) │ │ ├─── Tron.button ()
38. ├── Tron.root () │ ├─── Tron.int 0 100 (2 :: Int) │ ├─── Tron.nest (myFormData :: FormData) │ │ ├─── Tron.text (“Vorname”:: String) │ │ ├─── Tron.select (opts :: Array SelectVal) │ │ │ ├─── Tron.opt (opt1 :: SelectVal) │ │ │ ├─── Tron.opt (opt2 :: SelectVal) │ │ │ ├─── Tron.opt (opt3 :: SelectVal) │ │ │ ├─── Tron.opt (opt4 :: SelectVal) │ │ ├─── Tron.toggle (true :: Boolean) │ │ ├─── Tron.button ()
39. Tron.root () |> Tron.int 0 100 (2 :: Int) |> Tron.nest (myFormData :: FormData) |> Tron.text (“Vorname”:: String) |> Tron.select (opts :: Array SelectVal) |> Tron.opt (opt1 :: SelectVal) |> Tron.opt (opt2 :: SelectVal) |> Tron.opt (opt3 :: SelectVal) |> Tron.opt (opt4 :: SelectVal) |> Tron.toggle (true :: Boolean) |> Tron.button ()
40. Tron.root () |> Tron.int 0 100 (2 :: Int) |> Tron.xy (0, 100) (0, 100) ((2, 10) :: Coord) |> Tron.colorRGB 10 20 65 (“#0A1451” :: Color) |> Tron.nest (myFormData :: FormData) |> Tron.text (“Vorname”:: String) |> Tron.select (opts :: Array SelectVal) |> Tron.opt (opt1 :: SelectVal) |> Tron.opt (opt2 :: SelectVal) |> Tron.opt (opt3 :: SelectVal) |> Tron.opt (opt4 :: SelectVal) |> Tron.toggle (true :: Boolean) |> Tron.button UploadFile ()
41. https://tron.labs.jb.gg/
42. https:// package.elm-lang.org /packages /shamansir /tron-gui /13.1.0
52. https://tron.labs.jb.gg/
53. https:// package.elm-lang.org /packages /shamansir /tron-gui /13.1.0
54. Thank you