Il tuo assistente obbediente Yeoman

Una cosa è certa: i tempi sono sicuramente cambiati. Non molto tempo fa, lo sviluppo front-end, sebbene non semplice, era gestibile. Impara l'HTML, un po 'di CSS e sei sulla buona strada. In questi giorni, tuttavia, per mancanza di parole migliori, ci sono molte più variabili da manipolare.

I preprocessori, l'ottimizzazione delle prestazioni, i test, l'ottimizzazione delle immagini e la minificazione rappresentano solo alcuni dei fattori chiave che lo sviluppatore front-end moderno deve tenere a mente.

Ad esempio, sebbene sia facile da usare, i CSS di certo non si adattano bene. E, sebbene potente, JavaScript può, a volte, essere un linguaggio brutto e difficile con cui lavorare. Poi c'è l'aspetto della performance; non stiamo più semplicemente progettando per Internet Explorer e Firefox. No, oggigiorno abbiamo una miriade di browser, dispositivi, risoluzioni e velocità di connessione da considerare quando si sviluppano nuove applicazioni.

Dire che la nostra è un'industria incredibilmente dura sarebbe l'eufemismo del secolo.

Il lato positivo è che, per ogni blocco stradale, sono state certamente fornite soluzioni.

Il lato positivo è che, per ogni blocco stradale, le soluzioni sono state certamente fornite dai membri della comunità. Considera il problema del ridimensionamento dei CSS; beh, i preprocessori, come Sass, Less e Stylus sono stati introdotti per rendere drasticamente più facile la nostra vita. E il brutto problema di prefisso al browser CSS3? Compass si prende cura di questo! E il dilemma JavaScript? Ancora una volta, CoffeeScript e, ora, TypeScript in soccorso! L'unico problema è che ogni nuova soluzione richiede il proprio sistema e processo. Come ci si potrebbe aspettare, nel tempo, questo può complicare in modo significativo il flusso di lavoro. Ora, abbiamo più schede Terminale aperte, ognuna delle quali monitora un sottoinsieme dei file all'interno dei nostri progetti, ascoltando le modifiche. E questa è solo la punta dell'iceberg. Non abbiamo ancora toccato il flusso di lavoro, la codifica delle best practice, l'ottimizzazione delle immagini, i test e lo sviluppo di un processo di compilazione automatizzato. Anche scrivere su tutti questi passaggi mi sta riducendo il respiro! Non sarebbe fantastico se qualcuno avvolgesse tutti questi preprocessori e le migliori pratiche in un unico pacchetto facile da usare?


Dì ciao a Yeoman

Creato da alcune persone amichevoli di Google (tra cui Paul Irish e Addy Osmani), Yeoman è la soluzione ai tuoi problemi. Come dice il core team, Yeoman offre un flusso di lavoro ponderato per iniziare e iniziare a lavorare con nuovi progetti il ​​più rapidamente possibile. Ma cosa significa veramente? Bene, offre la possibilità di impalcettare nuovi progetti, nonché i quadri necessari e gli strumenti di test. Ciò che questo essenzialmente si traduce in è una configurazione meno noiosa e più creazione.

Per iniziare con Yeoman, dobbiamo prima installarlo dalla riga di comando. Esegui il seguente comando:

curl -L get.yeoman.io | bash

Questo script eseguirà molte cose, inclusa l'installazione delle librerie necessarie per Yeoman per fare il suo lavoro. Probabilmente scoprirai che richiede una serie di passaggi da parte tua, ma non preoccuparti; ti dirà esattamente cosa deve essere fatto!

Una volta completata l'installazione, esegui piccolo terriero per vedere cosa è disponibile. Troverete una varietà di opzioni, come ad esempio dentro, per inizializzare un nuovo progetto, costruire, per creare uno speciale, ottimizzato dist cartella per la distribuzione, e installare, che rende il processo di gestione della gestione dei pacchetti il ​​più semplice possibile.

Per saperne di più su ciascuna opzione, aggiungere --Aiuto al comando: yeoman init --help.

Creiamo un nuovo progetto con Yeoman. Crea una nuova directory sul desktop, CD ad esso dal Terminale ed esegui:

yeoman init

A questo punto, ti verrà chiesto con una manciata di domande.

  • Ti piacerebbe includere Twitter Bootstrap per Compass?
  • Ti piacerebbe includere i plugin di Bootstrap di Twitter?
  • Vorresti includere RequireJS (per il supporto AMD)?
  • Vorresti supportare la scrittura di moduli ECMAScript 6?

Queste domande ti danno la possibilità di configurare il tuo nuovo progetto immediatamente. Per ora, scegli "No" per ogni domanda.

Se preferisci evitare queste domande in futuro, esegui invece yeoman init quickstart. Questo preparerà una nuova applicazione, con Modernizr, jQuery e HTML5 Boilerplate cotti in.

Con questo singolo comando da solo, Yeoman istallerà istantaneamente un nuovo progetto per te. Non essere sopraffatto da tutti questi file, però; se non fossero stati generati per te, alla fine li avresti creati manualmente. Pensa a Yeoman come al robot d'aiuto, che fa tutto il lavoro manuale per te.

"Ehi amico; vai a prendermi jQuery e Modernizr! "

Ora che abbiamo un nuovo progetto, lanciamo un server di anteprima e iniziamo a monitorare l'applicazione per le modifiche.

server yeoman

Immediatamente, verrà lanciato Google Chrome, visualizzando il tuo progetto (inoltre, nessun errore di sicurezza in più). Bene, è comodo, ma, come scoprirai velocemente, c'è molto, molto altro da vedere. Posiziona il tuo browser e il tuo editor side-by-side e prova le seguenti cose:

LiveReloading

Cambiare il h1 testo del tag, e guardarlo aggiornare istantaneamente nel browser, senza un aggiornamento. Yeoman al tuo servizio! Raggiunge questo, tramite l'estensione Google Chrome di LiveReload, ma, se non è installato, verrà utilizzato un processo di ricarica di fallback.

insolenza

Modificare main.css a main.sass (o main.scss, se è la tua preferenza) e goditi la compilazione e l'aggiornamento istantanei nel browser. Per provarlo, prova a creare e usare una variabile.

// main.sass $ textColor: # 666 colore del corpo: $ textColor

Bello! Necessaria impostazione zero. Ora puoi separare i tuoi fogli di stile, se necessario, e importarli in main.sass.

// main.sass @import 'grid' @import 'buttons' @import 'module'

Ogni volta che un file viene salvato, Yeoman ricompilerà automaticamente il tuo Sass in un normale CSS e aggiornerà il browser.

Bussola

Se sei un fan di Sass, allora è probabile che tu preferisca anche l'eccellente framework Compass. Nessun problema; Yeoman è felice di accontentarsi. Il supporto bussola è già disponibile; importa semplicemente i moduli applicabili e continua come al solito.

// main.sass @import 'compass / css' * + box-sizing (border-box) .box width: 200px + transition (larghezza 1s) &: hover width: 400px

Se non sei ancora un convertitore di preprocessore, devi ammettere: questo è significativamente migliore dell'alternativa:

* -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box;  .box width: 200px; -webkit-transition: width 1s; -moz-transition: width 1s; -ms-transizione: larghezza 1s; -o-transizione: larghezza 1s; transizione: larghezza 1 s;  .box: hover width: 400px; 

CoffeeScript

JavaScript è perfetto e dandy, ma alcuni ritengono che CoffeeScript offra una sintassi notevolmente più pulita che riempie molte lacune del linguaggio (almeno visivamente).

All'interno del scripts / directory, facoltativamente crea una nuova cartella, caffè/, e aggiungi il tuo primo file CoffeeScript: person.coffee.

# scripts / coffee / person.coffee class Person

Salva il file e, come per magia, Yeoman lo compila immediatamente in JavaScript vaniglia e posiziona il nuovo file direttamente all'interno del genitore scripts / directory. Vedi di persona:

// scripts / person.js var Person; Person = (function () function Person ()  return Person;) ();

Perfetto e, cosa più importante, senza sforzo!

Se è necessario modificare in qualsiasi modo la struttura delle directory, fare riferimento a gruntfile.js file nella root della tua applicazione. Dietro le quinte, lo strumento Grunt di Ben Alman è ciò che configura la compilation.

A questo punto da solo, Yeoman ci ha dato una grande flessibilità. Con quel singolo yeoman init comando, puoi ora personalizzare i tuoi siti web con Sass, codificare in CoffeeScript e, mentre apporti le modifiche, vedere immediatamente gli aggiornamenti riflessi nel browser. Ma non abbiamo ancora finito! Neanche vicino.

Gestione dei pacchetti

Yeoman sfrutta un potente gestore di pacchetti per il web, chiamato Bower. Cos'è un gestore di pacchetti? Bene, se stai ancora scaricando manualmente, ad esempio, la libreria di Underscore da underscorejs.org, allora stai sbagliando. Cosa succede quando la libreria viene aggiornata qualche mese dopo? Vuoi scaricare nuovamente la libreria manualmente? Il tempo è denaro; quindi lascia che Yeoman faccia il lavoro per te.

Inseriamo Underscore nel nostro progetto.

yeoman installa underscore

Yeoman risponderà a questo comando scaricando l'ultima versione della libreria e inserendola in una nuova venditore directory. Ora è pronto per essere utilizzato!

 

Ma, cosa succede se non siamo esattamente sicuri di quale sia il nome della risorsa che richiediamo? In queste situazioni, possiamo fare riferimento a ricerca yeoman. Senza passare alcun argomento, Yeoman restituirà un elenco di tutte le risorse che è possibile installare. Cerchiamo il popolare normalize.css progetto, di Nicolas Gallagher.

Ricorda: Bower non è esclusivamente per risorse specifiche di JavaScript.

la ricerca di yeoman si normalizza

Al momento della stesura di questo documento, devono essere restituiti due progetti:

  • git normalize-css: //github.com/necolas/normalize.css.git
  • underscore.normalize git: //github.com/michael-lawrence/underscore.normalize.git

Sembra normalizzare-css è quello che vogliamo.

yeoman installa normalize-css

Ora, importalo nello stesso modo in cui normalmente faresti:

In alternativa, rinominare il file in normalize.scss, e importalo nel tuo main.sass file.

// main.sass @import '... / scripts / vendor / normalize-css / normalize'

C'è una varietà di altri comandi specifici di Bower che vorrete ricordare:

  • yeoman uninstall jquery - Disinstallare un pacchetto.
  • aggiornamento jquery - Aggiorna libreria alla versione più recente.
  • lista delle donne - Elenca tutti i pacchetti attualmente installati.

analisi

Se il test non fa ancora parte del tuo flusso di lavoro, dovrebbe essere! Cosa potrebbe esserci di meglio di un robot che verifica automaticamente il tuo lavoro dopo ogni salvataggio? Fortunatamente, Yeoman rende incredibilmente facile testare le tue applicazioni. Fuori dagli schemi, sono disponibili il famoso framework Mocha e PhantomJS (headless Webkit), sebbene sia facilmente configurabile, se preferisci uno strumento diverso, come Jasmine. Inoltre, offre la libreria di asserzione Chai, che presto ti piacerà.

Apri il test / index.html file. Verso il basso, vedrai un paio di esempi di test forniti. Vai avanti ed elimina quelli e crea un nuovo file di test: spec / person.js. Ecco un test per iniziare.

// test / spec / person.js describe ('A Person', function () it ('dovrebbe avere un'età superiore a 0', function () var person = new Nome della persona: 'Jeffrey', età: 27 expect (person.age) .to.be.above (0);););

Dovrebbe interfaccia

Se preferisci usare Chai's (una libreria di asserzioni) dovrebbero interfaccia, tornare a index.html, e cambiare expect = chai.expect a dovrebbe = chai.should (). Ora puoi aggiornare le tue specifiche, in modo che legga:

person.age.should.be.above (0);

Il metodo che scegli dipende interamente da te. Non esiste una scelta corretta; solo le preferenze.

Per eseguire questo test, tornare al terminale e digitare:

test degli yeoman

Come previsto, il test dovrebbe fallire con il messaggio: "Impossibile trovare la variabile: Person."È un test fallimentare, ma, soprattutto, funziona - stiamo testando! Poiché Yeoman sfrutta l'eccellente strumento PhantomJS (Webkit senza testa), questi test possono anche essere eseguiti senza il browser.

Test di CoffeeScript

Se preferisci scrivere i tuoi test in CoffeeScript, dovrai apportare un paio di modifiche al tuo gruntfile.js. Inizia aggiungendo un nuovo compilare oggetto al bussola compito. All'interno di questo oggetto, specificare i file che devono essere guardati. In questo caso, stiamo istruendo Grunt per compilare tutti i file CoffeeScript all'interno test / spec / caffè.

// Coffee to JS: dist: src: 'app / scripts / ** / *. Coffee', dest: 'app / scripts', compila: files: "test / spec /": " test / spec / caffè / *. caffè "

L'ultimo passo è dire a Grunt di tenere d'occhio quella directory. Quando un file viene salvato, dovrebbe essere ricompilato di conseguenza.

Trovare la orologio compito e aggiornare il caffè oggetto, in questo modo:

caffè: file: ['',' test / spec / coffee / *. coffee '], attività:' coffee reload '

Sopra, stiamo semplicemente aggiungendo un nuovo percorso al File array. In questo modo, Grunt sa che ha bisogno di guardare il test / spec / caffè directory anche per le modifiche ed eseguire il caffè e ricaricare compiti, di conseguenza.


Mettere tutto insieme

Per illustrare alcune delle abilità di Yeoman, prendiamo questo nuovo apprendimento e applicalo da zero a un semplice progetto. Il nostro obiettivo è mostrare gli ultimi tweet su Yeoman nella pagina e includere l'avatar del tweeter e un link al tweet originale. Iniziamo.

Iniziamo creando rapidamente una nuova applicazione con Yeoman.

mkdir tweets && cd tweet yeoman init quickstart

Quindi, avviamo il server e iniziamo a guardare i nostri file Sass e CoffeeScript per le modifiche. Se stai lavorando, assicurati di posizionare il browser e l'editor uno accanto all'altro per il miglior flusso di lavoro.

server yeoman

Sentiti libero di rimuovere l'HTML standard che Yeoman fornisce come esempio. Successivamente, inizieremo a scrivere il codice necessario per recuperare i tweet. All'interno del scripts / directory, creane una nuova caffè / tweets.coffee file e fare riferimento alla versione compilata di questo file all'interno index.html.

Successivamente, recupereremo i tweet desiderati utilizzando l'API di ricerca facile da utilizzare di Twitter. Per recuperare un file JSON, contenente questi tweet, possiamo usare il seguente URL:

http://search.twitter.com/search.json?q=yeoman.io

Tuttavia, poiché stiamo recuperando questi dati, utilizzando $ GetJSON, dovremo specificare a richiama parametro, in modo da attivare il formato JSONP di Twitter.

Fare riferimento all'API di Twitter per ulteriori opzioni di ricerca.

Creiamo la classe.

App = App o  class App.TweetsCollection constructor: (query = 'yeoman.io', apiUrl = 'http://search.twitter.com/search.json') -> @query = query @apiUrl = apiUrl fetch : -> $ .getJSON "# @ apiUrl? q = # @ query e callback =?"

Nota che stiamo usando dependency injection (dal costruttore) per rendere il processo di testing di questo codice (oltre lo scopo di questo tutorial) notevolmente più semplice.

Se desideri provarlo, nella console del browser, esegui:

var tweets = new App.TweetsCollection tweets.fetch (). done (function (data) console.log (data.results););

La console dovrebbe ora visualizzare un elenco di tweet, che fanno riferimento a "yeoman.io".

Ora che siamo riusciti a recuperare i tweet, abbiamo bisogno di preparare l'HTML per visualizzarli. Mentre è raccomandato l'uso di un motore di template adeguato, come l'Handlebars o l'implementazione di Underscore, per gli scopi di questo tutorial, lo manterremo semplice. Fortunatamente, le stringhe di blocchi e le caratteristiche di interpolazione di CoffeeScript rendono il processo di incorporamento dell'HLML il più elegante possibile.

classe App.TweetsView el: $ ('
    ') costruttore: (tweets) -> @tweets = tweets render: -> $ .each @tweets, (index, tweet) => # Prova ad usare invece un motore di template. @ el.append "" "
  • #  Tweet.from_user # Tweet.text
  • "" "@

Nota: quando sei pronto per utilizzare un motore di template dedicato, non dimenticare di installarlo con Yeoman e, dietro le quinte, Bower: yeoman installa manubri.

Questo codice è abbastanza semplice. Quando istanziato, si aspetterà una serie di tweet (che sappiamo già come recuperare). Quando è render () il metodo viene attivato, cicla attraverso quella serie di tweet e, per ognuno, aggiunge un elemento della lista con i dati necessari a una lista non ordinata (@el). Questo è tutto!

Se sei curioso di sapere => segno (invece di ->), questo è ciò che definiamo una freccia grossa in CoffeeScript. Assicura che, all'interno della funzione anonima, Questo farà ancora riferimento al TweetsView oggetto, invece del singolo Tweet.

Ora che il nostro codice è a posto, facciamo girare la palla! Ritorno al index.html file, aggiungi un nuovo app.js riferimento.

  

Entro scripts / caffè / app.coffee, Inserisci:

tweets = new App.TweetsCollection tweets.fetch (). done (data) -> tweetsView = new App.TweetsView (data.results) .render () $ (document.body) .html tweetsView.el

Dopo aver salvato questo codice, grazie a Yeoman, guarda il browser aggiornarsi all'istante per visualizzare gli ultimi tweet su Yeoman!

Forse ti starai chiedendo dove fatto il metodo sta venendo. Questo è necessario perché, dietro le quinte, quando il fetch () il metodo è chiamato App.TweetsCollection, è stata fatta una richiesta AJAX. Come tale, viene restituita una "promessa".

Pensa a una promessa come jQuery promettente per avvisarti quando è stata completata un'operazione asincrona. Quando questa richiesta asincrona è "completata", quindi eseguire questa funzione di callback.

Certo, si trattava di un progetto abbastanza semplice, ma Yeoman ha notevolmente migliorato il nostro flusso di lavoro.

Il passo finale è quello di costruire il progetto, al fine di ottimizzare il più possibile le nostre risorse e immagini (se applicabile).

costruisca te stesso

Questo comando istruirà Yeoman a eseguire tutte le attività necessarie e alla fine produrne una nuova dist directory che deve essere inviata al tuo server per la produzione. Tutti i file saranno compressi e ottimizzati.

Una volta completata l'operazione, visualizzala in anteprima eseguendo:

server yeoman: dist

Visualizza la fonte e nota come sono state compresse le risorse! Ma possiamo fare di meglio. A questo punto, gli script e i fogli di stile (non applicabili nel nostro progetto) non sono stati concatenati. Risolviamolo con Yeoman!

Torna al tuo index.html file e avvolgere il copione riferimenti con un commento HTML, che istruisce Yeoman a concatenare e minimizzare i file contenuti.

    

Questo si traduce in: quando si crea il progetto, concatenare tutti i file all'interno di costruire: js blocco di commenti e sostituire gli script con un unico riferimento a scripts / scripts.js, quale Yeoman genererà automaticamente per te. In questo modo, in produzione, stiamo lavorando con una sola richiesta HTTP anziché tre! Questo può anche essere usato per i tuoi fogli di stile, tuttavia, se stai usando Sass, non è necessario.

Con questa modifica, crea nuovamente l'anteprima del progetto.

yeoman build yeoman server: dist

Funziona ancora! Visualizza la fonte e nota che ora abbiamo solo un riferimento allo script.

Gente, questa è l'ottimizzazione gratuita. Nessun costo nascosto. Usalo! Il tuo ultimo passo sarebbe quello di spingere il dist cartella fino al tuo server e vai a casa per la giornata!


Pensieri di chiusura

Yeoman non avrebbe potuto venire in un momento migliore.

Forse la cosa più bella di Yeoman è che è aperto. Mentre alcuni strumenti simili costano denaro, Yeoman è open source, il che significa che tu - sì tu - puoi biforcare e contribuire a migliorarlo!

Mentre il web si sposta sempre di più verso le applicazioni incentrate sul cliente, Yeoman non potrebbe essere arrivato in un momento migliore. Quindi, dimentica la preparazione e la configurazione; iniziamo a costruire cose.

Per rimanere aggiornato sulle ultime notizie Yeoman, o per inviare suggerimenti e richieste di funzionalità, sentiti libero di seguire @yeoman su Twitter e iscriverti al suo gruppo Google.