Față pentru Feng Shui

Despre abordarea componentei bazate pe stil în dezvoltarea frontendului

intrare

Astăzi, frontendul se dezvoltă rapid. Avem multe instrumente pentru scrierea rapidă a codului pentru scrierea corectă a codului, dar nu uitați că trebuie să scrieți bine codul. Există o frumusețe ascunsă, ceea ce înseamnă scrierea unui cod lizibil și standardizat. Și aici suntem ajutați de linter, standarde și o abordare componentă. Dar și frontendul poate avea frumusețe, care este vizibilă pentru toată lumea. Acesta este stilul cu care ne va ajuta.

De ce avem nevoie de toți pentru a fi feng shui?

De multă vreme, atitudinea față de frontend a fost superficială, în plus, nu a existat o diferențiere clară a liniei frontale a dezvoltatorilor. În acele zile, ne-am permite să nu ne gândim la un front frumos și structurat. Cu toate acestea, având astăzi în arsenalul său o cantitate imensă de tehnologie și un suport excelent pentru caietul de sarcini de către browsere, trebuie să scriem codul corect pentru interfață.

În plus, utilizarea unei abordări bazate pe stil, bazată pe elemente, oferă o serie de avantaje comerciale.

Vă permite să separați frontendul și backend-ul și să derulați dezvoltarea în paralel
Permite clientului să furnizeze machete live înainte de implementarea backend-ului
Scriem un frontend modular (component), ușor de susținut și extensibil

Ce este un ghid de stil pentru interfață?

Să definim ce este un ghid de stil pentru partea din față. Începem cu definiția clasică.

Ghidul de stil frontal este o colecție modulară a tuturor elementelor din interfața utilizator a produsului dvs., împreună cu fragmente de cod pentru dezvoltatori, pentru a copia și a lipi, dacă este necesar, implementarea acestor elemente. Acesta include componente comune ale interfeței utilizator, cum ar fi butoanele, elemente de intrare, meniuri de navigare, pictograme suprapuse modal și multe altele.

Frontend Style-ghid - este rezultatul combinării de lucru UX-designeri și dezvoltatori care include componente vizuale dezvoltate de designeri și dezvoltatori implementat o platformă ușor de utilizat pentru a fi utilizat în cadrul proiectului.

Elementele cheie ale ghidului de stil

Aceasta este baza de date și apoi, pentru fiecare element specific al interfeței de utilizator, trebuie să furnizați următoarele informații:

O descriere a contextului adecvat de utilizare: când trebuie să utilizați această componentă și nu orice altul similar cu acesta?
Exemple de coduri
Specificații pentru implementare, inclusiv informații privind poziționarea
Pro și contra pentru utilizarea acestui element (opțional).

Există, de asemenea, o listă a componentelor UI principale care ar trebui incluse în ghidul de stil. Această listă nu este o dogmă, dar poate fi un bun punct de plecare pentru a începe:

buton
Button Grupuri
Paine de pâine
carduri
tabele
dialoguri
Grilă de liste de conținut, cupru și fotografii
Listele verticale
meniu
Elementele de selecție de date și de timp
Bare de progres și indicatori de descărcare
casetele de selectare
Butoane radio
Meniuri derulante
cursoare
Comutatoare de stat
Câmpuri pentru alegerea distanțelor numerice
Alte câmpuri de forme (inclusiv variante cu indicarea numărului maxim de caractere și a câmpurilor obligatorii)
Taba
bare de instrumente
ponturile
Ferestre modal
icoane
Animații ...

Ghid de stil Frontend ≠ cartelă de marcă

Trebuie remarcat faptul că ghidul de final Style frontal - nu este același lucru ca brand-carte. În ciuda faptului că brand-de-fag poate satisface descrierea tipografie, culori și alte elemente care pot fi utilizate ca parte a interfeței cu utilizatorul, principala diferență între Frontend al Style Guides este faptul că un set de elemente vii, dinamice de interfață. Deci ... Noi am ajuns la cuvântul cheie „viu“.

Ghid de stil live

Ce este un ghid de stil live?

Deci, cu ce nu sunt de acord? Mai întâi de toate, ei nu vor să ia în considerare ghidul de stil pentru frontend decât este mai mult decât un set de elemente UI de bază, în timp ce conceptul unui ghid de stil live merge mai departe. Aici putem avea nu numai seturi de componente principale, ci și șabloane ale altor componente ale site-ului, până la seturi de pagini. Adică, nu vorbim despre biblioteca de componente individuale, ci despre biblioteca de modele (modele) pentru proiectul dvs. Fundamentele acestui concept sunt definite în acest articol.

Momentul cheie

Cea mai importantă caracteristică a unui ghid de stil viu este că acesta folosește un set de stiluri comune proiectului, actualizând dinamic stilurile în două moduri. Aici merită menționat că, deși acest lucru este considerat un avantaj, puteți controla și procesul de sincronizare. Nu este necesară o sincronizare completă a stilurilor.

Prezența unei biblioteci de șabloane gata făcute, și nu doar un set de elemente de elemente UI, permite chiar și designul la nivelul unui ghid de stil. Puteți colecta șabloane ale anumitor pagini care vor trăi în ghidul de stil.

Prezența șabloanelor de pagini gata permite obținerea de exemple de pagini stilizate pentru client. Adică puteți afișa exemple de pagini la nivelul de proiectare al frontendului, fără o implementare directă la nivel de backend.

Despre instrumentele care vă vor ajuta în acest sens, vom vorbi în următoarea parte a articolului.