Static in the Front, Dynamic in the Back

An exploration of the benefits of the Elm language, how development style changes when using it, and what learnings you can bring back with you to JavaScript, React, or other libraries.

Transcript

1. Static in the Front, Dynamic in the Back! Matt Machuga Lone Star PHP 2017
2. Have you joined Slack Come fi nd Machuga in the back.
3. Functions ƒ : x ⟶ y
4. Functions in Math f(x) = x * 2 y = x * 2
5. Functions in PHP function double($x) { return $x * 2; } function($x) { return $x * 2; }
6. Functions in JS function double(x) { return x * 2; } x => x * 2
7. Functions in Elm double x = x * 2 \x -> x * 2
8. Elm • Purely functional language • Browser-based - compiles to JS • ML family - Standard ML and Haskell inspired • DO NOT LEAVE, PLEASE • Haskell on easy-mode • No runtime errors - no ‘unde fi ned’ is not a function
9. Functions in Elm double x = x * 2 \x -> x * 2
10. Functions in Elm msgTo name msg = msg ++ “ to “ ++ name
12. Functions in Elm msgTo : String -> String -> String
 msgTo name msg = msg ++ “ to “ ++ name
13. Functions in Elm • Statically typed • Pure (free from side-effects)
15. Let the runtime do all the work!
16. Functions in Elm • Statically typed • Pure (free from side-effects) • Only take one argument (technically) • Automatically curried • Have multi-argument syntax sugar • Implicitly return last value
18. So let'
20. Equivalent in JS const msgTo = function(name, msg = "") { const msgFn = msg => msg + " to " + name; if (msg) { return msgFn(msg); } else { return msgFn; } };
21. Equivalent in PHP $msgTo = function(string $name, string $msg = "") { $msgFn = function(string $msg) use ($name) { return $msg . " to " . $name; }; if ($msg) { return $msgFn($msg); } else { return $msgFn; } };
23. First-class Functions Pass ‘em everywhere
24. Mapping over Lists • Apply a function to each element • Return new list of transformed elements, 1-to-1
25. Mapping over Lists array_map(function($el) {
 return $el * 2;
 }, [1,2,3,4,5]); # => [2,4,6,8,10] List.map (\el -> el * 2) [1,2,3,4,5] -- [2,4,6,8,10]
26. Mapping over Lists $double = function($el) { return $el * 2; } array_map($double, [1,2,3,4,5]); # => [2,4,6,8,10] double = \el -> el * 2 List.map double [1,2,3,4,5] -- [2,4,6,8,10]
27. Mapping over Lists $double = function($el) { return $el * 2; } array_map($double, [1,2,3,4,5]); # => [2,4,6,8,10] double el = el * 2 List.map double [1,2,3,4,5] -- [2,4,6,8,10]
28. Let’s build something
29. GitHub Issues Viewer • Enter a GitHub repo to view a list of its issues • Show: • Title • Body • Url • Comment count • Labels
30. Getting Started
39. q
40. elm-format • Atom ran code through elm-format • Saw we were missing module declaration • Added module declaration as name of fi le • Formatted code
41. elm-format module Main exposing (..) -- export all functions from this module
42. The Elm Compiler The kindest compiler you will ever use
43. elm-make • Analyzed our code • Saw unsupported type returned from main • Suggested fi xes
44. elm-make The `main` value has an unsupported type. I need Html, Svg, or a Program so I have something to render on screen, but you gave me: String
45. Static Compilers
46. elm-make The `main` value has an unsupported type. I need Html, Svg, or a Program so I have something to render on screen, but you gave me: String
48. Warning Top-level value `main` does not have a type annotation. I inferred the type annotation so you can copy it into your code: main : Html msg
50. What is `Html msg`? • Main returns with the type `Html msg` • Means it is a chunk of Html that can produce values of any type. • Ignore this for now
51. elm-live • Development server for Elm code • Live Reloads on successful compilation
54. Did Elm really compile to HTML? Yup - and JS to be fair
55. But it can compile to just JS, right? Yup
56. elm-live $ elm live Main.elm --output=elm.js
58. Loading Elm in App <!-- Element to inject app into -->
 <div id="app"></div> <!-- Load compiled elm app + runtime -->
 <script src="elm.js"></script> <!-- Embed Elm app into element -->
 <script>
 Elm.Main.embed(
 document.getElementById("app")
 );
 </script>
60. Let’s Move it to Elm! Views as functions
66. Unquali fi ed Imports -- Instead of typing
 Html.Attributes.class
 Html.Attributes.placeholder
 -- etc -- We can type
 class
 placeholder
68. Convert HTML <form class="form"> <div class="form-group"> <div class="row"> <div class="col-md-8"> <input type="text" class="input-lg form-control" placeholder="Enter a GitHub Repo (Ex: elm-lang/elm)"/> </div> <div class="col-md-4"> <input type="submit" class="btn btn-primary btn-lg" value="Load Issues" /> </div> </div> </div> </form>
69. To Elm inputView = form [ class "form" ] [ div [ class "form-group" ] [ div [ class "row" ] [ div [ class "col-md-8" ] [ input [ type_ "text" , class "input-lg form-control" , placeholder "Enter a GitHub Repo (Ex: elm-lang/elm)" ] [] ] , div [ class "col-md-4" ] [ input [ type_ "submit" , class "btn btn-primary btn-lg" , value "Load Issues" ] [] ] ] ] ]
70. Html Element Signature div : List (Html.Attribute msg) 
 -> List (Html.Html msg)
 -> Html.Html msg -- div takes a List of Attributes
 -- and a List of child Html Elements
 -- and returns an Html Element
71. Html Element Signature inputView = form [ class "form" ] [ div [ class "form-group" ] [ div [ class "row" ] [ div [ class "col-md-8" ] [ input [ type_ "text" , class "input-lg form-control" , placeholder "Enter a GitHub Repo (Ex: elm-lang/elm)" ] [] ] , div [ class "col-md-4" ] [ input [ type_ "submit" , class "btn btn-primary btn-lg" , value "Load Issues" ] [] ] ] ] ]
72. Html Element Signature inputView = form [ class "form" ] [ div [ class "form-group" ] [ div [ class "row" ] [ div [ class "col-md-8" ] [ input [ type_ "text" , class "input-lg form-control" , placeholder "Enter a GitHub Repo (Ex: elm-lang/elm)" ] [] ] , div [ class "col-md-4" ] [ input [ type_ "submit" , class "btn btn-primary btn-lg" , value "Load Issues" ] [] ] ] ] ]
73. Let’s Do Another!
81. ಠ_ಠ
82. Whoops! We didn’t add this function to main
85. One More Level Labels probably deserve their own views
88. Views are Converted! However, they do nothing but display static HTML
89. Let’s Model our Data
90. Our app has • A repository name to search • A list of issues to display
91. type alias • Create a domain-speci fi c type • Composable of other types • “Alias this structure by this name” • Keep type signatures clean
92. type alias Model type alias Model = { repo : String , issues : List GitHubIssue }
93. Recall from earlier • We want our issues to show: • Title • Body • Url • Comment count • Labels
94. type alias GitHubIssue type alias GitHubIssue = { title : String , body : String , url : String , comments : Int , labels : List GitHubLabel }
95. type alias GitHubLabel type alias GitHubLabel = { title : String , color : String }
97. Create Initial Data
101. What do we have? • List containing n-number of issues • HTML element that takes a list of child elements
102. So what we want is... a List of IssueView
103. Remember Mapping?
105. More guidance The 1st argument to function `map` is causing a mismatch. Function `map` is expecting the 1st argument to be: a -> VirtualDom.Node msg But it is: Html msg It looks like a function needs 1 more argument.
107. Type Mismatch Function `map` is expecting the 1st argument to be: a -> VirtualDom.Node msg But it is: Html msg It looks like a function needs 1 more argument.
109. Render Issue Data
113. Time to Add Behavior
114. Html.program
115. Html.program main = Html.program { init : (Model, Cmd msg) , view : Model -> Html msg , update : msg -> Model -> (Model, Cmd msg) , subscriptions : Model -> Sub msg }
116. Subscriptions are Out of Scope But still very useful!
118. Cmd.none Runtime, take a break.
122. What can our app do? • Set Repository Name • Fetch Issues
123. type - Union Types • A type to represent complex data • A type to represent acceptable types
124. Example from Elm Docs type User = Named String | Anonymous activeUsers : List User
 activeUsers = 
 [ Anonymous, Named “Machuga”]
125. type Msg type Msg = SetRepo String | FetchIssues
127. Determinism
128. Pattern Matching
129. case..of - like switch, but awesome!
130. case...of update : msg -> Model -> ( Model, Cmd msg )
 update msg model =
 init
131. case...of update : Msg -> Model -> ( Model, Cmd msg )
 update msg model =
 init
132. case...of update : Msg -> Model -> ( Model, Cmd msg )
 update msg model = case msg of SetRepo repo -> ....
134. Type Mismatch The de fi nition of `main` does not match its type annotation. The type annotation for `main` says it is a: Program Never Model msg But the de fi nition (shown above) is a: Program Never Model Msg Your type annotation uses type variable `msg` which means any type of value can fl ow through. Your code is saying it CANNOT be anything though! Maybe change your type annotation to be more speci fi c? Maybe the code has a problem? More at: <https://github.com/elm-lang/elm-compiler/blob/0.18.0/hints/type-annotations.md>
135. Update Main’s Signature
137. Determinism This `case` does not have branches for all possibilities. You need to account for the following values: Main.FetchIssues Add a branch to cover this pattern! If you are seeing this error for the fi rst time, check out these hints: https://github.com/elm-lang/elm-compiler/blob/0.18.0/hints/missing-patterns.md The recommendations about wildcard patterns and `Debug.crash` are important!
139. Updating a Record
140. Updating a Record { model | key = value } -- Read as: -- Model, such that key is equal to value
142. Still Needs Wired Up!
147. IT DOES A THING!
148. Hook up other events
150. Representing Something That May Not Exist So call me “Maybe”? You can boo at that one
151. There is no null
152. Maybe type Maybe = Just a | Nothing -- Maybe String says: -- The value is either just a string -- or it is nothing -- Developer must account for both
157. Now the views
160. Check Out Elm!
161. Resources • Pragmatic Studio Elm Courses • http://elm-lang.org • KnowThen Elm Course • Daily Drip
162. I’m Matt Machuga
163. Improve your application with theory! https://bitsandtrees.com
164. Erie, PA
165. Thanks!
167. Warning: Boss Fight If we made it this far, I’m shocked, and you’re awesome!
168. elm-lang/http $ elm package install elm-lang/http
169. elm-lang/http import Http import Json.Decode as Decode exposing (Decoder, fi eld, succeed)
170. Add More Functionality type Msg = SetRepo String | FetchIssues | LoadIssues (Result Http.Error (List GitHubIssue))
171. What? LoadIssues (Result Http.Error (List GitHubIssue)) -- LoadIssues takes -- a Result that will return either -- Http.Error -- List GitHubIssue
172. Consider a Promise promise.then(yay, oops)
173. Http.send
174. Http.get
175. GitHub Issues Endpoint
176. Declare Data Structure
177. Json Decoding
178. Type Constructor GitHubIssue title body url comments labels
179. Our First Command
180. fetchIssues
181. Whoa -- Construct the get, pass to send, the result will be sent to LoadIssues Http.send 
 LoadIssues <| Http.get (repoUrl repo) (Decode.list issueDecoder)
182. Handle New Type