4: Rendering HTML - JSToElm
All Episodes

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>
  • 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 =
        { model = init ""
        , view = view
        , update = update



Published 4 Sep 2017

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter