UI:Printsipiaalsed alkeemikud

Kuidas suurema ja kasvamisohtliku programmi puhul veaohte ja veaparandamisele kuluvat aega kokku hoida? Üheks võimaluseks on tagada programmi oleku muutumine ainult kindlate ja veidi rituaalsete põhimõtete abil.

Ülesanne

Ülesandeks on liides programmile, milles saame kohandada varasemast "Vaata, Koerad" programmist. Teeme liidese, mis näitab detailvaadet, nimekirja ja lisamisvormi alkeemikutele, kelle kohta hoiame rakenduses nime ja lemmik-elementi, mis mõlemad on vabatekstiväljad.

Näitena andmetest JS kujul võite kasutada järgmist nimekirja:

    alchemistlist: [
       { id: 0, name: 'Hermes Trismegistus', fav:'Earth'},
       { id: 1, name: 'Ostanes', fav:'Fire'},
       { id: 2, name: 'Nicolas Flamel', fav:'Air'},
       { id: 3, name: 'Perenelle Flamel', fav:'Water'}
     ]

• Kohandage näidisprogramm kasutama Vuex printsiipe:
  • Programmi olek kirjeldub keskses "store" nimelises Vuex.Store objektis.
  • Store olekut muudab "mutator" või "action" (viimast kasutatakse asünkroontegevustele, seega hetkel ebavajalik)
  • Store otse muutmist ei toimu.
• Lisaks sellele tekitage filtriga "getter", mis tagastab kõik vee-elemendi alkeemikud.

Vue jaoks on soovituslik Chrome'i või Firefoxi arendusplugin, mille abil näete komponentide sisemist olekut ning Vuex puhul store objekti muudatuste ajajoont. Selle kasutamine hoiab niigi nappi aega kokku. See ajajoon on osa "headusest" mida keskse andme-elemendi ehitamine meile annab.

• Baasfailid

Alternatiiv

Alternatiiv on kirjutada analoogne minirakendus mõnes teises teile teada-tuntud raamistikus, ent kasutades FLEX printsiipe või vastava keele loogikat. Teisisõnu kirjutage rakendus, millel on keskne mudeli muutmise dispetšer (dispatcher), mis reageerib tegevustele (action), mis omakorda muudavad vaateid (view). Vaade otse mudelit ei modifitseeri: vaatel on õigus mudeli muutmiseks läbi dispetšerile sadetud tegevuste. See nõuab veidi lugemist, seega on mõistlik keskenduda ainult nimekirjale, lisamisvormile ja võib-olla detailvaatele.

Viiteid

• Vue.js dokumentatsioon
• Vuex dokumentatsioon
• FLUX - pigem näitena, sest analoogseid arhitektuure on kindlasti veel

Esitamine

• Laadige töö dijkstrasse kataloogi "public_html/ui/praks9"
• kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
• saatke kiri oma praktikumi õppejõule erik.soekov@ttu.ee või jaagup.irve@ttu.ee (Mariliis jäi haigeks)