Proiectarea Bootstrap pentru Twitter

Proiectarea Bootstrap pentru Twitter

Articolul in engleza provine de la http://www.alistapart.com/articles/building-twitter-bootstrap/

de de MARK OTTO

În urmă cu un an și jumătate, câțiva angajați ai companiei Twitter s-au hotărât să aducă îmbunătățiri uneltelor analitice și administrative. După câteva întâlniri și discuții pe marginea acestui produs, ne-am propus cu ambiție să creăm un toolkit de folosit în cadrul Twitter și nu numai. Astfel, ne-am decis să creăm un sistem care ar ajuta persoane ca noi să construiască noi proiecte pe baza lui. Așa a apărut Bootstrap.  
Conceput de mine și Jacob ThorntonBootstrap reprezintă un toolkit open-source front-end creat pentru a veni în ajutorul designerilor și a dezvoltatorilor care doresc să facă lucruri online repede și eficient. Scopul nostru este să oferim o bibliotecă extensivă, rafinată și bine documentată de componente flexibile pentru design, construite cu HTML, CSS și JavaScript pentru ca alții să le folosească drept bază pentru alte proiecte și inovații. Astăzi a ajuns să includă zeci de componente și a devenit cel mai cunoscut proiect pe GitHub cu peste 13.000 de vizitatori și 2000 de conexiuni.
Acest articol își propune să explice felul în care a apărut Bootstrap, motivul pentru care a fost conceput și cum a evoluat într-un sistem de design.
Recunoașterea unei oportunități
O parte din primele noastre instrumente Twitter nu aveau un design rafinat și atrăgător, de aceea ne-a venit greu să le dezvoltăm sau să le iterăm repede. Persoane implicate în diverse echipe au admis această problemă și, mai mult, au văzut în ea o oportunitate pentru proiecte viitoare. Admițând acest lucru, am inițiat un mic proces de colaborare între Design și Inginerie.   
La nivel înalt, procesul nostru arăta cam așa:
Câțiva dezvoltatori de unelte interne au colaborat cu managerii responsabili cu produsele și potențialii utilizatori pentru a identifica principalele elemente și modul de funcționare.
Am colaborat cu dezvoltatori pentru a identifica nevoile noastre și apoi a le crea în browser pentru a obține un limbaj vizual consistent și a explora interacțiunile. După prima implementare, am dezbătut pe marginea fiecărei componente și am cântărit cu atenție alte opțiuni și implementări înainte de a merge mai departe.  
După aceea, am creat și codat componente izolate pentru proiectul de unelte interne noi pe care ne-am propus să-l dezvoltăm. În acest interval, am implementat, testat și iterat fiecare nouă funcție.
La sfârșit am luat aceleași componente din proiectul cu instrumente interne și le-am încărcat într-un codebase partajat (Bootstrap) pentru a le pune la dispoziția altor proiecte.
Toate aceste eforturi au dus la nașterea unui concept principal: colaborarea dintre designeri și dezvoltatori. Bootstrap este rezultatul interacțiunii constante cu dezvoltatorii, interacțiune care a permis dezvoltarea sa și un an mai târziu. De la idei whiteboarding, la coduri de prototipuri, colaborarea între discipline a condus la succesul Bootstrap pentru utilizarea internă în Twitter. Acest proces a stat la baza dezvoltării fiecărei caracteristici din Bootstrap și a funcționat foarte bine de-a lungul timpului.
Comunicarea a fost elementul cheie în construirea Bootstrap, iar designul a fost efectuat în cod. Și cum produsul final pentru Bootstrap este întotdeauna codul, este de la sine înțeles că am lucrat foarte mult la acesta pentru a face schimb de idei. Astfel, am îmbinat calitățile unui bun dezvoltator prin încurajarea componentelor succinte, cu viziunea profundă și ochiul format pentru vizual al unui designer dedicat.

EXEMPLU
Fig. 1
Fig. 1: Meniuri dropdown la prima lansare Bootstrap au fost puse pe hover.
Să analizăm o caracteristică Bootstrap: meniurile dropdown. Pentru a contribui la găzduirea informațiilor legate de sesiunea în curs și influențarea altor zone ale uneltei, am avut nevoie de dropdown-uri. Toată lumea are meniuri dropdown în aplicațiile personale, fiecare cu implementări, interacțiuni și design vizual diferite, deci cum am putea face asta? Urmând modelul de mai sus, iată cum a ajuns caracteristica să fie inclusă în Bootstrap:   

Am admis că avem prea multe linkuri de navigare și acțiuni în bara de sus pe care o folosim și soluția părea a fi una a dropdown-urilor extensive, multi-nivel.
Am colaborat pentru a identifica de ce au fost inițial necesare atât de multe linkuri și acțiuni și de ce am avea nevoie de suport multi-nivel.  
După o serie de discuții, am reușit să rearanjăm bara de sus pentru a înlătura anumite linkuri și a implementa dropdown-urile, dar fără suportul multi-nivel. La acel moment, acest lucru însemna mai mult cod care ar fi complicat implementarea noastră și ne-am dorit să evităm acest lucru.
Apoi am scris HTML și CSS de bază pentru dropdown-uri pe hover. Am redefinit detaliile vizuale în cadrul codebase și apoi le-am abstractizat și documentat pentru Bootstrap.
Ca ultim pas în timpul abstractizării Bootstrap, am optat pentru un comportament declanșat de click și nu hover. Am considerat că acest lucru ar ajuta la evitarea confuziei și click-urilor accidentale, oferind astfel o mai bună experiență.
Majoritatea componentelor și multe dintre micile detalii din jurul lor au fost proiectate și construite datorită colaborării designerilor și a dezvoltatorilor.  Împreună, procesul nostru pentru fiecare nouă caracteristică sau componentă de design s-a maturat spre ideație, dezbatere, revizuire a caracteristicilor, implementare și, în cele din urmă, abstractizare și documentare. Acest lucru a determinat o dezvoltare lentă a uneltelor noastre interne, permițându-ne să evităm feature creep și code bloat și ne-a ajutat să documentăm nu numai modul de folosire al unei componente, ci și motivul pentru care ar trebui să folosim o componentă anume în Bootstrap.
Această particularitate se extinde dincolo de noile caracteristici, la cele deja existente. Dacă o caracteristică pe care o avem deja trebuie modificată sau înlăturată, urmăm aceeași pași: ideație, revizie, implementare și documentare. Continuând acest exemplu, am primit multe feedback-uri pe marginea dropdown-urilor și este posibil să revenim asupra suportului multi-level. Deoarece aplicațiile web se comportă din ce în ce mai mult ca replici la desktop – care folosesc dropdown-uri multi-nivel – era de așteptat să luăm în considerare susținerea lor. Desigur – am putea uita deciziile anterioare – însă acest proces ne permite să rămânem onești, relevanți și răspunzători pentru utilizatorii noștri și nevoile lor.

DEZVOLTARE PARALELĂ
Procesul nostru s-a desfășurat aproape pe tot parcursul dezvoltării de caracteristici și a evidențiat un aspect important al deciziei de a merge dincolo de construirea unui simplu instrument. Dezvoltarea paralelă se referă la comunicarea efectivă cu alte persoane care nu au fost expuse la procesele activității noastre sau nu au cunoștințele necesare acesteia.
În timp ce lucram la crearea proiectarea unui produs și la determinarea obiectivelor unui singur proiect, am considerat necesar modul în care alții ar folosi aceeași componentă. Absractizarea și documentarea componentelor a devenit o parte din procesul nostru de proiectare a acestui instrument și Bootstrap în tandem. Per ansamblu, am Salvat timp și efort, am dezbătut mai clar pe marginea valorii de a adăuga (și, ocazional, de a înlătura) caracteristici, și ne-am propus să lucrăm la proiecte mai ample în viitor.
După primele săptămâni de dezvoltare, am început să ne referim la acest document în lucru ca “toolkit proiectate sub formă de manual de stil”. Aceasta ne-a îndeplinit scopul de a ne comunica munca prin Bootstrap, permițându-i acestuia să se extindă și să poată fi folosit de toată lumea.  

Bootstrap ca manual de stil
Decizia de a crea Bootstrap ca manual de stil a fost firească în contextul procesului de design și dezvoltare. Bootstrap ne permite documentarea componentelor cu exemple vii, pe măsura proiectării lor, în timp ce servește de exemplu ca document care funcționează prin el însuși, prin componentele și șabloanele pe care le prescrie. Ne-a oferit un punct unic de referință  pentru a transmite mai departe sfaturile designerilor și a creat un set de documentație pentru fiecare componentă.
Proiectarea Bootstrap ca manual de stil i-a afectat inițial dezvoltarea deoarece ne-a permis să rămânem onești în privința caracteristicilor pe care am dorit să le implementăm, având posibilitatea de a privi dincolo de un singur proiect. Nu am dorit să ne limităm la crearea unui singur proiect – aveam ambiții mai mari dar nu am vrut să îngrădim libertatea noastră sau a celor care ar putea beneficia de pe urma unei astfel de unelte. Abordarea aleasă nu ne-a permis numai proiectarea de unelte pentru Twitter, ea putând fi folosită de orice designer sau dezvoltator.

O SOLUȚIE ADAPTATĂ TUTUROR
Acest tip de abordare oferită de document ne-a permis să partajăm kitul de unelte complet și să oferim o documentare scrisă interactivă oricui dorește să folosească Bootstrap. Această abordare vine în întâmpinarea nevoilor tuturor, permițându-ne să clonăm sau descărcăm repo pentru codul sursă, să folosim Inspectorul sau să vizualizăm sursa în programul de navigare.
Pe măsură ce am avansat, acest lucru a devenit unul din principiile de bază ale muncii noastre bazată pe convingerea că putem ajuta oameni minunați să facă lucruri mărețe, potrivindu-se și scopului nostru de precizare clară a deciziilor din design și dezvoltare celor care nu au avut nici un fel de indiciu asupra procesului original sau al produsului. Indiferent de nivelul de abilități sau volumul de muncă, aveam nevoie de oameni care să deschidă acest document și să utilizeze Bootstrap pentru a construi cu rapiditate și ușurință ceea ce își doresc.      

EVOLUȚIE PRIN COLABORARE
Inițial Bootstrap nu includea decât tipografie, tabele și forme, un manual pentru colori și câteva posibilități grafice. Era un ghid de prezentare foarte practic pentru învățarea regulilor de design ale companiei noastre. Atunci nu aveam nevoie decât de resursele companiei și un CSS reset mai personalizat pentru mai mult fler în dezvoltare.   
Fig. 1


Fig 2: Una din primele caracteristici ale setului nostru de unelte era un manual de culori performant

Pe măsură ce s-au implicat mai multe persoane și au fost necesare mai multe aplicații, am dezvoltat o serie de caracteristici noi. În timp am dezvoltat multe componente, printre care o bară de sus fixă, navigare cu tabb-uri, meniuri dropdown, forme extensive și multe altele. De-a lungul întregului proces, colaborarea între designer și dezvoltator s-a văzut în fiecare nouă componentă adăugată. Colaborarea a dus la multe conversații și caracteristici interesante.
Fig. 3


Fig 3: Release-ul nostru inițial, orientat să suporte ultimele browsere și care include mai puține componente.
Astăzi, Bootstrap include zeci de componente mult mai bine planificate, dar numai că nevoile și funcționalitatea lor au fost clar identificate utilizând procesul pe care l-am stabilit cu un an înainte. Jacob și cu mine am îmbunătățit toolkit-ul prin administrarea caracteristicilor cerute și prin urmărirea problemelor și a bug-urilor. Colaborăm pentru evaluarea fiecărui nou item și pentru determinarea utilității pentru comunitate. Noi implementăm o nouă caracteristică doar dacă nu derutează utilizatorii sau dacă nu îngreunează în mod inutil munca. A avea un proces în loc, care permite oamenilor să evalueze noile caracteristici, este incredibil de puternic și necesar pentru proiect. Colaborarea noastră s-a extins dincolo de un singur proiect, aplicând ceea ce am învățat în fiecare nou proiect, în special Bootstrap.

Concluzii
Bootstrap a avut primul său test în lumea reală, fiind folosit la primul Hackweek al lui Tweeter. În timpul săptămânii am ajutat câteva persoane să folosească Bootstrap la proiectele lor, să-și accelereze dezvoltarea, dar nu am știut cum să diseminez efectiv toolkit-ul. Când toate echipele au venit în companie să-și prezinte ideile, multe din ele utilizau Bootstrap. Ei au utilizat Bootstrap pentru a crea proiecte pe care toți le-au simțit ca o familie de idei, cu un design și o implementare consistente. Un toolkit simplu, bine proiectat și implementat a salvat nenumărate ore de muncă fără niciun ajutor din partea vreunui proiectant dedicat. Altfel spus, a funcționat!
Cu proiectul acum open-source și disponibil pentru toți pe GitHub, succesul nostru continuă, pe măsură ce noi ajutăm oameni de peste tot să-și accelereze dezvoltarea web. Procesul nostru de dezvoltare pentru Bootstrap rămâne intact, dar a evoluat pentru a se folosi de feedback-ul constant al GitHub prin urmărirea problemelor și folosind caracteristicile wiki, pentru a comunica mai eficient cu cei ce folosesc toolkit-ul. Din această cauză am scos un număr așa mare de versiuni și avem și mai multe planificate. Următoarea noastră versiune majoră este v2, un mare efort pentru a adăuga un sistem grid responsiv, a extinde plugin-urile JavaScript, a elimina nenumăratele bug-uri și a ne îmbunătăți documentația.
Fără dezvoltarea paralelă și colaborarea între echipe, Bootstrap nu ar fi existat și noi nu am fi creat o altă unealtă. Proiectele interne, cum ar fi Bootstrap au început să schimbe felul în care noi lucrăm împreună. Întrebările încep să se schimbe în rândul echipelor, din “a face acest lucru să arate mai bine” sau ”a construi aceasta” în “cum putem rezolva această problemă” - și Bootstrap se bazează pe asta. Procesul colaborativ ne-a ajutat să lucrăm mult mai eficient și să ne câștigăm încrederea unii în alții.

Datorită unei perspective și concentrări a unui mic grup de designeri și dezvoltatori, suntem capabili să evoluăm în procesul de dezvoltare, să construim un toolkit vast, capabil să ajute alte mii de oameni la proiectele lor preferate. 



 

 

A little about us

We're not just technologists, we work in partnership with our clients and resellers offering expert advice across strategy, planning, creative design, and marketing. Our product range has been developed to work hand-in-hand with a clients existing business and can be delivered on any level that our customers choose.