Bevezetés a vékony sablonokba

Miért Slim?

Ha Ruby földjén élsz és lélegzel, és korábban már lőttél Hamlre, akkor valószínűleg már tudsz pár érvet, amelyet el fogok mondani. Szerintem ennek ellenére jó ötlet a követés, mert lehet, hogy már döntött egy minimalista sablonmotor használata mellett, és szeretném, ha meglátná a Slim által kínált előnyöket is.

Mielőtt belemerülnénk, miért is jó a Slim, szeretnék kitérni arra, hogy mi is a Slim valójában, és mit jelent az Ön számára. A dokumentáció ezt nagyon szépen összefoglalja:

„A Slim egy gyors, könnyű sablonmotor, amely támogatja a 3. és 4. síneket”.

Használhatja a Sinatra-val és még a sima Rack-kel is. Tehát, ha már unod egy kicsit az ERB-t a sablonok írásához, vagy nem vagy elégedett azzal, amit Haml kínál, akkor a Slim pontosan a megfelelő fa az ugatáshoz.

Szintaxisát tekintve a Slim mögött álló emberek megpróbáltak választ találni a következő kérdésre: "Mi a minimum, ami szükséges ahhoz, hogy ez a munka működjön?" A lehető legkevesebb kezelői kód megírásához ez biztosan a megfelelő kérdésnek tűnik.

A Slim tökéletes megoldást kínál minden sablonokkal kapcsolatos problémájára? Valószínűleg nem, de őszintén szólva talán csak a legjobbat nyújtja! Könnyű megtanulni? Azt hiszem, de nehéz megtudni, mit tartanak mások könnyűnek. Én mégis ezt mondanám: kell egy kicsit a megszokás, de ez határozottan nem rakétatudomány. Tehát nem kell megfélemlíteni, ha egy kicsit új vagy a dolgok kódolási oldalán. Jól érzed magad rajta? Teljesen!

Szóval, miért Slim? A válasz szerintem egyértelmű. Jelölése legyen a lehető legolvashatóbb és legszebb! Jól kell éreznie a munkát, és annál jobb, minél kevesebb időt kell eltölteni a tonna címke anyagának gázolásával.

Mi a szép, kérdezheted? Természetesen ez nem az a válasz, amelyet megpróbálok megoldani, de hogy ebből a szempontból minimális, ritkán árt. Mi a helyzet azzal, hogy szuper titkos lesz, mert a sablonmotor megpróbál szuper intelligens lenni minimális? Ez komoly aggodalomra ad okot, és örömmel hallja, hogy a Slim mögött álló csapat ezt nagyon komolyan veszi. A lehető legtöbbet el akarják távolítani a sima régi HTML-ből, és csak a lényeges részeket tárják fel - mindezt anélkül, hogy túl titokzatosak lennének. Alapcsapatuk megpróbál még egy lépést túllépni ezen, és valóban aggódik a Slim kód esztétikája miatt. Elég jó üzlet, nem gondolod?

Nem sokkal szebb, ha csak egy sablonra pillanthatsz, és könnyen meg tudod emészteni a történteket? A sablonok nagyon „zsúfolt” hellyé válhatnak - még akkor is, ha intelligensen alkalmazzák a részeket -, és ennek következtében a zajszintet az abszolút minimumra szeretné csökkenteni.

Esetleg kipróbálta a behúzott Sass (.sass) szintaxist? Remélem, hogy van, mert ez csak sima dopping! Ha igen, akkor valószínűleg hasonlóan értékelni fogja, amit Slim nyújt. Ez a fehértérben is érzékeny, ami valóban tömör és olvasható kódhoz vezet. Vegyük ezt a HTML/ERB kóddarabot, és hasonlítsuk össze a Slim-kel.

Nézzük a Slim megfelelőt:

Az első dolog, amit az emberek gyakran felismernek: „Hé, nincs záró címke!” Menő? Persze, még nem vagy hozzászokva a szintaxishoz, így elsőre kissé idegennek tűnhet, de biztos vagyok benne, hogy értékelni tudod, hogy milyen tömören olvasható. Nincsenek bal/jobb szög zárójelek, és nem kell div-eket és minimalista szelektorokat írni, ezért ehelyett az id-ek és osztályok nevére összpontosíthatunk. Sokkal kevésbé rendetlen és szervezettebb érzés, nem gondolja?

Összehasonlításképpen itt van a Haml verzió. Ez valójában nem arra szolgál, hogy megalapozza Haml-t - csak megmutatja, mennyire hasonló, de azt is, hogy a Slim egy lépéssel tovább megy a minimális szintaxis kiválasztásával. Az eredmény az, hogy szerintem még elegánsabb, mint a Haml.

Miért megy ilyen minimálisan, de mégis arra késztetem, hogy a% jelet mindenhol beírjam? A mutatóujjamnak nincs különösebb motivációja, hogy folyamatosan megragadjam a Shift-5-et. Testreszabhatja ezt a viselkedést? Nagyon biztos, vagy legalábbis remélem! De a kialakítás kissé hibásnak tűnik ebben a tekintetben, és kevésbé spártai a Slimhez képest. Tudomásul veszem, hogy ez is ízlés kérdése, ezért ezt hagyom.

Mielőtt beleugrunk a húsos részekbe, hadd duzzadjak egy pillanatra, és összegezzem, mit gondolok, hogy a Slim tanulása az Ön idejének méltó befektetése:

  • Gyors.
  • Szuper olvasható.
  • Intelligens szintaxissal rendelkezik.
  • Esztétikája minimális.
  • Nagyon konfigurálható
  • Mutatóujjbarát.
  • Ez a főnök szintű sablon.
  • Szórakoztató írni, és doppingolva néz ki.
  • Alapértelmezés szerint automatikus HTML menekülés.
  • Szuper szép Rails és Sinatra integráció.
  • Nagyon minimális, könnyen karbantartható sablonok.
  • Kiterjedt, és lehetővé teszi bővítmények és bővítmények írását.
  • Van egy logikátlan mód azokra az esetekre, amikor HTML-t akar kiadni, de nincs oka a Ruby-kód beillesztésére.
  • Konfigurálható parancsikonokkal rendelkezik a címkékhez - ez egy nagyon jó szolgáltatás a motor személyre szabásához.
  • És végül, mert Slim szintaxisát egy nagyon klassz mottó vezérli: „Mi a minimum, ami szükséges ahhoz, hogy ez a mű működjön”. Ezt nagyon nehéz nem szeretni.

Mik azok a sablonok?

A programozási tapasztalatokat tekintve, ha úgy gondolja magát, hogy inkább a dolgok újonc oldalán áll, megpróbálok egy gyors oda-vissza utat megajándékozni, mielőtt elkezdjük használni a Slim-et. Amikor az emberek sablonokról beszélnek, ezek többnyire egyszerű HTML jelölést jelentenek dinamikus kóddal, amelyet gyakran használnak folyamatirányításhoz, objektum-injektáláshoz vagy részleges sablon (részleges) megjelenítéshez. Például, ha egy vezérlő olyan példányváltozókat biztosít Önnek, amelyeket a nézet (példány) változóhelyettesítéssel használhat az adott objektum attribútumainak megjelenítésére. Mindez az Ön által választott sablonprocesszoron keresztül történik - ERB, Haml, Slim és hasonlók -, amely az összes websablont egy végső weboldalra egyesíti. A sablonok felhasználhatók XML és RSS hírcsatornák, valamint más strukturált szövegfájlok létrehozására is.

A sablonokkal meghatározhat különféle „elrendezéseket”, amelyek a webhely bizonyos részeit kezelik, valamint azokat az adatokat, amelyeket szisztematikusan kell megjeleníteni a legkevesebb ismétléssel. Amióta elkezdtél játszani a Railsszel, biztosan pontosan ilyen típusú forgatókönyvekhez használod az ERB-t. Az ERB átveszi az egyszerű szöveges részeket, átadja őket a végleges dokumentumnak, és csak az ilyenként megjelölt kódokat dolgozza fel. Nem részletezem az ERB működését, és tegyük fel, hogy alapszintű ismerete van, mielőtt belemerül a Slim-be. Nem ajánlom a Slim használatát, ha még nem ismeri a Rails alapértelmezett sablonozási módját, mivel sokkal könnyebben fog játszani a Slim játékkal, ha megértette, hogy ez hogyan működik a Rails dobozán kívül.

Az alábbiakban bemutatunk egy alapvető ERB példát egy sablonra, amely egy @agent objektumhoz társított küldetések gyűjteményét jeleníti meg. Közvetlenül az alábbiakban egy Ruby Gem módszerét is használja a @missions gyűjtemény lapozására.

Ez egy kis rész a sablonból, amely jól mutatja, hogy ez nem más, mint egy statikus HTML rész, amely dinamikus injekciókat tartalmaz valamilyen Ruby-kódtól. Ha nem használnánk ilyen sablonokat, akkor kézzel kell írnunk kódot minden új objektumhoz, amelyet szeretnénk látni egy oldalon. Nem biztos benned, de ennél nagyobb rémálmat vagy időpazarlást nem tudok elképzelni. A sablonok praktikus eszközt nyújtanak a nézőréteg intelligensé és dinamikussá tételéhez anélkül, hogy ismételnénk önmagunkat.

Amint az a példából is látszik, a sablonok lehetővé teszik részleges sablonok használatát, amelyeket ott renderelhetünk, ahol szükséges. Itt lenne valahol egy _mission.html.erb részünk, amely segít megismételni a @mission objektumok gyűjteményét, amelyek viszont felkerülnek a misszió osztályunkba.

Mint látható, a sablonok nem varázslatosak, de nagyon hasznosak ahhoz, hogy a webalkalmazások fejlesztése sokkal hatékonyabb és szervezettebb legyen. Csak meg akartam győződni arról, hogy ezzel mindannyian ugyanazon az oldalon vagyunk, mielőtt belevágnék a Slimbe.

Mi a helyzet az ERB & Haml-lel?

Ha szereted ezeket az eszközöket használni, akkor teljesen rendben van. Nincs ezzel semmi baj. A helyzet az, hogy ha valami intelligensebbet keres, ami minimalista, akkor nehéz találni valamit, ami tovább megy, mint a Slim. Számomra ez a legkorszerűbb sablonmegoldás Ruby landon, amelyet ismerek. Mindannyian jól működnek, ezért ez személyes preferencia kérdése.

Elkezdeni

Karcsú sínekkel

Nem meglepő, van ennek egy gyöngyszeme.

Gemfile

Héj

Ez az, készen vagyunk. Mivel telepítette ezt a drágakövet, a Slim betöltődik és inicializálódik, amikor az alkalmazás betöltődik. Ezenkívül az Ön kényelme érdekében, amikor vezérlőket generál a síngenerátorokon keresztül, automatikusan kap .slim nézetfájlokat a nézetéhez. - .html.erb fájlok már nem. Az állványokkal ugyanúgy működik, de remélem, hogy nem igazán használja őket!

Ennek a viselkedésnek a bemutatására azoknak az embereknek, akik még nem ismerik a Rails generátorokat, létrehozok egy vezérlőt a titkosszolgálat operatív alkalmazottai számára, amely az összes szokásos REST vezérlő művelettel rendelkezik:

Héj

Többek között megkapja az összes szükséges .slim fájlt. A Rails egy extra .html-t is betesz oda - ez természetesen megszabadulhat, ha zavar. Csak az számít, hogy a slim fájlkiterjesztés már megvan, és hogy készen áll a Slim kódjának előzetes feldolgozására. Hurrá!

A következő lépés az alkalmazás elrendezésének megnyitása és a kazánlap kódjának kicserélése valami vékonyra. Ne felejtse el átnevezni az application.html.erb fájlt application.slim (vagy application.html.slim névre). Kicsit már karcsúsítottunk - még a fájlnév is elvesztett egy kis súlyt.

app/nézetek/elrendezések/application.slim

Semmi divatos, de jó kezdet - és amilyen egyszerű vagyok, azt hiszem.

Pillanatkép

bevezetés

Megjegyzendő, hogy ha valaha kíváncsi arra, hogy a drágakő melyik verzióját telepítette, akkor ez a kis parancs megmondja - természetesen bármelyik drágakő számára is hasznos:

Héj

Megmondja, hol van tárolva, és melyik verziója van jelenleg ennek a drágakőnek. A kimenet így néz ki:

Karcsú Sinatra

A közeli Sinatra rajongók számára meg akartam említeni, hogy hogyan is kezdjünk el. Először természetesen be kell telepítenünk a drágakövet.

Héj

És ezek után már majdnem kész. A Sinatra alkalmazásában csak meg kell követelnie a Slim alkalmazást, és jól megy.

some_sinatra_app.rb

Itt egy inline sablon segítségével írtam a Slim jelölést ugyanabba a fájlba, és elmondtam Sinatrának, hogy a Slim-et akarom használni az indexfájlhoz, amikor lekérési kérelmet küld a gyökérútvonalra. Csak be kellett mutatnom az inline sablont egy göndör zárójel blokkba. Amit a @@ index alatt látsz - ami az indexsablont jelöli - az mind a fehértérben érzékeny Slim szintaxis.

Pillanatkép

Itt az ideje, hogy megmutassam, hogyan kell írni egy kis Slim-et.

Szintaxis

HTML címkék

HTML nyilatkozat

Kezdjük a legegyszerűbbel, a doctype deklarációval. Mint valószínűleg tudja, és már el is felejtette, ezt a HTML-dokumentum tetején kell deklarálni - a tényleges címke előtt. FYI, ez nem HTML címke, és utasítja a böngészőt a HTML oldal verziójáról.

A különböző verziók közül a HTML5-hez csak egy létezik: - köszönöm isten! -, amit pontosan akkor kapunk, amikor a doctype html vagy az 5 doctype-t Slim-be írjuk.

ID parancsikon # és osztály parancsikon .

A kezelői kód megírása rengeteg osztályt jelent, és mindig olyan kevés azonosítót - remélem. Annak elkerülése érdekében, hogy ezeket újra és újra megírja, a Slim több mint félúton találkozik veled, és lehetővé teszi az egész folyamat rövidzárlatát. Hadd mutassam meg, mire gondolok. Vegyük a következő Slim kódot:

Ezt a HTML-kimenetet állítják össze:

Amint láthatja, a pont azt sugallja a Slimnek, hogy szeretne osztályt használni, és az ezt követő név az, amit meg akar nevezni. Ugyanez vonatkozik az azonosítókra is - csak a hash szimbólumot (más néven font jel) használja, amely elvégzi a trükköt. Az ügyes olvasók biztosan felismerték, hogy a vezető címke nélküli verziók létrehozzák a megfelelő osztály vagy azonosítójú div létrehozását - ami látható

Ha akarod, a Slim kódodban is kifejezőbb lehet. Senki sem akadályozza, hogy kézzel írd meg a jó osztályaidat és az azonosítódat. Ha valahogy úgy érzed, hogy kötődsz ehhez, hajrá! Szeretem a tömörebb verziót, mert ezáltal elkerülhetem az idézetek és az ismétlődő szövegek beírását. Rajtad múlik - bármi is tesz boldoggá! Az alábbi kód egy kicsit bőbeszédűbb, de ugyanazt a HTML-t adja vissza, mint fent:

Most nem ez a szépség dolga? Képzelje el ezeket a rettegett HTML-címkéket, amelyeket Önnek nem kell írnia, plusz megszabadulva az összes felesleges szögletes zárójeltől. Biztos, hogy a kódszerkesztő sok munkát végezhet neked is, de a szerkesztő is elolvassa helyetted a kódot? Pontosan!

Amikor visszajön, hogy elolvassa a kódját, egy tömör dokumentumra is szüksége van, amelyet vizuálisan nagyon könnyen emészthet. Úgy gondolom, hogy ez az egyszerű példa mutatja legjobban, hogy mit nyújt egy olyan eszköz, mint a Slim. Ezek az apróságok jelentenek nagyszerű eszközt és időmegtakarítást hosszú távon. Még akkor is, ha csak pontosan ehhez a funkcióhoz használja, és egyelőre figyelmen kívül hagyja a többi fejlettebb funkciót, a Slim-re való áttérés máris nagyon megtérülne.

Inline címkék

Tegyük fel, hogy több címkéje van, amelyeket be szeretne építeni a kompaktabbá vagy bármi másért. Tehát ahelyett, hogy új sorra törne, láncolhatja őket úgy, hogy ezeket a címkéket kettősponttal választja el: Az alábbi két példa ugyanazt a kimenetet adja.

HTML kimenet:

A második változat a beillesztett címkék miatt minimálisabb, és ez lenne az én preferenciám. Végül is a kompakt jó, nem? Szerintem ez az eset jól mutatja, hogy a Slim egyenletesen egyensúlyoz a kompakt és a rejtélyes között. Igen, kell egy kis szoktatás, és egyes esetekben további attribútum burkolók is hasznosak (lásd alább a burkolókról). Hívj őrültnek, de egészen biztos vagyok benne, hogy a Slim-et úgy fogod olvasni, mint a szokásos HTML-jelöléseket.

Szöveges tartalom

A szövegírás természetesen olyan egyszerű, mint amire számíthat. Csak adja hozzá a címkéi után.

HTML kimenet:

Nincs több hozzáfűzhető, amilyen egyszerűen csak lehet!

Attribútumok

A HTML-attribútumok, amelyek további információkat nyújtanak a címkékről, az alábbiak szerint foglalhatók el:

HTML kimenet:

Alapvetően láncolhatja őket, és a Slim elválasztja a szöveges tartalomtól - ha van. Ha alaposan megnézi, láthatja, hogy az img tagünknek van egy perjel, amely kifejezetten bezárja a tageket a Slim-ben. Képek vagy több összevissza címke esetében ez biztosan hasznos. Egyébként a HTML5 nem követeli meg, hogy az attribútumneveket kisbetűvel írja, és ne használjon idézőjeleket az attribútumértékek körül. Mindazonáltal a W3C javasolja a szokásos gyakorlatot.

Összevonás attribútum

Ha címkénként több választója van, például osztályok vagy azonosítók, akkor ezt tömörebben is megírhatja százszorszép-láncolással. Ezeket a választókat a szóköz automatikusan határolja.

HTML kimenet:

Nem mintha ezek az azonosítók és osztályok összekeverednének, ez a legjobb gyakorlatot vagy bármi mást jelentene, de könnyen belátható, hogy a Slim hogyan működik egy ilyen tekervényes példában. Nagyon klassz, mi? Óvatosan - ezeknek a szelektoroknak a többsoros elosztása nem működik attribútum burkolók nélkül (lásd a következő szakaszt).

Egy másik lehetőség az lenne, ha karakterláncokkal vagy csak szimbólumokkal rendelkező tömböt használna az attribútumokba való egyesítéshez.

HTML kimenet:

Könyvemben ezt jól ismerhetőnek nevezném, de nem próbálom aktívan használni. Gondolom, hasznos lehet, ha interpolálni akarsz valamit.

Attribútum burkolók

A Slim csomagolókat kínál, amelyek megkönnyítik attribútumainak olvashatóságát. Lehet, hogy nem lesz mindig szükség, de hasznos tudni, hogy a sok attribútumú címkéhez szükség van-e némi szelídítésre. Az attribútumok becsomagolásához a következő elválasztók bármelyikét használhatja: <>, [] és () .

HTML kimenet:

Ha így könnyebben megszervezheti a jelölést, akkor hajrá! Amint azt a második a és a h3 címkék szemléltetik, az attribútumokat és a választókat akár több vonalon is eloszlathatja. Úgy tűnik, hogy a behúzást nagyon elnézően hajtják végre a fehértér érzékenységét illetően. Azt hiszem azonban, hogy ez nem lesz sokáig, és nem lesz nagy szüksége burkolókra. Pillanatok alatt megszokja a barebones Slim szintaxist, és különleges alkalmakkor megmenti őket - ahogy valószínűleg érdemes.

A beillesztett címkék esetében a csomagolók néha jól jöhetnek. Amint az alábbi példában is megfigyelhető, szóközöket használhat a határolókkal annak érdekében, hogy még olvashatóbbá váljon - csak mellékes megjegyzés.

HTML kimenet:

Attribútum Interpoláció

Mondott valaki interpolációt? Az idézett attribútumokon belül szükség esetén a Ruby segítségével interpolálhatja a kódot. Egy egyszerű példa elegendő ahhoz, hogy szemléltesse ezt a viselkedést:

Megint nem olyasmi, amit napi szinten használhat, de az biztos, hogy jó, ha a trükkökben van. Az attribútumértékek alapértelmezés szerint megkerülésre kerülnek. Ha le szeretné tiltani ezt a viselkedést, csak használja a == parancsot .

Használhatja a teljes Ruby-t az attribútumaival való játékhoz is. Csak dobja be az egyenlőségjelet oda, ahol Ruby kódot szeretne végrehajtani, és készen áll az indulásra. A második cikkben további információkat talál a Ruby-kód kimenetéről a Slim sablonokban.

Ez természetesen azt is jelenti, hogy az attribútumokban az egyszerű logikai rendszert ugyanúgy használhatja.

Groovy, menjünk tovább!

Végső gondolatok

Remélem, most már jól érzékeli, hogy a Slim miért jó választás minden sablonigényéhez Ruby országban. Ha jelenleg még inkább a Haml vagy az ERB használatát szeretné, idővel megnőhet az étvágya a Slim iránt. Nem azt mondom, hogy ez egy megszerzett íz vagy bármi, csak az, hogy ezt sokan nem a karrierjük elején veszik fel - talán azért, mert még nem érezték azt a fájdalmat, hogy újra és újra megírják ezt a felesleges felárat. Ennek a cikknek tartalmaznia kell az induláshoz szükséges alapokat.

A Slim természetesen többet kínál - különösen néhány speciális funkciót, amelyeket mindenképpen meg akar nézni. A következő cikkben egy részletesebb részlettel kezdünk, amely a Ruby-kód sablonokba történő kiírásáról szól - és természetesen még sok minden másról. Ott találkozunk!