de Diego Haz

Prezentarea modelului cu element unic

Reguli și cele mai bune practici pentru crearea unor blocuri de construcție fiabile cu React și alte biblioteci bazate pe componente.

Prezentarea modelului cu element unic

În 2002 – când am început să construiesc lucruri pentru web – majoritatea dezvoltatorilor, inclusiv eu, și-am structurat aspectele folosind <table> tag-uri.

Abia în 2005 am început să urmăresc standarde web.

Atunci când un site web sau o pagină web este descris ca respectând standardele web, de obicei înseamnă că site-ul sau pagina au HTML, CSS și JavaScript valide. Codul HTML ar trebui să respecte, de asemenea, accesibilitatea și liniile directoare semantice.

Am aflat despre semantică și accesibilitate, apoi am început să folosesc etichete HTML adecvate și CSS externe. I-am adăugat cu mândrie Insigne W3C la fiecare site web pe care l-am creat.

Prezentarea modelului cu element unic

Codul HTML pe care l-am scris a fost aproape același cu codul de ieșire care a fost trimis în browser. Asta înseamnă că validarea rezultatelor noastre utilizând Validator W3C și alte instrumente ne-au învățat, de asemenea, cum să scriem un cod mai bun.

Timpul a trecut. Pentru a izola părțile refolosibile ale frontului, am folosit PHP, sisteme de șabloane, jQuery, Polymer, Angular și React. Acest din urmă, în special, îl folosesc în ultimii trei ani.

Odată cu trecerea timpului, codul pe care l-am scris a devenit din ce în ce mai diferit de cel servit utilizatorului. În prezent, transpilăm codul nostru în mai multe moduri diferite (folosind Babel și TypeScript, de exemplu). Noi scriem ES2015 + și JSX, dar codul de ieșire va fi doar HTML și JavaScript.

În prezent, chiar dacă putem folosi în continuare instrumentele W3C pentru a valida site-urile noastre web, acestea nu ne ajută prea mult cu codul pe care îl scriem. Urmărim în continuare cele mai bune practici pentru a ne face codul mai coerent și mai ușor de întreținut. Și, dacă citești acest articol, cred că și tu cauți același lucru.

Și am ceva pentru tine.

Modelul cu element unic (Singel)

Nu știu exact câte componente am scris până acum. Dar, dacă pun Polimer, Angular și React împreună, pot spune cu siguranță că acest număr este peste o mie.

Pe lângă proiectele companiei, mențin o Reacționați cazanul cu mai mult de 40 de exemple de componente. De asemenea, lucrez cu Raphael Thomazella, care au contribuit și ei la această idee, pe un Trusa de instrumente UI cu alte zeci dintre ei.

Mulți dezvoltatori au concepția greșită că, dacă încep un proiect cu structura de fișiere perfectă, nu vor avea probleme. Realitatea este că nu contează cât de consistentă este structura fișierului. Dacă componentele dvs. nu respectă reguli bine definite, acest lucru va face în cele din urmă proiectul dvs. greu de întreținut.

După crearea și întreținerea atâtea componente, pot identifica câteva caracteristici care le-au făcut mai consistente și mai fiabile și, prin urmare, mai plăcute de utilizat. Cu cât o componentă semăna mai mult cu un element HTML, cu atât mai mult de încredere a devenit.

Nu există nimic mai fiabil decât un <div>.

Când utilizați o componentă, vă veți pune una sau mai multe dintre aceste întrebări:

  • Întrebarea nr. 1: Ce se întâmplă dacă trebuie să transmit recuzită elementelor cuibărite?
  • Întrebarea nr. 2: Va întrerupe aplicația din anumite motive?
  • Întrebarea nr. 3: Ce se întâmplă dacă vreau să trec id sau alt atribut HTML?
  • Întrebarea nr. 4: Pot să-l fac să treacă className sau style recuzită?
  • Întrebarea # 5: Ce se întâmplă cu gestionarii de evenimente?

Fiabilitate înseamnă, în acest context, că nu este nevoie să deschideți fișierul și să priviți codul pentru a înțelege cum funcționează. Dacă aveți de-a face cu un <div>, de exemplu, veți cunoaște răspunsurile imediat:

  • Regula # 1: redați un singur element
  • Regula # 2: Nu rupeți niciodată aplicația
  • Regula # 3: Redați toate atributele HTML transmise ca recuzită
  • Regula # 4: Combinați întotdeauna stilurile transmise ca recuzită
  • Regula # 5: Adăugați toate gestionarele de evenimente transmise ca recuzită

Acesta este grupul de reguli pe care le numim Singel.

Dezvoltare bazată pe refactor

Faceți-o să funcționeze, apoi îmbunătățiți-o.

Desigur, nu este posibil să urmăriți toate componentele dvs. Singel. La un moment dat – de fapt, în multe puncte – va trebui să încălcați cel puțin prima regulă.

Componentele care ar trebui să respecte aceste reguli sunt cea mai importantă parte a aplicației dvs.: atomi, primitive, blocuri, elemente sau orice altceva numiți componentele dvs. de fundație. În acest articol, le voi numi elemente unice.

Unele dintre ele sunt ușor de abstractizat imediat: Button, Image, Input. Adică acele componente care au o relație directă cu elementele HTML. În alte cazuri, le veți identifica numai atunci când începeți să copiați codul. Și asta e bine.

Adesea, ori de câte ori trebuie să modificați o componentă, să adăugați o funcție nouă sau să remediați o eroare, veți vedea – sau veți începe să scrieți – stilul și comportamentul duplicat. Acesta este semnalul pentru a-l abstractiza într-un nou element unic.

Cu cât procentul de elemente individuale din aplicație este mai mare comparativ cu alte componente, cu atât va fi mai consistent și mai ușor de întreținut.

Puneți-le într-un folder separat – elements, atoms, primitives – deci, ori de câte ori importați o componentă din aceasta, veți fi siguri de regulile pe care le respectă.

Un exemplu practic

În acest articol mă concentrez pe React. Aceleași reguli pot fi aplicate oricărei biblioteci bazate pe componente.

Acestea fiind spuse, consideră că avem un Card componentă. Este compus din Card.js și Card.css, unde avem stiluri pentru .card, .top-bar, .avatar, și alte selectoare de clasă.

1610985820 602 Prezentarea modelului cu element unic

La un moment dat, trebuie să punem avatarul într-o altă parte a aplicației. În loc să duplicăm HTML și CSS, vom crea un nou element unic Avatar astfel încât să-l putem refolosi.

Regula # 1: redați un singur element

Este compus de Avatar.js și Avatar.css, care are .avatar stil din care am extras Card.css. Acest lucru redă doar un <img>:

Astfel l-am folosi în interior Card și alte părți ale cererii:

<Avatar profile={profile} />

Regula # 2: Nu rupeți niciodată aplicația

Un <img> nu rupe aplicația dacă nu pass un atribut src, chiar dacă acesta este unul obligatoriu. Cu toate acestea, componenta noastră va sparge întreaga aplicație dacă nu o facem pass profile.

1610985820 843 Prezentarea modelului cu element unic

React 16 oferă o nouă metodă a ciclului de viață numit componentDidCatch, care poate fi folosit pentru a trata cu grație erorile din interiorul componentelor. Chiar dacă este o practică bună să implementați limite de eroare în cadrul aplicației dvs., aceasta poate masca erori în interiorul elementului nostru unic.

Trebuie să ne asigurăm că Avatar este fiabil prin el însuși și presupuneți că nici elementele de recuzită necesare nu pot fi furnizate de o componentă părinte. În acest caz, pe lângă verificarea dacă profile există înainte de al utiliza, ar trebui să îl folosim Flow, TypeScript, sau PropTypes pentru a avertiza despre asta:

Acum putem reda <Avatar /> fără recuzită și vedeți pe consolă ce se așteaptă să primească:

1610985821 742 Prezentarea modelului cu element unic

Adesea, ignorăm aceste avertismente și lăsăm consola noastră să acumuleze mai multe dintre ele. Asta face PropTypes inutil, deoarece probabil că nu vom observa niciodată avertismente noi atunci când vor apărea. Deci, asigurați-vă că rezolvați întotdeauna avertismentele înainte ca acestea să se înmulțească.

Regula # 3: Redați toate atributele HTML transmise ca recuzită

Până în prezent, elementul nostru unic folosea un element personalizat numit profile. Ar trebui să evităm să folosim accesorii personalizate, mai ales atunci când sunt mapate direct la atribute HTML. Aflați mai multe despre aceasta mai jos, în Sugestia nr. 1: Evitați să adăugați recuzită personalizată.

Putem accepta cu ușurință toate atributele HTML din elementele noastre unice prin simpla trecere a tuturor props până la elementul de bază. Putem rezolva problema cu elemente de recuzită personalizate așteptând respectivele atribute HTML:

Acum Avatar arată mai mult ca un element HTML:

<Avatar src={profile.photoUrl} alt={profile.photoAlt} />

Această regulă include și redarea children când, desigur, elementul HTML de bază îl acceptă.

Regula # 4: Combinați întotdeauna stilurile transmise ca recuzită

Undeva în aplicație, veți dori ca elementul unic să aibă un stil ușor diferit. Ar trebui să îl puteți personaliza folosind className sau style recuzită.

Stilul intern al unui singur element este echivalent cu stilul pe care browserele îl aplică elementelor HTML native. Acestea fiind spuse, ale noastre Avatar, la primirea unui className prop, nu ar trebui să o înlocuiască pe cea internă, ci să o atașeze.

Dacă am aplica un intern style prop Avatar, ar putea fi ușor rezolvat folosind răspândirea obiectului:

Acum putem aplica în mod fiabil stiluri noi elementului nostru unic:

<Avatar  className="my-avatar"  style={{ borderWidth: 1 }}/>

Dacă vă simțiți nevoit să duplicați noile stiluri, nu ezitați să creați un alt element de compunere Avatar. Este bine – și deseori este necesar – să creezi un singur element care să redea un alt element unic.

Regula nr. 5: Adăugați toate gestionarele de evenimente transmise ca recuzită

De vreme ce trecem pe toți props în jos, elementul nostru unic este deja pregătit să primească orice gestionare a evenimentelor. Cu toate acestea, dacă avem deja gestionarul de evenimente aplicat intern, ce ar trebui să facem?

În acest caz, avem două opțiuni: putem înlocui complet dispozitivul de manipulare intern cu prop, sau le putem apela pe ambele. Depinde de tine. Doar asigurați-vă că mereu aplicați gestionarul de evenimente care vine de la prop.

Sugestii

Sugestia nr. 1: evitați adăugarea de recuzită personalizată

Când creați elemente unice – mai ales atunci când dezvoltați noi funcții în aplicația dvs. – veți fi tentați să adăugați elemente de recuzită personalizate pentru a le configura în moduri diferite.

Folosind Avatar de exemplu, prin o anumită excentricitate a designerului, să presupunem că aveți unele locuri în care avatarul ar trebui să fie pătrat, iar altele unde ar trebui rotunjit. S-ar putea să credeți că este o idee bună să adăugați un rounded prop Avatar.

Cu excepția cazului în care creați o bibliotecă open source bine documentată, rezista asta. Pe lângă introducerea nevoii de documentare, nu este scalabilă și va duce la un cod de neîntreținut. Încercați întotdeauna să creați un singur element nou – cum ar fi AvatarRounded – care redă Avatar și îl modifică, mai degrabă decât să adauge un prop. personalizat.

Dacă folosiți în continuare nume unice și descriptive și construiți componente fiabile, este posibil să aveți sute dintre ele. Va fi în continuare extrem de întreținibil. Documentația dvs. va fi numele componentelor.

Sugestia nr. 2: primiți elementul HTML care stă la baza acestuia ca o propoziție

Nu orice recuzită personalizată este rea. Deseori veți dori să modificați elementul HTML de bază redat de un singur element. Și adăugarea unui accesoriu personalizat este singura modalitate de a realiza acest lucru.

Un exemplu comun este redarea unui Button ca un <; a>:

<Button as="a" href="https://google.com">  Go To Google</Button>

Sau ca o altă componentă:

<Button as={Link} to="/posts">  Posts</Button>

Dacă sunteți interesat de această funcție, vă recomand să aruncați o privire ReaKit, un set de instrumente React UI construit având în vedere Singel.

Validați singurele elemente folosind Singel CLI

În cele din urmă, după ce ați citit toate acestea, este posibil să vă fi întrebat dacă există un instrument care să vă valideze automat elementele în funcție de acest model. Am dezvoltat un astfel de instrument, Singel CLI.

Dacă doriți să-l utilizați într-un proiect în desfășurare, vă sugerez să creați un folder nou și să începeți să vă puneți elementele singulare acolo.

Dacă utilizați React, puteți instala singel prin npm și rulați-l în acest fel:

$ npm install --global singel$ singel components/*.js

Rezultatul va fi similar cu acesta:

1610985821 866 Prezentarea modelului cu element unic

Un alt mod bun este să-l instalați ca o dependență de dev în proiectul dvs. și să adăugați un script în package.json:

$ npm install --dev singel
{  "scripts": {    "singel": "singel components/*.js"  }}

Apoi, pur și simplu rulați npm scenariu:

$ npm run singel

Mulțumesc că ai citit asta!

Dacă îți place și ți se pare util, iată câteva lucruri pe care le poți face pentru a-ți arăta sprijinul: