Elmi arhitektuur: põhjalik juhend mudel-vaade-uuendus mustrile

Elmi arhitektuur, mida sageli nimetatakse ka MVU-ks (Model-View-Update ehk mudel-vaade-uuendus), on robustne ja ettearvatav muster kasutajaliideste loomiseks Elmis, mis on funktsionaalne programmeerimiskeel esiotsa arenduseks. See arhitektuur tagab, et teie rakenduse olekut hallatakse selgel ja järjepideval viisil, mis viib hooldatavama, skaleeritavama ja testitavama koodini. See juhend annab põhjaliku ülevaate Elmi arhitektuurist, selle põhiprintsiipidest, eelistest ja praktilisest rakendamisest, mida illustreeritakse näidetega, mis on asjakohased ülemaailmsele publikule.

Mis on Elmi arhitektuur?

Oma olemuselt on Elmi arhitektuur ühesuunalise andmevoo arhitektuur. See tähendab, et andmed liiguvad läbi teie rakenduse ühes suunas, mis teeb selle mõistmise ja silumise lihtsamaks. Arhitektuur koosneb kolmest põhikomponendist:

• Mudel (Model): Esindab rakenduse olekut. See on ainus tõeallikas kõigi andmete jaoks, mida teie rakendus peab kuvama ja millega suhtlema.
• Vaade (View): Puhas funktsioon, mis võtab sisendiks mudeli ja toodab HTML-i (või muid kasutajaliidese elemente), mida kasutajale kuvada. Vaade vastutab ainult hetkeoleku renderdamise eest; sellel pole kõrvalmõjusid.
• Uuendus (Update): Funktsioon, mis võtab sisendiks sõnumi (sündmus või tegevus, mille algatas kasutaja või süsteem) ja hetkemudeli ning tagastab uue mudeli. Siin asub kogu rakenduse loogika. See määrab, kuidas rakenduse olek peaks erinevate sündmuste vastusena muutuma.

Need kolm komponenti suhtlevad omavahel täpselt määratletud tsüklis. Kasutaja suhtleb vaatega, mis genereerib sõnumi. Uuendusfunktsioon saab selle sõnumi ja hetkemudeli ning toodab uue mudeli. Seejärel saab vaade uue mudeli ja uuendab kasutajaliidest. See tsükkel kordub pidevalt.

Diagramm, mis illustreerib Elmi arhitektuuri ühesuunalist andmevoogu

Põhiprintsiibid

• Muutumatus (Immutability): Mudel on muutumatu. See tähendab, et seda ei saa otse muuta. Selle asemel loob uuendusfunktsioon eelmise mudeli ja saadud sõnumi põhjal täiesti uue mudeli. See muutumatus muudab rakenduse oleku üle arutlemise lihtsamaks ja ennetab soovimatuid kõrvalmõjusid.
• Puhtus (Purity): Vaate ja uuenduse funktsioonid on puhtad funktsioonid. See tähendab, et nad tagastavad sama sisendi korral alati sama väljundi ja neil pole kõrvalmõjusid. See puhtus teeb need funktsioonid kergesti testitavaks ja mõistetavaks.
• Ühesuunaline andmevoog: Andmed liiguvad läbi rakenduse ühes suunas, mudelist vaatesse ja vaatest uuendusfunktsiooni. See ühesuunaline voog teeb muutuste jälgimise ja probleemide silumise lihtsamaks.
• Selgesõnaline olekuhaldus: Mudel määratleb selgesõnaliselt rakenduse oleku. See teeb selgeks, milliseid andmeid rakendus haldab ja kuidas neid kasutatakse.
• Kompileerimisaegsed garantiid: Elmi kompilaator pakub tugevat tüübikontrolli ja tagab, et teie rakendusel ei teki käitusaegseid vigu, mis on seotud nullväärtuste, käsitlemata erandite või andmete ebajärjepidevusega. See viib usaldusväärsemate ja robustsemate rakendusteni.

Elmi arhitektuuri eelised

• Ettearvatavus: Ühesuunaline andmevoog teeb lihtsaks mõista, kuidas rakenduse oleku muutused käivitatakse ja kuidas kasutajaliidest uuendatakse. See ettearvatavus lihtsustab silumist ja muudab rakenduse hooldamise lihtsamaks.
• Hooldatavus: Selge vastutuse eraldamine mudeli, vaate ja uuenduse funktsioonide vahel muudab rakenduse muutmiseks ja laiendamiseks lihtsamaks. Ühe komponendi muudatused mõjutavad vähem tõenäoliselt teisi komponente.
• Testitavus: Vaate ja uuenduse funktsioonide puhtus teeb nende testimise lihtsaks. Saate lihtsalt sisestada erinevaid sisendeid ja kontrollida, kas väljundid on õiged.
• Skaleeritavus: Elmi arhitektuur aitab luua rakendusi, mida on lihtne skaleerida. Rakenduse kasvades saate lisada uusi funktsioone ja funktsionaalsust ilma keerukust või ebastabiilsust lisamata.
• Usaldusväärsus: Elmi kompilaator pakub tugevat tüübikontrolli ja tagab, et teie rakendusel ei teki käitusaegseid vigu, mis on seotud nullväärtuste, käsitlemata erandite või andmete ebajärjepidevusega. See vähendab drastiliselt vigade arvu, mis jõuavad tootmisse.
• Jõudlus: Elmi virtuaalse DOM-i rakendus on kõrgelt optimeeritud, tagades suurepärase jõudluse. Elmi kompilaator teostab ka mitmesuguseid optimeerimisi, et tagada teie rakenduse tõhus toimimine.
• Kogukond ja ökosüsteem: Elmil on toetav ja aktiivne kogukond, mis pakub rohkelt ressursse, teeke ja tööriistu, mis aitavad teil oma rakendusi ehitada.

Praktiline rakendus: lihtne loenduri näide

1. Mudel

Mudel esindab loenduri hetkeseisu. Sel juhul on see lihtsalt täisarv:

            type alias Model = Int
            

              
                Copy
              
            
          

2. Sõnumid

Sõnumid esindavad erinevaid tegevusi, mida saab loenduriga teha. Määratleme kaks sõnumit: Suurenda (Increment) ja Vähenda (Decrement).

            type Msg
    = Increment
    | Decrement
            

              
                Copy
              
            
          

3. Uuendusfunktsioon

Uuendusfunktsioon võtab sisendiks sõnumi ja hetkemudeli ning tagastab uue mudeli. See määrab, kuidas loendurit tuleks vastavalt saadud sõnumile uuendada.

            update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1
            

              
                Copy
              
            
          

4. Vaade

Vaate funktsioon võtab sisendiks mudeli ja toodab HTML-i, mida kasutajale kuvada. See renderdab loenduri hetkeväärtuse ja pakub nuppe loenduri suurendamiseks ja vähendamiseks.

            view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , span [] [ text (String.fromInt model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]
            

              
                Copy
              
            
          

5. Põhifunktsioon

Põhifunktsioon lähtestab Elmi rakenduse ja ühendab mudeli, vaate ja uuenduse funktsioonid. See määrab mudeli algväärtuse ja seadistab sündmuste tsükli.

            main : Program Never Model Msg
main =
    Html.beginnerProgram
        { model = 0  -- Algne mudel
        , view = view
        , update = update
        }
            

              
                Copy
              
            
          

Keerulisem näide: rahvusvahelistatud ülesannete nimekiri

1. Mudel

Mudel esindab ülesannete nimekirja olekut. See sisaldab ülesannete loendit ja hetkel valitud keelt.

            type alias Task = { id : Int, description : String, completed : Bool }

type alias Model = { tasks : List Task, language : String }

            

              
                Copy
              
            
          

2. Sõnumid

Sõnumid esindavad erinevaid tegevusi, mida saab ülesannete nimekirjaga teha, näiteks ülesande lisamine, ülesande lõpetamise staatuse muutmine ja keele vahetamine.

            type Msg
    = AddTask String
    | ToggleTask Int
    | ChangeLanguage String

            

              
                Copy
              
            
          

3. Uuendusfunktsioon

Uuendusfunktsioon käsitleb erinevaid sõnumeid ja uuendab vastavalt mudelit.

            update : Msg -> Model -> Model
update msg model =
    case msg of
        AddTask description ->
            { model | tasks = model.tasks ++ [ { id = List.length model.tasks + 1, description = description, completed = False } ] }

        ToggleTask taskId ->
            { model | tasks = List.map (\task -> if task.id == taskId then { task | completed = not task.completed } else task) model.tasks }

        ChangeLanguage language ->
            { model | language = language }

            

              
                Copy
              
            
          

4. Vaade

Vaate funktsioon renderdab ülesannete nimekirja ja pakub juhtelemente ülesannete lisamiseks, nende lõpetamise staatuse muutmiseks ja keele vahetamiseks. See kasutab valitud keelt lokaliseeritud teksti kuvamiseks.

            view : Model -> Html Msg
view model =
    div []
        [ input [ onInput AddTask, placeholder (translate "addTaskPlaceholder" model.language) ] []
        , ul [] (List.map (viewTask model.language) model.tasks)
        , select [ onChange ChangeLanguage ]
            [ option [ value "en", selected (model.language == "en") ] [ text "Inglise" ]
            , option [ value "fr", selected (model.language == "fr") ] [ text "Prantsuse" ]
            , option [ value "es", selected (model.language == "es") ] [ text "Hispaania" ]
            ]      
        ]

viewTask : String -> Task -> Html Msg
viewTask language task =
    li []
        [ input [ type_ "checkbox", checked task.completed, onClick (ToggleTask task.id) ] []
        , text (task.description ++ " (" ++ (translate (if task.completed then "completed" else "pending") language) ++ ")")
        ]

translate : String -> String -> String
translate key language =
    case language of
        "en" ->
            case key of
                "addTaskPlaceholder" -> "Lisa ülesanne..."
                "completed" -> "Tehtud"
                "pending" -> "Ootel"
                _ -> "Tõlge puudub"

        "fr" ->
            case key of
                "addTaskPlaceholder" -> "Lisa ülesanne..."
                "completed" -> "Tehtud"
                "pending" -> "Ootel"
                _ -> "Tõlge puudub"

        "es" ->
            case key of
                "addTaskPlaceholder" -> "Lisa ülesanne..."
                "completed" -> "Tehtud"
                "pending" -> "Ootel"
                _ -> "Tõlge puudub"

        _ -> "Tõlge puudub"

            

              
                Copy
              
            
          

5. Põhifunktsioon

Põhifunktsioon lähtestab Elmi rakenduse algse ülesannete nimekirja ja vaikekeelega.

            main : Program Never Model Msg
main =
    Html.beginnerProgram
        { model = { tasks = [], language = "en" }
        , view = view
        , update = update
        }

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas Elmi arhitektuuri saab kasutada keerukamate rakenduste loomiseks, millel on rahvusvahelistamise tugi. Vastutuse eraldamine ja selgesõnaline olekuhaldus muudavad rakenduse loogika ja kasutajaliidese haldamise lihtsamaks.

Elmi arhitektuuri kasutamise parimad tavad

• Hoidke mudel lihtsana: Mudel peaks olema lihtne andmestruktuur, mis esindab täpselt rakenduse olekut. Vältige ebavajalike andmete või keeruka loogika salvestamist mudelisse.
• Kasutage tähendusrikkaid sõnumeid: Sõnumid peaksid olema kirjeldavad ja selgelt näitama tegevust, mida on vaja teha. Kasutage erinevat tüüpi sõnumite määratlemiseks liittüüpe (unions).
• Kirjutage puhtaid funktsioone: Veenduge, et vaate ja uuenduse funktsioonid on puhtad. See muudab nende testimise ja mõistmise lihtsamaks.
• Käsitlege kõiki võimalikke sõnumeid: Uuendusfunktsioon peaks käsitlema kõiki võimalikke sõnumeid. Kasutage erinevate sõnumitüüpide käsitlemiseks case-lauset.
• Jagage keerukad vaated osadeks: Kui vaate funktsioon muutub liiga keerukaks, jagage see väiksemateks ja paremini hallatavateks funktsioonideks.
• Kasutage Elmi tüübisüsteemi: Kasutage Elmi tugevat tüübisüsteemi täielikult ära, et püüda vigu kompileerimise ajal. Määratlege oma rakenduse andmete esitamiseks kohandatud tüübid.
• Kirjutage teste: Kirjutage vaate ja uuenduse funktsioonidele ühiktestid, et tagada nende korrektne toimimine.

Täpsemad kontseptsioonid

• Käsud (Commands): Käsud võimaldavad teil teostada kõrvalmõjusid, näiteks teha HTTP-päringuid või suhelda brauseri API-ga. Käsud tagastatakse uuendusfunktsiooni poolt ja neid täidab Elmi käitussüsteem.
• Tellimused (Subscriptions): Tellimused võimaldavad teil kuulata sündmusi välismaailmast, näiteks klaviatuurisündmusi või taimeri sündmusi. Tellimused määratletakse põhifunktsioonis ja neid kasutatakse sõnumite genereerimiseks.
• Kohandatud elemendid (Custom Elements): Kohandatud elemendid võimaldavad teil luua korduvkasutatavaid kasutajaliidese komponente, mida saab oma Elmi rakendustes kasutada.
• Pordid (Ports): Pordid võimaldavad teil suhelda Elmi ja JavaScripti vahel. See võib olla kasulik Elmi integreerimiseks olemasolevate JavaScripti teekidega või brauseri API-dega suhtlemiseks, mida Elm veel ei toeta.

Kokkuvõte