Building highly resilient web apps with Elm

A review of using Elm for building highly resilient web apps plus a comparison with Angular2/RxJs

Transcript

1. Elm (plus Angular2/RxJs) Jon Kelly Twitter @jsnightowl Email jonkelly@jmkassocs.com Github jkbits1
2. Why Elm? In how many ways can JavaScript crash? (and I’m a fan!)
3. What’s different with Elm All the jargon you may have heard (and more)  Immutability  Pure functions  Compiled code  Uni-directional data flow (any redux fans here?) btw, it runs pretty fast
4. FP background  Immutability - not always so fixed  Compiled code - not all languages, e.g. Lisp
5. Elm has real benefits This UI is straightforward to code and reason about Basic framework – 20 lines of code
6. Overview Elm code basics Elm front-end DEMO! Time travel debugging Elm - uni-directional design Bonus - solutions in Angular2/RxJs app (if we get the time)
7. Elm code Let’s start small and work forwards
8. Elm code two = 2
9. Elm code timesTwo x = x * two
10. Elm code timesTwo x = x * two timesTwo 2 = 4
11. Elm code timesTwo2 = (*) two
12. Elm code timesTwo2 = (*) two timesTwo2 2 = 4
13. Elm code - currying timesTwice x y = two * x * y timesTwice 3 4 = 24 x = timesTwice 3 = ?? x 4 = 24
14. Types The usual num/int, float, string, bool Suspects Lists like arrays Any length – can only store a single type Tuples like, er, multiples ? Fixed length – may store multiple types Records a bit object-y and a bit duck type-y
15. Lists - real quick Build [1,2,3] like this 1:: 2 :: 3 :: [] Pass as params : xs – entire list x:xs (destructuring like ES6) x is “head”, xs is “tail” NOTE - access anything after head – takes longer TL;DR – Elm functions designed to work with head of list as much as possible
16. Elm code listTimesTwo xs = List.map (\x -> timesTwo x) xs
17. Elm code listTimesTwo = List.map (\x -> timesTwo x)
18. Elm code - tuples timesTwice (x, y) = two * x * y timesTwice (3, 4) = 24 anotherTwice (x, y) = (x * two, y * two) anotherTwice (5,7) = (10, 14)
19. Demo Send data to and receives data from JS code
20. Basic app It is still a complete Elm program
21. Http client Send data to and receives data from JS code
22. Elm works with JS Send data to and receives data from JS code
23. Angular2/RxJs Compiled code - some Uni-directional data flow - possible http://rxmarbles.com/#map
24. RxJs Makes inputs into streams Streams flow into each other They can be cancelled (easily)
25. Resources Code: https://github.com/jkbits1/HaskellElmTalk Demos online: https://haskell-elm-talk.herokuapp.com (repo — https://github.com/jkbits1/talkUI) Elm Documentation: http://elm-lang.org http://guide.elm-lang.org
26. Thank you! Jon Kelly Twitter @jsnightowl Email jonkelly@jmkassocs.com Github jkbits1