,0.00' price

formatを使用していますこちらのNumeralパッケージの関数。これにより、通常の通貨のフォーマット方法で数値がフォーマットされます。

100.5 -> 0.50 15.36 -> .36 21.15 -> .15

自動ドキュメント生成

パッケージをElmリポジトリに公開すると、コード内のコメントに基づいてドキュメントが自動的に生成されます。カートモジュールのドキュメントを確認すると、実際の動作を確認できます。 ここに 。これらはすべて、このファイルにあるコメントから生成されました。 Cart.elm

フロントエンド用の真のデバッガー

最も明白な問題は、コンパイラ自体によって検出および報告されます。ただし、論理エラーから安全なアプリケーションはありません。

Elmのすべてのデータは不変であり、すべてが更新関数に渡されるメッセージを介して行われるため、Elmプログラムのフロー全体を一連のモデル変更として表すことができます。デバッガーにとって、Elmはターン制ストラテジーゲームのようなものです。これにより、デバッガーは、時間の移動など、いくつかの本当に驚くべき偉業を実行できます。プログラムの存続期間中に発生したさまざまなモデル変更間をジャンプすることにより、プログラムのフローを前後に移動できます。

デバッガーについて詳しく知ることができます ここに

バックエンドとの相互作用

だから、私たちは素敵なおもちゃを作りましたが、エルムは何か深刻なことに使用できますか?絶対に。

カートのフロントエンドを非同期のバックエンドに接続しましょう。それを面白くするために、特別なものを実装します。すべてのカートとその中身をリアルタイムで検査したいとします。実際には、このアプローチを使用して、オンラインショップやマーケットプレイスに追加のマーケティング/販売機能を導入したり、ユーザーに提案を行ったり、必要な在庫リソースを見積もったりすることができます。

そのため、カートをクライアント側に保存し、サーバーに各カートについてリアルタイムで通知します。

物事を単純にするために、Pythonを使用してバックエンドを実装します。バックエンドの完全なコードを見つけることができます ここに

これは、WebSocketを使用し、カートの内容をメモリ内で追跡するシンプルなWebサーバーです。簡単にするために、他のすべてのカートを同じページに表示します。これは、別のページに、または別のElmプログラムとして簡単に実装できます。今のところ、すべてのユーザーが他のユーザーのカートの概要を表示できます。

バックエンドを配置したら、Elmアプリを更新して、カートの更新をサーバーと送受信する必要があります。 JSONを使用してペイロードをエンコードします。これについては、Elmが優れたサポートを提供しています。

CartEncoder.elm

ElmデータモデルをJSON文字列表現に変換するエンコーダーを実装します。そのためには、 Json.Encodeライブラリ

module CartEncoder exposing (cart) import Cart2 exposing (Cart, Item, Product) import List exposing (map) import Json.Encode exposing (..) product : Product -> Value product product = object [ ('name', string product.name) , ('price', float product.price) ] item : Item -> Value item item = object [ ('product', product item.product) , ('qty', int item.qty) ] cart : Cart -> Value cart cart = list (map item cart)

ライブラリは、Elmオブジェクトを取得してJSONエンコードされた文字列に変換するいくつかの関数(stringintfloatobjectなど)を提供します。

CartDecoder.elm

デコーダーの実装 すべてのElmデータにはタイプがあり、どのJSON値をどのタイプに変換する必要があるかを定義する必要があるため、少し注意が必要です。

module CartDecoder exposing (cart) import Cart2 exposing (Cart, Item, Product) -- decoding for Cart import Json.Decode exposing (..) -- will decode cart from string cart : Decoder (Cart) cart = list item -- decoder for cart is a list of items item : Decoder (Item) item = object2 Item -- decoder for item is an object with two properties: ('product' := product) -- 1) 'product' of product ('qty' := int) -- 2) 'qty' of int product : Decoder (Product) product = object2 Product -- decoder for product also an object with two properties: ('name' := string) -- 1) 'name' ('price' := float) -- 2) 'price'

Elmアプリケーションを更新しました

最終的なElmコードは少し長いので、見つけることができます ここに 。フロントエンドアプリケーションに加えられた変更の概要は次のとおりです。

オリジナルをラップしましたupdateカートが更新されるたびにカートの内容の変更をバックエンドに送信する関数を備えた関数:

updateOnServer msg model = let (newModel, have_to_send) = update msg model in case have_to_send of True -> -- send updated cart to server (!) newModel [ WebSocket.send server (encode 0 (CartEncoder.cart newModel.cart)) ] False -> -- do nothing (newModel, Cmd.none)

ConsumerCarts Stringのメッセージタイプも追加しましたサーバーから更新を受信し、それに応じてローカルモデルを更新します。

ビューが更新され、consumersCartsViewを使用して他のカートの概要が表示されるようになりました関数。

他のカートへの変更をリッスンするためにバックエンドにサブスクライブするためのWebSocket接続が確立されました。

subscriptions : Model -> Sub Msg subscriptions model = WebSocket.listen server ConsumerCarts server = 'ws://127.0.0.1:8765'

また、メイン機能も更新しました。現在、Html.programを使用しています追加のinitおよびsubscriptionsパラメーター。 initプログラムの初期モデルを指定し、subscriptionサブスクリプションのリストを指定します。

サブスクリプションは、特定のチャネルでの変更をリッスンし、それらのメッセージをupdateに転送するようにElmに指示する方法です。関数。

main = Html.program { init = init , view = view , update = updateOnServer , subscriptions = subscriptions } init = ( Model [] -- empty cart [ Product 'Bicycle' 100.50 -- stock , Product 'Rocket' 15.36 , Product 'Bisquit' 21.15 ] Nothing -- error (no error at beginning) [] -- consumer carts list is empty , Cmd.none)

最後に、サーバーから受信したConsumerCartsメッセージをデコードする方法を処理しました。これにより、外部ソースから受け取ったデータがアプリケーションを壊さないことが保証されます。

ConsumerCarts message -> case decodeString (Json.Decode.list CartDecoder.cart) message of Ok carts -> ( consumer_carts = carts , False) Err msg -> ( model , False)

フロントエンドを正気に保つ

エルムは違います。開発者は別の考え方をする必要があります。

JavaScriptや同様の言語の領域から来た人は誰でも、Elmのやり方を学ぼうとしていることに気付くでしょう。

しかし、最終的には、Elmは、他のフレームワーク(最も人気のあるフレームワークでさえ)がしばしば苦労する何かを提供します。つまり、巨大な冗長コードに巻き込まれることなく、堅牢なフロントエンドアプリケーションを構築する手段を提供します。

エルムはまた、多くの JavaScriptがもたらす困難 スマートコンパイラと強力なデバッガを組み合わせることによって。

Elmは、フロントエンドの開発者が長い間待ち望んでいたものです。動作を確認したので、自分で試してみて、構築することでメリットを享受してください。 次のWebプロジェクト エルムで。