More Related Content
What's hot
What's hot (20)
Similar to Functional programming and Elm
Similar to Functional programming and Elm (20)
More from Fangda Wang
More from Fangda Wang (11)
Recently uploaded
Recently uploaded (20)
Functional programming and Elm
- 3. Originated from lambda calculus developed in the 1930s by Alonzo Church What is Functional Programming? Programming with mathematical functions* *It doesn’t mean you need to know math
- 4. • Do this, then do that • Any effect (Unsafe) • Commands (statements) • Control Flow • Name of a location Imperative • No notion of sequence • Limited effect (Safe) • Expressions • Data Flow • Name of a value vs. Functional
- 5. f : a à World à (World, b) If there are no side-effects, how can we change the state of the world? f... takes in the state of the world and returns a new world, thus remaining pure No Side-effects update : Msg à Model à ( Model, Cmd Msg ) https://channel9.msdn.com/Shows/Going+Deep/Erik-Meijer-Functional-Programming
- 6. Functional-flavored • Lisp 1958 (Scheme, Clojure, Racket) • ML ”Lisp with types” => Ocaml (F#, Scala, Reason) • Erlang (Elixir) • Javascript, Java 8, Kotlin, Perl, Python, PHP, etc. Functional-first, Pure • Haskell (Elm)
- 7. Nirvana “Haskell is useless” Simon Peyton Jones Honesty/Dishonesty Erik Meijer https://www.youtube.com/watch?v=iSmkqocn0oQ&t=22s https://www.youtube.com/watch?v=z0N1aZ6SnBk&t=533 https://www.infoq.com/presentations/Taming-Effect-Simon-Peyton-Jones
- 9. Web Development Fatigue3 Javascript fatigue + CSS fatigue + Framework/Npm fatigue = Web Development Fatigue
- 10. What if I told you Front-end can be done without Javascript, HTML, CSS?
- 11. Elm
- 12. ● Pure Functional Language ● Compiles to Javascript ● Statically typed + inferred ● Support Immutability and Currying ● Virtual DOM What is Elm?
- 13. ● Designed by Evan Czaplicki ● April 2012: Version 0.1 ● August 2018: Latest version 0.19 ● Stable (21 months since 0.18) ● Community in elmlang.slack.com History
- 14. ● No loops (“i = i + 1” doesn’t compile) ● No “null” and no “undefined” ● No “return”, everything is an expression ● “if” always need “else” ● No “this”, no callbacks, no closures, no hoisting ● No automatic type conversion ● JSON decoder/encoder instead of stringify/parse Differences with Javascript
- 15. Javascript Elm npm / yarn Built in React / Angular / Vue Flux / Redux / MobX Built in Built in Immutable.js Typescript / Flow Built in Built in
- 16. Without HTML, CSS: elm-ui row [ padding 10, spacing 7 ] [ el [] none , el [] none , el [] none ] spacing : Distance between children padding : Parent Padding
- 17. [ centerX , centerY ] .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } CSS elm-ui No more CSS tricks
- 19. Nice thing #1 Helpful, friendly errors
- 20. Nice thing #2 No runtime exceptions
- 22. Nice thing #4 Enforced Semantic
- 23. Nice thing #5 Time-travelling debugger
- 24. Nice thing #6 Type inference
- 26. Nice thing #8 Demystify FP concepts Functors Monads Category Theory Algebraic Data Type
- 27. The Elm Architecture is a simple pattern for architecting webapps. It is made of thee parts Nice thing #9 The Elm Architecture (TEA) Model the state of your application View a way to view your state as HTML Update a way to update your state
- 28. 28 Cartoon cute unicorns vectors design by loutpany from https://freedesignfile.com
- 29. Safe AreaUnsafe Area Elm Runtime DOM MsgModel Model Model Html Model New! Effects http requests, ports Cmd EventEvent! New! New! Cmd DOM Html EventEvent! update view
- 30. [1,2] + [3,4] = ?
- 31. [1,2] + [3,4] = ? Error [1,2,3,4] [4,6] “1,23,4” A B C D
- 32. "1,23,4" Javascript Elm -- TYPE MISMATCH --------------------- I cannot do addition with lists: [1,2] + [3,4] ^^^^^ The left side of (+) is a list of type: List number But (+) only works with Int and Float values. Hint: Switch to the (++) operator to append lists! [1,2] + [3,4] = ?
- 33. What can go wrong with automatic type conversion? https://itnext.io/things-that-can-go-wrong-without-a-strictly-typed-language-d91d418a53a1
- 35. “If you want user input to be automatically typecast as a number, you can add the number modifier to your v- model managed inputs” <input type="number" v-model="product.quantity"> <input type="number" v-model.number="product.quantity">
- 36. totalProducts() { return this.products.reduce((sum, product) => { return sum + product.quantity }, 0) } totalProducts() { return this.products.reduce((sum, product) => { if (typeof product.quantity === "number") { return sum + product.quantity; } else { return sum; } }, 0) }
- 37. <button @click="product.quantity += 1"> <button @click="product.quantity = Number(product.quantity) + 1">
- 38. Now it works but...
- 39. type alias Product = { id : Int , quantity : Int , name : String } changeQuantity : Product -> String -> Product changeQuantity product newQuantity = { product | quantity = Maybe.withDefault product.quantity (String.toInt newQuantity) } “If the user typed a valid number, replace the old number with the new one, otherwise keep the old number”
- 40. Typos <input v-model.number="product.quanity"> t Elm Fail silently Input fields are empty but buttons work. -- TYPE MISMATCH -------------------- The 2nd argument to `map` is not what I expect: 84| products ^^^^^^^^ This `products` value is a: List Product But `map` needs the 2nd argument to be: List { a | id : Int, name : String, quanity : Int, quantity : Int } Hint: Seems like a record field typo. Maybe quanity should be quantity? Vue
- 41. C de
- 42. module Main exposing (main) import Html exposing (..) import Html.Attributes exposing (..) main = div [] [ button [id "counter"] [ text "+1" ] , div [] [ text <| String.fromInt 0 ] , button [] [ text ”-1" ] ] <div id="counter"> <button>+1</button> <div>0</div> <button>-1</button> </div>
- 43. -- MODEL type alias Model = { count : Int } init : Model init = { count = 0 }
- 44. -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> { model | count = model.count + 1 } Decrement -> { model | count = model.count - 1 }
- 45. -- VIEW view : Model -> Html Msg view model = layout [] <| column [] [ button [] { onPress = Just Increment , label = text "+1" } , el [] <| text (String.fromInt model.count) , button [] { onPress = Just Decrement , label = text "-1" } ]
- 46. main : Program () Model Msg main = Browser.sandbox { init = init , view = view , update = update }
- 47. Examples
- 49. www.nsb.no
- 52. ● The ideas of Functional Programming are becoming mainstream (for a reason) ● Learning Elm will make you a better [Javascript, React, Angular, Vue, etc.] developer ● Writing pure code is an enjoyable experience that make front-end development fun again!