Share
Dacă trăiești și respiri în pământul Ruby și l-ai dat lui Haml o lovitură înainte, probabil că deja vei cunoaște câteva argumente pe care le voi face. Cred că este totuși o idee bună să urmăriți pentru că ați fi decis deja să folosiți un motor templating mai minimalist și aș vrea să vedeți avantajele ofertelor Slim precum și.
Înainte să ne aruncăm de ce Slim este rece, vreau să acoperim ceea ce este de fapt Slim și ce face pentru tine. Documentația însumează acest lucru destul de frumos:
"Slim este un motor rapid și ușor de template cu suport pentru Rails 3 și 4".
Puteți, de asemenea, să-l utilizați cu Sinatra și chiar cu Rack simplu. Deci, dacă sunteți puțin obosit să utilizați ERB pentru a scrie șabloanele dvs. sau nu sunteți foarte mulțumiți de ceea ce Haml are de oferit, atunci Slim este exact copacul potrivit pentru a lătrat.
În ceea ce privește sintaxa, oamenii din spatele lui Slim înceariseră să găsească un răspuns la următoarea întrebare: "Care este minimul necesar pentru a face acest lucru?" Pentru a scrie cantitatea minimă de cod de front-end posibil, acest lucru pare suna drept întrebare de întrebat.
Slim oferă o soluție perfectă pentru toate temele tale? Probabil nu, dar sincer, ar putea oferi doar cel mai bun! Este ușor de învățat? Cred că da, dar e greu să știi ce cred ceilalți oameni ușor. Aș spune însă asta: este nevoie de ceva pentru a vă obișnui, dar cu siguranță nu există știință despre rachete. Deci, nu este nevoie sa te simti intimidat daca esti un pic nou in partea de codificare a lucrurilor. Vrei să te simți bine cu asta? Absolut!
Deci, de ce Slim? Răspunsul este destul de simplu, cred. Marcajul dvs. trebuie să fie cât mai lizibil și mai frumos posibil! Ar trebui să lucrați bine cu el, și cu cât mai puțin timp aveți nevoie pentru a cheltui brodarea prin tone de etichetă, cu atât mai bine.
Ce este frumos, ai putea întreba? Desigur, nu este un răspuns pe care voi încerca să-l rezolv, dar a fi minim în această privință rareori dăunează. Ce-ar fi să devenim super-cripți, deoarece motorul templating încearcă să fie super inteligent în a fi minim? Aceasta este o preocupare corectă și veți fi bucuroși să auzim că echipa din spatele lui Slim o ia foarte în serios. Ei vor să înlăture cât mai mult posibil din vechiul HTML vechi și să dezvăluie doar părțile esențiale - toate fără a deveni prea criptice. Echipa lor de bază încearcă să meargă chiar și un pas dincolo de asta, și sunt cu adevărat preocupați de estetica codului Slim. Destul de bine, nu crezi?
Nu este mult mai plăcut dacă puteți să aruncați o privire asupra unui șablon și să puteți digera cu ușurință ce se întâmplă? Șabloanele pot deveni un loc foarte "aglomerat" - chiar dacă utilizați inteligent partiale - și, ca o consecință, doriți să reduceți nivelul zgomotului la minimum.
Ați încercat probabil sintaxa Sass (.sass) indentată? Sper că ai, pentru că e doar o nebunie! Dacă da, probabil că veți avea o apreciere similară pentru ceea ce Slim are de oferit. Este, de asemenea, sensibil la spațiul liber, ceea ce duce la un cod foarte precis și ușor de citit. Să luăm această bucată de cod HTML / ERB și să o comparăm cu Slim.
<%= full_title(yield(:title)) %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true%> <%= csrf_meta_tags %><%= link_to "sample app", 'root_path', id: "logo" %><%= yield %>
Să ne uităm la echivalentul Slim:
doctype html html titlu titlu = full_title (randament (: title)) = stilesheet_link_tag "aplicație", media: 'all', 'data-turbolinks-track' = = true-javascript_include_tag ' > true = csrf_meta_tags corpul header.navbar .logo = link_to "exemplul aplicației", "root_path", id: "logo" nav ul.navbar-right li = link_to " help_path 'li = link_to "Log in", "login_path" .main = randament
Primul lucru pe care oamenii îl recunosc adesea este "Hei, nu etichete de închidere!" Cool? Sigur, nu sunteți obișnuit cu sintaxa, dar ar putea părea un pic străin la început, dar sunt sigur că puteți aprecia cât de succintă este ea. Nu există paranteze unghiulare stânga / dreaptă și nu este nevoie să scriem divizii și selectorii minimaliști, deci în loc să ne concentrăm pe numele pe care îl au ID-urile și clasele. Se simte mult mai puțin dezordonat și mai organizat, nu crezi?
Pentru comparație, aici este versiunea Haml. Nu este cu adevărat o șansă ca Haml să-l bată - tocmai vă arată cât de asemănătoare este, dar și că Slim merge un pas mai departe cu alegerea sintaxei minime. Rezultatul este că e chiar mai elegant decât Haml, cred.
De ce să merg atât de puțin, dar încă mă face să tip % semnează peste tot? Degetul meu arătător nu are nicio motivație specială pentru a apuca Shift-5 tot timpul. Puteți personaliza acest comportament? Foarte sigur, sau cel puțin așa sper! Dar designul pare un pic greșit în această privință și mai puțin spartan în comparație cu Slim. Îmi dau seama că și asta este o chestiune de gust, totuși, așa că o las la asta.
!!! % data = turbolinks-track '=> true = javascript_include_tag' cerere ',' data-turbolinks-track ' => true = csrf_meta_tags% body% header.navbar .logo = link_to "exemple de aplicații", "root_path"% id = link_to "Help", "help_path"% li = link_to "Log in", "login_path" .main = randament
Înainte de a sari în părțile din carne, permiteți-mi să fiu pușcă pentru o clipă și rezumați ceea ce cred că face învățarea Slim o investiție demnă de timp:
În ceea ce privește experiența de programare, dacă vă considerați a fi mai mult pe partea de început a lucrurilor, voi încerca să vă dau o călătorie rapidă înainte de a începe să folosim Slim. Atunci când oamenii vorbesc despre șabloane, ele înseamnă, în general, o marcaj HTML simplu, cu cod dinamic care este adesea folosit pentru redarea fluxului, injectarea de obiecte sau redarea parțial șablon (parțial). De exemplu, atunci când un controler vă oferă variabile de instanță care pot fi folosite de vizualizare prin substituție variabilă (instanță) pentru a afișa atributele acelui obiect. Toate acestea se întâmplă prin procesorul de șabloane ales de dvs. - ERB, Haml, Slim și altele asemănătoare - care combină toate șabloanele web într-o pagină web finală. Șabloanele pot fi, de asemenea, folosite pentru a genera fluxuri XML și RSS, precum și alte forme de fișiere text structurate.
Cu șabloane, puteți defini diferite "machete" care manipulează anumite părți ale site-ului dvs. web, precum și datele care trebuie să fie afișate sistematic cu cea mai mică cantitate de repetări. De când ați început să jucați cu Rails, cu siguranță ați folosit ERB pentru exact aceste scenarii. ERB ia porțiunile de text simplu, le transmite către documentul final și procesează numai codul care este marcat ca atare. Nu intru în detalii cum funcționează ERB și presupuneți că aveți o înțelegere de bază înainte să vă aruncați în Slim. Nu aș recomanda să folosiți Slim dacă nu sunteți deja familiarizat cu modul implicit de template al lui Rails, deoarece veți avea un timp mult mai ușor de jucat cu Slim dacă înțelegeți cum funcționează acest lucru din cutie în Rails.
Mai jos este un exemplu de bază ERB al unui șablon care afișează o colecție de misiuni asociate cu un șablon @agent obiect. Direct dedesubt, folosește de asemenea o metodă de la un Ruby Gem pentru a paginaliza @missions Colectie.
<% if @agent.missions.any? %>Misiuni (<%= @agent.missions.count %>)
Aceasta este o mică secțiune a unui șablon care arată frumos că nu este altceva decât o componentă HTML statică care are niște injecții dinamice de la un cod Ruby. Dacă nu am folosi șabloane de acest gen, ar trebui să scriem manual codul pentru fiecare obiect nou pe care dorim să-l afișăm pe o pagină. Nu sunt sigur de tine, dar nu-mi pot imagina un cosmar mai mare sau pierdere de timp decât asta. Șabloanele ne oferă un instrument util pentru a face din stratul nostru vizual inteligent și dinamic fără a ne repeta.
După cum puteți vedea și din acest exemplu, șabloanele permit să folosim șabloane parțiale pe care le putem face acolo unde este necesar. Aici am avea _mission.html.erb parțial undeva, ceea ce ne ajută să repetăm o colecție de @misiune obiecte, care, la rândul lor, sunt enumerate în interiorul nostru misiuni clasă.
După cum puteți vedea, șabloanele nu sunt nimic magic, dar sunt extrem de la îndemână pentru ca dezvoltarea aplicațiilor web să fie mult mai eficientă și mai organizată. Am vrut doar să mă asigur că suntem pe aceeași pagină cu asta înainte de a face scufundări în Slim.
Dacă vă place să folosiți aceste instrumente, este perfect. Nimic nu este în neregulă cu asta. Lucrul este că, dacă căutați ceva mai inteligent, care este mai puțin minimalist, este greu să găsiți ceva care merge mai departe decât Slim. Pentru mine, este cea mai raționalizată soluție templantă din țara Ruby despre care știu. Toate funcționează bine, deci este o chestiune de preferință personală.
Nu este o surpriză, există o bijuterie pentru asta.
panglica "subțire"
instalare pachet
Asta e, suntem cu toții pregătiți. Deoarece ați instalat această bijuterie, Slim va fi încărcat și inițializat ori de câte ori aplicația dvs. se încarcă. De asemenea, pentru confortul dvs., atunci când generați controlorii prin șinele generează controler, veți obține în mod automat .subţire vizualizați fișierele pentru vizualizarea dvs.-.html.erb fișiere nu mai mult. Funcționează la fel cu schele, dar sper că nu le folosiți cu adevărat!
Pentru a demonstra acest comportament pentru oameni care sunt noi în folosirea generatoarelor Rails, voi crea un controler pentru operatorii de servicii secrete care are toate acțiunile controlerului standard REST:
șine genera controler SecretServiceOperatives index nou crea spectacol edita actualizare distruge
Printre altele, veți obține toate .subţire fișierele de care aveți nevoie. Rails pune un plus .html și acolo - puteți să scăpați de asta dacă vă deranjează bineînțeles. Tot ce contează este faptul că extensia subțire a fișierului este deja acolo și că este pregătită pentru preprocesarea codului dvs. Slim. ura!
... invocați aplicații / vizualizări / secret_service_operatives / create.html.slim crea aplicații / vizualizări / secret_service_operatives / create.html.slim crea aplicații / secret_service_operatives / show.html.slim crea app / views / secret_service_operatives / edit.html.slim crea app / views / secret_service_operatives / update.html.slim crea app / views / secret_service_operatives / destroy.html.slim ...
Următorul pas ar fi să deschideți aspectul aplicației și să înlocuiți codul de boiler cu ceva Slim. De asemenea, nu uitați să redenumiți application.html.erb fișier la application.slim (sau application.html.slim daca vrei). Am mai slăbit puțin - chiar dacă numele fișierului a pierdut o anumită greutate.
doctype html html head title = stylesheet_link_tag "aplicație", media: 'toate', 'data-turbolinks-track' => true = javascript_include_tag 'aplicație', 'data-turbolinks-track' => true = csrf_meta_tags header.navbar. logo = link_to "Spy app", "root_path", id: "logo" nav ul.navbar-right li = link_to "Home", "root_path" li = link_to "Help" , 'sign_up_path' li = link_to "Log in", 'login_path' .main h1.welcome Bine ați venit la Șabloane Șabloane Slim Level! = randament
Nimic fantezist, dar un bun început - și la fel de ușor cum cred eu.
Ca o notă laterală, dacă sunteți vreodată curioși ce versiune a bijuteriei pe care ați instalat-o, această mică comandă vă va spune - este utilă și pentru orice bijuterie, bineînțeles:
bundle arată "slim-șine"
Acesta vă spune unde este stocată și ce versiune are în prezent această bijuterie. Rezultatul arată astfel:
/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1
Pentru entuziaștii de la Sinatra printre voi, am vrut să menționez cum să încep și eu. Mai întâi trebuie să instalăm bijuteria, desigur.
bijuterie instalați subțire
Și după aceea, aproape că ați terminat. În aplicația dvs. Sinatra, trebuie doar să solicitați Slim și sunteți bine să mergeți.
Accentsconagua
solicitați 'sinatra' necesită 'slim' get ('/') slim: index __END__ @@ index html html titlu titlu Slim Templates corp h1Aici am folosit un șablon inline pentru a scrie marcajul Slim în același fișier și i-am spus lui Sinatra că vreau să folosesc Slim pentru fișierul index atunci când face o obține cereți calea principală. A trebuit doar să fac referire la șablonul inline din interiorul unui bloc de corzi curbate. Ceea ce vedeți mai jos @@ index-care semnifică șablonul de index - este o sintaxă Slim subțire sensibilă la culoarea albă.
Este timpul să vă arătăm cum să scrieți niște Slim.
Să începem cu cea mai simplă, declarația doctype. După cum probabil știți și ați uitat deja, acest lucru trebuie să fie declarat în partea de sus a documentului HTML - înainte de actual etichetă. FYI, nu este o etichetă HTML și instruiește browser-ul despre versiunea paginii HTML.
Printre versiunile diferite pentru , există doar unul pentru HTML5: -mulțumesc lui Dumnezeu! - ceea ce primim când scriem doctype html sau doctype 5 în Slim.
doctype html html capul doctype 5 html cap
# și scurtături de clasă . Scrierea codului de front-end înseamnă o tona de clase și tot atât de puține id-uri - sper. Pentru a evita repetarea acestor probleme, Slim vă întâlnește mai mult decât jumătate și vă permite să scurtcircuitați procesul în întregime. Lasă-mă să-ți arăt ce vreau să spun. Luați următorul cod Slim:
#logo h1.header .vil wrap-ul h2 # author-name ul.books
Aceasta se compilează la această ieșire HTML:
După cum puteți vedea, punctul sugerează lui Slim că doriți să utilizați o clasă, iar numele care urmează este ceea ce doriți să-l numiți. Același lucru este valabil și pentru ID-uri - pur și simplu utilizați simbolul hash (cunoscut și sub numele de literă) care face truc. Cititorii cu adevărat recunoscuți că versiunile fără etichetă de vârf declanșează crearea unui div cu clasa corespunzătoare sau id-care poate fi văzut pentru și . Destul de la îndemână, nu crezi?
De asemenea, puteți fi mai expresiv în codul dvs. Slim, dacă doriți. Nimeni nu te împiedică să îți scrii mâna cu clasele tale bune. Dacă vă simțiți cumva atașați de asta, du-te! Îmi place versiunea mai succintă, deoarece mă lasă de asemenea să evit să citez ghilimele și textul repetat tot timpul. Depinde de tine - orice te face fericit! Codul de mai jos este un pic mai detaliat, dar redă același HTML ca mai sus:
div h1 div h2 ul
Nu este o chestie de frumusețe? Imaginați-vă toate aceste etichete HTML îngrozitoare pe care nu aveți nevoie să le scrieți, plus eliminarea tuturor parantezelor unghiulare în exces. Sigur, editorul dvs. de cod poate face o mulțime de lucru pentru dvs., de asemenea, dar editorul dvs., de asemenea, citiți codul pentru tine? Exact!
Când vă întoarceți să citiți codul, doriți și un document succint care este foarte ușor de digerat vizual. Cred că acest exemplu simplu arată cel mai bine ce poate oferi un instrument ca Slim. Acestea sunt aceste lucruri mici, care adună la un instrument excelent și timepast pe termen lung. Chiar dacă îl utilizați doar pentru acea funcționalitate și ignorați celelalte funcții mai avansate pentru moment, transformarea comenzii la Slim ar face deja mare plăcere.
Să presupunem că aveți mai multe etichete pe care doriți să le aveți în linie pentru a fi mai compacte sau pentru orice altceva. Deci, în loc să rupeți la o linie nouă, le puteți lansa separând aceste etichete cu un colon :. Ambele exemple de mai jos oferă aceeași ieșire.
ul li.first a href = "/ a" Un link li a href = "/ b" link B ul li.first: a href = "/ a"
Cea de-a doua versiune este mult mai mică datorită etichetelor inspirate și ar fi preferința mea. La urma urmei, compactul este bun, nu? Cred că acest caz arată frumos că Slim echilibrează în mod egal între compact și criptic. Da, este nevoie să vă obișnuiți și, în unele cazuri, ambalajele de atribute suplimentare sunt utile (vedeți mai multe despre împachetările de mai jos). Sunați-mă nebun, dar eu sunt destul de sigur că veți citi Slim ca marcajul HTML obișnuit într-un jiffy.
Scrierea textului este la fel de ușor ca și cum v-ați aștepta, desigur. Doar adăugați-o după etichetele dvs..
h1 # welcome-header Mesajul dvs. de bun venit intră aici!
Mesajul dvs. de bun venit intră aici!
Nimic altceva de adăugat, ușor cum poate fi!
Atributele HTML, care oferă informații suplimentare despre etichete, pot fi incluse după cum urmează:
a href = "http://slim-lang.com" title = "Pagina de pornire Slim" Vizitați pagina de pornire Slim img alt = "James Bond prezintă împreună cu M" src = "images_8 / an-introduction-to-slim-templates_3. png "/
http://slim-lang.com "title =" Pagina de start Slim "> Accesați pagina de pornire Slim
Puteți să le lanțați în mod substanțial și Slim îl va separa de conținutul textului - dacă este prezent. Dacă te uiți atent, poți vedea asta img tag-ul are o slash înclinată, care închide în mod explicit etichetele în Slim. Pentru imagini sau mai multe etichete complicate, acest lucru este cu siguranță util. Apropo, HTML5 nu necesită să scrieți numele de atribute în litere mici și nici să utilizați citate în jurul valorii de atribute. Cu toate acestea, practica standard recomandată de W3C.
Dacă aveți mai mulți selectori cum ar fi clase sau ID-uri pe etichetă, puteți scrie și acest lucru mai succint prin legarea lor de daisy. Acești selectori vor fi automat delimitați de spațiul alb.
h2 # big-header.agent-header.tagline Titlu Funky h3.small-header.agent # 007.tagline Titlu mic funky
Funky titlul
Titlu mic funky
Nu că faptul că toate aceste identități și clase se amestecă în felul acesta reprezintă cele mai bune practici sau orice altceva, dar este ușor să vezi cum funcționează Slim într-un exemplu atât de complicat. Destul de cool, nu? Totuși, cu grijă, răspândirea acestor selectori pe mai multe linii nu va funcționa fără ambalaje de atribute (vezi secțiunea următoare).
O altă opțiune ar fi folosirea unui matrice cu șiruri de caractere sau simboluri doar pentru a fuziona în atribute.
h2 class = ["agent-header", "tagline"] Titlu Funky h3 class =: agent,: double_o_seven,: slogan Titlu mic funky
Funky titlul
Titlu mic funky
În cartea mea, aș numi acest lucru un bun-să-știu, dar nu este ceva ce încerc să utilizez în mod activ. Ar fi util dacă vrei să interpolezi ceva, presupun.
Slim vă oferă ambalaje pentru a vă face atributele mai ușor de citit. S-ar putea să nu fie necesar tot timpul, dar este util să știm dacă o etichetă cu multe atribute necesită o îmblânzire. Puteți utiliza oricare dintre următoarele delimitatoare pentru a împacheta atributele: , [] și ().
a href = "http://slim-lang.com" title = "Pagina principală" Accesați pagina de pornire o href = "http://slim-lang.com/about.html" title = "Despre pagină " Vizitați pagina h2 [id =" big-header "] Titlu Funky h3 (id =" small-header "
Accesați pagina de pornire Descărcați pagina despre paginăFunky titlul
Un alt titlu funky
Dacă aceasta este o modalitate mai ușoară de organizare a marcajului, faceți-o! Așa cum este ilustrat de al doilea A si h3 , puteți distribui chiar atribute și selectori pe mai multe linii. Indentarea pare să fie aplicată foarte iertător în ceea ce privește sensibilitatea la spațiul liber. Cred, însă, că nu va dura mult timp și că nu veți avea nevoie de prea multe împachetări. Veți fi obișnuiți cu sintaxa subțire cu bare goale în cel mai scurt timp și salvați-le pentru ocazii speciale - după cum probabil ar trebui.
Pentru etichetele inspirate, ambalajele ar putea fi la îndemână din când în când. După cum puteți observa și în exemplul de mai jos, puteți utiliza spații cu delimitatoarele pentru a le face mai ușor de citit - doar o notă laterală.
ul li.long-link: a href = "http://slim-lang.com" title = "Pagina de pornire" Navigați pe pagina principală li.long-link.class.with-id: a [href = http://slim-lang.com/about.html "title =" Despre pagină "] Găsiți pagina despre li.c-link: a (href =" / c " d "] D
A spus cineva interpolarea? În cadrul atributelor cotate, puteți folosi Ruby pentru a interpola codul dacă este necesar. Un exemplu simplu ar trebui să fie suficient pentru a ilustra acest comportament:
o href = "http: // # url" Urmați # url
Din nou, nu ceva ce ar putea fi folosit zilnic, dar este bine să ai în geanta ta de trucuri. Valorile atributelor vor fi scoase în mod implicit. Dacă aveți nevoie de acest comportament dezactivat, trebuie doar să utilizați a ==.
o href == "http: // # url" Urmați # url
Puteți folosi Ruby complet pentru a juca cu atributele dvs., de asemenea. Doar aruncați un semnal egal acolo unde doriți ca un cod Ruby să fie executat și sunteți gata să plecați. În al doilea articol, veți găsi mai multe informații despre afișarea codului Ruby în șabloanele dvs. Slim.
ul li class = agent.role a href = (cale_to_agent agent) = agent.name
Asta, desigur, înseamnă, de asemenea, că puteți folosi booleani simpli în același mod în atributele dvs..
tipul de intrare = "text" dezactivat = intrarea false tip = "text" dezactivat = adevărat tip de intrare = "text" dezactivat = zero
Groovy, hai să mergem mai departe!
Sper că aveți acum un bun simț al motivului pentru care Slim este o alegere bună pentru toate nevoile tale templiante din țările Ruby. Dacă încă mai preferați să utilizați Haml sau ERB în acest moment, este posibil să creșteți apetitul pentru Slim în timp. Nu spun că este vorba de un gust dobândit sau de orice altceva, doar că nu este ceva pe care mulți oameni îl iau mai devreme în carieră - poate pentru că ei încă nu au simțit durerea de a scrie tot timpul acea marcare în plus. Acest articol vă oferă principiile de bază de care aveți nevoie pentru a începe.
Slim are mai multe de oferit, desigur - în special câteva caracteristici avansate pe care cu siguranță doriți să le aruncați o privire. În următorul articol, vom începe cu o secțiune mai detaliată despre trimiterea codului Ruby în șabloanele dvs. - și multe altele, bineînțeles. Ne vedem acolo!
