Защо тънък?

Ако живеете и дишате в Рубинска земя и вече сте изстреляли Хамл, вероятно вече ще знаете няколко аргумента, които ще изведа. Мисля, че въпреки това е добра идея да продължите, защото може би вече сте решили да използвате по-минималистичен механизъм за шаблониране и бих искал да видите и предимствата, които Slim предлага.

Преди да се потопим в това защо Slim е готин, искам да разкажа какво всъщност е Slim и какво прави за вас. Документацията обобщава това доста добре:

„Slim е бърз, лек шаблонен двигател с поддръжка за Rails 3 и 4“.

Можете също да го използвате със Sinatra и дори обикновен багажник. Така че, ако сте малко уморени от използването на ERB за писане на вашите шаблони или не сте супер доволни от това, което Haml може да предложи, тогава Slim е точното дърво за лаене.

Що се отнася до синтаксиса му, хората зад Slim се опитваха да намерят отговор на следния въпрос: „Какъв е минимумът, необходим за това?“ За писане на минималното количество преден код, което е възможно, това със сигурност звучи като правилния въпрос.

Предлага ли Slim перфектно решение за всички ваши проблеми с шаблонирането? Вероятно не, но, честно казано, може да предложи най-доброто! Лесно ли е да се научиш? Мисля, че е така, но е трудно да се разбере какво другите хора смятат за лесно. Бих казал това обаче: отнема малко време, за да свикнете, но определено не е ракетна наука. Така че няма нужда да се чувствате уплашени, ако сте малко нови в кодирането на нещата. Ще прекарате ли добре с него? Абсолютно!

И така, защо Slim? Отговорът е съвсем ясен, мисля. Вашата маркировка трябва да бъде възможно най-четлива и красива! Трябва да си прекарате добре с него и колкото по-малко време ви е необходимо, за да прекарате блуждайки през тонове от етикета, толкова по-добре.

Какво е красиво, може да попитате? Разбира се, това не е отговор, с който ще се опитам да се справя, но минималността в това отношение рядко вреди. Ами да станеш супер загадъчен, защото механизмът за шаблониране се опитва да бъде супер интелигентен, като е минимален? Това е справедлива загриженост и ще се радваме да чуем, че екипът зад Slim приема много сериозно това. Те искат да премахнат колкото е възможно повече от обикновения стар HTML и да разкрият само основните части - и всичко това, без да станат твърде загадъчни. Техният основен екип се опитва да направи дори крачка отвъд това и те наистина са загрижени за естетиката на Slim кода. Доста добра сделка, не мислите ли?

Не е ли много по-хубаво, ако можете просто да погледнете шаблон и да можете лесно да смилате какво се случва? Шаблоните могат да се превърнат в много „претъпкано“ място - дори ако използвате интелигентно частици - и като следствие, искате да намалите количеството шум до абсолютния минимум.

Може би сте опитвали синтаксиса с отстъпи Sass (.sass)? Надявам се, че сте, защото това е обикновена дрога! Ако е така, вероятно ще имате подобна оценка за това, което Slim може да предложи. Освен това е чувствителен към пробелите, което води до наистина кратък и четим код. Нека вземем тази част от HTML/ERB кода и да я сравним със Slim.

Нека да разгледаме тънкия еквивалент:

Първото нещо, което хората често разпознават, е: „Хей, без затварящи тагове!“ Готино? Разбира се, още не сте свикнали със синтаксиса, така че в началото той може да изглежда малко чужд, но съм сигурен, че можете да оцените колко лаконично се чете. Няма леви/десни ъглови скоби и няма нужда да пишете div и минималистични селектори, така че вместо това можем да се съсредоточим върху името, което имат идентификаторите и класовете. Чувства се много по-малко разхвърлян и по-организиран, не мислите ли?

За сравнение, ето версията на Haml. Наистина не е замислена като възможност да удряш Haml - тя просто ти показва колко е подобна, но също така, че Slim прави крачка напред с избора си на минимален синтаксис. Резултатът е, че е дори по-елегантен от Haml, мисля.

Защо да отида толкова минимално, но все пак да ме карат да напиша знака% навсякъде? Показалецът ми няма специална мотивация да грабва Shift-5 през цялото време. Можете ли да персонализирате това поведение? Почти сигурен или поне се надявам! Но дизайнът изглежда малко погрешен в това отношение и по-малко спартански в сравнение с Slim. Осъзнавам, че това също е въпрос на вкус, така че ще го оставя така.

Преди да влезем в месестите части, оставете ме да подпухна за момент и да обобщя това, което според мен прави learning Slim достойна инвестиция на вашето време:

  • Това е бързо.
  • Супер четим.
  • Той има интелигентен синтаксис.
  • Естетиката му е минимална.
  • Той е силно конфигурируем
  • Удобен е с показалец.
  • Това е шаблон на ниво шеф.
  • Забавно е да пишеш и изглежда дрога.
  • Автоматично избягване на HTML по подразбиране.
  • Супер хубави Rails и Sinatra интеграция.
  • Много минимални шаблони, които са лесни за поддръжка.
  • Той е обширен и ви позволява да пишете плъгини и разширения.
  • Има режим без логика за моменти, когато искате да изведете HTML, но нямате причина да включвате Ruby код.
  • Той има конфигурируеми преки пътища за етикети - което е доста приятна функция за персонализиране на двигателя според вашите нужди.
  • И накрая, защото синтаксисът на Slim се ръководи от един много страхотен девиз: „Какъв е минимумът, необходим за тази работа“. Това е много трудно да не се хареса.

Какво представляват шаблоните?

От гледна точка на опит в програмирането, ако смятате, че сте повече от начинаещата страна на нещата, ще се опитам да ви дам едно бързо двупосочно пътуване, преди да започнем да използваме Slim. Когато хората говорят за шаблони, те най-вече имат предвид обикновена HTML маркировка с динамичен код, който често се използва за управление на потока, инжектиране на обект или частично изобразяване на шаблон (частици). Например, когато контролерът ви предоставя променливи на екземпляра, които могат да бъдат използвани от изгледа чрез заместване на променлива (instance) за показване на атрибути от този обект. Всичко това се случва чрез избрания от вас процесор на шаблони - ERB, Haml, Slim и други подобни - който комбинира всички ваши уеб шаблони в крайна уеб страница. Шаблоните също могат да се използват за генериране на XML и RSS емисии, както и други форми на структурирани текстови файлове.

С шаблоните можете да дефинирате различни „оформления“, които обработват определени части от вашия уебсайт, както и данните, които трябва да се показват систематично с най-малкото повторение. Откакто сте започнали да играете с Rails, със сигурност използвате ERB за точно такива сценарии. ERB взема части от обикновен текст, предава ги в окончателния документ и обработва само код, който е маркиран като такъв. Няма да навлизам в подробности как работи ERB и предполагам, че имате основни познания, преди да се потопите в Slim. Не бих препоръчал да използвате Slim, ако все още не сте запознати с начина на шаблониране на Rails по подразбиране, тъй като ще имате много по-лесно време да играете с Slim, ако разбирате как това работи нестандартно в Rails.

По-долу е даден основен пример за ERB на шаблон, който показва колекция от мисии, свързани с обект @agent. Точно отдолу, той също използва метод от Ruby Gem за разбиване на колекцията @missions.

Това е малка част от шаблон, която показва добре, че не е нищо повече от статична HTML част, която има някои динамични инжекции от някакъв Ruby код. Ако не използвахме шаблони като този, ще трябва ръчно да напишем код за всеки нов обект, който искаме да видим да се показва на страница. Не съм сигурен за вас, но не мога да си представя по-голям кошмар или загуба на време от това. Шаблоните ни дават удобен инструмент за превръщане на нашия изглед слой интелигентен и динамичен, без да се повтаряме.

Както можете да видите и от този пример, шаблоните ни позволяват да използваме частични шаблони, които можем да изобразим, когато е необходимо. Тук бихме имали _mission.html.erb частично някъде, което ни помага да прегледаме колекция от обекти @mission, които от своя страна да бъдат изброени в класа на мисиите ни.

Както можете да видите, шаблоните не са нищо магическо, но са изключително удобни, за да направят разработването на уеб приложения много по-ефективно и организирано. Просто исках да се уверя, че всички сме на една страница с това, преди да се потопим в Slim.

Ами ERB & Haml?

Ако искате да използвате тези инструменти, това е напълно добре. Нищо лошо в това. Работата е там, че ако търсите нещо по-умно, което е по-минималистично, трудно е да намерите нещо, което отива по-далеч от Slim. За мен това е най-опростеното решение за шаблониране в Ruby land, което познавам. Всички те работят добре, така че е въпрос на лични предпочитания.

Приготвяме се да започнем

Тънък с релси

Не е изненада, има скъпоценен камък за това.

Gemfile

Черупка

Това е всичко, готови сме. Тъй като сте инсталирали този скъпоценен камък, Slim ще се зарежда и инициализира при всяко зареждане на приложението ви. Също така, за ваше улеснение, когато генерирате контролери чрез релси генерира контролер, вие автоматично ще получите .slim преглед на файлове за вашия изглед - .html.erb файлове не повече. Същото работи и със скелета, но се надявам да не ги използвате наистина!

За да демонстрирам това поведение за хора, които са нови в използването на Rails генератори, ще създам контролер за оператори на тайни служби, който има всички стандартни действия на REST контролера:

Черупка

Наред с други неща, ще получите всички .slim файлове, от които се нуждаете. Rails поставя и допълнителен .html - можете да се отървете от това, ако това ви притеснява, разбира се. Важното е само, че тънкото разширение на файла вече е налице и че е готово за предварителна обработка на вашия тънък код. Да!

Следващата стъпка ще бъде да отворите оформлението на приложението си и да замените шаблона с нещо тънко. Освен това не забравяйте да преименувате файла application.html.erb на application.slim (или application.html.slim, ако искате). Вече сме отслабнали - дори името на файла е отслабнало.

app/views/layout/application.slim

Нищо изискано, но добро начало - и колкото се може по-лесно, мисля.

Екранна снимка

шаблони

Като странична бележка, ако някога ви е интересно коя версия на скъпоценния камък сте инсталирали, тази малка команда ще ви каже - това е удобно и за всеки скъпоценен камък, разбира се:

Черупка

Той ви казва къде се съхранява и коя версия в момента има този скъпоценен камък. Резултатът изглежда така:

Тънък със Синатра

За ентусиастите от Синатра сред вас, исках да спомена и как да започнете. Първо трябва да инсталираме скъпоценния камък, разбира се.

Черупка

И след това почти сте готови. Във вашето приложение Sinatra просто трябва да изисквате Slim и сте готови.

some_sinatra_app.rb

Тук използвах вграден шаблон, за да напиша маркировката Slim в същия файл и казах на Sinatra, че искам да използвам Slim за индексния файл, когато прави заявка за получаване към главния път. Просто трябваше да се позова на вградения шаблон в блок с фигурни скоби. Това, което виждате под индекса @@ - което означава шаблона на индекса - е всичко, чувствително към пробелите, тънък синтаксис.

Екранна снимка

Време е да ви покажа как да пишете някои тънки.

Синтаксис

HTML тагове

HTML декларация

Нека започнем с най-простата, декларацията за докт. Както вероятно знаете и вече сте забравили, това трябва да бъде декларирано върху вашия HTML документ - преди действителния маркер. За пръв път, това не е HTML таг и инструктира браузъра за версията на HTML страницата.

Сред различните версии за, има само една за HTML5: — благодаря Боже! —Което е точно това, което получаваме, когато пишем doctype html или doctype 5 в Slim.

ID пряк път # и пряк път за клас .

Писането на преден код означава много класове и толкова малко идентификатори - надявам се. За да избегнете писането им отново и отново, Slim ви среща повече от половината и ви позволява да направите късо съединение на целия процес. Позволете ми да ви покажа какво имам предвид. Вземете следния тънък код:

Това се компилира към този HTML изход:

Както можете да видите, точката подсказва на Slim, че искате да използвате клас, а името, което следва, е това, което искате да го наименувате. Същото важи и за идентификационните номера - просто използвате символа хеш (известен още като знак за паунд), който прави трика. Проницателните читатели със сигурност разпознаха, че версиите без водещ маркер задействат създаването на div със съответния клас или id - което може да се види за

Можете също така да бъдете по-изразителни в своя тънък код, ако искате. Никой не ви пречи да пишете на ръка своите добри уроци и идентификатори. Ако по някакъв начин се чувствате привързани към това, продължете! Харесва ми по-лаконичната версия, защото също така ми позволява да избягвам да пиша кавички и повтарящ се текст през цялото време. От вас зависи - каквото ви прави щастливи! Кодът по-долу е малко по-подробен, но показва същия HTML като по-горе:

Не е ли това нещо красота? Представете си всички тези страховити HTML тагове, които не е нужно да пишете сами, плюс избавяне от всички излишни заграждащи ъглови скоби. Разбира се, вашият редактор на код може да свърши голяма част от тази работа и за вас, но редакторът ви също ли чете кода вместо вас? Точно!

Когато се върнете, за да прочетете кода си, вие също искате кратък документ, който е изключително лесен за смилане визуално. Мисля, че този прост пример показва най-добре какво може да предложи инструмент като Slim. Именно тези малки неща са един чудесен инструмент и спестяване на време в дългосрочен план. Дори ако го използвате само за точно тази функционалност и игнорирате останалите по-усъвършенствани функции засега, превключването към Slim вече би се отплатило много.

Вградени тагове

Да предположим, че имате няколко маркера, които искате да имате вградени, за да бъдат по-компактни или нещо друго. Така че, вместо да преминавате към нов ред, можете да ги веригирате, като разделите тези маркери с двоеточие:. И двата примера по-долу представят едни и същи резултати.

HTML изход:

Втората версия е по-минимална поради вградените тагове и ще бъде моето предпочитание. В крайна сметка, компактното е добро, нали? Мисля, че този случай показва добре, че Slim равномерно балансира между компактен и загадъчен. Да, отнема малко време да свикнете и в някои случаи са полезни допълнителни обвивки на атрибути (вижте повече за обвивките по-долу). Наречете ме луд, но съм почти сигурен, че ще четете Slim като обикновена HTML маркировка за миг.

Текстово съдържание

Писането на текст е толкова лесно, колкото бихте очаквали, разбира се. Просто го добавете след етикетите си.

HTML изход:

Нищо повече за добавяне, толкова лесно, колкото може да бъде!

Атрибути

HTML атрибутите, които предоставят допълнителна информация за маркерите, могат да бъдат включени, както следва:

HTML изход:

По същество можете да ги свържете и Slim ще го отдели от текстовото съдържание - ако присъства. Ако се вгледате внимателно, можете да видите, че нашият таг img има наклонена черта, която изрично затваря маркерите в Slim. За изображения или по-сложни маркери това със сигурност е полезно. Между другото, HTML5 не изисква от вас да пишете имената на атрибутите с малки букви, нито да използвате кавички около стойностите на атрибутите. Въпреки това W3C препоръчва стандартната практика.

Обединяване на атрибути

Ако имате множество селектори като класове или идентификатори на маркер, можете също да напишете това по-кратко, като ги свържете с маргаритки. Тези селектори ще бъдат автоматично разграничени с интервали.

HTML изход:

Не че смесването на всички тези идентификатори и класове по този начин представлява най-добрите практики или нещо подобно, но е лесно да се види как работи Slim в такъв заплетен пример. Доста готино, а? Внимателно обаче - разпространението на тези селектори през множество редове няма да работи без обвивки на атрибути (вижте следващия раздел).

Друг вариант би бил да се използва масив със низове или просто символи за обединяване в атрибути.

HTML изход:

В книгата си бих нарекъл тази, която трябва да знаете, но не е нещо, което се опитвам да използвам активно. Може да е полезно, ако искате да интерполирате нещо, предполагам.

Опаковки на атрибути

Slim ви предлага обвивки, за да улесни четенето на атрибутите ви. Може да не е необходимо през цялото време, но е удобно да се знае дали таг с много атрибути се нуждае от опитомяване. Можете да използвате всеки от следните разделители, за да обгърнете атрибути: <>, [] и () .

HTML изход:

Ако това е по-лесен начин да организирате маркирането, продължете! Както е илюстрирано от вторите маркери a и h3, можете дори да разпространявате атрибути и селектори през множество редове. Вдлъбнатините изглежда се прилагат много прощаващо по отношение на чувствителността на пробелите. Предполагам обаче, че няма да е за дълго и няма да ви трябват много обвивки. Ще свикнете със синтаксиса barebones Slim за нула време и ще ги запазите за специални случаи - както вероятно би трябвало.

За вградените етикети обвивките може да са ви от полза от време на време. Както можете да забележите и в примера по-долу, можете да използвате интервали с разделителите, за да го направите още по-четлив - само странична бележка.

HTML изход:

Интерполация на атрибутите

Някой каза ли интерполация? В рамките на цитираните атрибути можете да използвате Ruby за интерполиране на код, ако е необходимо. Един прост пример трябва да е достатъчен, за да илюстрира това поведение:

Отново не нещо, което бихте могли да използвате ежедневно, но със сигурност е добре да имате в чантата си трикове. Стойностите на атрибутите ще бъдат избягвани по подразбиране. Ако имате нужда от това поведение деактивирано, просто използвайте == .

Можете да използвате пълния Ruby, за да играете и с вашите атрибути. Просто хвърлете знака за равенство там, където искате да бъде изпълнен Ruby код, и сте готови да отидете. Във втората статия ще намерите повече информация за извеждането на кода на Ruby във вашите тънки шаблони.

Това, разбира се, означава също, че можете да използвате прости булеви числа по същия начин и в атрибутите си.

Groovy, да продължим!

Финални мисли

Надявам се, че сега имате добра представа защо Slim е добър избор за всички ваши нужди от шаблони в Ruby land. Ако все още предпочитате да използвате Haml или ERB в момента, може да развиете апетит за Slim с течение на времето. Не казвам, че това е придобит вкус или нещо подобно, просто това не е нещо, което много хора започват в началото на кариерата си - може би защото все още не са изпитвали болката да пишат цялата тази излишна надценка отново и отново Тази статия трябва да ви предостави основите, от които се нуждаете, за да започнете.

Slim може да предложи още, разбира се - особено няколко разширени функции, които определено искате да разгледате. В следващата статия ще започнем с по-подробен раздел за извеждането на Ruby кода във вашите шаблони - и много повече, разбира се. Ще се видим там!