Elm: Your first app. Evan Misshula Evan Misshula Elm: Your first app / 33

Transcription

1 Elm: Your first app Evan Misshula Evan Misshula Elm: Your first app / 33

2 Our learning objectives Rendering a page with declarations Managing state with Model-View-Update Handling user interaction Evan Misshula Elm: Your first app / 33

3 Rendering a page Web browsers translate Hypertext Markup Languages (HTML)into Document Object Model (DOM) The DOM is made of nodes Changing the nodes changes the page Two most common nodes Text Elements Evan Misshula Elm: Your first app / 33

4 Components of Elements and Text Nodes Elements have a tagname "div" "img" may have children text nodes have textcontent and are childless Evan Misshula Elm: Your first app / 33

5 Describing a page To describe a page in Elm We do not use markup Evan Misshula Elm: Your first app / 33

6 Describing a page To describe a page in Elm We do not use markup We call functions to create nodes Evan Misshula Elm: Your first app / 33

7 Describing a page To describe a page in Elm We do not use markup We call functions to create nodes Button in HTML <button class="myclass" id="myid">submit</button> Evan Misshula Elm: Your first app / 33

8 Describing a page To describe a page in Elm We do not use markup We call functions to create nodes Button in HTML <button class="myclass" id="myid">submit</button> Button in Elm node "button" [ class "myclass", id "myid"][ text "Submit"] Evan Misshula Elm: Your first app / 33

9 Virtual DOM We usually call these virtual DOM nodes HTML They come from the HTML module Many intuitive named functions Evan Misshula Elm: Your first app / 33

10 Image function This function of node: node "img" [ src "logo.png"][] Evan Misshula Elm: Your first app / 33

11 Image function This function of node: node "img" [ src "logo.png"][] is equal to: Evan Misshula Elm: Your first app / 33

12 Image function This function of node: node "img" [ src "logo.png"][] is equal to: img [ src "logo.png"][] Evan Misshula Elm: Your first app / 33

13 Good style img is a helper function best to use them to make your code more readable only case of no helper is for the blink operator Evan Misshula Elm: Your first app / 33

14 Let s render a page Evan Misshula Elm: Your first app / 33

15 Let s render a page if you have elm installed 1 cd to your Documents directory 2 mkdir a photoblast directory Evan Misshula Elm: Your first app / 33

16 Let s render a page if you have elm installed 1 cd to your Documents directory 2 mkdir a photoblast directory 1 open Emacs 2 C-x C-f Main.elm Evan Misshula Elm: Your first app / 33

17 Let s render a page add if you have elm installed 1 cd to your Documents directory 2 mkdir a photoblast directory 1 open Emacs 2 C-x C-f Main.elm import Html exposing (div, h1, img, text) import Html.Attributes exposing (..) Evan Misshula Elm: Your first app / 33

18 No elm, No problem Evan Misshula Elm: Your first app / 33

19 No elm, No problem use Evan Misshula Elm: Your first app / 33

20 No elm, No problem use add to the left pane Evan Misshula Elm: Your first app / 33

21 No elm, No problem use add to the left pane import Html exposing (div, h1, img, text) import Html.Attributes exposing (..) Evan Misshula Elm: Your first app / 33

22 No let s add a view view model = div [ class "content"] [h1 [][text "Photo blast"], div [ id "thumbnails" ] [ img [ src " [], img [ src " [], img [ src " [], img [ src " [] ] main = view "no model yet" Evan Misshula Elm: Your first app / 33

23 Add some styles Evan Misshula Elm: Your first app / 33

24 Add some styles 1 Create a file called SecurityBlast.elm Evan Misshula Elm: Your first app / 33

25 Add some styles 1 Create a file called SecurityBlast.elm 1 Make sure to add ~module SecurityBlast exposing (..) Evan Misshula Elm: Your first app / 33

26 Add some styles 1 Create a file called SecurityBlast.elm 1 Make sure to add ~module SecurityBlast exposing (..) 1 Expose all of the elements in Html and Html.Attributes Evan Misshula Elm: Your first app / 33

27 view model = div [ class "content"] [h1 [][text "Photo blast"], div [ id "thumbnails" ] [ img [ src " [], img [ src " [], img [ src " [], img [ src " [] ] ] main = view "no model yet" Evan Misshula Elm: Your first app / 33 New file named SecurityBlast.elm module SecurityBlast exposing (..) import Html exposing (..) import Html.Attributes exposing (..)

28 Exposing SecurityBlast The module command defines a module of our own Files in our project can import this like any other modlule/library import SecurityBlast exposing (main) Evan Misshula Elm: Your first app / 33

29 Exposing SecurityBlast The module command defines a module of our own Files in our project can import this like any other modlule/library import SecurityBlast exposing (main) Because of the exposing (..) we are exposing all of our top-level values Evan Misshula Elm: Your first app / 33

30 Exposing SecurityBlast The module command defines a module of our own Files in our project can import this like any other modlule/library import SecurityBlast exposing (main) Because of the exposing (..) we are exposing all of our top-level values main view Evan Misshula Elm: Your first app / 33

31 Exposing SecurityBlast The module command defines a module of our own Files in our project can import this like any other modlule/library import SecurityBlast exposing (main) Because of the exposing (..) we are exposing all of our top-level values main view only exposed values can be imported Evan Misshula Elm: Your first app / 33

32 Installing package dependencies Evan Misshula Elm: Your first app / 33

33 Installing package dependencies on the command line elm-package install elm-lang/html Evan Misshula Elm: Your first app / 33

34 Installing package dependencies on the command line elm-package install elm-lang/html in Emacs C-c M-k to open the package list m to mark the packate x to install marked packages Evan Misshula Elm: Your first app / 33

35 Compiling the elm file to js Evan Misshula Elm: Your first app / 33

36 Compiling the elm file to js In the shell elm-make SecurityBlast.elm --output elm.js Evan Misshula Elm: Your first app / 33

37 Compiling the elm file to js In the shell elm-make SecurityBlast.elm --output elm.js In Emacs C-c C-n Evan Misshula Elm: Your first app / 33

38 <body> <div id="elm-area"></div> <script src="elm.js"></script> <script> Evan Misshula Elm: Your first app / 33 Make an HTML File <!doctype html> <head> <style> body { background-color: rgb(44,44,44); color: white;} img { border: 1px solid white; margin: 5px; }.large { width: 500px; float: right; }.selected { margin: 0 ; border: 6px solid #60b5cc; }.content { margin: 40px auto; width: 960px; } #thumbnails { width: 400px: float: left; } h1 {font-family: Verdana; color: #60b5cc; } </style> </head>

39 Elm runtime When we compiled we added elm runtime adds even listeners efficiently schedules DOM updates and http requests stores and manages application state Evan Misshula Elm: Your first app / 33

40 Embed When we called Elm.SecurityBlast.embed we told elm runtime to: open the SecurityBlast module make it the Main entrypoint of the application Evan Misshula Elm: Your first app / 33

41 Now we can make it interactive Evan Misshula Elm: Your first app / 33

42 Now we can make it interactive How do we have data flow through and manage it? Evan Misshula Elm: Your first app / 33

43 Now we can make it interactive How do we have data flow through and manage it? Evan Misshula Elm: Your first app / 33

44 How was state stored Developers used to store state in the DOM itself Evan Misshula Elm: Your first app / 33

45 How was state stored Developers used to store state in the DOM itself Was a menu collapsed or expanded? Which value did a user choose? Evan Misshula Elm: Your first app / 33

46 How was state stored Developers used to store state in the DOM itself Was a menu collapsed or expanded? Which value did a user choose? Check the DOM for "expanded" or "collapsed" class Querey the DOM for the choice Evan Misshula Elm: Your first app / 33

47 Not Done today Doesn t scale Slow Error prone Evan Misshula Elm: Your first app / 33

48 Keep State out of the DOM Redux (js) Pedestal (js) re-frame (clojurescript) Evan Misshula Elm: Your first app / 33

49 How? Evan Misshula Elm: Your first app / 33

50 How? Declare a model initialmodel = [ { url = "capish.jpg" }, { url = "dog.jpg" }, { url = "damnhigh.jpg" }, { url = "incorrect.jpg" } ] main = view initialmodel Evan Misshula Elm: Your first app / 33

51 Write a view functions We will render a thumbnail of each of our pictures Evan Misshula Elm: Your first app / 33

52 Write a view functions We will render a thumbnail of each of our pictures Elm does this through a view function Evan Misshula Elm: Your first app / 33

53 Write a view functions We will render a thumbnail of each of our pictures Elm does this through a view function a typical application has a single view function accepts the model as a parameter returns Html Elm runtime takes the Html and renders it Evan Misshula Elm: Your first app / 33

54 Break up the task 1 Write viewthumbnail which renders Html for one thumbnail 2 replace our view function urlprefix = " view model = div [ class "content" ] [ h1 [] [ text "Security Blast"], div [ id "thumbnails" ][] ] viewthumbnail thumbnail = img [ src (urlprefix ++ thumbnail.url) ] [] Evan Misshula Elm: Your first app / 33

55 The view function Evan Misshula Elm: Your first app / 33

56 The view function Use the List.map function to iterate over the collection of thumbnails view model = div [ class "content"] [ h1 [] [ text "Security Blast"], div [ id "thumbnails" ] (List.map viewthumbnail model) ] viewthumbnail thumbnail = img [ src (urlprefix ++ thumbnail.url) ] [] Evan Misshula Elm: Your first app / 33

57 What s the difference? All we have done is change the internal representation so we can connect model and view now we can add interactivity Evan Misshula Elm: Your first app / 33

58 Expand the model Evan Misshula Elm: Your first app / 33

59 Expand the model user clicks on the thumbnail Evan Misshula Elm: Your first app / 33

60 Expand the model user clicks on the thumbnail it becomes selected Evan Misshula Elm: Your first app / 33

61 Expand the model user clicks on the thumbnail it becomes selected 1 bigger version 2 blue border Evan Misshula Elm: Your first app / 33

62 Expand the model user clicks on the thumbnail it becomes selected 1 bigger version 2 blue border initialmodel = { photos = [ { url = "capish.jpg" }, { url = "dog.jpg" }, { url = "damnhigh.jpg" }, { url = "incorrect.jpg" } ], selectedurl = "capish.jpg" } Evan Misshula Elm: Your first app / 33

63 Update viewthumbnail viewthumbnail selectedurl thumbnail = if selectedurl == thumbnail.url then img [ src (urlprefix ++ thumbnail.url), class "selected" ] [] else img [ src (urlprefix ++ thumbnail.url)] [] Evan Misshula Elm: Your first app / 33

64 Refactor code Evan Misshula Elm: Your first app / 33

65 Refactor code We use classlist to make the code more terse Evan Misshula Elm: Your first app / 33

66 Refactor code We use classlist to make the code more terse viewthumbnail selectedurl thumbnail = img [ src (urlprefix ++ thumbnail.url), classlist [ ( "selected", selectedurl == thumbnail.url)] ] [] Evan Misshula Elm: Your first app / 33

67 Pass selectedurl to the view view model = div [ class "content"] [ h1 [] [ text "Security Blast"], div [ id "thumbnails" ] (List.map (\photo -> viewthumbnail model.selectedurl photo) model.photos ), img [ class "large", src (urlprefix ++ "large/" ++ model.selecteedurl) ] [] ] Evan Misshula Elm: Your first app / 33

68 Homework for Wednesday, May 9 Evan Misshula Elm: Your first app / 33

69 Homework for Wednesday, May 9 Make it work Evan Misshula Elm: Your first app / 33