,0.00' price

Користимо format функција из пакета Нумерал овде. Ово би форматирало бројеве на начин на који обично форматирамо валуте:

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

Аутоматско генерисање документације

Приликом објављивања пакета у спремишту Елм, документација се генерише аутоматски на основу коментара у коду. Можете га видети на делу провером документације за наш модул Кошарица овде . Све ово је генерисано из коментара који се виде у овој датотеци: Царт.елм .

Прави програм за отклањање грешака за фронт-енд

Најочитије проблеме открива и извештава сам преводилац. Међутим, ниједна апликација није заштићена од логичких грешака.

Будући да су сви подаци у Елму непроменљиви и све се дешава путем порука прослеђених функцији ажурирања, читав ток програма Елм може се представити као низ промена модела. За програм за отклањање погрешака Елм је баш попут стратешке игре засноване на преусмеравању. Ово омогућава програму за отклањање погрешака да изведе неке заиста невероватне подвиге, попут путовања кроз време. Може се кретати напред и назад кроз ток програма прескачући између различитих промена модела које су се догодиле током живота програма.

Можете сазнати више о програму за отклањање грешака овде .

Интеракција са позадином

Па, кажете, направили смо лепу играчку, али може ли се Елм користити за нешто озбиљно? Апсолутно.

Повежимо нашу предњу страну колица са неком асинхроном позадином. Да би било занимљиво, применићемо нешто посебно. Рецимо да желимо да прегледамо сва колица и њихов садржај у реалном времену. У стварном животу бисмо могли да користимо овај приступ да доведемо неке додатне маркетиншке / продајне могућности у нашу интернет продавницу или на пијацу, или да упутимо неке сугестије кориснику или да проценимо потребна средства на залихама и још много тога.

Дакле, корпу складиштимо на страни клијента, а такође обавестимо сервер о свакој колицима у реалном времену.

Да би ствари биле једноставне, применићемо нашу позадину помоћу Питхона. Можете пронаћи пуни код за позадину овде .

То је једноставан веб сервер који користи ВебСоцкет и прати садржај колица у меморији. Да бисмо поједноставили ствари, приказаћемо колица свих осталих на истој страници. Ово се лако може применити на засебној страници или чак као засебни Елм програм. За сада ће сваки корисник моћи да види резиме колица других корисника.

Са постављеним бацк-ендом, сада ћемо морати да ажурирамо нашу апликацију Елм да бисмо серверу слали и примали исправке колица. Користићемо ЈСОН за кодирање корисног терета, за шта Елм има изврсну подршку.

ЦартЕнцодер.елм

Имплементираћемо кодер за претварање нашег модела података Елм у представљање ЈСОН низа. За то треба да користимо Јсон.Енцоде библиотека .

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, итд.) Које узимају Елм објекте и претварају их у ЈСОН кодиране низове.

ЦартДецодер.елм

Имплементација декодера је мало сложенији јер сви Елм подаци имају типове и морамо да дефинишемо коју вредност ЈСОН треба претворити у који тип:

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'

Ажурирана апликација Елм

Како је коначни Елм код нешто дужи, можете га пронаћи овде . Ево резимеа промена које су извршене у фронт-енд апликацији:

Обмотали смо наш оригинал 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 функцију.

Успостављена је ВебСоцкет веза да бисте се претплатили на позадину и ослушкивали промене на колицима других.

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

Такође смо ажурирали нашу главну функцију. Сада користимо Html.program са додатним init и subscriptions параметри. init наводи почетни модел програма и subscription одређује листу претплата.

Претплата је начин да кажемо Елму да ослушкује промене на одређеним каналима и прослеђује те поруке на 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 message -> case decodeString (Json.Decode.list CartDecoder.cart) message of Ok carts -> ( consumer_carts = carts , False) Err msg -> ( model , False)

Нека ваши фронтови буду здрави

Бријест је другачији. Захтева од програмера да мисли другачије.

Свако ко долази из царства ЈаваСцрипт и сличних језика наћи ће се да покушава да научи Елм-ов начин рада.

На крају, Елм нуди нешто за шта се други оквири - чак и они најпопуларнији - често труде. Наиме, пружа средство за изградњу робусних фронт-енд апликација, а да се не запетљају у огромне вербосе кодове.

Елм ​​такође апстрахује многе од потешкоће које ЈаваСцрипт представља комбиновањем паметног компајлера са моћним програмом за отклањање грешака.

Елм ​​је оно за чим фронт-енд програмери толико дуго жуде. Сад кад сте то већ видели на делу, и сами га окрените и искористите благодати градећи своје следећи веб пројекат у Елму.