4: Rendering HTML


We will take a look at rendering our Elm to HTML using several libraries. The basic structure of getting that compiles JS from our Elm code into a div element. We will also go over a lot of the tooling used in getting all of this accomplished.

News and updates

  • Attended a workshop by Micheal Jackson of React Training, creator of react-router v4
  • Keep learning and doing

Rendering HTML

  • HTML elements that we are used to like div, img, h1 take exactly 2 arguments
    • the first is a list of attributes
    • the second is list of child nodes
    • if there is no attributes or child nodes we provide an empty list []
       div [ class "content" ]
        [ h1 [] [ text "Photo Groove" ]
        , div [ id "thumbnails" ]
            [ img [ src "http://elm-in-action.com/1.jpeg" ] []
            , img [ src "http://elm-in-action.com/2.jpeg" ] []
            , img [ src "http://elm-in-action.com/3.jpeg" ] []
                
            ]
        ]
      
  • Import, it’s kinda like JS
    • We use the html library, may be surprised it’s not part of the core library. If you look at things in our JS ecosystem, react & angular. They had moved towards a lean core lib, and extend that will specific libs. Like pulling out propTypes or when angular pulled out the router, bc everyone used ui-router.
    • Like JS import { Component }, rather than deconstructing the import we use the key work ‘exposing’ (x, y, z)
    • Or to import all of them we use (..) to sort of spread over all of them
    • refered to as qualified and exposing everything is unqualified.
    • When two use one or the other ? unqualified imports will often lead to ambiguous code. Is that map on List or Dict ? Who knows.
  • Export, still like JS
    • instead of export or export default we use module filename exposing (..)
    • module is at the top of the file, not at the bottom, where I always forget to add it!
    • can expose all the functions in our module, or we could specify just a few that we want to publicly expose
    • nice that it’s simple in and out, without all the possible configurations from js
  • Package Manager, more similarities
    • install & publist packages. Sweet.
    • it does ask me if “Some new packages are needed. Here is the upgrade plan.” That continues with the Elm ethos from the compiler that I’ve gotten so far.
      elm-package COMMAND
       Available commands:
      install                  Install packages to use locally
      publish                  Publish your package to the central catalog
      bump                     Bump version numbers based on API changes
      diff                     Get differences between two APIs 
      
  • Built Step elm-make filename –output elm.js
    • this will compile our Elm into JS
    • comes with the Elm Runtime to handle the following
      • Event Listeners
      • When to update the DOM
      • app needs a main, one and only one, like in standard C programs
      • that module must be exposed, so we can call Elm.filename.embed
      • If you come from React, Angular, this is pretty familiar stuff, right?
    • now inject that js into the DOM using ‘getElementById()’
    • at this point we can check out the index.html file and it should be rendering our images
<div id="elm-area"></div>
  <script src="elm.js"></script>
  <script>
    Elm.PhotoGroove.embed(document.getElementById("elm-area"));
  </script>
  • elm-reactor
    • Builds out our app, has a nice home directory showing used packages
    • First thing I did, was update some text and save, live reloading?
    • That’s where elm-live comes in, remember JS has some very nice tooling
    • also found this elm webpack starter
  • the original title of this episode was Elm Architecture, but there’s a lot to cover before we get to use
main =
    Html.beginnerProgram
        { model = init ""
        , view = view
        , update = update
        }

Picks

Follow