Kand-Elterendeel Kommunikatioun an Elm: OutMsg vs Iwwersetzer vs NoMap Musteren

Wann Är App Elm ufänkt ze wuessen, da wëllt Dir se a méi klenge Stécker briechen, fir fäeg ze sinn. Ech hunn dëst an engem anere Blogpost ofgedeckt: Strukturéiert TodoMVC Beispill mam Elm.

Deel, wann dës Skaléiere schlussendlech d'Bedierfnes enthält fir e Msg vun engem Modul un hiren Elterendeel ze schécken, wéi wann Navigatiounsknäppchen op enger spezifescher Sicht eng Noriicht an den Topniveau Router mussen schécken.

No e puer Zäit hunn ech ugefaang 3 verschidde Mustere fir dësen Ëmgang ze bemierken, an ech hunn den Elm TodoMVC reflektéiert op all déi verschidden Approche an dësem Repository, fir datt Dir se matenee vergläichen.

Den OutMsg Muster

Ech gleewen, datt de Folkertdev deen éischte war, deen ech gesinn hat fir iwwer Elteren Kommunikatioun an Elm ze schreiwen, säi Blogpost erkläert dës Approche zimmlech gutt.

Awer, fir zesummefaassen, bréngt Iech zréck e extra Wäert an Ärer Update Funktioun. Also amplaz dëst zréckzekréien:

(Model, Cmd Msg)

Dir schéckt dëst:

(Model, Cmd Msg, OutMsg)

Duerno ass d'Funktioun vun der Elterenaktualiséierung verantwortlech fir déi. Op dës Manéier brauch d'Kand näischt iwwer säin Elterendeel ze wëssen, awer den Elterendeel muss iwwer säi Kand seng OutMsgs wësse.

Ech hunn TodoMVC mat dëser Approche implementéiert. Awer wann Dir eng echt Welt Skala vun dësem wëllt kontrolléieren, huet de Richard Feldman den Elm-Spa-Beispill op dës Manéier ëmgesat.

En anert Beispill dat dës Approche benotzt ass elm-datepicker.

Den Iwwersetzermuster

Den Iwwersetzermuster ass ganz ähnlech mat der OutMsg een, awer amplaz datt den Elterende vun de Msgs Typen vun engem Kand weess, ass et deen Elterendeel deen passéiert, deen Msgs generéiert gëtt, iwwer e Iwwersetzer. Den Alex Lew erkläert seng Approche vill besser hei.

Prinzipiell hutt Dir en Iwwersetzer deen e Rekord ass wéi dëst:

type alias IwwersetzungDictionnaire msg =
  {onInternalMessage: InternalMsg -> msg
  , onPlayerWin: Int -> msg
  , onPlayerLose: msg
  }

Ech hunn den TodoMVC och mat dëser Approche implementéiert, an ech gleewen, datt d'elm-autocomplete och e gutt Beispill ass.

Den Elm-Elter-Kand-Update ass eng Bibliothéik déi Iech hëlleft mat Kand-Elteren-Update deen schéngt dëst Muster ze verfollegen.

Den NoMap Muster

Dëst ass eppes wat ech gemierkt hunn datt ech gemaach hunn. D'Basis Iddi ass ze vermeiden dat Cmd.map an Html.map ze maachen, dofir muss jidderee d'selwecht Sprooch schwätzen, an anere Wierder, Är Update a View Funktiounen mussen den Topniveau Msg Typ zréckginn.

Mat dësem wäert Dir méiglecherweis Msgs wéi MsgForLogin, MsgForRouter, etc hunn, also an Ärer View géift Dir eppes wéi maachen:

Knäppchen [onClick (MsgForLogin SignUp)] []

Dëst ass wéi ech den TodoMVC als éischt refactoréiert hunn, tatsächlech, d'éischt Kéier datt ech OutMsg gesinn hunn, hunn ech de Grond net verstanen, well ech hu meng Msgs net kartéiert.

Kuckt d'Blitz-Talk-App fir e grousst Beispill mat dëser Approche. Och dës App schéngt de Kris Jenkins 'Wee ze goen fir Elm Apps ze strukturéieren, wat dës Approche favoriséiert wéi hien d'Msgs-Zorten an enger Datei.elm Datei trennt.

D'Elm-Taco Bibliothéik benotzt e Mix vun OutMsg an NoMap Mustere andeems en en Top-Niveau "Taco" kritt, op déi Dir Noriichte kënnt schécken.

Observatiounen a Vergläicher

Wärend Fuerschung a Refactoring fir dës Mustere hunn ech iergendeen bemierkt, wat Virdeeler oder Nodeeler ofhängeg vun Äre Besoinen hunn:

  • Op NoMap hält d'Aktualiséierungsfunktioun vum Elterendeel ongeféier d'selwecht wéi Är App wiisst, wärend op OutMsg an Iwwersetze kann den Elterenaktualiséierungsfunktioun ganz grouss ginn, well Dir braucht der OutMsg vun all Kand ze handelen (Beispill)
  • Op OutMsg an Iwwersetze déi nestéiert Moduler brauch näischt vun ieweschter Elteren z'importéieren, se méi verschlësselte maachen, et wier méi einfach e Sub-Modul als Bibliothéik z'expriméieren an ze publizéieren.
  • Fir NoMap ze schaffen, sollt Är Msgs an enger separater Datei vum Update liewen, soss hutt Dir eng Ofhängegkeet-Loop. Dëst ass gutt Ursaach, Iech zwéngt d'Saachen ze splitteren, awer schlecht gläichzäiteg wann Dir eng eenzeg Datei fir all Modul wëllt (Home.elm, Login.elm, Router.elm)
  • An NoMap ass et méi einfach Msgs soss anzwousch ze schécken, awer et ka méi schwéier sinn all déi staatlech Ännerungen ze verfollegen.
  • Wéi am Moment vun dësem Schreiwen gemooss ginn, fir den TodoMVC Refaktoren, huet d'NoMap Approche 546 LOC, OutMsg 561 an Iwwersetzer 612 wann dëst Iech wichteg ass
  • Op NoMap musst Dir schliisslech den _ catch-all Fall benotzen fir Msgs vun anere Plazen ze ignoréieren déi Dir net wëllt behandelen, also gëtt et manner Hëllef vum Compiler, et kann net soen wat Dir feelt (Merci fir @mordrax fir ze weisen dat eraus op Elm schloofen)
  • Am OutMsg an Iwwersetzer kënnt Dir just d'Typen oder Iwwersetzer kucken fir ze entdecken wéi eng Kanner-Elterendeel Kommunikatiounen gebraucht ginn, sou datt de Compiler kann Iech guidéieren déi dës implementéieren, wärend op NoMap dës Kommunikatioun méi implizit ass
  • D'Iwwersetzer Approche schéngt eng gutt Iddi fir Är eege Msgs zu engem externen Komponent ze ginn, wéi elm-autocomplete
  • Ech hunn den Iwwersetzer Muster schwéier ze verfollegen mat schwéier ze verstoen Fehlermeldungen vum Elm Compiler beim Bauen
  • Wann Dir de (Model, Cmd Msg) Standard net ännert kënnt Dir déi fein Elm-Return Bibliothéik benotzen
  • Verschidde Leit betruechten net Html.map als eng gutt Praxis ze vermeiden fir "Komponenten" ze kreéieren
  • Dir kënnt vill Virdeel kréien aus dësen Mixen ze vermëschen, zum Beispill, Dir kënnt just Html.map fir Views vermeiden, wärend Dir nach ëmmer OutMsg fir Updates benotzt, oder Dir kënnt NoMap nëmme fir den Topniveau Msgs benotzen, mat OutMsgs no ënnen, wärend en externen Iwwersetzungskomponent zréckgeet

Ressourcen

Ech gleewen, datt d'Kand-Elter Kommunikatioun dacks méi wichteg ass beim Skaléieren an d'SAA ze maachen, dofir sinn vill Saachen déi ech fonnt hunn dësen reddit thread iwwer Skaléieren Elm Apps gelies:

Prost!