Share
Se vivi e respiri in terra Ruby e hai dato a Haml una possibilità, probabilmente conoscerai già un paio degli argomenti che farò. Penso che sia comunque una buona idea seguirmi perché potresti aver già deciso di utilizzare un motore di modelli più minimalista e mi piacerebbe che tu vedessi i vantaggi che offre anche Slim.
Prima di approfondire perché Slim è cool, voglio parlare di ciò che Slim è in realtà e che cosa fa per te. La documentazione riassume molto bene questo aspetto:
"Slim è un motore di template veloce e leggero con supporto per Rails 3 e 4".
Puoi anche usarlo con Sinatra e persino con Rack. Quindi, se sei un po 'stanco di usare ERB per scrivere i tuoi modelli o non sei super soddisfatto di ciò che Haml ha da offrire, allora Slim è esattamente l'albero giusto per abbaiare.
Riguardo alla sua sintassi, le persone dietro Slim stavano cercando di trovare una risposta alla seguente domanda: "Qual è il minimo richiesto per fare questo lavoro?" Per scrivere la quantità minima di codice front-end possibile, questo sicuramente suona come il giusto domanda da chiedere.
Slim offre una soluzione perfetta per tutte le tue preoccupazioni relative ai modelli? Probabilmente no, ma francamente, potrebbe solo offrire il meglio! È facile da imparare? Penso di sì, ma è difficile sapere cosa gli altri considerano facile. Direi questo, però: ci vuole un po 'per abituarsi, ma non è assolutamente una scienza missilistica. Quindi non c'è bisogno di sentirsi intimiditi se si è un po 'nuovi dal punto di vista del codice. Ti divertirai? Assolutamente!
Quindi, perché Slim? La risposta è abbastanza semplice, penso. Il tuo markup dovrebbe essere il più leggibile e bello possibile! Dovresti divertirti lavorando con esso, e meno tempo hai bisogno di spendere troppe tonnellate di tag e meglio è.
Cosa è bello, potresti chiedere? Certo, non è una risposta che cercherò di affrontare, ma essere minimamente al riguardo raramente fa male. Che ne dici di diventare super criptici perché il motore dei template cerca di essere super intelligente nell'essere minimale? Questa è una giusta preoccupazione, e sarai felice di sapere che il team di Slim lo prende molto sul serio. Vogliono rimuovere il più possibile dal semplice vecchio HTML e rivelare solo le parti essenziali, il tutto senza diventare troppo criptici. Il loro team principale cerca di fare un passo in più, e sono davvero preoccupati per l'estetica del codice Slim. Abbastanza buono, non credi?
Non è molto più bello se puoi semplicemente dare un'occhiata a un modello ed essere in grado di digerire facilmente cosa sta succedendo? I modelli possono diventare un luogo molto "affollato", anche se si fa un uso intelligente di partial, e di conseguenza si desidera ridurre la quantità di rumore al minimo assoluto.
Hai forse provato la sintassi Sass (.sass) indentata? Spero che tu lo abbia fatto, perché è solo una sciocchezza! Se è così, probabilmente avrai un apprezzamento simile per ciò che Slim ha da offrire. È anche sensibile agli spazi bianchi, il che porta a un codice veramente succinto e leggibile. Prendiamo questo pezzo di codice HTML / ERB e confrontalo con Slim.
<%= full_title(yield(:title)) %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => vero%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => vero%> <%= csrf_meta_tags %><%= link_to "sample app", 'root_path', id: "logo" %><%= yield %>
Diamo un'occhiata all'equivalente Slim:
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 "sample app", 'root_path', id: "logo" nav ul.navbar-right li = link_to "Home", 'root_path' li = link_to "Help", ' help_path 'li = link_to "Accedi",' login_path '.main = yield
La prima cosa che la gente spesso riconosce è, "Ehi, niente tag di chiusura!" Cool? Certo, non sei ancora abituato alla sintassi, quindi all'inizio potrebbe sembrare un po 'alieno, ma sono sicuro che puoi apprezzare quanto succintamente si legge. Nessuna parentesi angolare sinistra / destra e nessuna necessità di scrivere div e selettori minimalistici, quindi possiamo concentrarci sul nome che hanno gli id e le classi. Sembra molto meno complicato e più organizzato, non credi?
Per confronto, ecco la versione di Haml. In realtà non è un'occasione per battere Haml: ti mostra solo quanto sia simile, ma anche che Slim fa un passo in avanti con la sua scelta di sintassi minimale. Il risultato è che è ancora più elegante di Haml, penso.
Perché andare così minimale ma ancora mi fa scrivere il % firmare dappertutto? Il mio dito indice non ha alcuna motivazione particolare per prendere Shift-5 tutto il tempo. Puoi personalizzare questo comportamento? Piuttosto sicuro, o almeno lo spero! Ma il design sembra un po 'imperfetto in questo senso e meno spartano rispetto a Slim. Mi rendo conto che anche questa è una questione di gusti, quindi lascerò perdere.
!!! % 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 "app di esempio", "root_path", id: "logo"% nav% ul.navbar-right% li = link_to "Home", "root_path"% li = link_to "Help", "help_path"% li = link_to "Accedi", "login_path" .main = yield
Prima di saltare nelle parti carnose, lasciami essere gonfio per un momento e riassumere ciò che penso rende Slim apprendimento un investimento degno del tuo tempo:
In termini di esperienza di programmazione, se ti consideri più come un principiante, cercherò di farti un giro veloce prima di iniziare a utilizzare Slim. Quando le persone parlano di modelli, indicano principalmente un semplice markup HTML con codice dinamico che viene spesso utilizzato per il controllo del flusso, l'iniezione di oggetti o il rendering parziale di modelli (parziali). Ad esempio, quando un controller fornisce variabili di istanza che possono essere utilizzate dalla vista tramite la sostituzione di variabili (istanza) per visualizzare gli attributi da tale oggetto. Tutto ciò avviene tramite il processore di template di tua scelta, ERB, Haml, Slim e simili, che combina tutti i tuoi modelli web in una pagina web finale. I modelli possono anche essere utilizzati per generare feed XML e RSS, nonché altre forme di file di testo strutturati.
Con i modelli, puoi definire vari "layout" che gestiscono parti specifiche del tuo sito web, nonché i dati che devono essere visualizzati sistematicamente con la più piccola quantità di ripetizioni. Dato che hai iniziato a giocare con Rails, sicuramente hai usato ERB proprio per questo tipo di scenari. ERB prende le parti del testo normale, le passa al documento finale e elabora solo il codice contrassegnato come tale. Non entrerò nei dettagli su come funziona ERB e supponiamo di avere una comprensione di base prima di immergerti in Slim. Non raccomanderei l'uso di Slim se non hai già familiarità con il modo predefinito di template di Rails dato che avrai molto più facile giocare con Slim se capisci come funziona fuori dalla scatola in Rails.
Di seguito è riportato un esempio ERB di base di un modello che visualizza una raccolta di missioni associate a @agente oggetto. Direttamente sotto, usa anche un metodo da una Gemma Rubino per impaginare il @missions collezione.
<% if @agent.missions.any? %>Missioni (<%= @agent.missions.count %>)
Questa è una piccola sezione di un modello che mostra bene che non è altro che una parte HTML statica che ha alcune iniezioni dinamiche da qualche codice Ruby. Se non usassimo modelli come questo, dovremmo scrivere manualmente il codice per ogni nuovo oggetto che vogliamo vedere visualizzato su una pagina. Non sono sicuro di te, ma non riesco a immaginare un incubo più grande o una perdita di tempo. I modelli ci forniscono uno strumento utile per rendere il nostro livello di visualizzazione intelligente e dinamico senza ripeterci.
Come puoi vedere anche da questo esempio, i modelli ci permettono di utilizzare modelli parziali che possiamo rendere laddove necessario. Qui avremmo un _mission.html.erb parziale da qualche parte, che ci aiuta a scorrere su una collezione di @missione oggetti, che a loro volta vengono elencati all'interno del nostro missioni classe.
Come puoi vedere, i modelli non sono niente di magico, ma sono molto utili per rendere lo sviluppo di applicazioni Web molto più efficiente e organizzato. Volevo solo essere sicuro che siamo tutti sulla stessa pagina prima di immergerci in Slim.
Se ti piace usare questi strumenti, va benissimo. Niente di male in questo. Il fatto è che se stai cercando qualcosa di più intelligente che sia più minimalista, è difficile trovare qualcosa che va oltre a Slim. Per me, è la soluzione di template più snella in Ruby land che io conosca. Funzionano tutti bene, quindi è una questione di preferenze personali.
Nessuna sorpresa, c'è una gemma per questo.
gemma 'rotaia sottile'
installazione bundle
Questo è tutto, siamo pronti. Poiché hai installato questa gemma, Slim verrà caricato e inizializzato ogni volta che viene caricata la tua app. Inoltre, per tua comodità, quando generi controller tramite le rotaie generano il controller, otterrai automaticamente .sottile visualizza i file per la tua vista-.html.erb non file più. Funziona allo stesso modo con gli scaffold, ma spero che non li stiate usando davvero!
Per dimostrare questo comportamento a chi è nuovo all'uso dei generatori di Rails, creerò un controller per i servizi segreti che ha tutte le azioni del controller REST standard:
rails genera controller SecretServiceOperative index new create show modifica update destroy
Tra l'altro, avrai tutto .sottile file necessari Rails mette un extra .html anche lì, puoi sbarazzartene se ti dà fastidio, naturalmente. Tutto ciò che conta è che l'estensione del file sottile è già lì e che è pronto per il pre-elaborazione del codice Slim. Sìì!
... invoca slim crea app / views / secret_service_operatives crea app / views / secret_service_operatives / index.html.slim crea app / views / secret_service_operatives / new.html.slim crea app / views / secret_service_operatives / create.html.slim crea app / views / secret_service_operatives / show.html.slim creare app / views / secret_service_operatives / edit.html.slim creare app / views / secret_service_operatives / update.html.slim creare app / views / secret_service_operatives / destroy.html.slim ...
Il prossimo passo sarebbe aprire il layout dell'applicazione e sostituire il codice boilerplate con qualcosa di Slim. Inoltre, non dimenticare di rinominare il application.html.erb file su application.slim (o application.html.slim se vuoi). Ci siamo già ridotti un po ', anche se il nome del file ha perso peso.
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_to "Home", 'root_path' li = link_to "Help", 'help_path' li = link_to "Registrati" , 'sign_up_path' li = link_to "Accedi", 'login_path' .main h1.welcome Benvenuto in Boss Level Slim Templates! = rendimento
Niente di stravagante, ma un buon inizio, e facile come posso pensare.
Come nota a margine, se sei mai curioso di quale versione della gemma hai installato, questo piccolo comando ti dirà: è utile anche per qualsiasi gemma, ovviamente:
mostra bundle 'rotaie sottili'
Ti dice dove è memorizzato e quale versione ha attualmente questo gioiello. L'output è simile a questo:
/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1
Per gli appassionati di Sinatra tra di voi, ho voluto menzionare anche come iniziare. Per prima cosa dobbiamo installare la gemma, ovviamente.
gem installazione slim
E dopo, hai quasi finito. Nella tua app Sinatra hai solo bisogno di Slim e sei a posto.
Accentsconagua
richiede 'sinatra' richiede 'slim' get ('/') slim: index __END__ @@ index doctype html titolo head html Slim Templates body h1 Boss Level Ruby Templates With SlimQui ho usato un template inline per scrivere il markup Slim nello stesso file e ho detto a Sinatra che voglio usare Slim per il file index quando fa un ottenere richiesta al percorso root. Ho solo bisogno di fare riferimento al modello in linea all'interno di un blocco di parentesi graffe. Quello che vedi sotto il @@ indice-che indica il modello di indice: è tutta la sintassi degli spazi sensibili di Slim.
È tempo di mostrarti come scrivere un po 'di Slim.
Iniziamo con la più semplice, la dichiarazione doctype. Come probabilmente saprai e hai già dimenticato, questo deve essere dichiarato in cima al tuo documento HTML, prima del reale etichetta. Cordiali saluti, non è un tag HTML e istruisce il browser sulla versione della pagina HTML.
Tra le diverse versioni per , ce n'è solo uno per HTML5: -grazie a Dio! -che è esattamente ciò che otteniamo quando scriviamo doctype html o doctype 5 in Slim.
doctype html html head doctype 5 html head
# e scorciatoia di classe . Scrivere codice front-end significa un sacco di classi e sempre così pochi id - lo spero. Per evitare di scriverle più e più volte, Slim ti incontra più di metà strada e ti consente di cortocircuitare l'intero processo in pratica. Lascia che ti mostri cosa intendo. Prendi il seguente codice Slim:
#logo h1.header .evil-wrapper h2 # nome autore ul.books
Questo viene compilato per questo output HTML:
Come puoi vedere, il punto suggerisce a Slim di voler usare una classe e il nome che segue è quello che vuoi nominare. Lo stesso vale per gli ID: basta usare il simbolo dell'hash (ovvero il cancelletto) che fa il trucco. I lettori Astute hanno sicuramente riconosciuto che le versioni senza tag leader attivano la creazione di un div con la classe o id corrispondente, che può essere vista per e . Piuttosto a portata di mano, non credi?
Puoi anche essere più espressivo nel tuo codice Slim se vuoi. Nessuno ti impedisce di scrivere a mano le tue buone classi e id. Se ti senti in qualche modo legato a ciò, fallo! Mi piace la versione più succinta perché mi permette anche di evitare di digitare virgolette e testo ripetuto tutto il tempo. Dipende da te, qualunque cosa ti renda felice! Il codice sotto è un po 'più verboso ma rende lo stesso HTML di cui sopra:
div h1 div h2 ul
Ora, non è una cosa bella? Immagina tutti questi temuti tag HTML che non hai bisogno di scrivere da solo, oltre a eliminare tutte le parentesi angolari in eccesso. Certo, il tuo editor di codice può fare molto questo lavoro anche per te, ma il tuo editore legge anche il codice per te? Esattamente!
Quando torni a leggere il tuo codice, vuoi anche un documento sintetico che sia super facile da digerire visivamente. Penso che questo semplice esempio mostri meglio ciò che uno strumento come Slim ha da offrire. Sono queste piccole cose che si aggiungono a un grande strumento e fanno risparmiare tempo a lungo termine. Anche se lo usi solo per quella funzionalità e per il momento ignori le altre funzionalità più avanzate, il passaggio a Slim potrebbe già comportare grandi risultati.
Supponiamo che tu abbia più tag che vuoi avere in linea per essere più compatto o altro. Quindi, invece di rompere con una nuova riga, puoi concatenarli separando questi tag con due punti :. Entrambi gli esempi seguenti mostrano lo stesso risultato.
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
La seconda versione è più minimale a causa dei tag in linea e sarebbe la mia preferenza. Dopotutto, il compatto è buono, no? Penso che questo caso mostri bene che Slim equilibri equamente tra compatto e criptico. Sì, ci vuole un po 'per abituarsi, e in alcuni casi sono utili wrapper di attributi aggiuntivi (vedi di più sui wrapper qui sotto). Chiamami pazzo, ma sono abbastanza sicuro che leggerà Slim come normale markup HTML in un batter d'occhio.
Scrivere il testo è facile come ti aspetteresti, ovviamente. Basta aggiungerlo dopo i tag.
h1 # welcome-header Il tuo messaggio di benvenuto funky va qui!
Il tuo messaggio di benvenuto funky va qui!
Niente di più da aggiungere, facile come può essere!
Gli attributi HTML, che forniscono informazioni aggiuntive sui tag, possono essere inclusi come segue:
a href = "http://slim-lang.com" title = "Slim Homepage" Vai alla Pagina sottile img alt = "James Bond posa insieme a M" src = "images_8 / an-introduction-to-slim-templates_3. png "/
http://slim-lang.com "title =" Slim Homepage "> Vai alla homepage di Slim
In pratica puoi concatenarli e Slim la separerà dal contenuto del testo, se presente. Se guardi da vicino, puoi vedere che il nostro img il tag ha una barra finale, che chiude esplicitamente i tag in Slim. Per immagini o tag più contorti, questo è sicuramente utile. A proposito, HTML5 non richiede di scrivere i nomi degli attributi in minuscolo né di usare virgolette sui valori degli attributi. Tuttavia, è raccomandata la pratica standard del W3C.
Se hai più selettori come le classi o gli ID per tag, puoi anche scriverlo più succintamente collegandoli daisy-chain. Questi selettori verranno automaticamente delimitati da spazi bianchi.
h2 # big-header.agent-header.tagline Titolo funky h3.small-header.agent # 007.tagline Piccolo titolo funky
Titolo funky
Piccolo titolo funky
Non che avere tutti questi ID e classi mescolati in questo modo rappresenti le migliori pratiche o altro, ma è facile vedere come Slim lavori in un esempio così complesso. Molto carino, eh? Attento, anche se, la diffusione di questi selettori su più linee non funzionerà senza wrapper di attributi (vedere la prossima sezione).
Un'altra opzione sarebbe quella di utilizzare un array con stringhe o solo simboli per unire gli attributi.
h2 class = ["agent-header", "tagline"] Titolo funky h3 class =: agent,: double_o_seven,: tagline Piccolo titolo funky
Titolo funky
Piccolo titolo funky
Nel mio libro, chiamerei questo un buon conoscente, ma non è qualcosa che cerco di usare attivamente. Potrebbe essere utile se vuoi interpolare qualcosa, suppongo.
Slim ti offre wrapper per rendere i tuoi attributi più facili da leggere. Potrebbe non essere necessario tutto il tempo, ma è utile sapere se un tag con molti attributi richiede qualche addomesticamento. Puoi utilizzare uno dei seguenti delimitatori per racchiudere gli attributi: , [] e ().
a href = "http://slim-lang.com" title = "Pagina iniziale" Vai alla pagina iniziale a href = "http://slim-lang.com/about.html" title = "Informazioni sulla pagina " Vai alla pagina about h2 [id =" big-header "] Funky headline h3 (id =" small-header ") Un altro titolo funky
Vai alla pagina iniziale Vai alla pagina aboutTitolo funky
Qualche altro titolo funky
Se questo è un modo più semplice per te di organizzare il markup, fallo! Come illustrato dal secondo un e il h3 i tag, puoi persino distribuire attributi e selettori su più righe. L'indentazione sembra essere applicata molto perdonando riguardo alla sensibilità degli spazi bianchi. La mia ipotesi, tuttavia, è che non sarà a lungo, e non avrai bisogno di wrapper molto. Ti abituerai alla sintassi slim di barebone in pochissimo tempo e li salvi per occasioni speciali, come probabilmente dovresti.
Per i tag in linea, i wrapper potrebbero tornare utili ogni tanto. Come puoi osservare anche nell'esempio qui sotto, puoi usare gli spazi con i delimitatori per renderlo ancora più leggibile, solo una nota a margine.
ul li.long-link: a href = "http://slim-lang.com" title = "Pagina iniziale" Vai alla pagina iniziale li.long-link.class.with-id: a [href = " http://slim-lang.com/about.html "title =" Informazioni sulla pagina "] Vai alla pagina about li.c-link: a (href =" / c ") C link li: a [href =" / d "] D link
Qualcuno ha detto interpolazione? All'interno degli attributi tra virgolette, è possibile utilizzare Ruby per interpolare il codice, se necessario. Un semplice esempio dovrebbe essere sufficiente per illustrare questo comportamento:
a href = "http: // # url" Vai a # url
Ancora una volta, non qualcosa che si potrebbe usare su base giornaliera, ma è sicuramente buono avere nel sacco di trucchi. I valori degli attributi verranno sfuggiti per impostazione predefinita. Se hai bisogno di quel comportamento disabilitato, basta usare a ==.
a href == "http: // # url" Vai a # url
Puoi usare Full-on Ruby per giocare anche con i tuoi attributi. Basta lanciare un segno di uguale là dove vuoi che venga eseguito un codice Ruby e sei pronto per partire. Nel secondo articolo, troverai maggiori informazioni sull'output di codice Ruby nei tuoi modelli Slim.
ul li class = agent.role a href = (path_to_agent agent) = agent.name
Questo, ovviamente, significa anche che puoi usare semplici booleani allo stesso modo anche nei tuoi attributi.
input type = "text" disabled = false input type = "text" disabled = true input type = "text" disabled = nil
Groovy, andiamo avanti!
Spero che ora abbia un buon senso del perché Slim sia una buona scelta per tutte le tue esigenze di modello in Ruby land. Se al momento preferisci ancora usare Haml o ERB, potresti sviluppare un appetito per Slim nel tempo. Non sto dicendo che sia un gusto acquisito o qualcosa del genere, solo che non è qualcosa che molte persone raccolgono presto nella loro carriera, forse perché non hanno ancora provato il dolore di scrivere tutto quel eccesso in più e più volte. Questo articolo dovrebbe fornire le nozioni di base necessarie per iniziare.
Slim ha molto altro da offrire, naturalmente, specialmente alcune funzionalità avanzate che vorresti assolutamente dare un'occhiata. Nel prossimo articolo, inizieremo con una sezione più dettagliata sull'emissione del codice Ruby nei tuoi modelli e molto altro ancora, naturalmente. Ci vediamo lì!
