,0.00' price

Използваме format функция от пакета Numeral тук. Това ще форматира числата по начин, по който обикновено форматираме валути:

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

Автоматично генериране на документация

Когато публикувате пакет в хранилището на Elm, документацията се генерира автоматично въз основа на коментарите в кода. Можете да го видите в действие, като разгледате документацията за нашия модул Количка тук . Всички те са генерирани от коментарите, видени в този файл: Cart.elm .

Истински дебъгер за Front-end

Най-очевидните проблеми се откриват и докладват от самия компилатор. Никое приложение обаче не е защитено от логически грешки.

Тъй като всички данни в Elm са неизменни и всичко се случва чрез съобщения, предадени на функцията за актуализиране, целият поток на програма Elm може да бъде представен като поредица от промени в модела. За дебъгера Elm е точно като поетапна стратегическа игра. Това позволява на дебъгера да извърши някои наистина невероятни подвизи, като пътуване във времето. Той може да се движи напред-назад през потока на програма, като прескача между различни промени в модела, които са се случили по време на живота на програмата.

Можете да научите повече за дебъгера тук .

Взаимодействие с Back-end

И така, казвате, ние сме изградили хубава играчка, но може ли Елм да се използва за нещо сериозно? Абсолютно.

Нека свържем нашата предна част на количката с някакъв асинхронен заден край. За да стане интересно, ще внедрим нещо специално. Да кажем, че искаме да проверим всички колички и тяхното съдържание в реално време. В реалния живот бихме могли да използваме този подход, за да внесем някои допълнителни възможности за маркетинг / продажби в нашия онлайн магазин или пазар, или да направим някои предложения на потребителя, или да изчислим необходимите запаси и много други.

И така, ние съхраняваме количката от страна на клиента и също така съобщаваме на сървъра за всяка количка в реално време.

За да улесним нещата, ще внедрим нашия back-end с помощта на Python. Можете да намерите пълния код за back-end тук .

частен инвестиционен фонд за недвижими имоти

Това е прост уеб сървър, който използва WebSocket и следи съдържанието на количката в паметта. За да улесним нещата, ще изобразим количката на всички останали на същата страница. Това може лесно да бъде внедрено на отделна страница или дори като отделна програма 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)

Библиотеката предоставя някои функции (като string, int, float, object и др.), Които вземат Elm обекти и ги превръщат в кодирани в JSON низове.

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 указва списък с абонаменти.

Абонаментът е начин за нас да кажем на Elm да слуша промени в определени канали и да препраща тези съобщения до update функция.

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 предлага нещо, което другите рамки - дори и най-популярните - често се борят да направят. А именно, той предоставя средство за изграждане на стабилни приложения от предния край, без да се заплитате в огромен многословен код.

Elm също така абстрахира много от трудности, които създава JavaScript чрез комбиниране на интелигентен компилатор с мощен дебъгер.

Elm е това, за което разработчиците от предния край копнеят толкова дълго. Сега, когато го видяхте в действие, вземете го сами и се възползвайте от предимствата, като изградите своя следващ уеб проект в Елм.