Getting Reactive with Elm

An introductory talk on Elm ( http://elm-lang.org/ ) presented at an event in Gothenburg ( http://www.meetup.com/got-lambda/events/226630957/ )

Transcript

1. ELM GETTING REACTIVE WITH @suvash
2. BEFORE WE BEGIN Thanks RapidImages for hosting ! Got.λ Chat room (Login with Github) https://gitter.im/got-lambda/expression Please feel free to interrupt.
3. (Purely) Functional Reactive Static (Inferred) Types Our favorite language that runs everywhere + HTML + CSS
4. When I started working on the project that would become Elm, HTML was about 20 years old and people still had to read three blog posts and five Stack Overflow questions to figure out how to vertically center things. My initial goal with Elm was to rethink GUIs from scratch. What would web programming look like if we could restart? - Evan Czaplicki
5. FUNCTIONAL PROGRAMMING REFRESHER Immutable Data Pure functions (Controlled) Side effects
6. IMMUTABLE DATA age = age + 1 ❌ new_age = age + 1 ✅ Data is always transformed to new data and/or appended*, BUT never updated-in-place * Look into Persistent/Immutable Data structures to understand how this can be efficient.
7. PURE FUNCTIONS Same result for same inputs, forever ! No side effects CAT 54B8617E CA0E54C7 D3C8E673 2C6B687A EXAMPLE : HASHING FUNCTION* * Hashing functions do have collisions, but that's not the point here.
8. SIDE EFFECTS AND IMPURE FUNCTIONS CAT SOMETHING THAT PROBABLY CHANGES EVERY SINGLE TIME X = HASH "CAT" X = X + {{ TODAY }} UPDATE DIV WITH X HTTP POST X WRITE X TO LOCALSTORAGE DISPLAY "HI" X
9. JUST GO AND BAKE A WHOLE PIZZA, FROM BEGINNING TO THE END IT MIGHT COME OUT A BIT DIFFERENT EVERY SINGLE TIME, BUT IT'S PROBABLY ALRIGHT. MANAGED SIDE EFFECTS WHEN BAKING A PIZZA LIST ALL THE INGREDIENTS AND PREPARE A RECIPE THIS WILL NOT CHANGE FOR A PARTICULAR CAKE. LET THE "ROBOT CHEF" BAKE YOUR RECIPE IT AS IT WANTS. NOT REPRODUCIBLE, BECAUSE "EACH PIZZA IS DIFFERENT" RECIPE IS REPRODUCIBLE, 'IF' YOU TRUST THE ROBOT CHEF.
10. JUST GO AND WRITE THE WHOLE PROGRAM, INCLUDING SIDE EFFECTS AND ALL. IT MIGHT COME OUT A BIT DIFFERENT EVERY SINGLE TIME, BUT IT'S PROBABLY ALRIGHT MANAGED SIDE EFFECTS LIST ALL THE SIDE-EFFECTING THINGS YOU WANT TO BE DONE. THIS WILL NOT CHANGE FOR A PARTICULAR "OPERATION". WHEN WRITING A BROWSER-BASED APPLICATION LET THE "ELM RUNTIME" RUN YOUR OPERATION AS IT WANTS. PURITY IS NOT REALLY AN OPTION. WRITE PURE FUNCTIONS, & ELM PERFORMS EFFECTS
11. any questions so far ? NOW ON TO MORE "REACTIVE" THINGS. sometimes, it's easiest to learn a different way by letting your expertise and opinions rest a bit.
12. FIRST, LET'S TALK ABOUT SIGNALS.......
13. WHAT ARE SIGNALS ? -80 -63 -36 -60 -25 TIME WIFI Strength Signal (in dBm) THINK OF SIGNAL AS AN "IDEA" THAT REPRESENTS SOME VALUE(S) THAT CAN CHANGE OVER TIME.
14. MORE EXAMPLES OF SIGNALS NORDSTAN RÖDA STEN ERIKS BERG TIME Signal of your location AVENYN JÄRN TORGET (10,40) (780,120) (245,190) TIME Signal of your mouse location (60,300) (560,124)
15. MORE EXAMPLES OF SIGNALS A Movie (Signal of frames) A Dynamic Web application (Signal of HTML/...)
16. ... SIGNALS if there's one thing you understand after this talk, please make it .. while not important at all when beginning Elm (Thanks StartApp), they're really at the foundations of what Elm is all about.
17. REACTING TO SIGNALS Define a function over the signal. Every time the value in the signal changes, the function gets 'executed'. This the what it means to "react" to the signal. Now you might be thinking "ah ! event listeners / observables / subscribers / ... ", but hold on to that thought for now.
18. QUICK DEMO Mouse.position Window.dimensions Keyboard.arrows Keyboard.presses Time.every 1000 Time.every Time.second
19. REACTING TO SIGNALS ...CONTINUED Map over a Signal to produce a Signal Filter over a Signal to produce a Signal Merge multiple Signals into one Signal Foldp (Fold from the past) Signal into a Signal
20. REACTING TO SIGNALS ...MAP 97 65 Keyboard.presses a A characters = Signal.map Char.fromCode Keyboard.presses False True pressedUpper = Signal.map Char.isUpper characters
21. REACTING TO SIGNALS ...FILTER 97 65 Keyboard.presses a A characters = Signal.map Char.fromCode Keyboard.presses Z* A pressedUppercharacters = Signal.filter Char.isUpper 'Z' characters * Empty/Null Signals are not possible with Elm(and what would it mean for a signal to be empty), hence filtered Signals always need a default value.
22. REACTING TO SIGNALS ...MAP2 320 90 Up Window.height Signal.map2 showUpOrDown Window.height Mouse.Y 12 65 Mouse.Y showUpOrDown wH mY = 
 let upDown =
 if mY < wH // 2 then "Up" else "Down"
 in
 show upDown Down
23. REACTING TO SIGNALS ...FOLDP ( ) ( ) 0 1 Mouse.clicks state = Signal.foldp (\click count -> count + 1) 0 Mouse.clicks 2 Foldp (also known as fold from the past) is used to perform operations
 that depends on previous step / past.
 Used heavily to maintain application state. (a signal)
24. ENOUGH SIGNALS FOR NOW. LET'S LOOK AT ELM ! any questions so far ?
25. WHAT WE WONT COVER TODAY Time-traveling Debugger Tasks Ports and JS Interop Mailboxes & Messages .... MAYBE WE CAN HAVE A SECOND MEETUP !
26. ERROR MESSAGES FOR HUMANS http://elm-lang.org/blog/compilers-as-assistants
27. NO RUNTIME EXCEPTIONS undefined is not a function.
28. FAAAAAST ! http://evancz.github.io/todomvc-perf-comparison/
29. ENFORCED SEMANTIC VERSIONING For all community packages
30. OTHER PERKS ... (Type)Safe and smooth JS interop. Clean* syntax. Time-traveling Debugger and more.... * In a literal sense, devoid of punctuation marks :)
31. ELM SYNTAX Elm syntax is directly inspired from ML (MetaLanguage). If you've looked at any ML, OCaml, Haskell code before
 it should look familiar. The best way to learn the syntax is the online reference at http://elm-lang.org/docs/syntax http://elm-lang.org/docs/from-javascript
32. BUILDING APPLICATIONS USING THE ELM ARCHITECTURE any questions so far ?
33. THE ELM ARCHITECTURE Application code cleanly separated into 3 main parts MODEL UPDATE VIEW APPLICATION -- MODEL type alias Model = { ... } -- UPDATE type Action = Reset | ... update : Action -> Model -> Model update action model = case action of Reset -> ... ... -- VIEW view : Model -> Html view = ...
34. THE ELM ARCHITECTURE Elm Architecture Get an Action from World Update the Model Use view to describe how they should be displayed Messages Mailbox
 (has addresses + messages) Internal Data Structures
 Not strings, templates, etc. ELM figures out how to render efficiently (so you don't have to) Action External
 Input ELM Runtime handles this
35. THE ELM ARCHITECTURE Why did we talk about Signals before ? StartApp is a useful beginners package.
 Avoids the need to directly work with signals for simple applications. FINALLY : Example Code Reading
36. ELM'S (AND HENCE EVAN'S) HIDDEN AGENDA* To subtly spoil us with the idea of declarative programming for building GUIs. * Obviously, my personal opinion :) A declarative language allows you to say what is done, without having to specify exactly how the computer should do it.
37. MORE THINGS TO EXPLORE Time-traveling Debugger ( http://debug.elm-lang.org/try ) Types With and without StartApp Mailboxes Tasks More Signals 2D Graphics/Game (HTML5) Development ....... PRODUCTION !!!
38. THANKS ! MAYBE A SECOND MEETUP ? @suvash Suvash Thapaliya