1 of 48

Elm Introduction

2 of 48

Intro

What is Elm?

3 of 48

4 of 48

Why ?

  • Plone
    • Functional
  • Zope
    • NoRedInk
  • Python
    • BDFL
    • Paradox

5 of 48

HELLO!

My name is Godefroid

@gotcha

@__gotcha

6 of 48

7 of 48

Goals:

  • Things that might not be obvious
  • Awesome things
  • Pitfalls
  • References for more

8 of 48

Avoid:

  • Detailed syntax
  • FP concepts
  • Comprehensive code

9 of 48

Agenda:

  • What is Elm?
  • Let’s see some code!
  • The Elm Architecture
  • Awesome things
  • How do I use Elm at work?
  • Caveats

10 of 48

What is Elm ?

  • A functional language
  • Statically typed + inference
  • All data is immutable
  • All functions are pure
  • ‘null’ / ‘undefined’ / Exceptions�do not exist

11 of 48

Javascript

Elm

npm

Webpack

Built in

Built in

React

Redux

Built in

Built in

Typescript/Flow

Immutable.js

Built in

Built in

12 of 48

“Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm.”

  • Dan Abramov, Author of Redux

Source: http://redux.js.org/

13 of 48

Side note:

“Unbreakable” &

“Functional”

14 of 48

What do we mean

when we say breakable?

15 of 48

Broken.

“The sky is Uncaught TypeError: Cannot read property 'color' of null at <anonymous>:1:5”

16 of 48

Wrong?

“The sky is green.”

17 of 48

Functional Style

Functional Language

Functional features

Imperative features

Functional features

Compromises

Here FP practices require discipline

Here FP practices are the default

18 of 48

OKAY

Let’s code!

19 of 48

Code Time

Basic +/- counter

20 of 48

←

←

21 of 48

←

←

←

←

←

←

22 of 48

We define values

​

We write functions

​

Elm does the rest!

Update

View

Msg

Model

23 of 48

View

State

Update

24 of 48

View

Model

Html

New!

25 of 48

Update

Msg

Model

Model

New!

26 of 48

Html.beginnerProgram

We define values

​

We write functions

​

Elm does the rest!

View

Update

Elm Runtime

Browser

Msg

Model

Model

Model

Html

DOM

Event!

Model

New!

Update

View

Msg

Model

Msg

Msg

27 of 48

Html.program

We define values

​

We write functions

​

Elm does the rest!

View

Update

Elm Runtime

Browser

Msg

Msg

Model

Model

Model

Html

DOM

Event!

Model

New!

Effects

Cmd

Cmd

Msg

Update

View

Msg

Model

28 of 48

Html.program

We define values

​

We write functions

​

Elm does the rest!

View

Update

Elm Runtime

Browser

Msg

Model

Model

Model

Html

DOM

Model

New!

Effects

Cmd

Cmd

Msg

Event!

Msg

Update

View

Msg

Model

29 of 48

Update

Msg

Model

Model

New!

Cmd

Pls do these things!

30 of 48

Next:

Awesome things!

31 of 48

Next:

Best pair-programming buddy ever

32 of 48

Refactoring:

Nice canned scenarios

33 of 48

Refactoring:

Worse scenario

34 of 48

Next:

Elm packages

Auto-semvar

35 of 48

36 of 48

Next:

Compiling Elm

37 of 48

app.js

Elm Compiler

*.elm

38 of 48

Compiling

.js

*.elm

*.js

webpack

39 of 48

elm-webpack-loader

​

Webpack loader for the Elm programming language

40 of 48

Next:

How do I use Elm

at work?

41 of 48

Answer:

Gradually!

​

http://elm-lang.org/blog/how-to-use-elm-at-work

​

42 of 48

With react-elm-components

43 of 48

With plain javascript

44 of 48

Next:

Caveats

45 of 48

  • “General Purpose Language”
  • Fiddling with the DOM
  • Javascript interop is strict
  • You may be more frustrated�with other languages

46 of 48

Thoughts

​

  • Not a silver bullet – but trades off for better problems!
  • Yet to see a broken runtime
  • Elm reveals your mistakes
  • Refactoring is awesome

47 of 48

Further reading/watching

48 of 48

Thanks Mario!

CREDITS: Arvirargus theme by SlidesCarnival

Those slides were prepared by��Mario Rogic