Notes for CS51 guest lecture.

cs51.md

Elm

You can try online and check out some examples

Keep this OCaml vs Elm syntax doc open!

Common Uses are web apps (code), data visualization, and 3D Graphics.

Rendering

• Html - example, docs, elm-ui (examples)
• Svg - example, more fun example, elm-charts (examples)
• WebGL - example, more fun example, elm-3d-scene (examples)

Practical Benefits

• Performance - framework comparison
• Asset Size - dead code elimination
• Security - JS vulnerabilities, easy event logger
• Reliability - see typical bug tracker volume (150k/month, 50k/month)

Ideas

• elm/parser + terezka/elm-charts
• Stat 110 + charts

Haskell

Common uses include servers, terminal apps, and compilers.

Here is the Elm compiler and an example of how ADTs make writing compilers quite nice!

I think there is still lots of opportunity for creating a simpler server library for Haskell. There is not currently one that I would unreservedly recommend for someone getting started. Haskell’s support for concurrency is really great though, so once you learn enough, it can be really nice and performant. Here is some server code and some other server code in case you want some examples of what can be improved upon!

data-visualization.elm

-- elm install terezka/elm-charts

import Chart exposing (..)
import Chart.Attributes exposing (..)


main =
  chart
    [ height 300
    , width 300
    , margin { left = 40, right = 40, top = 40, bottom = 40 }
    ]
    [ xLabels [ withGrid ]
    , yLabels [ withGrid ]
    , series .time
        [ scatter .temperature []
        , scatter .humidity []
        ]
        sampleData
    ]


type alias Sample =
  { time : Float
  , temperature : Float
  , humidity : Float
  }


sampleData : List Sample
sampleData =
  [ Sample 0.1 2.0 4.0
  , Sample 0.2 3.0 4.2
  , Sample 0.8 4.0 4.6
  , Sample 1.0 2.0 4.2
  , Sample 1.2 5.0 3.5
  , Sample 2.0 2.0 3.2
  , Sample 2.3 1.0 4.3
  , Sample 2.8 3.0 2.9
  , Sample 3.0 2.0 3.6
  , Sample 4.0 1.0 4.2
  ]

parser-1.elm

-- elm install elm/parser


import Html exposing (..)
import Parser exposing (..)


-- MAIN


main =
  text (Debug.toString (Parser.run expr "(1 + 2)"))


-- PARSER


type Expr
  = Lit Int
  | Add Expr Expr


expr : Parser Expr
expr =
  oneOf
    [ map Lit int
    , succeed Add
        |. symbol "("
        |. spaces
        |= lazy (\_ -> expr)
        |. spaces
        |. symbol "+"
        |. spaces
        |= lazy (\_ -> expr)
        |. spaces
        |. symbol ")"
    ]

parser-2.elm

-- elm install elm/parser


import Html exposing (text)
import Parser exposing (..)


-- MAIN


main =
  case Parser.run pExpr "((1 + 2) * 10)" of
    Ok expr ->
      text (String.fromInt (eval expr))

    Err _ ->
      text "invalid expression"



-- EXPR


type Expr
  = Lit Int
  | Binop Expr Op Expr


type Op
  = Add
  | Sub
  | Mul
  | Div



-- EVAL


eval : Expr -> Int
eval expr =
  case expr of
    Lit number ->
      number

    Binop x op y ->
      case op of
        Add -> eval x + eval y
        Sub -> eval x - eval y
        Mul -> eval x * eval y
        Div -> eval x // eval y



-- PARSER


pExpr : Parser Expr
pExpr =
  oneOf
    [ map Lit int
    , succeed Binop
        |. symbol "("
        |. spaces
        |= lazy (\_ -> pExpr)
        |. spaces
        |= pOperator
        |. spaces
        |= lazy (\_ -> pExpr)
        |. spaces
        |. symbol ")"
    ]


pOperator : Parser Op
pOperator =
  oneOf
    [ map (\_ -> Add) (symbol "+")
    , map (\_ -> Sub) (symbol "-")
    , map (\_ -> Mul) (symbol "*")
    , map (\_ -> Div) (symbol "/")
    ]



-- EXERCISES
--
-- 1. Try combining with https://elm-lang.org/examples/text-fields to
-- implement a calculator.
--
-- 2. Try ading the ^ operator for expressions like (4 ^ 2) == 16
--
-- 3. Try adding a (Parser.keyword "x") option to handle a single variable.
-- You will need to extend Expr and add an Int argument to eval so you can
-- fill in any "x" values.
--
-- 4. Try combining this with terezka/elm-charts to graph formulas like
-- "((x ^ 2) + (3 * x))" as people type them in!

webgl.elm

-- elm install avh4/elm-color 1.0.0
-- elm install ianmackenzie/elm-3d-camera 3.1.0
-- elm install ianmackenzie/elm-3d-scene 1.0.1
-- elm install ianmackenzie/elm-geometry 3.9.1
-- elm install ianmackenzie/elm-units 2.9.0

import Angle
import Camera3d exposing (Camera3d)
import Color
import Direction3d
import Html exposing (Html)
import Length exposing (Meters)
import Pixels
import Point3d
import Scene3d exposing (Entity)
import Scene3d.Material as Material
import Viewpoint3d


main : Html msg
main =
  Scene3d.unlit
    { entities   = [ square ]
    , camera     = camera
    , clipDepth  = Length.meters 1
    , background = Scene3d.transparentBackground
    , dimensions = ( Pixels.int 400, Pixels.int 300 )
    }


square : Entity Int
square =
  Scene3d.quad (Material.color Color.blue)
    (Point3d.meters -1 -1 0)
    (Point3d.meters 1 -1 0)
    (Point3d.meters 1 1 0)
    (Point3d.meters -1 1 0)


camera : Camera3d Meters Int
camera =
  Camera3d.perspective
    { viewpoint =
        Viewpoint3d.lookAt
          { focalPoint  = Point3d.origin
          , eyePoint    = Point3d.meters 4 2 2
          , upDirection = Direction3d.positiveZ
          }
    , verticalFieldOfView = Angle.degrees 30
    }