import elm from './images/elm/elm.png'
import elmGoogle from './images/elm/elm-google.png'
import elmGoogleImages from './images/elm/elm-google-images.png'
import elmUndefined from './images/elm/undefined.png'
import jsParts from './images/elm/js-parts.jpg'
import elmFrontend from './images/elm/frontend.png'
import delightful from './images/elm/delightful.png'
import boring from './images/elm/boring.webp'
import areYouDone from './images/elm/are-you-done.gif'
import assetSizes from './images/elm/asset-sizes.png'
import cmd from './images/elm/cmd.png'
import compilerBranches from './images/elm/compiler-branches.png'
import compilerListNap from './images/elm/compiler-list-nap.png'
import compilerTypeComparison from './images/elm/compiler-type-comparison.png'
import compilerTypeComparison2 from './images/elm/compiler-type-comparison2.png'
import compilerTypeComparison3 from './images/elm/compiler-type-comparison3.png'
import compilerTypeComparison4 from './images/elm/compiler-type-comparison4.png'
import cool from './images/elm/cool.webp'
import architecture from './images/elm/elm-architecture.png'
import architectureComplete from './images/elm/elm-architecture-complete.png'
import architectureProgram from './images/elm/elm-architecture-program.png'
import elmFormat from './images/elm/elm-format.png'
import exception from './images/elm/exception.png'
import exception2 from './images/elm/exception2.png'
import elmHead from './images/elm/head.png'
import image5 from './images/elm/image5.png'
import maintainableUsable from './images/elm/maintainable-usable.png'
import performance from './images/elm/performance.png'
import publishing from './images/elm/publishing.png'
import semver from './images/elm/semver.png'
import spellcheck from './images/elm/spellcheck.png'
import spellcheck2 from './images/elm/spellcheck2.png'
import subscription from './images/elm/subscription.png'
import surveyResults from './images/elm/survey-results.png'


import customTheme from '../theme'

export const theme = customTheme

<Head>
  <title>Elm</title>
</Head>

# Elm
__aka developer friendliness on the frontend__

by Max Strübing
([twitter](https://twitter.com/mxstrbng), [github](https://github.com/mstruebing))

---

<Image src={elm} style={{ backgroundSize: 'auto' }} />

---

<Image src={elmGoogle} style={{ backgroundSize: 'auto' }} />

---

<Image src={elmGoogleImages} style={{ backgroundSize: 'auto' }} />

---

## What’s the problem with JavaScript?

---

<Image src={elmUndefined} style={{ backgroundSize: 'auto' }} />

---

<Image src={jsParts} style={{ backgroundSize: 'auto' }} />

---

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

Dan Abramov, Author of Redux

<small>Source: https://github.com/reduxjs/redux/blob/master/README.md#influences</small>

---

<Image src={elmFrontend} style={{ backgroundSize: 'auto' }} />

---

## But what about Elm?

---

A delightful language for reliable webapps.

---

A delightful language for reliable webapps.
Generate JavaScript with great performance and no runtime exceptions.

---

<Image src={delightful} style={{ backgroundSize: 'auto' }} />

---

A delightful language for reliable webapps.
Generate JavaScript with great performance and no runtime exceptions.

---

A **delightful** language for reliable webapps.
Generate JavaScript with great performance and no runtime exceptions.

---

A **delightful** language for **reliable** webapps.
Generate JavaScript with great performance and no runtime exceptions.

---

A **delightful** language for **reliable** webapps.
Generate JavaScript with **great performance** and no runtime exceptions.

---

A **delightful** language for **reliable** webapps.
Generate JavaScript with **great performance** and **no runtime exceptions**.

---

A **delightful** language for **reliable** webapps.
Generate JavaScript with **great performance** and **no runtime exceptions** *.

---

## Boring facts

---

<Image src={boring} style={{ backgroundSize: 'auto' }} />

---

### Boring facts 1

---

### Boring facts 1

<ul>
  <Steps>
    <li>Evan Czaplicki - master thesis</li>
    <li>released in 2012</li>
    <li>implemented in Haskell</li>
    <li>latest release 0.19 / August 21, 2018</li>
    <li>influenced by: Haskell, Standard ML, OCaml, F#</li>
    <li>influenced: Redux, Vue.js</li>
  </Steps>
</ul>

---

### Boring facts 2

---

### Boring facts 2

<ul>
  <Steps>
    <li>functional</li>
    <li>transpiles to JS</li>
    <li>statically typed + inferred</li>
    <li>everything immutable</li>
    <li>all functions are pure</li>
    <li>‘null’ / ‘undefined’ / exceptions do not exist</li>
  </Steps>
</ul>

---

<Image src={surveyResults} style={{ backgroundSize: 'auto' }} />
<small>https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results</small>

---

<Image src={maintainableUsable} style={{ backgroundSize: 'auto' }} />
<small>http://guupa.com/elm-presentation/</small>

---

## The cool stuff

---

<Image src={cool} style={{ backgroundSize: 'auto' }} />

---

# Performance
<Image src={performance} style={{ backgroundSize: 'auto' }} />
<small>https://elm-lang.org/blog/blazing-fast-html-round-two</small>

---

# Asset Size
<Image src={assetSizes} style={{ backgroundSize: 'auto' }} />
<small>https://elm-lang.org/blog/small-assets-without-the-headache</small>


---

### Compiler Error Messages

---

<Image src={compilerListNap} style={{ backgroundSize: 'auto' }} />

---

<Image src={compilerBranches} style={{ backgroundSize: 'auto' }} />

---

<Image src={compilerTypeComparison} style={{ backgroundSize: 'auto' }} />

---

<Image src={compilerTypeComparison2} style={{ backgroundSize: 'auto' }} />

---

<Image src={compilerTypeComparison3} style={{ backgroundSize: 'auto' }} />

---

<Image src={compilerTypeComparison4} style={{ backgroundSize: 'auto' }} />

---

### No Runtime Exceptions

---

<Image src={exception} style={{ backgroundSize: 'auto' }} />

---

<Image src={exception2} style={{ backgroundSize: 'auto' }} />

---

<Image src={elmHead} style={{ backgroundSize: 'auto' }} />

---

"If it compiles it works"

---

```elm
Debug.crash "WHOOPS"
```

---

### Automatic Semver

---

<Image src={semver} style={{ backgroundSize: 'auto' }} />

---

<Image src={publishing} style={{ backgroundSize: 'auto' }} />

---

### elm-format
<small>https://github.com/avh4/elm-format</small>


---

```js
initialModel : Model
initialModel =
    { board = sampleBoard
    , autosave = True
    , newTodoListName = ""
    , newTodos = Dict.empty
    }
```

---

<ul>
  <Steps>
    <li>whitespace greedy</li>
    <li>hates parenthesis</li>
    <li>`,` on the next line</li>
  </Steps>
</ul>

---

### Comparison of a modern JS Stack vs Elm

---

| JavaScript | |
|---|---|

---

| JavaScript | Elm |
|---|---|

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | Built in |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | Built in |
| Linter(eslint,xo) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | Built in |
| Linter(eslint,xo) | Built in |


---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | Built in |
| Linter(eslint,xo) | Built in |
| Code-Style(Prettier,Standard) | |

---

| JavaScript | Elm |
|---|---|
| package-manager(npm/yarn) | Built in |
| V-DOM(React,Preact,Vue,Inferno) | Built in |
| State-Mangement(Redux,Mobx) | Built in |
| Immutability(Immutable.js) | Built in |
| Types(Typescript/Flow) | Built in |
| Linter(eslint,xo) | Built in |
| Code-Style(Prettier,Standard) | Built in |

---

### How does this work?

---

`*.elm` -> compiler -> `*.js`

---

```js
let Elm = require("./App.elm"),
    node = document.getElementById('main');

Elm.App.embed(node);
```

---

```js
import Elm from 'react-elm-components'
import { Todo } from '/ausguck/dist/elm/todomvc.js'

function render() {
	return <Elm src={Todo} />
}
```

https://github.com/evancz/react-elm-components

---

https://github.com/halfzebra/create-elm-app

---

## Show me the fucking code!

---

<Image src={areYouDone} style={{ backgroundSize: 'auto' }} />

---

https://elm-lang.org/docs/syntax

---

But first, the Elm-Architecure

---

<Image src={architecture} style={{ backgroundSize: 'auto' }} />

---

<Image src={architectureProgram} style={{ backgroundSize: 'auto' }} />

---

<Image src={architectureComplete} style={{ backgroundSize: 'auto' }} />

---

<Image src={subscription} style={{ backgroundSize: 'auto' }} />

---

<Image src={cmd} style={{ backgroundSize: 'auto' }} />

---

## What if Elm doesn't do X?

---

## Ports

---

```elm
port module exposing (setTitle)

port setTitle : String -> Cmd msg
```

---

```js
import './main.css';
import { Elm } from './Main.elm';
import registerServiceWorker from './registerServiceWorker';

const app = Elm.Main.init({
  node: document.getElementById('root')
});

registerServiceWorker();

app.ports.playSound.subscribe(() => {
    new Audio('/sound.mp3').play();
});

app.ports.setTitle.subscribe(title => {
    document.title = title
});
```

---

<Image src={spellcheck} style={{ backgroundSize: 'auto' }} />

---

<Image src={spellcheck2} style={{ backgroundSize: 'auto' }} />

---

## How does HTML look like?

---

```html
<a href="https://example.com">
    <img src="product.jpg"/>
    <p class="description">Descriptive Text</p>
</a>
```

---

```html
<a href="https://example.com">
    <img src="product.jpg"/>
    <p class="description">Descriptive Text</p>
</a>
```

```elm
a [ href "https://example.com" ]
    [ img [src "product.jpg"] []
    , p [ class "description" ] [text "Descriptive Text"]
    ]
```

---

```html
<a href="https://example.com">
    <img src="product.jpg"/>
    <p class="description">Descriptive Text</p>
</a>
```

```elm
a [ href "https://example.com" ]
    [ img [src "product.jpg"] []
    , p [ class "description" ] [text "Descriptive Text"]
    ]
```

// sorry, no syntax highlighting for elm code :(

---

Emmet is working
<small>https://emmet.io/</small>

---

thx 4 ur patience, let's code!
