În acest prim articol al unei noi serii despre Conducta de Investiții în Rails, aș dori să discut câteva concepte de nivel înalt care sunt la îndemână pentru a înțelege pe deplin ce oferă Conducta Asset și ce face sub capota. Principalele lucruri pe care le gestionează pentru dvs. sunt concatenarea, minificarea și preprocesarea bunurilor. Ca începător, trebuie să vă familiarizați cu aceste concepte cât mai curând posibil.
Subiecte
Conducta de investiții?
Organizare
Concatenare și comprimare?
Limbi de nivel înalt
Conducta de investiții?
Conducta Asset nu este o știre exactă pentru oamenii din afacere, dar pentru începători poate fi puțin dificil să se înțeleagă rapid. Dezvoltatorii nu petrec exact o tona de timp pe chestii de front-end, mai ales cand incep. Sunt ocupați cu o mulțime de piese în mișcare care nu au nimic de-a face cu HTML, CSS sau cu biții JS de multe ori îndoiți.
Asset Pipeline poate ajuta prin gestionarea concatenării, minifiere și preprocesare a activelor - de exemplu, active care sunt scrise în limbi de nivel superior precum CoffeeScript sau Sass.
Acesta este un pas important în procesul de creare a aplicațiilor Rails. Conducta Asset vă poate da un impuls nu numai în calitate și viteză, ci și în confort. Dacă vă configurați propriul instrument de construcție personalizat, vă puteți oferi câteva opțiuni pentru ajustarea nevoilor dvs., dar vine cu un cost suplimentar care ar putea consuma mult timp pentru începători - poate chiar intimidant. În acest sens, am putea vorbi despre Asset Pipeline ca o soluție care favorizează confortul asupra configurației.
Celălalt lucru care nu trebuie subestimat este organizarea. Conducta oferă un cadru solid pentru plasarea activelor. În cazul proiectelor mai mici, s-ar putea să nu pară că proiectele importante, sigure, dar mai mari ar putea să nu se redreseze cu ușurință de la a merge într-o direcție greșită pe subiecte ca aceasta. Acest lucru nu ar putea fi cel mai frecvent exemplu din lume, dar imaginați-vă că un proiect precum Facebook sau Twitter are o organizație proastă pentru proprietățile CSS și JS. Nu este atât de greu de imaginat că acest lucru ar genera probleme și că oamenii care trebuie să lucreze și să construiască pe o asemenea bază nu ar avea un timp ușor de a-și iubi slujba.
Ca și în multe lucruri în Rails, există o abordare convențională a modului de gestionare a activelor. Acest lucru facilitează îmbogățirea la bord a unor noi oameni și evitarea dezvoltării și a designerilor fiind prea obsedați de aducerea aluatului lor la petrecere.
Când te alături unei noi echipe, vrei să te ridici repede și să lovești terenul. Necesitatea de a descoperi sosul special al modului în care alte persoane și-au organizat activele nu este chiar util în acest sens. În cazuri extreme, acest lucru poate fi considerat chiar risipitor și poate arde inutil bani. Dar să nu devenim prea dramatic aici.
Deci, acest articol este pentru incepatori printre voi si va recomand sa aruncati o privire la conducte imediat si sa obtineti o buna intelegere pe aceasta tema, chiar daca nu va asteptati sa lucrati pe marcaj sau lucruri de front-endy mult in viitor . Este un aspect esențial în Rails și nu atât de mare de o afacere. În plus, membrii echipei dvs., în special designerii care își petrec jumătate din viața lor în aceste directoare, vor pune lucruri mai puțin amuzante în cafeaua dvs. dacă aveți un motiv comun care nu este în conflict între ele.
Organizare
Aveți trei opțiuni pentru plasarea activelor. Aceste diviziuni sunt mai degrabă de natură logică. Acestea nu reprezintă restricții sau restricții tehnice. Puteți plasa active în oricare dintre ele și puteți vedea aceleași rezultate. Dar pentru o organizare mai inteligentă, ar trebui să aveți un motiv bun pentru a plasa conținutul în locul potrivit.
app / active
aplicații / active / ├───────────────────────────────────────────────────────────────────────────────────────
app / active dosarul este destinat activelor care sunt în mod special pentru aceste aplicații, imagini, fișiere JS și CSS care sunt personalizate pentru un anumit proiect.
lib / active
lib / active /
lib / active , pe de altă parte, este casa pentru propriul dvs. cod pe care îl puteți reutiliza din proiectul la proiectul-lucruri pe care dvs. le-ați fi extras și doriți să le preluați de la un proiect la altul - în mod specific, active pe care le puteți partaja între aplicații.
furnizor / active
furnizor / active / ├────────────────────────────────────────────────────────────────────────────────────
furnizor / active este un alt pas spre exterior. Este casa pentru active pe care le reutilizați din alte surse externe-plugin-uri și cadre de la terțe părți.
Acestea sunt cele trei locații în care Sprockets vor căuta active. În directoarele de mai sus, vă așteaptă să plasați activele în cadrul / imagini, / stylesheets și / javascripts dosare. Dar acesta este mai mult un lucru convențional; orice active în cadrul * / active dosarele vor fi traversate. De asemenea, puteți adăuga subdirectoarele după cum este necesar. Rails nu se va plânge și precompila dosarele lor oricum.
Există o modalitate ușoară de a arunca o privire la calea de căutare a conductei de materiale. Când porniți o consolă Rails cu consola rails, îl puteți inspecta cu următoarea comandă:
Terminal
Rails.application.config.assets.paths
Ce veți primi înapoi este o matrice cu toate directoarele de active care sunt disponibile și găsite de Sprockets - adică calea de căutare.
Lucrul frumos despre toate astea este ușor de pierdut. Este aspectul de a avea convenții. Asta inseamna ca si dezvoltatorii - si designerii, de fapt - pot avea toate asteptari in ceea ce priveste unde sa caute fisiere si unde sa le plaseze. Aceasta poate fi o economie de timp imensă (voce Trump). Atunci când cineva nou aderă la un proiect, are o idee bună despre cum să navigați imediat pe un proiect.
Acest lucru nu este doar convenabil, ci poate împiedica ideile discutabile sau să reinventeze roata tot timpul. Da, convenția asupra configurației poate să pară uneori plictisitoare, dar este totuși un lucru puternic. Ne concentrează asupra a ceea ce contează: munca în sine și colaborarea în echipă.
Cu toate acestea, căile de inventar nu sunt pietre. Puteți adăuga și căi personalizate. Deschis config / application.rb și adăugați căi personalizate pe care doriți să le recunoașteți Rails. Să aruncăm o privire la modul în care vom adăuga a custom_folder.
config.application.rb
modulul Application ClassApp < Rails::Application config.assets.paths << Rails.root.join("custom_folder") end end
Când verificați din nou calea de căutare, veți găsi că dosarul dvs. personalizat face parte din calea de căutare pentru conducta de materiale. Apropo, acum va fi ultimul obiect plasat în matrice:
De ce avem nevoie de chestiile astea? Povestea scurtă, doriți ca aplicațiile dvs. să se încarce mai repede. Perioadă! Tot ceea ce ajută cu asta este binevenit. Desigur, puteți să scăpați fără să vă optimizați, dar are prea multe avantaje pe care nu le puteți ignora. Comprimarea dimensiunilor fișierelor și concatenarea mai multor fișiere de materiale într-un singur fișier "master" care este descărcat de un client ca un browser nu este, de asemenea, atât de mult de lucru. În majoritatea cazurilor, aceasta este tratată de conducte.
Reducerea numărului de solicitări pentru redarea paginilor este foarte eficientă pentru a accelera lucrurile. În loc să aveți 10, 20, 50 sau orice număr de solicitări înainte ca browserul să fi terminat să vă dețină activele, ați putea avea câte unul pentru fiecare activ CSS și JS. Astăzi este un lucru frumos de făcut, dar la un moment dat a fost un schimbător de jocuri. Aceste tipuri de îmbunătățiri în dezvoltarea web nu ar trebui neglijate, deoarece avem de-a face cu milisecunde ca unitate.
O mulțime de cereri se pot adăuga destul de mult. Și, la urma urmei, experiența utilizatorului este cea mai importantă pentru proiectele de succes. A face ca utilizatorii să aștepte doar acel bit suplimentar înainte ca ei să poată vedea conținutul redat pe pagina dvs. poate fi un dezastru masiv. Răbdarea nu este ceva ce ne putem aștepta de la utilizatorii noștri.
Minificarea este misto, pentru că scapă de lucruri inutile în fișierele tale și comentariile, în principiu. Aceste fișiere comprimate nu sunt făcute în mintea omului. Acestea sunt doar pentru consumul de mașini. Fișierele se vor termina puțin cam cripte și greu de citit, deși este totuși tot codul CSS și JS valabil, fără nici un spațiu exces pentru a fi lizibil și ușor de înțeles pentru oameni.
Compresia JS este un pic mai implicată, totuși. Browserele web nu au nevoie de formatarea respectivă. Asta ne permite să optimizăm aceste active. Probabilitatea de a lua în discuție această secțiune este că o cantitate redusă de cereri și dimensiuni reduse ale fișierelor accelerează lucrurile și ar trebui să fie în punga ta de trucuri. Rails vă oferă această funcționalitate din cutie fără alte setări suplimentare.
Limbi de nivel înalt
S-ar putea să fi auzit deja despre ele, dar, ca începător, s-ar putea să nu vă grăbiți de ce ar trebui să învățați încă o altă limbă - mai ales dacă sunteți încă ocupat să învățați să scrieți HTML și CSS clasice. Aceste limbi au fost create pentru a face față neajunsurilor pe care dezvoltatorii doreau să le elimine. Acestea se adresează în cea mai mare parte problemelor pe care dezvoltatorii nu le-au dorit să le trateze zilnic. Clasic lenea-condus de dezvoltare, cred.
"Limbile de nivel înalt" sună mai deștept decât ar putea fi - sunt, totuși, rad. Vorbim despre Sass, CoffeeScript, Haml, Slim, Jade și alte lucruri de genul ăsta. Aceste limbi ne permit să scriem într-o sintaxă (mai ales) ușor de utilizat, care poate fi mai convenabilă și mai eficientă pentru a lucra cu. Toate acestea trebuie să fie precompilate în timpul procesului de construire.
Am menționat acest lucru pentru că acest lucru se poate întâmpla în spatele scenei fără să observați. Asta inseamna ca le ia aceste active si le transforma in CSS, HTML si JS inainte ca acestea sa fie implementate si pot fi redate de browser.
Sass
Sass vine de la "Sheets Style Awesome Syntactically" și este mult mai puternic decât CSS pur. Ne permite să scriem foi de stil mai inteligente, care au câteva instrumente de programare coapte. Despre ce vorbim aici, exact? Puteți să declarați variabile, reguli de cuib, să scrieți funcții, să creați mixuri, să importați cu ușurință partiale și multe alte lucruri pe care programatorii doreau să le aibă disponibile în timp ce jucau cu stiluri.
Ea a devenit până acum un instrument destul de bogat și este excelentă pentru organizarea foilor de stil - pentru proiecte mari pe care le-aș numi chiar esențiale. Aceste zile, nu sunt sigur dacă nu aș sta departe de o aplicație mare care nu utilizează un instrument precum Sass - sau orice cadru non-Ruby centric trebuie să ofere în acest sens.
Pentru preocupările dvs. actuale, există două versiuni de sintaxă ale Sass despre care trebuie să știți. Versiunea SSSY CSS, alias SCSS, este una mai larg acceptată. Acesta se află mai aproape de CSS simplu, dar oferă toate extensiile fantastice, dezvoltatorii și designerii au venit să-și placă jocul cu foi de stil. Utilizează .SCSS extensie de fișier și arată astfel:
Din punct de vedere vizual, nu este atât de diferit de CSS - de aceea este alegerea mai populară, mai ales în rândul designerilor care cred. Una dintre aspectele cu adevărat reci și la îndemână ale SCSS și Sass în general este aspectul cuibărit. Aceasta este o strategie eficientă de a crea stiluri ușor de citit, dar, de asemenea, reduce foarte mult declarațiile repetitive.
Sintaxa Sass indentată are .Sass extensie de fișier. Aceasta vă permite să evitați să vă ocupați de toate aceste zgarieturi prostie și cu punct și virgulă, pe care le evită leneșii.
Cum face asta? Fără paranteze, Sass folosește indentația, în esență, pentru a-și separa proprietățile. Este destul de rad și arată foarte cool prea. Pentru a vedea diferențele, vă voi arăta ambele versiuni unul lângă celălalt.
Destul de frumos și compact, nu? Dar ambele versiuni au nevoie de procesare înainte de a deveni CSS valid, pe care browserele le pot înțelege. Conducta Asset se ocupă de asta pentru dvs. Dacă l-ai lovit pe browsere cu ceva de genul Sass, nu ar avea nicio idee ce se întâmplă.
Eu personal prefer sintaxa indentată. Această sintaxă Sass sensibilă la spațiul alb este mai puțin populară decât sintaxa SCSS, ceea ce ar putea să nu o facă alegerea ideală pentru alte proiecte decât cele personale. Este probabil o idee bună să alegeți cea mai populară alegere dintre echipa dvs., în special cu designerii implicați. Impunerea hipness-urilor cu oameni care au petrecut ani de zile imblanzind toate coastele și semnele virgulare înăuntru pare a fi o idee proastă.
Ambele versiuni au aceleași trucuri de programare până la mâneci. Sunt excelente în a face procesul de scriere a stilurilor mult mai plăcut și eficient. Suntem norocoși pentru noi că Rails și conductele de acționare fac atât de ușor să lucreze cu oricare dintre acestea - destul de mult din cutie.
Slim & Haml
Argumente similare pot fi făcute cu privire la beneficiile utilizării unor elemente precum Slim și Haml. Ele sunt destul de la îndemână pentru a crea un markup mai compact. Acesta va fi compilat în HTML valid, dar fișierele cu care vă ocupați sunt mult mai reduse.
Vă puteți răscumpăra dificultatea de a scrie etichete de închidere și de a folosi abrevieri reci pentru nume de etichete și altele asemenea. Aceste explozii mai scurte de marcare sunt mai usor de scos si citit. Personal, nu am fost niciodată un mare fan al lui Haml, dar Slim nu este numai fantezist și convenabil, ci și foarte inteligent. Pentru cei cărora le place sintaxa Sass indentată, aș recomanda cu siguranță să jucați cu ea. Să aruncăm o privire rapidă:
Subţire
#content .left.column h2 Bine ați venit pe site-ul nostru! p = print_information .right.column = render: partial => "sidebar"
Haml
#content .left.column% h2 Bine ați venit pe site-ul nostru! % p = print_information.right.column = render: partial => "sidebar"
Ambele au ca rezultat următorul cod HTML creat în ERB în Rails:
Bine ati venit pe site-ul nostru!
<%= print_information %>
<%= render :partial => "bara laterală"%>
La suprafață, diferențele nu sunt atât de mari, dar niciodată nu mi-am dat seama de ce Haml vrea să scriu toate acestea în plus % pentru a prefixa etichetele. Slim a găsit o soluție care a scăpat de acestea și, prin urmare, salut echipa! Nu este o mare durere, ci una enervantă. Celelalte diferențe se află sub capotă și nu se află astăzi în sfera acestui articol. Doar vroiam să-ți mănânc apetitul.
După cum puteți vedea, ambele preprocesoare reduc semnificativ cantitatea pe care trebuie să o scrieți. Da, trebuie să înveți o altă limbă și este puțin ciudat la început. În același timp, simt că îndepărtarea acelei multă dezordine merită total. De asemenea, odată ce știi cum să scrieți cod HTML HTML, veți putea să preluați oricare dintre aceste preprocesoare destul de repede. Nici o știință despre rachete - la fel și pentru Sass, apropo.
În cazul în care sunteți interesat, există două pietre la îndemână pentru a utiliza oricare dintre ele în Rails. Fă-ți o favoare și verifică-le când te obosesc să scrii toate aceste etichete de deschidere și închidere obositoare.
bijuterie "slim-rails" bijuterie "haml-șine"
CoffeeScript
CoffeeScript este un limbaj de programare ca oricare altul, dar are aroma Ruby pentru scrierea JavaScript. Prin preprocesare, acesta se compilează în JavaScript obișnuit, pe care browserele îl pot trata. Argumentul scurt pentru lucrul cu CoffeeScript a fost că a ajutat la depășirea unor neajunsuri pe care JS le-a purtat. Documentația spune că intenționează să expună "părțile bune ale JavaScript într-un mod simplu". Destul de corect! Să ne uităm la un scurt exemplu și să vedem ce avem de-a face:
JavaScript
$ (document) .ready (funcția () var $ on = 'section'; $ ($ on) .css ('background': 'none'; 'nici unul' ); );
Citește doar un tad mai frumos, fără toate curliile și punct și virgulă, nu? CoffeeScript încearcă să aibă grijă de unii dintre biți enervanți din JavaScript, vă permite să tastați mai puțin, să faceți codul mai ușor de citit, să oferiți o sintaxă mai prietenoasă și să vă ocupați mai plăcut cu clasele de scriere. Definirea claselor a fost un mare plus pentru un timp, mai ales pentru cei care vin de la Ruby, care nu au fost super-fondatori de a se ocupa de JavaScript pur. CoffeeScript a abordat în mod similar Ruby și vă oferă o bucată de zahăr sintactic. Clasele arata astfel, de exemplu:
Clasă
constructor de agent de clasă: (@firstName, @lastName) -> nume: -> "# @ first_name # @ last_name" introducere: "
Acest limbaj a fost destul de popular în țara Ruby pentru o vreme. Nu sunt sigur cum sunt ratele de adopție în aceste zile, dar CoffeeScript este aroma implicită JS în Rails. Cu ES6, JavaScript suportă de asemenea clase - un motiv mare pentru a nu folosi CoffeeScript și a se juca cu JS simplu. Cred că CoffeeScript continuă să citească mai bine, dar multe dintre motivele mai puțin cosmetice de a le utiliza au fost discutate cu ES6 în aceste zile. Cred că este încă un motiv bun pentru a da o șansă, dar nu pentru asta ați venit aici. Am vrut doar să vă dau un alt aperitiv și să oferiți un pic de context în legătură cu motivul pentru care Asset Pipeline vă permite să lucrați în CoffeeScript din cutie.
Gândurile finale
Conducta de active sa dovedit a fi mult peste așteptările mele când a fost introdusă. În acel moment a făcut într-adevăr destul de splash și a fost abordarea o durere gravă pentru dezvoltatori. Încă mai are, desigur, și sa stabilit ca un instrument fără efort fără efort care îmbunătățește calitatea aplicațiilor dvs..
Ceea ce îmi place cel mai mult este cât de mică hassle implică intrarea în muncă. Nu mă înțelegeți rău, unelte precum Gulp și Grunt sunt impresionante. Opțiunile de personalizare sunt multe. Nu pot sa scap de sentimentul confortabil pe care mi-l dadea Rails cand nu trebuie sa ma ocup de nici o configuratie inainte de a incepe. Convențiile pot fi puternice, în special din zer, ele duc la ceva fără probleme și fără probleme.
Share
Accentsconagua
