Compiler Driven Development

Adam Recvlohe

May 4th, 2017

What is CDD?

• Write code
• Compile code
• Read error messages
• Fix code
• See your code work

🤔

IT NOW INCLUDES LIBRARIES FOR HTML AND CSS, ALLOWING YOU TO WRITE YOU ENTIRE APPLICATION IN ELM.

STATICALLY TYPED

ELM MAKES TYPE INFERENCES ABOUT YOUR CODE

MEANING, IT KNOWS WHAT DATA TYPES YOU ARE USING AND IF YOU ARE USING THEM CORRECTLY

FUNCTIONAL

ELM IS COMPOSED OF PURE FUNCTIONS

MEANING, ELM FUNCTIONS DO NOT CREATE ANY SIDE-EFFECTS.

import Html exposing (Html, text)

import String

allUpper: String -> String
allUpper s =
  toUpper s

main: Html a
main = 
  text allUpper "Hello, world"

TYPE ALIASES

TYPES ALIASES GIVE STRUCTURE TO YOUR DATA TYPES

MEANING, TYPE ALIASES ALLOW YOU TO DEFINE THE SHAPE OF YOUR DATA.

import Html exposing (Html, text)

import String

type alias Model = 
  { count: Int 
  }

allUpper: String -> String
allUpper s =
  String.toUpper s

main: Html a
main = 
  text (allUpper "Hello, world")

NOW LET'S CREATE OUR MODEL

WHAT DO YOU THINK OUR MODEL WILL BE?

SPOILER ALERT...A FUNCTION!

import Html exposing (Html, text)

import String

type alias Model = 
  { count: Int
  }
  
model = Model 0
-- model = { count: 0 }
{-  This is a Record type -}

allUpper: String -> String
allUpper s =
  String.toUpper s

main: Html a
main = 
  text (allUpper "Hello, world")

ALL DATA TYPES ARE IMMUTABLE

RECORDS, LISTS, STRINGS, ETC.

MESSAGES

MEANING, WHEN YOU WANT TO CHANGE THE STATE OF THE MODEL, YOU WILL USE MESSAGES.

UNION TYPES

ALLOWS YOU TO DESCRIBE NEW TYPES, JUST AS IF YOU WANTED TO DESCRIBE A NEW DATA TYPE.

THINK SWITCH STATEMENT!

type Msg
  = Increment 
  | Decrement

view: Model -> Html Msg
view model =
  div [] [ div [] [text (toString model.count) ]
         , button [ onClick Increment ] [ text "Increment" ]
         , button [ onClick Decrement ] [ text "Decrement" ]  
         ]

UPDATES

UPDATES ARE HANDLED BY THE UPDATE FUNCTION, THAT MAKES CHANGES TO THE MODEL BASED ON THE MESSAGE PASSED.

update: Msg -> Model -> Model
update msg model =
  case msg of
      Increment ->
        ({ model | model = model + 1 })
      Decrement ->
        ({ model | model = model - 1 })
      _ ->
        model

WIRE UP

ELM COMES WITH HELPER PROGRAMS THAT WIRE UP THE FUNCTIONS SO THAT THE MODEL, MSGS, AND UPDATES ARE PASSED THROUGH

main: Program Never Model Msg
main = Html.beginnerProgram
    { model = model
    , update = update
    , view = view
    }

QUESTIONS, COMMENTS, CONCERNS?