2019/12/25

Gizra

The Safest Headless Drupal 8 withElm
Amitai Burtein // @amitaibu

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

1/36

2019/12/25

Gizra

Amitai Burstein@amitaibu

Spent a whole day in rural Rwanda, watching - in action - an@elmlang web-app with a #Drupal backend we've built for@ihanganeproject.
No marketing landing pages, no sale funnels, no targeted ads.
Just a web-app that helps provide a better health care tomothers and their babies

158 12:20 AM - Nov 15, 201945 people are talking about thishttps://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

2/36

2019/12/25

Gizra

Elm
Generate JavaScript with great performance and no runtime
exceptions

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

3/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

4/36

2019/12/25

Gizra

module Counter exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)-- MODEL
type alias Model =Int
emptyModel : Model
emptyModel =0-- UPDATE
type Msg= Decrement| Increment
update : Msg -> Model -> ( Model, Cmd Msg )update msg model =case msg ofhttps://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

5/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

6/36

2019/12/25

Gizra

type alias Recipe ={ title: String, image : String, preparationTime: Int}https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

7/36

2019/12/25

Gizra

Types 101https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

8/36

2019/12/25

Gizra

type Bool = False | True

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

9/36

2019/12/25

Gizra

type DifficultyLevel= Easy| Normal| Hardtype alias Recipe ={ title: String, image : String, preparationTime: Int, difficultyLevel : DifficultyLevel}

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

10/36

2019/12/25

Gizra

If something can go wrong, it will
Murphy's law

type alias Recipe ={ title: String, ..
, isCarnivore : Bool, isVegetarian : Bool, isVegan : Bool}iAmConfused : Recipe
iAmConfused ={ title = "A vegan steak?!", ..
, isCarnivore = True
, isVegetarian = False, isVegan = True}

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

11/36

2019/12/25

Gizra

type DietaryRestriction= Carnivore| Vegetarian| Vegantype alias Recipe ={ title: String, ..
, dietaryRestriction : DietaryRestriction}
thatIsBetter : Recipe
thatIsBetter ={ title = "A vegan steak!", ..
, dietaryRestriction = Vegan}https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

12/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

13/36

2019/12/25

Gizra

type alias Recipe ={ title: String, ..
, preparationTime : Int, cookingTime : ?
}{ title: "foo", preparationTime: 10,, cookingTime: null}https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

14/36

2019/12/25

Gizra!empty ?

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

15/36

2019/12/25

Gizra

type alias Recipe ={ title: String, ..
, preparationTime : Int, cookingTime : Maybe Int}
iceCream : Recipe
iceCream ={ title = "Ice Cream", ..
, preparationTime = 10, cookingTime = Nothing}pizza : Recipe
pizza =
{ title = "Pizza", ..
, preparationTime = 10, cookingTime = Just 15}

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

16/36

2019/12/25

Gizra

type PreparationTimes= NoPreparation| Preparation Int (Maybe Int)
type alias Recipe ={ title: String, ..
, preparationTimes : PreparationTimes}
iceCreamFromRefrigerator : Recipe
iceCreamFromRefrigerator ={ title = "Ice Cream for lazy people", ..
, preparationTimes = NoPreparation}
pizza : Recipe
pizza =
{ title = "Pizza", ..
, preparationTimes = Preparation 10 (Just 15)}

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

17/36

2019/12/25

Gizra

type PreparationTimes= NoPreparation| Preparation Int (Maybe Int)
viewPreparationTimes : Recipe -> Html msg
viewPreparationTimes recipe =case recipe.preparationTimes ofNoPreparation ->text "No preparation required"Preparation time Nothing ->text "Takes " ++ (String.fromInt time) ++"minutes, but no cooking"Preparation time (Just cookingTime) ->text "Takes " ++ (String.fromInt time) ++" minutes and " ++ (String.fromInt cookingTime" minutes for cooking"https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

18/36

2019/12/25

Gizra

How to model the states of an HTTP request?

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

19/36

2019/12/25

Gizra

type WebData a= NotAsked| Loading| Failure Http.Error| Success atype alias Recipe ={ title: String, ..
, preparationTimes : WebData PreparationTimes}
viewPreparationTimes : Recipe -> Html msg
viewPreparationTimes recipe =case recipe.preparationTimes ofFailure error ->text "Error loading"
Success preparationTimes ->case preparationTimes of
NoPreparation ->text "No preparation required"--https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

20/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

21/36

2019/12/25

Gizra

type alias Ingredient ={ name: String, price : Int}
type alias Recipe ={ title: String, ..
, ingredients : List Ingredient}https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/22/36

2019/12/25

Gizra

map & foldhttps://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

23/36

2019/12/25

Gizra

viewIngredients : Recipe -> Html msg
viewIngredients recipe =ul[][ List.map( \ingredient -> li [] [ text ingredient.name ] )recipe.ingredients]
viewTotalPrice : Recipe -> Html msg
viewTotalPrice recipe =List.foldl( \ingredient accum -> accum + ingredient.price )0
recipe.ingredients

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/24/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

25/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

26/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

27/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

28/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

29/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

30/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

31/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

32/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

33/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

34/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/

Gizra

35/36

2019/12/25

https://gizra-presentations.github.io/drupalcamp-tokyo-2019/#/Gizra

36/36