I can make

a very good coffee!

 

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
}

I get it: when you click,

it launches the update!

The Elm Architecture

Credits: @JoGrenat

The Elm Architecture

Credits: @JoGrenat

How do you actually

perform side effects?

The Elm Architecture

Credits: @JoGrenat

How do you actually

perform side effects?

Cmd Msg

What about

performances?

Performances

Performances

elm make --optimize

Functional

programming

Immutability

Tooling

Types

One-way

data flow

Virtual DOM

Performances

Credits: @JoGrenat

It is cool!

I want to learn it!

How to learn Elm?

Other ressources

Thank you!

Any question?

What about integration

with existing code base?

Leave me a message!

"Ports": messages to/from JS

  • "No Runtime Exception" holds for every package!
  • the compiler performs huge optimizations

Turn Elm code

in React component

Integrate components in Elm

elm-beginner-and-production-compliant

By sebbes

elm-beginner-and-production-compliant

Talk presenting the strengths of Elm from beginner and production point of view.

  • 989