Elm Architecture_html/css_WEB-ITnose

Elm は Javascript にコンパイルできる関数型言語で、React と同様に Web サイトや Web サイト アプリケーションを作成するツールとして使用できます。非常にシンプルで使いやすく、高品質です。

関数型言語としての Elm には、次のような特徴があります。

1. 実行時エラーがなく、未定義は関数ではありません。

2. わかりやすいエラー メッセージ。機能をより迅速に追加するのに役立ちます。

3. 適切に設計されたコードとは、アプリケーション コードが適切なアーキテクチャで成長することを意味します。

4. すべての Elm パッケージのセマンティック バージョンを自動的に実行します。 .

以下はカウンターを例にしています:

<b>import</b> Html exposing (Html, button, div, text)<b>import</b> Html.App as Html<b>import</b> Html.Events exposing (onClick)main =  Html.beginnerProgram { model = 0, view = view, update = update }type Msg = Increment | Decrementupdate msg model =  <b>case</b> msg of    Increment ->      model + 1    Decrement ->      model - 1view model =  div []    [ button [ onClick Decrement ] [ text "-" ]    , div [] [ text (toString model) ]    , button [ onClick Increment ] [ text "+" ]    ]

更新と表示は完全に分離されていることに注意してください。HTML は宣言的な方法で記述することができます。 Elm は DOM の処理を​​担当します。

Elm は、無限にネストされたコンポーネントの単純なパターンであり、非常にモジュール化されており、コードの再利用とテストが簡単で、複雑な Web アプリケーションを簡単に作成できます。

各 Elm プログラム ロジックは、次の 3 つの明確な部分に分割されます。

モデル — アプリケーションの状態

更新 — 状態を更新する方法

ビュー — Aステータスを HTML として表示する方法

Elm アーキテクチャは、Web アプリケーションを構築するためのシンプルなパターンであり、Redux のように宣言されているため、ますます人気が高まっています。

このモードは非常に信頼性が高く、使用するたびに空白の詳細を入力するだけで次の疑似コードで説明できます:

<b>import</b> Html exposing (..)-- MODELtype alias Model = { ... }-- UPDATEtype Msg = Reset | ...update : Msg -> Model -> Modelupdate msg model =  <b>case</b> msg of    Reset -> ...    ...-- VIEWview : Model -> Html Msgview model =  ...

詳細詳細な手順については、http://guide.elm-lang.org/architecture/index.html を参照してください。

Elm 0.17 のリリース後、WebSocket を通じてバックグラウンド ステータスを取得するためにメッセージ サブスクリプションが導入されました。バックエンド サーバーと対話するための 2 行のコード:

WebSocket.send "ws://echo.websocket.org" input

WebSocket.listen "ws://echo.websocket. org" NewMessage

最初の文はサーバーにデータを送信します。2 番目の文はサーバーのデータを監視します。データの内容は NewMessage にあり、NewMessage の内容は自動的にフィードされて更新されます。

JavaScript を使用してこの通信を実装する場合は、新しい Web ソケットを作成する必要がありますが、接続を確立できるようにエラー監視を追加することを忘れないでください。接続が失敗した場合は再接続し、接続がない場合はメッセージを送信しないように定義します (これは実行時エラーです)。また、メッセージをキューに入れてから送信し、WebSocket が使用できることを確認する必要があります。これらにはすべて多くの詳細が含まれており、多くの技術的な詳細を削除して、式プログラミングというステートメントを直接宣言し、上記の 2 行のコードとして使用する必要があります。