Elm (plus Angular2/RxJs) Jon Kelly Twitter @jsnightowl Email [email protected] Github jkbits1 

Why Elm? In how many ways can JavaScript crash? (and I’m a fan!) 

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 

FP background  Immutability - not always so fixed  Compiled code - not all languages, e.g. Lisp 

Elm has real benefits This UI is straightforward to code and reason about Basic framework – 20 lines of code 

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) 

Elm code Let’s start small and work forwards 

Elm code two = 2 

Elm code timesTwo x = x * two 

Elm code timesTwo x = x * two timesTwo 2 = 4 

Elm code timesTwo2 = (*) two 

Elm code timesTwo2 = (*) two timesTwo2 2 = 4 

Elm code - currying timesTwice x y = two * x * y timesTwice 3 4 = 24 x = timesTwice 3 = ?? x 4 = 24 

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 

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 

Elm code listTimesTwo xs = List.map (\x -> timesTwo x) xs 

Elm code listTimesTwo = List.map (\x -> timesTwo x) 

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) 

Demo Send data to and receives data from JS code 

Basic app It is still a complete Elm program 

Http client Send data to and receives data from JS code 

Elm works with JS Send data to and receives data from JS code 

Angular2/RxJs Compiled code - some Uni-directional data flow - possible http://rxmarbles.com/#map 

RxJs Makes inputs into streams Streams flow into each other They can be cancelled (easily) 

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 

Thank you! Jon Kelly Twitter @jsnightowl Email [email protected] Github jkbits1