0413 (Monday, Week 2)

Edits after class look like this.

Q&A

Questions, comments, complaints?

Elm w.r.t. React/Redux

Elm enforces a model-update-view architecture. Redux provides similar facilities for JavaScript programs.

JavaScript Interop

The More Random Elm lecture introduces the support in Elm for interoperating with JavaScript.

Why not allow direct connection to arbitrary JavaScript? Why not target other platforms (e.g. mobile devices)? Elm is more of the mindset of "doing one thing and doing it well." There are benefits to restricting to purely functional and model-update-view programming: compile-time error checking, "no runtime exceptions," making it easier to potentially retarget compilation in the future (e.g. WebAssembly). "A delightful language" — We (Justin and Ravi) could not agree more.

Exercises

We'll work in randomly assigned Zoom breakout rooms for ~30 minutes. Either have one person at a time share their screen, while discussing and working the tasks as a group. Or work individually and discuss questions and issues that come up.

Elm-UI

Let's meet the elm-ui library, an alternative to raw HTML and CSS as exposed through elm/html and elm/browser.

Start by copying the simple example code into a file...

module ElmUITest exposing (main)

import Element exposing
  ( Element
  , el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding
  )
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font

main = 
    Element.layout []
        myRowOfStuff

myRowOfStuff : Element msg
myRowOfStuff =
    row [ width fill, centerY, spacing 30 ]
        [ myElement
        , myElement
        , el [ alignRight ] myElement
        ]

myElement : Element msg
myElement =
    el
        [ Background.color (rgb255 240 0 245)
        , Font.color (rgb255 255 255 255)
        , Border.rounded 3
        , padding 30
        ]
        (text "stylish!")

... and compile and run.

% elm init
% elm install mdgriffith/elm-ui
% elm make ElmUITest.elm           # generates index.html

Explore the package documentation.

Try re-implementing the view function for CountButtonClicks.elm with this package. [scroll down for an example]

Try making things look nicer.

Try adding some more bells and whistles.

What did you make? If you're willing to share your code so that others can learn from it, please post your code on Piazza.

Before We Meet Again

Read and watch More Random Elm
Finish and submit HW1
Peek at HW2
Prepare any topics for Q&A next time

Answers

Check out the view function in CountButtonClicksNicer.elm.

cs223