+ - 0:00:00
Notes for current slide
Notes for next slide

SPA with Elm

(lame title)

1

Who am I?

Vincent Fenn Billey

I work at Fewlines

Frontend Dev by trade

2

This talk is based on Odot

3

This talk is based on Odot

dealing with JSON in Elm

4

This talk is based on Odot

dealing with JSON in Elm

"scale" an Elm App (livecode 😨)

5

Let's refresh our minds about Odot and Elm

https://github.com/Fenntasy/odot

6

What do we got?

{
  "list": [
    {
      "name": "test",
      "id": "C67868E3-2AAC..."
    }
  ]
}
7

Let's make it simpler for now

{
  "name": "test",
  "id": "C67868E3-2AAC..."
}
8

Let's make it simpler for now

{
  "name": "test",
  "id": "C67868E3-2AAC..."
}

Looks a lot like

type alias Todo =
    { id : String
    , name : String
    }
9

How to get one field?

getId : Json.Decode.Decoder String
getId =
  Json.Decode.field "id" Json.Decode.string
10

How to get one field?

getId : Json.Decode.Decoder String
getId =
  Json.Decode.field "id" Json.Decode.string
decodeString
  getId
  "{ \"id\": \"C67868E3-2AAC...\" }"
-- Ok "C67868E3-2AAC..."
11

one field

decodeString
  getId
  """
  {
    "name": "test",
    "id": "C67868E3-2AAC..."
  }
  """
-- Ok "C67868E3-2AAC..."
12

But what about two field?

13

But what about two field?

map to the rescue but...

14

But what about two field?

map to the rescue but...

import String
import Json.Decode exposing (Decoder)
stringLength : Decoder Int
stringLength =
  Json.Decode.map
    String.length
    Json.Decode.string
15

What we want is a way of transforming two Decoders into one.

16

map2 is there for that!

getId : Decoder String
getId =
  field "id" Json.Decode.string
getName : Decoder String
getName =
  field "name" Json.Decode.string
17

map2 is there for that!

getId : Decoder String
getId =
  field "id" Json.Decode.string
getName : Decoder String
getName =
  field "name" Json.Decode.string
todoDecoder : Decoder Todo
todoDecoder =
  Json.Decode.map2
    (\id name -> { id = id, name = name})
    getId
    getName
18

But wait!

(\id name -> { id = id, name = name})
19

But wait!

(\id name -> { id = id, name = name})

There's a shorthand for this function

20

But wait!

(\id name -> { id = id, name = name})

There's a shorthand for this function

> Todo
<function> : String -> String -> Todo

(defining a type also defines its record constructor)

21
import Json.Decode exposing (Decoder, field)
todoDecoder : Decoder Todo
todoDecoder =
  Json.Decode.map2 Todo
    (field "id" Json.Decode.string)
    (field "name" Json.Decode.string)
22
import Json.Decode exposing (Decoder, field)
type alias Todo =
  { id : String
  , done : Bool
  , name : String
  }
todoDecoder : Decoder Todo
todoDecoder =
  Json.Decode.map3 Todo
    (field "id" Json.Decode.string)
    (field "done" Json.Decode.bool)
    (field "name" Json.Decode.string)
23

Too many fields?

24

Too many fields?

Saved by noredink/elm-decode-pipeline

25

Too many fields?

Saved by noredink/elm-decode-pipeline

import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (required)
todoDecoder : Decoder Todo
todoDecoder =
  Json.Decode.Pipeline.decode Todo
    |> required "id" Json.Decode.string
    |> required "done" Json.Decode.bool
    |> required "name" Json.Decode.string
26

Remember we simplified things?

27

Remember we simplified things?

{
  "list": [
    {
      "name": "test",
      "id": "C67868E3-2AAC..."
    }
  ]
}
28
todoListDecoder : Decoder (List Todo)
todoListDecoder =
  field "list"
    (Json.Decode.list todoDecoder)
29

Questions about JSON?

30

☠️ Livecode ☠️

31

Thank you 🤗

Any questions?

32

Who am I?

Vincent Fenn Billey

I work at Fewlines

Frontend Dev by trade

2
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow