אלמ תל-אביב

View Github Repository Open presentation in a new window

amitaibu

See all presentation from amitaibu

אלמ תל-אביב

0 0

presentation-elm-tlv

On Github amitaibu / presentation-elm-tlv

אלמ תל-אביב

מפגש ראשון

Elm

A different approach to webapps
Mondas
RPF (Reactive Functional Programming)
Haskell
Inferred Types
gizra
Amitai Burstein (@amitaibu)

What's wrong with Angular? Why not React?

Principle 1: Single source of truth

The state of your whole application is stored in a record tree

Principle 2: State is read-only

The only way to mutate the state is to emit an action describing what happened

Counter Example

Counter.elm 
module Counter where

import Html exposing (..)
import Html.Events exposing (onClick)

-- MODEL

type alias Model = Int

init : Int -> Model
init count = count

-- UPDATE

type Action = Increment | Decrement

update : Action -> Model -> Model
update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div []
    [ button [ onClick address Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]

הקומפיילר האוטומטי

Elm Hedley

https://github.com/amitaibu/elm-hedley

Yeoman Generator

https://github.com/Gizra/generator-elmlang
  • Gulp
  • browserSync
  • Auto-compile
  • Sass
  • Bundle and Deploy to gh-pages

Effects 

-- MODEL

type alias Model = Int

-- UPDATE

type Action
  = GetDataFromServer
  | UpdateDataFromServer
GetDataFromServer ->
  ( model, Http.get "https://example.com/api/data" |> Task.map UpdateDataFromServer )

UpdateDataFromServer result ->
  case result of
    Ok val ->
      ( { model <- val } , Effects.none )
    Err msg -> -- We cannot ignore this!
      ( model , Effects.none )

Elm encourages us to be better developers 

-- MODEL

type Status
  = Init
  | Fetching
  | Fetched
  | HttpError Http.Error

type alias Model =
  { counter : Int
  , status : Status
  }

-- UPDATE

type Action
  = GetDataFromServer
  | UpdateDataFromServer
GetDataFromServer ->
  ( { model | status <- Fetching }
  , Http.get "https://example.com/api/data" |> Task.map UpdateDataFromServer
  )

UpdateDataFromServer result ->
  case result of
    Ok val ->
      ( { model | status <- Fetched, counter <- val }
      , Effects.none
      )

    Err msg ->
      ( { model | status <- HttpError msg }
      , Effects.none
      )

Unit tests

Counter.elm 
update : Action -> Model -> Model
update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1
CounterTest.elm 
[ test "negative count" (assertEqual 0 (update Increment -1))
, test "zero count"     (assertEqual 1 (update Increment  0))
, test "positive count" (assertEqual 2 (update Increment  1))
]

Headless Drupal

gizra | We Hire
אלמ תל-אביב מפגש ראשון