de Illia Kolodiazhnyi

Cum să construiești interfețe de utilizator complexe fără să te înnebunești complet

Cum sa construiesti interfete de utilizator complexe fara sa te

Recent am construit o aplicație web cu o interfață de utilizator (UI) complexă și dinamică. Pe parcurs, am învățat câteva lecții valoroase.

Iată câteva sfaturi pe care mi-aș dori să mi le spună cineva înainte să mă angajez într-un proiect atât de ambițios. Acestea mi-ar fi salvat atât de mult timp și sănătate.

Sfat Sanity # 1: Utilizați starea internă a unei componente pentru stocarea datelor temporare

O interfață de utilizare complexă necesită de obicei să mențineți un fel de stare a aplicației. Aceasta indică interfața de utilizare ce trebuie afișată și cum să o afișăm. O opțiune este să accesați această stare de îndată ce utilizatorul declanșează o acțiune pe pagină. Cu toate acestea, am aflat că există situații în care este benefic să amânați modificarea stării aplicației și să salvați temporar această modificare în starea internă a componentei actuale.

Un exemplu pentru a ilustra acest lucru este o fereastră de dialog pentru ca utilizatorul să editeze o înregistrare, cum ar fi numele său:

1611495667 687 Cum sa construiesti interfete de utilizator complexe fara sa te

În acest caz, poate doriți să declanșați o modificare de fiecare dată când utilizatorul editează un câmp din această fereastră de dialog. Dar vă încurajez să mențineți o stare internă a acestui dialog cu toate datele afișate. Așteptați până când utilizatorul apasă butonul Salvare. În acest moment, puteți schimba în siguranță starea aplicației care deține datele acestor înregistrări.

În acest fel, dacă utilizatorul decide să renunțe la schimbare și să închidă fereastra de dialog, puteți renunța la componentă. Apoi starea aplicației rămâne intactă. Dacă trebuie să trimiteți datele către partea din spate, o puteți face într-o singură solicitare. Dacă aceeași listă este disponibilă și pentru alți utilizatori, aceștia nu vor vedea valorile temporare în timp ce cineva o editează.

Comportamentul dvs. de interfață de utilizare ar trebui să se potrivească modelului mental al utilizatorului

Când utilizatorii lucrează cu o casetă de dialog, nu vor considera înregistrarea finalizată până nu vor termina de editat. Funcționalitatea componentei ar trebui să funcționeze exact așa.

Notă pentru cei care lucrează cu React / Redux: acest comportament este realizabil dacă păstrați datele generale în Magazinul Redux și utilizați starea React Component pentru a stoca date temporare.

Sfatul Sanity # 2: separați datele modelului de starea UI

Folosesc termenul model aici referindu-ne la entitatea clasică din modelul MVC.

Interfața de utilizare modernă în aplicațiile web poate fi complexă ca structură și comportament. Acest lucru vă conduce, în general, la stocarea datelor pur legate de interfața de utilizare în starea aplicației dvs. Vă recomandăm să păstrați separat datele legate de interfața de utilizare și datele comerciale.

Stocați modele cu date și logică de afaceri separat de starea UI

Această abordare este mai ușor de urmărit și de înțeles, deoarece separă logica de afaceri de orice altceva. Modelele dvs. pot păstra atât datele, cât și metodele (funcții, mijloace) pentru a gestiona aceste date. În caz contrar, aplicația dvs. va ajunge probabil la logica de afaceri răspândită în mai multe locuri, cel mai probabil Vedere componente.

De exemplu, aveți o listă de sarcini de făcut în aplicația dvs. și implementați o pagină pentru a adăuga o nouă sarcină la lista respectivă. Doriți ca butonul Salvare să fie dezactivat până când există atât o descriere care explică sarcina, cât și o dată formatată corespunzător pentru sarcină:

1611495667 159 Cum sa construiesti interfete de utilizator complexe fara sa te

Modul naiv ar fi să stochezi datele necesare undeva în starea aplicației și să ai codul de genul const saveButtonDisabled = !description && !date && !dateIsValid(date) chiar în dumneavoastră Vedere componentă. Dar problema este că butonul Salvare este dezactivat deoarece există un cerința afacerii pentru a avea toate înregistrările cu descrieri și date corespunzătoare.

Deci, în acest caz, logica pentru dezactivarea butonului trebuie introdusă în model pentru sarcina de rezolvat. Acest model poate arăta astfel:

{    description: 'Save Gotham',    date: 'NOW',    notes: 'Speak with deep voice',    dateIsValid: () => this.date === 'NOW',    isValid: () => this.description !== '' && this.dateIsValid()}

Și acum puteți utiliza acest lucru pentru logica dvs. UI const saveButtonDisabled = !task.isValid() în Vedere componentă.

După cum puteți vedea, acest sfat este practic despre păstrarea dvs. Modele separat de Vizualizări în modelul MVC.

Sfatul Sanity # 3: Prioritizați testele de integrare față de testele unitare

Aceasta nu este o problemă dacă aveți norocul de a lucra într-un mediu în care aveți timp să scrieți mai multe teste pentru fiecare caracteristică. Dar sunt sigur că acest lucru nu este cazul pentru majoritatea dintre noi. De obicei, trebuie să decideți ce tip de testare să utilizați. Majoritatea timpului aș considera că testarea integrării este mai valoroasă decât testarea unitară.

1611495668 431 Cum sa construiesti interfete de utilizator complexe fara sa te

Din experiența mea, am aflat că baza de coduri cu o acoperire bună a testelor unitare este în general mai predispusă la erori decât cea cu o acoperire bună a testelor de integrare. Am observat că majoritatea bug-urilor introduse în timpul dezvoltării sunt bug-uri de regresie. Iar testele unitare nu sunt de obicei foarte bune în a le prinde.

Când remediați o problemă în cod, v-aș încuraja să urmați acești pași simpli:

  1. Scrieți un test care eșuează din cauza problemei existente. Dacă se poate face cu un test de unitate, minunat. În caz contrar, faceți testul să atingă câte module de cod este necesar.
  2. Remediați problema în baza de cod.
  3. Verificați dacă testul nu mai eșuează.

Această practică simplă asigură rezolvarea problemei și nu va mai apărea, deoarece testul o va verifica.

Aplicațiile web moderne prezintă numeroase provocări dezvoltatorilor, iar dezvoltarea interfeței de utilizare este una dintre ele. Sper că acest articol vă va ajuta să evitați greșelile sau să vă oferiți un subiect bun la care să vă gândiți și să discutați.

Aș aprecia foarte mult să vă citesc gândurile și descoperirile în comentarii.