Als je in Ruby land leeft en ademt en Haml eerder een injectie hebt gegeven, weet je waarschijnlijk al een paar van de argumenten die ik ga maken. Ik denk dat het niettemin een goed idee is om mee te gaan, omdat je misschien al hebt besloten om een meer minimalistische sjablonengine te gebruiken en ik wil graag dat je de voordelen ziet die Slim ook biedt.
Voordat we ingaan op de reden waarom Slim cool is, wil ik bedenken wat Slim eigenlijk is en wat het voor je doet. De documentatie somt dit heel mooi op:
"Slim is een snelle, lichtgewicht sjablonengine met ondersteuning voor Rails 3 en 4".
Je kunt het ook gebruiken met Sinatra en zelfs gewoon Rack. Dus, als je een beetje moe bent van het gebruik van ERB voor het schrijven van je sjablonen of als je niet super tevreden bent met wat Haml te bieden heeft, dan is Slim precies de juiste boom om te blaffen.
Met betrekking tot de syntaxis probeerden de mensen achter Slim een antwoord te vinden op de volgende vraag: "Wat is het minimum dat nodig is om dit te laten werken?" Voor het schrijven van de minimale hoeveelheid front-end code die mogelijk is, klinkt dit zeker als het recht vraag om te stellen.
Biedt Slim een perfecte oplossing voor al uw sjabloonkwesties? Waarschijnlijk niet, maar eerlijk gezegd, zou het gewoon het beste kunnen bieden! Is het gemakkelijk om te leren? Ik denk van wel, maar het is moeilijk om te weten wat andere mensen als gemakkelijk beschouwen. Ik zou dit echter wel zeggen: het is een beetje wennen, maar het is absoluut geen rocket science. Dus je hoeft je niet geïntimideerd te voelen als je een beetje nieuw bent in de codering. Ga je er een leuke tijd mee hebben? Absoluut!
Dus, waarom Slim? Het antwoord is vrij eenvoudig, denk ik. Uw opmaak moet zo leesbaar en mooi mogelijk zijn! Je zou er een goede tijd mee moeten werken, en hoe minder tijd je nodig hebt om door tonnen tagmateriaal te waden, hoe beter.
Wat is mooi, vraag je je misschien af? Dat is natuurlijk geen antwoord dat ik zal proberen aan te pakken, maar als ik minimaal ben, doet dat zelden pijn. Hoe zit het met super cryptisch te worden omdat de sjablonengine super slim probeert te zijn in minimaal zijn? Dat is een eerlijke zorg, en u zult blij zijn te horen dat het team achter Slim dit zeer serieus neemt. Ze willen zoveel mogelijk van gewone oude HTML verwijderen en alleen de essentiële onderdelen onthullen, en dit alles zonder al te cryptisch te worden. Hun kernteam probeert nog een stap verder te gaan en ze maken zich echt zorgen over de esthetiek van Slim-code. Best goede deal, vind je niet?
Is het niet veel leuker als je gewoon naar een sjabloon kijkt en in staat bent om gemakkelijk te verteren wat er aan de hand is? Sjablonen kunnen een erg 'drukke' plek worden, zelfs als u intelligent gebruik maakt van deelpartijen, en als gevolg daarvan wilt u de hoeveelheid ruis tot het absolute minimum beperken.
Heb je misschien de ingesprongen Sass (.sass) -syntaxis geprobeerd? Ik hoop dat je dat hebt gedaan, want het is gewoon dope! Als dat zo is, zult u waarschijnlijk een soortgelijke waardering hebben voor wat Slim te bieden heeft. Het is ook witruimte gevoelig, wat leidt tot echt beknopte en leesbare code. Laten we dit stuk HTML / ERB-code nemen en het vergelijken met Slim.
<%= full_title(yield(:title)) %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => waar%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => waar%> <%= csrf_meta_tags %><%= link_to "sample app", 'root_path', id: "logo" %><%= yield %>
Laten we naar het Slim-equivalent kijken:
doctype html html head title = 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 body header.navbar .logo = link_to "voorbeeldapp", 'root_path', id: "logo" nav ul.navbar-right li = link_naar "Home", 'root_path' li = link_to "Help", ' help_path 'li = link_to' Log in ',' login_path '.main = opbrengst
Het eerste dat mensen vaak herkennen, is: "Hé, geen sluitingslabels!" Cool? Natuurlijk ben je de syntax nog niet gewend, dus in het begin ziet het er misschien wat vreemd uit, maar ik ben er zeker van dat je kunt waarderen hoe bondig het is. Geen haakjes tussen haakjes links en rechts, en geen behoefte om divs en minimalistische selectors te schrijven, dus in plaats daarvan kunnen we ons concentreren op de naam die de id's en klassen hebben. Het voelt veel minder rommelig en meer georganiseerd, vind je niet?
Ter vergelijking, hier is de Haml-versie. Het is echt niet bedoeld als een mogelijkheid om Haml te bashen - het laat je gewoon zien hoe vergelijkbaar het is, maar ook dat Slim nog een stap verder gaat met zijn keuze voor een minimale syntaxis. Het resultaat is dat het zelfs eleganter is dan Haml, denk ik.
Waarom zo minimaal gaan, maar nog steeds het type typen %
overal tekenen? Mijn wijsvinger heeft geen speciale motivatie om Shift-5 altijd te pakken. Kun je dat gedrag aanpassen? Vrij zeker, of ik hoop het tenminste! Maar het ontwerp lijkt wat dat betreft een beetje gebrekkig en minder spartaans in vergelijking met Slim. Ik besef dat dit ook een kwestie van smaak is, dus daar zal ik het bij laten.
!!! % html% head% title = 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% body% header.navbar .logo = link_to "voorbeeldapp", 'root_path', id: "logo"% nav% ul.navbar-right% li = link_to "Home", 'root_path'% li = link_to "Help", 'help_path'% li = link_to "Inloggen", 'login_path' .main = opbrengst
Voordat we in de vlezige delen springen, laat me een ogenblik gezwollen zijn en samenvatten wat volgens mij het leren van Slim een waardige investering van je tijd maakt:
In termen van programmeerervaring, als u denkt dat u meer aan de nieuwe kant bent, probeer ik u een korte rondreis te geven voordat we Slim gaan gebruiken. Wanneer mensen over sjablonen spreken, bedoelen ze meestal platte HTML-markeringen met dynamische code die vaak wordt gebruikt voor stroomcontrole, objectinjectie of gedeeltelijke sjabloon (deel) rendering. Bijvoorbeeld, wanneer een controller u instantievariabelen levert die kunnen worden gebruikt door de weergave via (instantie) variabele substitutie om kenmerken van dat object weer te geven. Dit alles gebeurt via de sjabloonprocessor van uw keuze - ERB, Haml, Slim en dergelijke - die al uw websjablonen combineert tot een uiteindelijke webpagina. Sjablonen kunnen ook worden gebruikt om XML- en RSS-feeds te genereren, evenals andere vormen van gestructureerde tekstbestanden.
Met sjablonen kunt u verschillende "lay-outs" definiëren die bepaalde delen van uw website behandelen, evenals de gegevens die systematisch moeten worden weergegeven met de kleinste hoeveelheid herhalingen. Sinds je met Rails begon te spelen, heb je ERB zeker gebruikt voor precies dit soort scenario's. ERB neemt de platte tekstgedeelten, geeft ze door aan het uiteindelijke document en verwerkt alleen code die als zodanig is gemarkeerd. Ik ga niet in op details hoe ERB werkt en stel je voor dat je een basiskennis hebt voordat je naar Slim duikt. Ik zou het gebruik van Slim niet aanraden als je niet al bekend bent met de standaard manier van sjabloneren van Rails, omdat je een veel eenvoudigere tijd hebt om met Slim te spelen als je begrijpt hoe dit uit de doos in Rails werkt.
Hieronder staat een eenvoudig ERB-voorbeeld van een sjabloon die een verzameling missies weergeeft die zijn gekoppeld aan een @middel
voorwerp. Direct eronder gebruikt het ook een methode van een Ruby Gem om het te pagineren @missions
verzameling.
<% if @agent.missions.any? %>Missies (<%= @agent.missions.count %>)
Dit is een kleine sectie van een sjabloon die mooi laat zien dat het niets meer is dan een statisch HTML-gedeelte dat enkele dynamische injecties van een of andere Ruby-code bevat. Als we sjablonen als deze niet gebruiken, moeten we handmatig code schrijven voor elk nieuw object dat we op een pagina willen weergeven. Niet zeker van je, maar ik kan me geen grotere nachtmerrie of verspilling van tijd voorstellen dan dat. Sjablonen bieden ons een handige tool om onze kijklaag slim en dynamisch te maken zonder onszelf te herhalen.
Zoals u ook aan dit voorbeeld kunt zien, kunnen sjablonen partiële sjablonen gebruiken die we waar nodig kunnen renderen. Hier zouden we een hebben _mission.html.erb
gedeeltelijk ergens, wat ons helpt om een verzameling van te herhalen @missie
objecten, die op hun beurt worden vermeld in onze missies
klasse.
Zoals u ziet, zijn sjablonen niets magisch, maar zijn ze superhandig om het ontwikkelen van web-apps een stuk efficiënter en georganiseerd te maken. Ik wilde er gewoon zeker van zijn dat we allemaal op dezelfde pagina staan voordat we naar Slim duiken.
Als je deze tools leuk vindt, is het prima. Daar is niets mis mee. Het punt is, als je op zoek bent naar iets slimmer dat minimalistischer is, dan is het moeilijk iets te vinden dat verder gaat dan Slim. Voor mij is het de meest gestroomlijnde template-oplossing in Ruby land die ik ken. Ze werken allemaal goed, dus het is een kwestie van persoonlijke voorkeur.
Geen verrassing, daar is een juweeltje voor.
gem 'slim-rails'
bundel installeren
Dat is alles. We zijn er klaar voor. Omdat u dit juweel hebt geïnstalleerd, wordt Slim geladen en geïnitialiseerd telkens wanneer uw app wordt geladen. Ook voor uw gemak, wanneer u controllers genereert via rails genereren controller
, je krijgt automatisch .slank
bekijk bestanden voor uw weergave-.html.erb
bestanden niet meer. Het werkt hetzelfde met scaffolds, maar ik hoop dat je ze niet echt gebruikt!
Om dit gedrag te demonstreren voor mensen die nieuw zijn bij het gebruik van Rails-generators, maak ik een controller voor medewerkers van de geheime dienst die alle standaard REST-controlleracties heeft:
rails genereren controller SecretServiceOperatives index nieuwe maken show bewerken update vernietigen
Onder andere krijg je alle .slank
bestanden die u nodig hebt. Rails zet een extra .html
daarbinnen ook - daar kun je natuurlijk vanaf komen als het je stoort. Het enige dat telt is dat de slanke extensie er al is en dat deze klaar is om je Slim-code voor te bereiden. Yay!
... invoke slim create app / views / secret_service_operatives create app / views / secret_service_operatives / index.html.slim create app / views / secret_service_operatives / new.html.slim create app / views / secret_service_operatives / create.html.slim create app / views / secret_service_operatives / show.html.slim create app / views / secret_service_operatives / edit.html.slim create app / views / secret_service_operatives / update.html.slim create app / views / secret_service_operatives / destroy.html.slim ...
De volgende stap zou zijn om uw applicatie-indeling te openen en de boilerplate-code te vervangen door iets Slims. Vergeet ook niet om de naam te wijzigen application.html.erb
bestand naar application.slim
(of application.html.slim
als je wilt). We zijn al een beetje afgeslankt, zelfs de bestandsnaam is wat afgenomen.
doctype html html head title = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags body header.navbar. logo = link_to "Spy-app", "root_path", id: "logo" nav ul.navbar-right li = link_naar "Home", 'root_path' li = link_to 'Help', 'help_path' li = link_to "Aanmelden" , 'sign_up_path' li = link_to "Log in", 'login_path' .main h1.welcome Welkom bij Boss Level Slim Templates! = opbrengst
Niets bijzonders, maar een goed begin - en zo eenvoudig als ik denk.
Als een kanttekening, als je nieuwsgierig bent naar welke versie van het juweel je hebt geïnstalleerd, zal dit kleine commando je vertellen - het is natuurlijk ook handig voor elk juweel:
bundelshow 'slim-rails'
Het vertelt je waar het is opgeslagen en welke versie dit juweeltje momenteel heeft. De uitvoer ziet er als volgt uit:
/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1
Voor de liefhebbers van Sinatra onder jullie, wilde ik vermelden hoe ook te beginnen. Eerst moeten we het juweel installeren, natuurlijk.
edelsteen installeer slank
En daarna ben je bijna klaar. In je Sinatra-app hoef je alleen maar Slim te bestellen en ben je klaar om te gaan.
vereisen 'sinatra' vereisen 'slank' krijgen ('/') slank: index __END__ @@ index doctype html html head title Slanke sjablonen body h1 Boss Level Ruby Templates met slank
Hier heb ik een inline-sjabloon gebruikt om de Slim-opmaak in hetzelfde bestand te schrijven en vertelde Sinatra dat ik Slim voor het indexbestand wilde gebruiken wanneer het een krijgen
verzoek om het root-pad. Ik moest alleen verwijzen naar de inline-sjabloon in een accoladeblok. Wat je hieronder ziet @@ inhoudsopgave
-wat de indexsjabloon betekent - is allemaal witruimte-gevoelig Slim-syntaxis.
Tijd om je te laten zien hoe je Slim kunt schrijven.
Laten we beginnen met de eenvoudigste, de doctype-verklaring. Zoals u waarschijnlijk weet en al bent vergeten, moet dit bovenop uw HTML-document worden gedeclareerd - vóór het eigenlijke label. Ter info, het is geen HTML-tag en geeft de browser instructies over de versie van de HTML-pagina.
Onder de verschillende versies voor , er is er maar één voor HTML5:
-godzijdank! - dat is precies wat we krijgen als we schrijven
doctype html
of doctype 5
in Slim.
doctype html html head doctype 5 html head
#
en Class Shortcut .
Het schrijven van de front-end code betekent een hoop lessen en nog maar weinig id's - ik hoop het. Om te voorkomen dat je dit steeds opnieuw schrijft, ontmoet Slim je meer dan halverwege en laat je het hele proces fundamenteel kortsluiten. Ik zal je laten zien wat ik bedoel. Neem de volgende Slim-code:
#logo h1.header .evil-wrapper h2 # author-name ul.books
Dit wordt gecompileerd naar deze HTML-uitvoer:
Zoals je kunt zien, suggereert de stip dat je Slim wilt gebruiken om een klasse te gebruiken, en de naam die volgt is wat je het wilt noemen. Hetzelfde geldt voor id's - u gebruikt gewoon het hash-symbool (ook wel dollarteken genoemd) dat de slag uitvoert. Slimme lezers erkenden ongetwijfeld dat de versies zonder een leidende tag de creatie van een div met de corresponderende klasse of id teweegbrengen - die te zien is voor en
. Best handig, vind je niet?
Je kunt ook expressiever zijn in je Slim-code als je dat wilt. Niemand belemmert je om met de hand je goede oude klassen en id's te schrijven. Als je je ergens gehecht aan voelt, ga ervoor! Ik vind de meer beknopte versie leuk, omdat ik daardoor ook altijd geen aanhalingstekens en herhaalde tekst kan typen. Het is aan jou - waar je ook gelukkig van wordt! De onderstaande code is een beetje meer uitgebreid maar geeft dezelfde HTML als hierboven:
div h1 div h2 ul
Is dat niet iets moois? Stel je al deze gevreesde HTML-tags voor die je niet zelf hoeft te schrijven, plus het wegwerken van alle overtollige insluitende punthaken. Natuurlijk kan uw code-editor ook veel van dit werk voor u doen, maar leest uw redacteur ook de code voor u? Precies!
Wanneer u terugkomt om uw code te lezen, wilt u ook een beknopt document dat visueel super gemakkelijk te verteren is. Ik denk dat dit eenvoudige voorbeeld het beste laat zien wat een tool als Slim te bieden heeft. Het zijn deze kleine dingen die samen een geweldige tool vormen en op de lange termijn een tijdswinst opleveren. Zelfs als je het alleen voor precies die functionaliteit gebruikt en de andere, meer geavanceerde functies voor nu negeert, zou het overschakelen naar Slim al snel vruchten afwerpen.
Stel dat u meerdere tags heeft die u inline wilt hebben om compacter te zijn of wat dan ook. Dus in plaats van naar een nieuwe regel te breken, kun je ze in een ketting plaatsen door deze tags te scheiden met een dubbele punt :
. Beide onderstaande voorbeelden geven dezelfde uitvoer weer.
ul li.first a href = "/ a" A link li a href = "/ b" B link ul li.first: a href = "/ a" A link li: a href = "/ b" B link
De tweede versie is minimaal vanwege de inline-tags en zou mijn voorkeur hebben. Compact is tenslotte goed, niet? Ik denk dat deze zaak mooi laat zien dat Slim gelijkmatig balanceert tussen compact en cryptisch. Ja, het is even wennen en in sommige gevallen zijn extra attribuut wrappers nuttig (zie hieronder meer over wrappers). Noem me gek, maar ik ben er vrij zeker van dat je Slim als normale HTML-opmaak in een mum van tijd zult lezen.
Het schrijven van tekst is natuurlijk net zo eenvoudig als je zou verwachten. Voeg het gewoon toe na uw tags.
h1 # welcome-header Uw funky welkomstbericht komt hier!
Je funky welkomstbericht komt hier!
Niets meer toe te voegen, gemakkelijk als het maar kan zijn!
HTML-kenmerken, die aanvullende informatie over de tags bieden, kunnen als volgt worden opgenomen:
a href = "http://slim-lang.com" title = "Slim Homepage" Ga naar de Slim-homepage img alt = "James Bond poseert samen met M" src = "images_8 / an-introduction-to-slim-templates_3. png "/
http://slim-lang.com "title =" Slim Homepage "> Ga naar de startpagina van Slim
Je kunt ze in principe ketenen en Slim zal het scheiden van de tekstinhoud - indien aanwezig. Als je goed kijkt, kun je zien dat onze img
tag heeft een trash-schuine streep, die expliciet tags sluit in Slim. Voor afbeeldingen of meer ingewikkelde tags is dit zeker handig. By the way, HTML5 vereist niet dat u de attribuutnamen in kleine letters schrijft en ook geen aanhalingstekens gebruikt rond attribuutwaarden. Het is niettemin aanbevolen standaardpraktijk door het W3C.
Als u meerdere selectors hebt, zoals klassen of id's per tag, kunt u dit ook beknopter schrijven door ze in serie te koppelen. Deze selectors worden automatisch gescheiden door witruimte.
h2 # big-header.agent-header.tagline Funky headline h3.small-header.agent # 007.tagline Kleine funky kop
Funky kop
Kleine funky kop
Niet dat al deze id's en klassen zo verward zijn, beste praktijken of iets anders zijn, maar het is gemakkelijk om te zien hoe Slim werkt in zo'n ingewikkeld voorbeeld. Best cool, toch? Voorzichtig, hoewel het spreiden van deze selectors over meerdere regels niet werkt zonder attribuut wrappers (zie volgende sectie).
Een andere optie is om een array met tekenreeksen of alleen maar symbolen te gebruiken om in attributen samen te voegen.
h2 class = ["agent-header", "tagline"] Funky headline h3 class =: agent,: double_o_seven,: tagline Kleine funky kop
Funky kop
Kleine funky kop
In mijn boek zou ik dit een goede kennis noemen, maar het is niet iets dat ik actief probeer te gebruiken. Het kan handig zijn als je iets wilt interpoleren, neem ik aan.
Slim biedt u wrappers om uw kenmerken leesbaarder te maken. Het is misschien niet altijd nodig, maar het is handig om te weten of een tag met veel attributen enige temmen nodig heeft. U kunt elk van de volgende scheidingstekens gebruiken om kenmerken in te pakken: ,
[]
en ()
.
a href = "http://slim-lang.com" title = "Startpagina" Ga naar de startpagina a href = "http://slim-lang.com/about.html" title = "Over pagina " Ga naar de pagina over h2 [id =" big-header "] Funky headline h3 (id =" small-header ") Een andere funky kop
Ga naar de startpagina Ga naar de pagina overFunky kop
Een andere funky kop
Als dat de gemakkelijkste manier is om de markup te organiseren, ga ervoor! Zoals geïllustreerd door de tweede een
en de h3
tags kunt u zelfs kenmerken en selectors verspreiden over meerdere lijnen. De inkeping lijkt zeer vergevingsgezind te worden afgedwongen met betrekking tot de gevoeligheid van de witruimte. Mijn gok is echter dat het niet lang zal duren, en je zult geen wrappers nodig hebben. Je zult snel gewend raken aan de slanke syntaxis van barebones en ze opslaan voor speciale gelegenheden, zoals je waarschijnlijk zou moeten doen.
Voor inline-tags kunnen wrappers soms handig zijn. Zoals je ook in het onderstaande voorbeeld kunt zien, kun je spaties gebruiken met de scheidingstekens om het nog beter leesbaar te maken, slechts een kanttekening.
ul li.long-link: a href = "http://slim-lang.com" title = "Startpagina" Ga naar de startpagina li.long-link.class.with-id: a [href = " http://slim-lang.com/about.html "title =" Over pagina "] Ga naar de pagina over li.c-link: a (href =" / c ") C link li: a [href =" / d "] D-link
Heeft iemand interpolatie gezegd? Binnen geciteerde attributen kun je Ruby gebruiken om code te interpoleren als dat nodig is. Een eenvoudig voorbeeld zou voldoende moeten zijn om dit gedrag te illustreren:
a href = "http: // # url" Ga naar # url
Nogmaals, niet iets dat je dagelijks zou kunnen gebruiken, maar het is zeker goed om in je zak met kunstjes te hebben. De attribuutwaarden worden standaard geëscaped. Als u dat gedrag uitgeschakeld wilt hebben, gebruikt u gewoon een ==
.
a href == "http: // # url" Ga naar # url
Je kunt full-on Ruby gebruiken om ook met je attributen te spelen. Gooi gewoon een gelijkteken erin waar u wilt dat een Ruby-code wordt uitgevoerd en u bent klaar om te gaan. In het tweede artikel vindt u meer informatie over het uitvoeren van Ruby-code in uw Slim-sjablonen.
ul li class = agent.role a href = (path_to_agent agent) = agent.name
Dat betekent natuurlijk ook dat je dezelfde booleans op dezelfde manier in je attributen kunt gebruiken.
input type = "text" disabled = false input type = "text" disabled = true input type = "text" disabled = nil
Groovy, laten we verder gaan!
Ik hoop dat je nu een goed idee hebt van waarom Slim een goede keuze is voor al je sjablooneisen in Ruby land. Als u op dit moment nog steeds liever Haml of ERB gebruikt, kunt u na verloop van tijd meer zin krijgen in Slim. Ik zeg niet dat het een verworven smaak is of zoiets, alleen dat het niet iets is dat veel mensen vroeg in hun carrière oppikken, misschien omdat ze nog niet de pijn hebben gevoeld om steeds weer die overdreven markup te schrijven. Dit artikel moet je de basis geven die je nodig hebt om te beginnen.
Slim heeft natuurlijk meer te bieden, vooral een paar geavanceerde functies die je zeker eens wilt bekijken. In het volgende artikel beginnen we met een meer gedetailleerd gedeelte over het uitvoeren van Ruby-code in uw sjablonen-en natuurlijk nog veel meer. Zie je daar!