![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/02\/n43a2web.png\")
Un anno e mezzo fa, un piccolo gruppo di impiegati di Twitter decise di migliorare i tool amministrativi e analitici in uso nel nostro team interno. Dopo le prime riunioni attorno a questo argomento, avevamo un’ambizione pi\u00f9 grande: creare un toolkit per chiunque lo voglia usare internamente a Twitter e oltre. Cos\u00ec, ci siamo messi a realizzare un sistema che potrebbe costituire una base per le persone come noi che vogliono creare nuovi progetti. Cos\u00ec concepimmo Bootstrap.<\/p>\n
Realizzato da me<\/a> e da Jacob Thornton<\/a>, Bootstrap<\/a> \u00e8 un toolkit front-end open-source per aiutare i designer e gli sviluppatori a creare rapidamente ed in maniera efficace online. Il nostro obiettivo \u00e8 di fornire una libreria raffinata, ben documentata ed estesa di componenti di design flessibili, realizzati in HTML, CSS e JavaScript, cos\u00ec che altri possano usarli come base ed innovare. Ad oggi \u00e8 cresciuto fino ad includere dozzine di componenti ed \u00e8 diventato il progetto pi\u00f9 popolare su GitHub, con pi\u00f9 di 13000 watchers e 2000 forks.<\/p>\n Sveleremo ora come e perch\u00e9 abbiamo creato Bootstrap, i processi che abbiamo utilizzato durante la sua realizzazione ed in che modo \u00e8 diventato un design system.<\/p>\n Ad alcuni dei primi tool che utilizzavamo internamente a Twitter mancava un design raffinato e accessibile e ci risultava difficile sviluppare o iterare rapidamente. Alcune persone di diversi team ammisero il problema e videro un’incredibile opportunit\u00e0 per questo e per i progetti futuri. Riconoscendo ci\u00f2, abbiamo cominciato a formare un processo grossolano collaborando fin da subito con Design ed Engineering.<\/p>\n Ad alto livello, il nostro processo cominciava ad assomigliare a questo:<\/p>\n Fondamentalmente, tutto ci\u00f2 si riduce ad un concetto principale: far lavorare i designer con gli sviluppatori<\/strong>. L’interazione costante con gli sviluppatori \u00e8 quello che ha fatto brillare Bootstrap e che continua a guidare il suo sviluppo ad oltre un anno dalla sua nascita. Dalle idee abbozzate su una lavagna bianca alla programmazione di prototipi grossolani, la collaborazione tra le diverse discipline \u00e8 quello che ha fatto avere successo a Bootstrap per l’uso interno a Twitter. Questo processo ha permeato lo sviluppo praticamente per tutte le feature di Bootstrap e ha funzionato incredibilmente bene nel tempo.<\/p>\n Realizzare Bootstrap in questo modo vuol dire che la comunicazione ha avuto un ruolo cruciale e la maggior parte del lavoro di design \u00e8 avvenuta nel codice. Dal momento che il deliverable finale di Bootstrap \u00e8 sempre codice, aveva molto pi\u00f9 senso lavorarci quanto pi\u00f9 possibile per comunicare nel nostre idee. Questo ci ha messo nelle condizioni di ragionare come farebbe un buon sviluppatore, incoraggiando componenti succinti, ma con la pulizia nei componenti visuali e con l’accuratezza che uno si aspetterebbe da un bravo designer.<\/p>\n Fig. 1: I menu dropdown nella prima release di Bootstrap venivano attivati all’hover.<\/p>\n<\/div>\n Diamo uno sguardo ad una feature di Bootstrap: i dropdown menu. Per aiutare ad ospitare le informazioni riguardanti la sessione corrente e far risaltare altre aree del tool, avevamo bisogno dei dropdown. Tutti hanno i menu dropdown nelle proprie applicazioni, ciascuno con un’implementazione, delle interazioni e un visual design differente, quindi, come possiamo farli? Seguendo lo schema di cui sopra, ecco come \u00e8 stata realizzata questa feature in Bootstrap:<\/p>\n La maggior parte dei componenti e molti dei dettagli pi\u00f9 sottili che gli ruotano attorno sono stati progettati e realizzati mettendo insieme designer e sviluppatori. Insieme, il nostro processo per tutte le nuove feature o per i singoli componenti di design \u00e8 maturato fino alla ideazione, dibattito e revisione delle feature, implementazione ed infine astrazione e documentazione<\/strong>. Ha fatto andare via liscio lo sviluppo dei nostri tool interni, ci ha permesso di evitare la crescita fuori controllo delle feature e l’aumento sproporzionato del codice. Inoltre, ci ha aiutato a documentare non solo come usare un componente, ma perch\u00e9<\/em> si dovrebbe usare quel particolare<\/em> componente in Bootstrap.<\/p>\n Questo si estende naturalmente oltre le nuove feature ed in quelle esistenti. Se una feature che abbiamo gi\u00e0 ha bisogno di essere modificata o rimossa, seguiamo gli stessi step: ideazione, revisione, implementazione e documentazione. Per portare avanti l’esempio, abbiamo ricevuto moltissimo feedback sui dropdown e potremmo rivedere il supporto multi-livello. Dal momento che le applicazioni web si comportano sempre pi\u00f9 come le proprie controparti desktop, che usano i dropdown multi-livello, ha senso che noi si consideri di supportarle. Ovviamente, potremmo semplicemente tirarci indietro dalle nostre decisioni iniziali, ma questo processo ci rende onesti, importanti e responsabili verso i nostri utenti ed i loro bisogni.<\/p>\n Il nostro processo ci ha aiutato a superare quasi tutto il nostro sviluppo delle feature e ha messo in luce un importante aspetto della nostra decisione dell’andare oltre il semplice sviluppo di un tool. Lo sviluppo parallello ha significato che abbiamo comunicato in maniera efficace a chi non rea toccato dai processi o dalle informazioni interne il nostro lavoro<\/strong>.<\/p>\n Mentre eravamo impegnati a lavorare alla creazione di una roadmap per il prodotto e a determinare gli obiettivi di un singolo progetto, abbiamo considerato attivamente come gli altri avrebbero usato gli stessi componenti. Astrarre e documentare i componenti \u00e8 diventato parte del nostro processo per creare questo tool e Bootstrap in tandem. Ma soprattutto, abbiamo risparmiato tempo e sforzo, abbiamo discusso pi\u00f9 chiaramente sul valore di aggiungere (o a volte rimuovere) una o pi\u00f9 caratteristiche e siamo adesso pronti ad affrontare futuri progetti pi\u00f9 grandi.<\/p>\n Dopo le prime settimane di sviluppo, abbiamo cominciato a chiamare questo documento vivente come \u201ctoolkit in forma di guida di stile\u201d. Questo ci ha fatto raggiungere l’obiettivo di comunicare il nostro lavoro attraverso Bootstrap, che a sua volta a permesso a Bootstrap di crescere rapidamente e di diventare utilizzabile da chiunque.<\/p>\n<\/div>\n La decisione di creare Bootstrap come una guida di stile \u00e8 scaturita naturalmente da uno dei nostri processi di design e sviluppo. Bootstrap ci aiuta a documentare i componenti con degli esempi \u201clive\u201d man mano che li creiamo, mentre hanno la funzione di un documento vivo che si alimenta da solo, con i componenti ed i template che prescrive. Ci ha dato un singolo punto di riferimento<\/strong> per condividere i consigli da parte dei designer e ha creato della documentazione per ciascun componente attivo.<\/p>\n Creare Bootstrap come una guida di stile ha influenzato il suo sviluppo fin dall’inizio. Ci ha permesso di rimanere fedeli alle feature che volevamo implementare aiutandoci a guardare pi\u00f9 in l\u00e0 che al singolo progetto. Non volevamo limitarci a realizzare un singolo progetto: avevamo ambizioni pi\u00f9 grandi e non volevamo privarne noi stessi o coloro i quali avrebbe tratto dei benefici da un simile tool. Il nostro approccio ha reso possibile la realizzazione di tool non solo per Twitter, ma per tutti i designer e gli sviluppatori.<\/p>\n L’approccio da “documento vivente” ci ha dato la possibilit\u00e0 non solo di condividere l’intero toolkit, ma anche di fornire documentazione scritta ed interattiva per chiunque volesse usare Bootstrap. Questo approccio ha soddisfatto tutti indipendentemente dal livello di competenza, permettendo a chiunque di clonare o scaricare un repo per il codice sorgente o di usare Inspector o “visualizza sorgente” nel browser.<\/p>\n Con l’avanzare dello sviluppo, questo \u00e8 diventato uno dei principi guida del nostro lavoro, inserito nel nostro credo: \u201cAiutare persone fantastiche a creare cose fantastiche\u201d. Questo si \u00e8 incastrato a coda di rondine con il nostro obiettivo di articolare chiaramente le decisioni di design e di sviluppo per coloro i quali non avevano le informazioni interne al processo o al prodotto originali. Non importa il livello di capacit\u00e0 o il workflow, avevamo bisogno che le persone fossero in grado di aprire questo documento vivente e di utilizzare Bootstrap per creare in maniera rapida e semplice qualcosa che amassero.<\/p>\n All’inizio, Bootstrap includeva solo la tipografia, le tabelle, le form, una guida al colore ed alcuni asset grafici. Era una guida alla best practice della presentazione, a come usare alcune regole di design usate in tutta l’azienda. A quell’epoca, avevamo solo bisogno di un reset CSS pi\u00f9 personalizzato e delle risorse aziendali per aggiungere un minimo di eleganza allo sviluppo.<\/p>\n Fig 2: Una delle primissime feature di uno dei nostri toolkit \u00e8 stata una guida al colore.<\/p>\n<\/div>\n Con il coinvolgimento di sempre pi\u00f9 persone e sempre pi\u00f9 applicazioni possibili, aumentava la richiesta di feature. Alla fine, abbiamo creato molte pi\u00f9 componenti, inclusa una topbar fissa, la navigazione a tab, i dropdown menu, le form estese e altro ancora. Per tutto il processo, la collaborazione tra designer e sviluppatori \u00e8 stata evidente in ogni nuovo componente che abbiamo aggiunto. La collaborazione ha reso possibili molte conversazioni gratificanti ed esaltanti e molte feature.<\/p>\n Fig 3: La nostra release iniziale si concentrava sul supporto dei browser pi\u00f9 recenti ed includeva meno componenti.<\/p>\n<\/div>\n Al momento, Bootstrap include dozzine di componenti e molti altri sono gi\u00e0 stati pianificati, che vengono per\u00f2 realizzati solo se i loro requisiti e la loro funzionalit\u00e0 sono gi\u00e0 stati chiaramente individuati usando il processo che abbiamo stabilito in precedenza. Jacob ed io iteriamo sul toolkit gestendo le richieste di feature e tenendo traccia dei problemi e dei vari bug. Lavoriamo insieme alla valutazione di ciascun nuovo item per capirne l’utilit\u00e0 nella community. Implementiamo una nuova feature solo se non confonde gli utenti o se non gonfia il framework inutilmente. Aver impostato un processo che permette alle persone di valutare imparzialmente le nuove feature \u00e8 incredibilmente potente e assolutamente necessario ai fini del progetto. La nostra collaborazione si \u00e8 estesa ben oltre la portata di un singolo progetto e continua in tutti a partire da quel momento, specialmente in Bootstrap.<\/p>\n<\/div>\n Bootstrap \u00e8 stato usato in test pratici per la prima volta nel mondo reale durante la prima Hackweek di Twitter. Durante quella settimana, ho aiutato alcune persone ad usare Bootstrap nei loro progetti per velocizzare lo sviluppo, ma non avevo idea di quanto efficace o diffuso sarebbe diventato il toolkit. Quando tutti i team si sono presentati davanti all’azienda per illustrare le loro idee, dozzine di loro stavano usando Bootstrap. Avevano usato Bootstrap per creare dei progetti che sembravano tutti come una famiglia di idee, con un design e un’implementazione consistenti. Un toolkit semplice, ben progettato e documentato ha fatto risparmiare moltissime ore con pochissimo o addirittura nessun aiuto da un designer scrupoloso.<\/p>\n\nRiconoscere un’opportunit\u00e0<\/h2>\n
\n
Un esempio<\/h3>\n
![\"Fig.](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/02\/twitter-bootstrap-hover-dropdowns.gif\")
<\/p>\n\n
:hover<\/code>. Abbiamo sistemato i dettagli visivi all’interno della codebase del tool e quindi li abbiamo astratti e documentati per Bootstrap.<\/li>\nSviluppo parallelo<\/h3>\n
\nBootstrap come guida di stile<\/h2>\n
Soddisfare tutti i livelli di capacit\u00e0<\/h3>\n
Evolversi attraverso la collaborazione<\/h3>\n
![\"Fig.](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/02\/twitter-bootstrap-colors.gif\")
<\/p>\n![\"Fig.](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/02\/twitter-bootstrap-v1.gif\")
<\/p>\n\nRiflessioni finali<\/h2>\n