A little example in React

var salary = 1000;
// salary can be null if the user doesn't
// provide it

A little example in React

var salary = null;
// salary can be null if the user doesn't
// provide it


ReactDOM.render(
  <span>Your salary : {salary}!</span>,
  document.getElementById('root')
);

Your salary: 1000!

Rendering

var salary = 1000;
// salary can be null if the user doesn't
// provide it


ReactDOM.render(
  <span>Your salary : {salary}!</span>,
  document.getElementById('root')
);

A little example in React

Your salary: !

Rendering

var salary = null;
// salary can be null if the user doesn't
// provide it


ReactDOM.render(
  <span>Your salary : {salary}!</span>,
  document.getElementById('root')
);

A little example in React

How can I avoid this

kind of bugs?

Beginner and production compliant

@sebbes #elmlang

The NoRedInk example

Zero Runtime Exception

Are they wizards??!!

The Elm Architecture

Credits: @JoGrenat

The Elm Architecture

Credits: @JoGrenat

The Elm Architecture

Credits: @JoGrenat

Oh, it looks like

Redux!

The Elm Architecture

type alias Model = { salary : Int }

type Msg = Increment | Decrement

update msg model =
    case msg of
        Increment ->
             { salary = model.salary + 100 }

        Decrement ->
             { salary = model.salary - 100 }

The Elm Architecture

type alias Model = { salary : Int }

type Msg = Increment | Decrement

update msg model =
    case msg of
        Increment ->
             { salary = model.salary + 100 }

        Decrement ->
             { salary = model.salary - 100 }

You don't seem

to update anything!

The Elm Architecture

view model = div [] [
  button [onClick Increment] [text "+"],
  p [] [text (String.fromInt model.salary)],
  button [onClick Decrement] [text "-"]
]


main = sandbox { 
  init = { salary = 1000},
  update = update,
  view = view
}

The Elm Architecture

view model = div [] [
  button [onClick Increment] [text "+"],
  p [] [text (String.fromInt model.salary)],
  button [onClick Decrement] [text "-"]
]


main = sandbox { 
  init = { salary = 1000},
  update = update,
  view = view
}