Elm

Elm for building single page applications

Transcript

1. ELM @SEBASPORTO
2. LOOKING FOR BETTER WAYS JQUERY CANJS ANGULAR REACT ELM?
3. ELM? ‣FRP (functional reactive programming) language * ‣Statically typed ‣Compiles to JS
4. TRENDS IN FRONT END
5. DESCRIBE INSTEAD OF MUTATING THE DOM ▸ Complex interactions are easy ▸ Speed
6. DESCRIBE STATE 1 2 3 1 2 3 focus on the state not the changes jquery react
7. DESCRIBE STATE ▸ Complex interactions are easy ▸ Easier to model
8. UNIDIRECTIONAL DATA FLOWS ▸ Easier to understand ▸ Less complexity
9. FLUX View Dispatcher A c tion (E vent) Store Action (Event) C hange
10. IMMUTABLE DATA ▸ Confidence ▸ No side effects ▸ Dirty objects ▸ Undo
11. ▸ Seamless-immutable ▸ Immutable.js Mediocre solutions, JS will fight you all they way IMMUTABLE DATA in JS
12. DESCRIBE TRANSFORMATIONS IN APP DATA INSTEAD OF TRANSFORMING ▸ Easier to test ▸ Easier to compose ▸ Redux
13. PURE VIEWS aka STATELESS VIEWS
14. STATELESS VIEWS Same params Same Output View
15. STATELESS VIEWS ▸ Simpler to understand ▸ Easier to test ▸ No side effects
16. ALL STATE IN ONE PLACE
17. STATE IN ON PLACE Component Component Component Component Component Component State
18. ALL STATE IN ONE PLACE ▸ State consistency between views ▸ Undo ▸ Serialise / unserialise ▸ Easier to debug
19. THERE HAPPENS TO BE A LANGUAGE THAT EMBRACES ALL THESE
20. ELM ▸ Immutable ▸ One state tree ▸ Stateless views ▸ Describe transformations ▸ Unidirectional data flow
21. ML BASED (LIKE HASKELL) sum: Int -> Int -> Int sum a b = a + b
22. PROGRAMMING IN ELM
23. SIGNALS Mouse move 24, 30 26, 32 28, 30 .... Constant flow of events
24. SIGNALS Mouse click Key press Merged signal
25. SIGNALS They come from everywhere - Clicks - Keyboard - Hash changes - Ajax request
26. TASKS Async ops, like promises Create Task Task finishes Create signal with result Run Task
27. KEEPING STATE - THE FUNCTIONAL WAY Initial state FoldP Update Signal with event Signal with updated model like reduce
28. THE ELM ARCHITECTURE Signal (event) mailbox Signal View FoldP Update Updated model
29. DEMO
30. WHAT ELSE?
31. WHAT IF WE HAD ALMOST NO ERRORS?
32. JAVASCRIPT IS FAMOUS FOR UNHELPFUL ERRORS UNDEFINED IS NOT A FUNCTION
33. ELM 7| text (toString List.lenght things) `List` does not expose `lenght`. Maybe you want one of the following? List.length
34. WHAT IF WE HAD NO NULLS?
35. JAVASCRIPT var array = [] var res = array[0] * 2 NaN
36. RUBY undefined method '*' for nil:NilClass (NoMethodError) RUST panicked at 'index out of bounds: the len is 1 but the index is 1' ELIXIR (ArithmeticError) bad argument in arithmetic expression GO panic: runtime error: index out of range https://gist.github.com/sporto/77db9de59f559e67b006
37. ELM list = [] first = List.head list res = first * 2 main = text (toString res) This won't compile
38. ELM list = [] first = withDefault 1 (List.head list) res = first * 2 main = text (toString res)
39. FLOW & TYPESCRIPT ARE GREAT BUT NOT AT THE SAME S Still plenty of error that can slip through
40. ELM == VERY RARE TO GET RUNTIME ERRORS
41. GREAT, TERSE SYNTAX
42. PIPE OPERATOR _.(collection) .filter(filterFn) .map(mapFn) .value() collection |> filter filterFn |> map mapFn JS ELM
43. CONTROLLED SIDE EFFECTS
44. IN JS SIDE EFFECTS CAN HAPPEN ANYWHERE ▸ Impossible to know what side effects this have without looking ▸ Mutation, sending ajax? ▸ Makes really hard to find bugs sort(collection)
45. IN ELM IS OBVIOUS sort: List String -> List String update: Action -> Model -> Effects Action
46. OTHER NICE THINGS ▸ Time travel debugger ▸ Enforces Semantic versioning
47. IN PRACTICE
48. ▸ Automatic compilation ▸ But doesn't play well with external JS ELM REACTOR
49. ELM MAKE ▸ Compile on demand - really fast ▸ Plays nicely with existing JS App (Embedded)
50. USING ELM ▸ Send and receive messages to JS PORTS JS ELM ports
51. NOT SO GREAT
52. JSON ENCODING / DECODING ▸ Bit awkward (as with any static language really) STRUCTURING AN APP ▸ Just different, takes time to understand FEW LIBRARIES ▸ Small ecosystem e.g. router, date picker, etc
53. WHAT I LOVE ▸Immutable data ▸Static types (Great refactoring) ▸Safety - No nils
54. WHAT I LOVE ▸Terse syntax ▸All the best practices ▸Decent learning curve
55. THANKS