Фронтенд + Elm = Фронтенд

# Фронтенд + Elm = Фронтенд - боль

Алексей Пирогов

(aka [@alex_pir](https://twitter.com/alex_pir)/[astynax](https://github.com/astynax))

---

# Что есть "боль"?

---

# Что есть "боль"?

- Legacy (DOM)
- Лапша (callbacks)
- Побочные эффекты
- Сложность отладки
- Асинхронность по-умолчанию

---

# Что есть "боль"?

...а теперь ещё и **NPM**, **Babel**, **Gulp**, **Bower**, **SASS** и другие страшные слова (экосистема)...

---

# Что есть "Elm"?

---

# Что есть "Elm"?

- **HTML**/**CSS** на правах **first class citizens**
- **FRP** (теперь уже нет?)
- Отсутствие (полное!) побочных эффектов
- Всё пишется **синхронно**
- **Нет runtime-исключений**!

---

# Что есть "Elm"?

... и да,

NPM, Babel, Gulp и прочие SASS **не нужны**! (как правило)

---

# Elm как язык

---

# Elm как язык

- Статическая типизация
- Строгая модель исполнения
- ADT (pattern matching)

```elm
type Color = Red | NotSoRed | RGB Int Int Int
```

- Anonymous records (row-полиморфизм!)

```elm
f : { a : Int, b : String } -> ()
```

---

# Elm как язык

"Hello world":

```elm
import Html exposing (span, text)
import Html.Attributes exposing (style)

main =
  span
    [style [("color", "red")]]
    [text "Hello, World!"]
```

---

# Elm как язык

Приложение посложнее:

```elm
main = beginnerProgram
  { model = 0, view = view, update = update }

view model = div []
  [ button [ onClick Increment ] [ text "+" ]
  , div [] [ text (toString model) ] ]

type Msg = Increment | ...

update msg model =
  case msg of
    Increment -> model + 1
    ...
```

---

# Elm как платформа

---

# Elm как платформа

- Дружественные новичку компилятор и система сборки
- Встроенные средства для генерации документации
- Package manager с работающим semver (!)

---

# Elm как платформа

Дружественность сообщений об ошибках:

```
-- TYPE MISMATCH ------------------------------------------------
The argument to function `beginnerProgram` is causing a mismatch.

8|   beginnerProgram { model = 0, viev = view, update = update }
                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Function `beginnerProgram` is expecting the argument to be:

{ ..., view : ... }

But it is:

{ ..., viev : ... }

Hint: I compared the record fields and found some potential typos.

view <-> viev
```

---

# Elm как платформа

И даже чуть больше дружественности:

```
-- TYPE MISMATCH --------------------------------------------------
This condition does not evaluate to a boolean value, True or False.

4| main = if [] then ...
          ^^

You have given me a condition with this type:

List a

But I need it to be:

Bool

Hint: Elm does not have "truthiness" such that ints and strings
and lists are automatically converted to booleans. Do that
conversion explicitly.
```

---

# Elm как платформа

Package manager

- имеет свой репозиторий пакетов
- форсирует **Semantic Versioning**
- умеет отображать diff между версиями пакетов

```bash
$ elm-package diff elm-lang/core 3.0.0 4.0.0
```

---

# Elm как платформа

---

# Спасибо за внимание