Elm Development with front end

Initial meetup lambda PT (Braga), development with ELM

Transcript

1. ELM |> Front end |> Development Digisensei Helder Pinto GH: @helderjnpinto / LI: linkedin.com/in/helderjnpinto || GH: @Digisensei
4. null undefined - is not a function impuro e mutável write lots of tests for a tiny web app
5. elm
6. Elm Elm is better …. No null. No runtime errors in practice. No undefined is not a function. The Compiler and Debugger is great! http://debug.elm-lang.org/
7. elm http://elm-lang.org/blog/blazing-fast-html-round-two
8. Elm • Functional Language • Haskell based • Strongly typed • Front end oriented • Compiles to Js • Very fast, Elm uses "Virtual-dom" combining Pure Functions and Immutable data.
9. Elm Main properties of the language: • Strongly typed • Pure Functions • Immutable data
10. Elm Strongly typed ??? JavaScript : Elm: '1' + 1 // o resultado será '11' '1' + true // o resultado será 1true
11. Elm Principles FP (Functional Programming) Style of programming where you use PURE FUNCTIONS
12. Elm Stateless / Pure functions Return Value based on Input parameters and don’t cause side effects
13. Elm Rules for Pure functions 1 – Has parameters! function myFunction (x) { }
14. Elm Rules for Pure functions 2 – Must not use State! var count = 0; function myFunction (x) { var localCount = count + 1; ...
15. Elm Rules for Pure functions 3 – Must return a value based on parameters! function myFunction (x) { return x + 1; }
16. Elm Rules for Pure functions 4 – Must not cause side effects! function myFunction (x) { Document.getElementById(“item”).innerText = “Kill ALL ”; send_random_rockets (x);// Just return x+1; }
17. Elm Functional Programming Style =/= Functional Programming Language
18. Elm Functional Programming Style In JS Require Self Discipline JavaScript Doesn’t Care about FP
19. Elm Functional Programming Language Provides Functional Guarantees it Forces you to: write pure functions use immutable data
20. Elm Immutable data
21. Elm Immutable data Elm use immutable data: - Better for processing (ex. Diff with Virtual Dom ) - Code is easier to understand in general. - Thread-safe (ex. multiple threads cannot corrupt the state ) - Compiler can check the type of data even without notation. - No generic map, apply, fold, or filter type functions. Instead it uses names with the prefix of its module as List.map, Dict.filter.
22. Elm Type of data There are as in most languages: Int , String, Float, Char, ... Most used: Lists, Dictionaries, Tuples, Records, Union Types Other structures : Arrays, Set
23. Elm Functions greet : String -> String greet name = “Howdy” ++ “ ” ++ name ++ “ !” greet “Samurai” -- output Howdy Samurai ! Identifier Parameter(s) Return type
24. Elm Declarative Declare what the desired result is greet : String -> String
25. Elm Some examples of code (Tuples) ninja = (“katana”, 23 ) Tuple.first ninja -- output “katana” Tuple.second ninja -- output 23 Tuple
26. Elm (Records & Union Types) type alias Ninja = { name : String, age : Int, experience : NinjaLevel } ninja = Ninja “katana” 23 Junior ninja.name -- output “Katana” Record type NinjaLevel = Junior | Senior | Guru | Ninja Union Type type Answer = Yes | No | Other String
27. Elm Currying “Creating Building Blocks” ex: add a b = a + b add 2 3 = 5 add1 = add 2 result = add1 3 -- output 5 ( 3) -- output 5 (add 2)
28. Elm Pipe operator |> SUPER COMBO <| Currying add a b = a + b isEven a = a % 2 == 0 increment1 = add 1 [1,2,3,4,5] |> List.map increment1 |> List.filter isEven |> toString -- output [2,4,6] toString <| List.filter isEven <| List.map increment1 <| [1,2,3,4,5]
29. Elm How update immutable data? Create state and don’t mutate it
30. Elm Immutable ninja = Ninja “Katana” 23 Junior older_ninja = { ninja | age = 40, experience = Guru } ninja.age -- 23 older_ninja.age -- 40
31. Elm Null ~= Maybe a type Maybe a = Just a Nothing [ 1, 2, 3, 4 ] |> List.head |> toString
32. Elm Pattern Matching with “case of” type alias Ninja = { name : String, age : Int, experience : NinjaLevel weapon : Maybe Weapon } type Weapon = Yari | Sword | Cross-bow ninja1 = Ninja “Katana” 3 Junior Nothing ninja2 = Ninja “Azuka” 90 Guru Yari
33. Elm Pattern Matching with “case of” case ninja.weapon of Just weapon -> case weapon of Yari -> “...” Sword -> “...” _ -> “Default: ” ++ (toString weapon) Nothing -> “No weapon ...” type Weapon = Yari | Sword | Cross-bow
34. Elm Tools Oficiais: - elm-repl (read–eval–print loop) - elm-package (Module manager and versions “based on file ( elm-package.json )”) - elm-make ( Elm compiler) Comunidade: - elm-install ( Install modules directly from github and official ) - elm-format ( Code formatter ) - ellie-app (online editor, https://ellie-app.com/new ) - Html to Elm (atom plugin, online : https://mbylstra.github.io/html-to-elm/) - elm-live ( A flexible dev server for Elm. Live reload included. https://git.io/elm-live )
35. Elm The Elm Architecture
36. Elm Elm Architecture model - view - update unidirectional organized communication
37. Elm Elm Architecture • Model — the state of your application • Update — a way to update your state • View — a way to view your state as HTML • Commands — A Cmd lets you do stuff: generate a random number, send an HTTP request, etc. • • Subscriptions — A Sub lets you register that you are interested in something: tell me about location changes, listen for web socket messages, Mouse, Keyboard ,etc.
38. Elm The Elm Architecture + Effects
39. Elm The Elm Architecture View Update UI Model Msg HTML Ninja user
40. Elm Elm Architecture (The Basic Pattern) import Html exposing (..) -- MODEL type alias Model = { ninja } http://package.elm-lang.org/packages/elm-lang/html/latest This uses Virtual Dom Maybe a Record, Integer, String, … etc
41. Elm Elm Architecture (The Basic Pattern) -- UPDATE type Msg = Reset | ... update : Msg -> Model -> Model update msg model = case msg of Reset -> ... ... Pattern matching for all Msg Send to elm runtime as the changes it has to do
42. Elm Elm Architecture (The Basic Pattern) -- VIEW view : Model -> Html Msg view model = div [ id “divNinja”, class “ninja-name”, onClick Reset ] [ text (model.ninja).name ] ... List of Html.Attributes List of child elements
43. Elm Elm Architecture (The Basic Pattern) main = Html.Program { model = initialModel , view = view , update = update } Record with basic Elm web app
44. Elm JavaScript Interop Elm can talk to JS, using PORTS. Works like a client and server “websockets”. Elm listen to changes in JavaScript subscription port and vice versa.
45. Elm Embed in HTML elm-make src/Main.elm --output= main.js <div id="main"></div> <script src="main.js"></script> <script> var node = document.getElementById('main'); var app = Elm.Main.embed(node); // Note: if your Elm module is named "MyThing.Root" you // would call "Elm.MyThing.Root.embed(node)" instead. </script>
46. Elm Demo Web chat with phoenix framework.