Elm架構

banq發表於2016-05-11
架構
Elm是一個能夠編譯成Javascript的函式語言，它可以像React那樣作為一個工具用來建立網站或網站應用，Elm 非常簡單 易用和優質。

Elm作為函式語言有以下特點：
1.沒有執行時的錯誤，沒有null. 沒有undefined is not a function.
2.錯誤資訊友好，能夠幫助你更快速加入功能。
3.良好架構的程式碼意味著你的應用程式碼以良好的構架增長。
4.對所有Elm包自動執行語義版本。.

下面以一個計數器為案例：

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)

main =
  Html.beginnerProgram { model = 0, view = view, update = update }

type Msg = Increment | Decrement

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

    Decrement ->
      model - 1

view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]
<p class="indent">

注意update和 view是完全解耦的，你可以以宣告方式描述你的HTML，而Elm會負責與DOM打交道。

Elm是一個針對無限巢狀元件的簡單模式，它非常模組化，易於程式碼重用和測試，能夠幫助你方便建立複雜的Web應用。

每個Elm程式邏輯被劃分為三個清晰部分：
Model — 你的應用狀態
Update — 更新狀態的方式
View — 將狀態作為HTML顯示的方式

Elm架構是一種簡單架構Web應用的模式，類似Redux一樣宣告，這也是它越來越流行的原因。

這個模式非常可靠，可以下面虛擬碼說明，每次使用只要填空細節就可以：

import Html exposing (..)


-- MODEL

type alias Model = { ... }


-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...


-- VIEW

view : Model -> Html Msg
view model =
  ...
<p class="indent">



更詳細說明見:http://guide.elm-lang.org/architecture/index.html

Elm 0.17釋出以後，引入了訊息訂閱透過Websocket獲得後臺狀態，只需要兩行程式碼就可以實現和後端伺服器互動：
WebSocket.send "ws://echo.websocket.org" input
WebSocket.listen "ws://echo.websocket.org" NewMessage

第一句是向伺服器發出資料，第二句是監聽伺服器的資料，資料內容在NewMessage，NewMessage內容會自動餵給update。

而如果使用Javascript實現這段通訊，將會是非常麻煩，你需要建立一個新的web socket!然後開啟一個連線，但是還不能忘記加入對錯誤的監聽，以便連線失敗能夠重新再連線，並且定義在沒有連線時不要發訊息（這屬於執行錯誤），你還需要對訊息佇列化然後再傳送，然後確定websocket能被使用並且關閉等等，這些都是涉及大量細節，而宣告式程式設計就應該如上面兩行程式碼直接宣告使用，去除了大量技術細節。

告別FRP

聊天演示

相關文章