Build Frontend Confidently with Elm

Presented at "Front-end Engineering Meetup" - https://www.meetup.com/web-frontend/events/245747618/.

Transcript

5. Evolution • Put all JS code under one or multiple script tags inline in the HTML page itself. • Okay, that’s ugly, extract it out into JS files. • Why not use MVC, MVP and whatnot? Let’s do it Rails-style! • Listen for changes using Object.observe maybe, huh? • Object-oriented -- Before and after ES6? // Coffee, Backbone • 2-way data-binding, dirty checking. Yeah, that’s really DIRTY! // Angular v1, Ember • Unidirectional data flow, virtual DOM, immutable data, smart and dumb components, single source of truth… // React + Flux • Uh… Runtime errors. Be polite and just be optionally type-safe. // TypeScript, Reason 5
7. Build Frontend Confidently with Elm 7
8. Catch errors before you ever run your code ! 8
9. ✓ No Runtime Exceptions ✓ Functional ✓ Pure and Immutable ✓ Strictly Typed ✓ Type Inference ✓ Robust, Expressive, Self-documenting ✓ No Side Effects ✓ Virtual DOM ✓ JS Interop using Ports ✓ Enforced Semantic Versioning ✓ and many more… 9
10. Let’s look at some ES6 code running in production transpiled with . 10
13. 13 Oops !
14. No Runtime Exceptions 14
17. Functional 17
18. add x y = x + y multiply1 x y = (*) x y multiply2 x y = if x == 1 then y else add (multiply2 (x - 1) y) y double number = number * 2 doubleNumbers1 list = List.map (\number -> number * 2) list doubleNumbers2 list = List.map double list 18
19. size posts = case posts of [] -> 0 first :: rest -> 1 + length rest Pattern matching and Recursion 19
20. 20 Composability and Pipes
21. isEven n = n % 2 == 0 isOdd1 n = not (isEven n) isOdd2 n = n |> isEven |> not isOdd3 n = not <| isEven <| n isOdd4 = isEven >> not isOdd5 = not << isEven 21
22. myList = List.range 1 100 square n = n * n lessThan6 n = n < 6 double n = n * 2 filter1 list = List.map square (List.filter lessThan6 (List.map double list)) filter2 list = list |> List.map double |> List.filter lessThan6 |> List.map square 22
23. Write Less Express More 23
24. myList = [ 1, 2, 3, 4, 5 ] double n = n * 2 doubleNumbers1 list = List.map double list doubleNumbers2 = List.map ((*) 2) doubleNumbers1 myList -- [2, 4, 6, 8, 10] doubleNumbers2 myList -- [2, 4, 6, 8, 10] 24
25. 25 Pure and Immutable
26. let title = "Goodbye 2017" export function getTitle() { return title } export function setTitle(newTitle) { title = newTitle } setTitle("Welcome 2018") post = { title = "Goodbye 2017" } getTittle post = post.title setTitle post title = { post | title = title } newPost = setTitle post "Welcome 2018" post == newPost -- False JS: Impure as it depends on a mutable variable Elm: Everything is immutable and functions are pure 26
27. Type Safe 27
33. Self documenting 33
34. 34 addTagToPost: Tag -> Post -> Post addTagToPost tag Post = -- logic here /** * Add a tag to a post and return updated post * * @param {String} tag - The tag needs to be added to the post. * @param {Object} post - Current state/version of the post. * @returns {Object} The updated Post after adding specified tag to the post. */ function addTagToPost(tag, post) { // logic here return updatedPost; }
35. Currying 35
36. add x y z = x + y + z -- <function> : number -> number -> number -> number add1 = add 1 -- <function> : number -> number -> number add3 = add 1 2 -- <function> : number -> number add 1 2 3 -- 6 : number add1 2 3 -- 6 : number add3 3 -- 6 : number 36
37. There’s no null or undefined in Elm. 37
38. There’s Maybe ! 38
39. type alias Post = { id: Int, , title: String, , body: String, , excerpt: Maybe String } viewPostExcerpt post = case post.excerpt = Nothing -> div [] [ text (truncatePostBodyToExcerpt post) ] Just excerpt -> div [] [ text excerpt ] 39
40. Simple and Immutable Architecture 40
41. Model The state of your application Update The way to update model View The way to represent model using HTML, SVG , etc. 41
43. Redux is inspired by Elm architecture ! 43
44. Enforced Semantic Versioning 44
45. $ elm package diff elm-lang/core 4.0.0 5.1.0 Comparing elm-lang/core 4.0.0 to 5.1.0... This is a MAJOR change. ------ Added modules - MINOR ------ Tuple ------ Changes to module Basics - MAJOR ------ Added: never : Basics.Never -> a Removed: fst : (a, b) -> a snd : (a, b) -> b ------ Changes to module Bitwise - MAJOR ------ Added: shiftLeftBy : Int -> Int -> Int shiftRightBy : Int -> Int -> Int shiftRightZfBy : Int -> Int -> Int Removed: shiftLeft : Int -> Int -> Int shiftRight : Int -> Int -> Int shiftRightLogical : Int -> Int -> Int ------ Changes to module Json.Decode - MAJOR ——— […] It is not allowed to push breaking changes to Elm packages unless bumping its MAJOR version. No more surprises in PATCH releases! 45
46. Demo 46
47. “elm-format” and friends 47
48. No need to follow variant style guides or use any external code linter. Built-in “elm-format” command is like “go fmt” which formats all Elm files as per the universal standard style guide. The “elm-reactor” command starts a local server to hot-compile, hot-reload and serve the Elm app to ease the development. The “elm-repl” command starts an interactive shell environment to quickly evaluate Elm code. Also, “elm-package”, “elm-make”. 48
49. Advanced Concepts (Maybe, discuss in next meetup?) 49 • Commands • Subscriptions • Ports (JS Interop) • HTTP Requests • JSON decoding • How routing works? (SPA)
50. Vishal Telangre @suruwat / @BigBinary https://vishaltelangre.com (Built using Elm) https://vishaltelangre.com/tic-tac-toe (Built using Elm) https://vishaltelangre.com/xkcd (Built using Elm) https://github/com/vishaltelangre https://twitter.com/suruwat Thank You ! 50