Dacă nu le urmați deja, luați în considerare să începeți chiar acum

5 noiembrie, 2020 – 5 min citește

Cu câteva luni în urmă, am început să lucrez la un proiect de dezvoltare de aplicații web cu durata de un an și mi-am dat seama cât de mulți dezvoltatori nu prea cunosc cele mai bune practici industriale în dezvoltarea front-end a aplicațiilor web. Chiar și eu nu eram conștient de unele practici, de asemenea. Așa că am decis să scriu acest articol pentru a împărtăși ceea ce știu și ceea ce am învățat despre cele mai bune practici care trebuie urmate atunci când se dezvoltă o aplicație web.

Acest articol se va concentra pe cele mai bune practici în dezvoltarea front-end deoarece, din experiența mea, calitatea codului front-end este cel mai decisiv factor al unei aplicații web excelente, dar majoritatea dezvoltatorilor nu reușesc să urmeze aceste practici și își dezvoltă componentele individuale. Dacă dezvoltatorii front-end nu respectă aceste practici, va fi foarte dificil de gestionat codul, nu va exista consecvență la nivelul designului, iar viteza aplicației web va avea, de asemenea, un impact negativ. Urmând aceste practici, codul va fi mai curat și mai ușor de gestionat și va crește productivitatea tuturor dezvoltatorilor.

În acest articol, voi vorbi despre cele mai bune practici care trebuie urmate atunci când se structurează arhitectura front-end a proiectului, se scrie codul front-end și se pregătește pentru implementare. Așa că haideți să începem.

Când vă apucați de proiect, primul lucru este să structurați corect arhitectura codului front-end. Și acestea sunt cele mai bune practici pe care trebuie să le urmeze fiecare dezvoltator front-end al proiectului.

Structurarea codului de stil

În interiorul dosarului styles, creați dosare separate pentru configurații, bază, layout, componente și pagini, în funcție de aplicația dvs. web. Folosiți un fișier tipografic separat pentru a defini dimensiunile și culorile pentru toate etichetele de text HTML(cum ar fi h1,h2,…) utilizate în aplicația web. Culorile ar trebui să fie definite într-un fișier de variabile și să atribuiți culori variabilelor cu nume adecvate și să utilizați aceste variabile atunci când culorile trebuie să fie aplicate în întregul site web. Includeți aceste fișiere de stil în interiorul folderelor create similar cu imaginea de mai jos.

Puteți importa apoi aceste fișiere în fișierul de stil principal. Dacă folosiți scss în aplicația dvs. web, atunci fișierul main.scss va fi similar cu codul de mai jos.

Structurarea codului JS

În principiu, structurarea JavaScript-ului înseamnă să vă împărțiți fișierele și să separați propriul JavaScript de cel care provine din alte locuri. Plugins, vendor și scripturi sunt cele trei dosare principale în care putem împărți fișierele JS. Plugins ar include bucăți de cod utile pe care le folosim peste tot în aplicația web, cum ar fi plugin-urile jQuery, vendorii ar fi codul JavaScript de la terțe părți, cum ar fi Frameworks și biblioteci, cum ar fi biblioteca slick, iar dosarul de scripturi ar include scripturile pe care le scriem pentru logica aplicației noastre web.

.