Share
Organizarea poate face sau întrerupe mentenabilitatea unei aplicații. Cu aplicații mai mici, organizarea este mai evidentă; cu toate acestea, pe măsură ce aplicația crește, iar numărul de dezvoltatori de aplicații și de ingineri de la front-end care produc coduri crește, organizația mai confuză poate deveni. În acest post, vom trece peste câteva concepte de bază pentru păstrarea aplicațiilor organizate astfel încât găsirea codului relevant este un proces eficient și sistematic.
JavaScript ar trebui să aibă un scop eficient.
Să facem un moment și să analizăm modul în care echipele Rails și Wordpress își organizează proiectele. Probabil că ați lucrat probabil cu unul sau altul dintre acestea. Ambele cadre au o structură implicită setată.
Când se generează o aplicație Rails, Rails se ocupă de majoritatea necesităților organizaționale primare pentru dvs. Deoarece se bazează pe MVC, configurația implicită Rails include un folder numit "app", care conține foldere model / vizualizare / controler. De asemenea, oferă "ajutoarele" și "distribuitorii", extensiile controlorilor care ajută la umplerea decalajelor dintre controale și modele.
Rails generează, de asemenea, câteva alte elemente la același nivel cu dosarul "app", cum ar fi configurarea, înregistrarea, bazele de date, temporare / cache, teste și alte câteva piese. Ceea ce este deosebit de interesant pentru această discuție este dosarul de aplicații și public. Dosarul public este locul în care sunt servite activele statice, inclusiv fișierele non-dinamice HTML, CSS și JavaScript.
Când lucrați cu Wordpress, denumirea și structura sunt mult mai puțin evidente.
... aplicația este construită pentru utilizatori ...
Convențiile sunt expuse prin documentație. În special, dezvoltatorii lucrează probabil într-o temă, localizată în directorul wp-content / themes /. Această temă are o serie de fișiere cu nume speciale, bazate în primul rând pe vederi. A functions.php fișierul acționează ca un "controler" de fel, în care un dezvoltator poate pune funcții pentru a le separa de vederi. Cu toate acestea, temele Wordpress adesea umezesc apele dintre logică și prezentare. De exemplu, interogările bazei de date sunt implicite după numele fișierului, dar sunt adesea manipulate prin modificarea interogării înainte de a intra în buclă prin rezultatele returnate. Această manipulare nu abstractează în același mod în care un controlor ar fi (și, desigur, Wordpress nu este aproape de MVC, deci nu ne putem aștepta la acest tip de organizație).
Ambele cadre sunt extrem de populare și ambele utilizează structurarea lor implicită. Este absolut necesar ca dezvoltatorii să înțeleagă modul în care sistemul funcționează pentru a fi eficient. În propriile noastre aplicații, ar trebui să ținem seama de această paradigmă organizațională și să creăm o abordare sistematică pentru structurarea aplicațiilor. Acest lucru se comportă foarte diferit pentru fiecare aplicație individuală.
Cadrele menționate mai sus nu cer dezvoltatorilor să definească structura; acestea sunt "pre-cablate" pentru a lucra într-un mod specific.
Un motiv important, deoarece cadrele robuste sunt adesea abstracte de aceste configurații și oferă structuri implicite, este astfel încât oamenii să înceapă să dezvolte un standard comunitar bazat pe structura implicită.
Nu ignorați standardele când organizați aplicația!
Dacă sunteți familiarizat cu Rails, cel mai probabil vă puteți uita la un depozit Github și știți dacă este vorba de o aplicație Rails doar de structura folderului - Rails are un standard documentat.
Nu ignorați standardele când organizați aplicația! Este foarte probabil ca, dacă organizați o aplicație la nivel de întreprindere, aveți de-a face cu mini-aplicații modulare și discrete. De exemplu, este posibil să aveți mai multe aplicații construite cu unul sau mai multe cadre diferite, sau să poată fi rulate manual și să funcționeze împreună, expunând API-uri care oferă cârlige pentru celelalte servicii. Fiecare dintre aceste aplicații discrete ar urma probabil standardele cadrului pe care a fost construit; aceste standarde există deoarece sunt modul în care acest cadru a fost proiectat să funcționeze. Dacă încercați să schimbați aceste standarde într-o aplicație discretă, probabil că veți sfârși irosind mai mult timp configurarea decât de a construi o cerere de lucru.
În practică, aceasta înseamnă că lucrurile care sunt expuse de la un serviciu la altul ar trebui să funcționeze într-un mod uniform, iar piesele care sunt interne ale unui serviciu ar trebui să funcționeze în modul cel mai potrivit pentru acel serviciu special, probabil condus de orice cadru sau stivă de tehnologie pe care serviciul rulează.
Rețineți că, la sfârșitul zilei, aplicația este construită pentru utilizatori, iar utilizatorii nu cunosc sau nu apreciază separarea serviciilor discrete.
Ei înțeleg mai degrabă aplicarea și experiența ca o singură piesă și că o piesă va beneficia în primul rând de uniformitatea la nivel superior.
Deci, ceea ce trebuie să fie uniform?
pe măsură ce aplicația crește ... organizația mai confuză poate deveni.
Rutele (structurile URL) sunt unul dintre cei mai importanți factori care definesc modul în care funcționează o aplicație web. Este important ca rutele dvs. să urmeze o structură uniformă. De exemplu, atunci când afișați un "cont de utilizator" cu un URL ca / User / 5 Unde 5 este ID-ul întregului număr primar al utilizatorului, nu trebuie să utilizați un plural pentru un alt obiect unic, cum ar fi / Widget / 16. În schimb, ar trebui să fie / Widget / 16. Acest lucru nu numai că ajută dezvoltatorii prin consistență, ci oferă și claritate și uniformitate pentru utilizatori. Nu contează ce alegeți pentru structura rutei, atâta timp cât aceasta este consecventă la nivelul utilizatorului.
Acesta este unul extrem de important pentru dezvoltarea internă și este chiar mai important pentru dezvoltarea produsului / serviciilor software în care un API este expus publicului. Dacă apelurile dvs. API au subliniere ca separatoare de cuvinte, nu utilizați o cheie de tip camelCase sau o cheie separată în interfața dvs. API în altă parte. Dacă utilizați cuvântul "numără" pentru a însemna "returnați acest număr de obiecte", nu utilizați ceva de genul "count_per_page" pentru a însemna același lucru în altă parte a aceluiași API (sau a unui document similar). Acesta este un design API neclintit. Elaborați o sintaxă standard și respectați-o; rețineți că acest lucru este adesea luat în considerare prin proiectarea corectă a traseului în API-urile REST.
La nivel general, atunci când se ocupă de "widgeturi foo" (obiecte sau acțiuni arbitrare) în cadrul aplicației dvs., asigurați-vă că utilizați aceeași terminologie pentru toate aplicațiile dvs. De exemplu, în timp ce poate fi o practică obișnuită în Rails să folosească directorul "public", aveți control asupra a ceea ce se află în interiorul acestuia.
Nu utilizați un dosar "js" pentru un cadru și un "script" folder pentru alt cadru.
Nu solicitați modele de date "orange_items" într-un cadru și "OrangeItems" în altul, cu excepția cazului în care limba sau cadrul solicită explicit acest lucru din motive funcționale. Chiar și atunci, asigurați-vă că există un sistem consistent și "gramatică" și asigurați-vă că există diferențe între serviciile discrete bine documentate și justificate. Aceste tipuri de repere și uniformitate vor contribui foarte mult la înțelegerea clasificărilor obiectelor dintr-o aplicație.
Oglindirea rutelor către dosare și fișiere ajută foarte mult la organizarea unei aplicații. De exemplu, este posibil să aveți foldere pentru CSS, JavaScript și Imagini în dosarele dvs. "publice" sau "statice". Crearea unei structuri de directoare care să se potrivească rutelor, vizualizărilor, controlorilor sau altor structuri similare vă poate ajuta să vă modulați CSS-ul. Apoi, puteți utiliza un instrument precum CodeKit pentru a concatena aceste fișiere într-un singur fișier miniat. Desigur, este posibil să aveți și o global.css pentru regulile care se aplică în întreaga aplicație. Vezi mai jos pentru un exemplu (.rb este pentru Ruby, dar acest lucru ar putea merge pentru orice organizație-cadru a MVC).
- root / - app / --- modele / ---- foo.rb ---- bar.rb ---- baz / ----- widget.rb --- vizualizări / ---- global. html.erb ---- foo.html.erb ---- bar.html.erb ---- baz / ----- widget.html.erb --- controlorii ---- foo.rb - - bar.rb - public - CSS --- global.css --- foo.css --- bar.css --- baz / ---- widget.css - JS --- global.js - - foo.js --- bar.js --- baz / ---- widget.js - Imagini / --- global / ---- image.jpeg --- foo ---- image.jpeg --- bar ---- image.jpeg --- baz / ---- widget / ----- image.jpeg
Se poate observa rapid că nu ar fi dificil să găsiți anumite CSS, JavaScript, modele etc. pentru o anumită secțiune a aplicației.
Rutele (structurile URL) sunt unul dintre cei mai importanți factori care definesc modul în care funcționează o aplicație web.
Cea mai bună modalitate de a vă gândi la acest lucru este să vă despărțiți fișierele în "zone" ale site-ului dvs. De exemplu, poate aveți o aplicație care include o zonă "admin" și o zonă "profil". Ai putea crea o global.css fișierul pentru menținerea obiectelor / regulilor care se aplică ambelor zone (inclusiv o resetare, unele reguli de tipografie, culori etc.) și apoi crearea unor fișiere specifice care se aplică zonelor separate pentru regulile de stil de conținut care nu sunt partajate. În acest fel, în calitate de dezvoltator lucrează pe o anumită pagină, ei vor rămâne în unul sau două fișiere și vor ști exact unde să găsească fișierele corecte.
O altă modalitate eficientă de a vă controla fișierele statice este să le numiți pe baza a ceea ce fac. De exemplu, creați un reset.css, A typography.css, A dimensions.css, A colors.css, etc Există argumente pro și contra acestei metode, în special pentru CSS. Îți păstrează CSS axat pe regulile de prezentare; cu toate acestea, este probabil necesar să repetați selectorii în mai multe fișiere, redeschidându-le pentru a defini diferite tipuri de reguli de stil. Singura modalitate de a evita acest lucru este să vă numiți clasele / ID-urile numai prin stil, nu prin semantică, cum ar fi class = "verde-text de cinci coloane medie-umbra". În caz contrar, vei termina să faci ceva de genul:
În typography.css
.semantic-widget culoare: # 232323; text-shadow: 1px 1px #fff; font-size: 1.2m; linia-înălțime: 1.1em; font-family: sans-serif; font-weight: 300;
În dimensions.css
.semantic-widget lățime: 20%; marja: 0 2,5%; padding: 10px;
Care, desigur, nu este cât mai uscată posibil.
Organizarea de aplicații mai mici (cu mai puține dintre aceste obiecte "widget") poate beneficia în continuare de separarea după tipul de regulă.
Cu toate acestea, dacă aveți o aplicație care are multe tipuri diferite de obiecte, zone de aplicații etc., ar trebui să alegeți probabil să vă separați fișierele CSS în zone (strategia de mirror discutată mai sus).
Namingul fișierelor JavaScript prin funcțiile lor este puțin mai fezabil, dar numai dacă profitați de declanșarea evenimentului (un pub / sub model). Luați în considerare următorul exemplu:
Accentsconagua
$ .getJSON ("/ messages / all.json", funcția (date) // face unele lucruri); Poate doriți să faceți câteva lucruri în acest apel invers. Poate doriți să trimiteți o notificare utilizatorului și să actualizați o listă de mesaje. Dacă aveți fișierele separate prin funcționalitate, este posibil să aveți a notifications.js și a messages.js fișier care gestionează aceste funcții particulare. În cadrul apelului pentru apelul JSON ajax, veți "publica" un eveniment pentru restul aplicației. Apoi, în fișierele de notificări și de mesaje, puteți să vă abonați la eveniment și să răspundeți corespunzător.
în events.js:
$ .getJSON ("/ messages / all.json", funcția (mesaje) $ ("body") trigger ("received_messages", messages);); în messages.js:
$ ("corp") on ("receive_messages", funcția (eveniment, mesaje) // iterați prin mesaje și adăugați la o listă); în notifications.js
$ ("body") pe ("receive_messages", funcția (eveniment, mesaje) // send_notification poate fi o funcție locală care vă permite să trimiteți notificări // către utilizator împreună cu un tip de notificare un întreg; instanța, în acest caz, "1" poate pur și simplu să însemne să formuleze notificarea ca o alertă "de succes" send_notification ("Succesfully Received Messages!", 1);); Există câteva lucruri de reținut în legătură cu fișierele statice. Acest articol presupune că veți concatena fișierele statice într-un mod adecvat. Dar ce anume este potrivit?
Deci, de ce ai face asta, întrebi? În primul rând pentru a profita de memoria cache a browserului.
Concatenarea în zbor, de exemplu, nu vă permite să profitați de memoria cache a browserului. Celălalt avantaj al acestei abordări este încărcarea doar a ceea ce aveți nevoie. Dacă aveți o întreagă secțiune "admin" pe care 95% dintre utilizatorii dvs. nu o vedeți, nu ar trebui să descarce CSS pentru acea secțiune.
Elaborați o sintaxă standard și respectați-o.
Similar cu CSS, JavaScript ar trebui să aibă un scop eficient.
Câștigurile ar trebui să fie întotdeauna gestionate cu atenție; dacă javascriptul dvs. este suficient de mic pentru a justifica concatenarea într-un singur script, prin toate mijloacele, nu vă simțiți presați să încărcați JavaScript modularizat în produsul final.
Așa cum am menționat mai sus, dacă există un număr neglijabil de utilizatori care lovesc o anumită pagină, nu puneți CSS / JS în fișierele statice ale aplicațiilor dvs. globale. Fișierele statice administrative ar trebui, de asemenea, să rămână separate. Dacă aplicația dvs. acceptă conturi de utilizator, vă recomandăm să dezactivați fișierele statice pentru partea neautorizată (de marketing) a aplicației. Odată ce un utilizator se conectează, acesta și-a luat deja angajamentul de a lua parte la orice aplicație vă oferă. Primele impresii sunt totul, iar încărcarea unei grămețe de CSS și JavaScript neutilizate va degrada doar performanța unei prime impresii.
Dacă utilizați într-adevăr un cadru, utilizați structura existentă a acestui cadru. Dacă structura dvs. nu are o structură existentă sau o structură foarte simplă (Sinatra și CodeIgniter sunt exemple minunate de acest lucru), luați în considerare oglindirea structurii altor componente din aplicație. Dacă începeți de la început, aruncați o privire asupra altor proiecte pe care le-ați realizat atât în cadrul pe care îl utilizați, cât și în alte cadre care folosesc aceeași limbă. De exemplu, dacă sunteți selectat lucrări cadru pe MVC, dar nu aveți configurații implicite pentru plasarea acestor piese, este probabil că există o denumire convenţie care folosește modelul de cuvinte cheie, vizualizarea și controlerul.
Când vine vorba de ea, organizația la nivel de întreprindere are în jur de patru lucruri primare:
