Noțiuni introductive cu module și dezvoltare front-end modulară

Toată lumea cunoaște și iubește cărămizile Lego. Am fost cuplat de Lego când eram copil și îi iubesc și astăzi. Îți poți asambla jucăria din toate tipurile de Lego în tot felul de moduri, o bucată la un moment dat. Apoi puteți începe de la capăt și puteți construi o jucărie diferită din aceleași piese. Posibilitățile sunt nesfârșite.

Modulele de pe un site web seamănă mult cu Lego-urile. Gândiți-vă la module ca la piese Lego care vă permit să vă construiți site-ul web. Când le conectați împreună în mod corect, ele formează pagini web. Pentru a construi site-uri web precum Legos, trebuie să vă gândiți la site-uri web ca la o colecție de module independente. Acest articol vă va ajuta să faceți exact asta cu dezvoltarea și designul dvs. front-end.

Modul Colaje

Când intru în faza de proiectare a unui proiect, tind să încep lucrurile cu asamblarea colajelor de inspirație pentru design și colaje de module. Este un proces asemănător celui al lui Dan Mall, care numește aceste colaje livrabile de design pentru o eră post-comp. Colajele de inspirație sunt colecții de capturi de ecran pe care le prezint clientului, doar pentru a-mi face o idee generală asupra direcției vizuale în care ne îndreptăm. Sunt pur și simplu capturi de ecran ale site-urilor web pe care mie și clientul le plac.

Odată ce primim confirmarea că suntem pe aceeași pagină în ceea ce privește stilul, pot să intru în editorul meu grafic (prefer Sketch) și să creez colaje de module. Aceste colaje sunt colecții ale celor mai frecvent utilizate module - butoane, formulare, titluri, paragrafe, liste, imagini și așa mai departe. Colajele modulelor îmi permit să creez rapid bucăți din ceea ce va arăta și va simți site-ul.

Iată o parte a unui colaj recent al meu de module, un exemplu de buton pe care l-am proiectat în Sketch la începutul unui proiect:

Poate vă întrebați când intervin compozițiile statice și prezentarea modelelor perfecte de pixeli către client. Ei nu - le omit aproape în întregime în procesul meu. Omiterea acestei părți a procesului îmi permite să intru în cod foarte devreme în proiect și prototipuri de cod (voi ajunge la acestea în curând), sau cu alte cuvinte, design în browser. Iată câteva dintre avantajele proiectării în browser:

• Browserul este mediul natural pentru un site web, iar aderarea la ideile realizate într-un editor grafic poate fi invers. Este firesc să testați și să luați decizii de design în browsere. L-ați auzit înainte, o veți auzi din nou - nu este vorba despre cum arată, ci despre cum funcționează.

• Vor exista întotdeauna inconsecvențe de design între mock-urile statice și ceea ce ajungeți prin a obține în browser odată ce acestea sunt traduse în cod. Pentru a evita aceste neconcordanțe, accesați editorul de cod și browser pentru a rezolva probleme reale de design.

• Este posibil ca compozițiile statice să nu transmită mesajul corect. Aspectul și senzația vor fi mult diferite odată ce veți integra interactivitatea, cum ar fi stările de hover, tranzițiile și animațiile.

• În loc să petrec ore în șir proiectând mai multe machete statice pentru mai multe rezoluții, pot economisi mult timp intrând în cod devreme. Modificarea CSS-ului îmi permite să demonstrez rapid schimbările și aspectul receptiv clientului pe diferite dispozitive - smartphone-uri, tablete etc.

Așadar, economisiți timp și deschideți editorul de cod și browserul pentru a începe să creați UX cât mai curând posibil. Din experiența mea, majoritatea clienților vor cere o machetă completă a unei pagini sau două înainte de a putea continua cu codarea, iar asta este complet în regulă. Este important ca clientul să aibă o idee bună asupra designului viitor. De obicei folosesc InVision, care este un instrument excelent pentru a ține evidența machetelor timpurii, modificărilor, comentariilor și multe altele. Cu toate acestea, este foarte important ca clienții să înțeleagă că Sketch și InVision nu le vor duce prea departe.

Construirea modulelor pentru dezvoltarea front-end

Odată ce clientul este mulțumit de colajul modulului și de machetele pe care le-am proiectat, pot începe să codific și să definesc aspectul real al acelor elemente.

Designul modular este împletit cu dezvoltarea modulară într-un proces iterativ. Codez un modul, apoi îl încerc în browser pentru a vedea cum funcționează, apoi repet dacă este necesar. Din nou, acest proces seamănă cu construirea Lego-urilor - practic proiectați și dezvoltați în același timp și încercați diferite variante până când vă simțiți bine.

Deseori încep dezvoltarea modulelor cu construirea a ceva simplu, cum ar fi un buton. Imaginați-vă că construiți unul singur și trebuie să codificați un buton portocaliu, folosit în general pentru un formular de contact. Iată cu ce ați putea veni:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Destul de simplu, nu? Ai aplica clasa .submit-button la HTML-ul tău și asta ți-ar rezolva problema actuală. Acum, ce s-ar întâmpla când trebuie să creați un buton nou, exact ca acesta, dar cu o culoare de fundal albastru? Probabil că veți copia exact acea clasă, apoi veți schimba numele clasei și culoarea de fundal. Rapid si murdar. Acum, imaginați-vă că trebuie să utilizați același buton, dar cu un fundal portocaliu. Puteți vedea unde se îndreaptă acest lucru - s-ar putea să ajungeți la repetarea multor CSS. Pe un proiect foarte mic, aceasta poate să nu devină o problemă reală, dar la cele mai mari probabil va fi. Înainte să știi, CSS-ul tău devine umflat și greu de întreținut.

Dacă ați dezvoltat vreodată un proiect la scară medie până la mare, fără îndoială ați avut parte de dureri de cap. Acestea pot fi cauzate de oricare dintre următoarele motive:

• Cod dezordonat, inconsecvent, greu de scanat și de înțeles.
• Cod umflat și fișiere CSS XXL cu multă duplicare.
• Cod greu de întreținut.
• Lipsa de separare a structurii și a pielii.

Nu-ți face griji, nu ești singur. Pun pariu că toți dezvoltatorii front-end s-au confruntat din când în când cu acele probleme dureroase și, probabil, multe altele. Pot spune cu siguranță că am avut o mulțime de proiecte în trecut în care m-am confruntat cu toate acele probleme tipice.

O modalitate de a evita sau de a minimiza aceste probleme este construirea într-un mod modular.

Butonul modular

Cum să codific acel buton într-un mod modular? O abordare modulară ar fi să scrieți cod pe care îl puteți reutiliza. Amintiți-vă de acele Lego, care pot fi folosite și refolosite din nou.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Ceea ce am făcut este o separare inteligentă a stilurilor. Clasa .button conține stilurile pe care fiecare buton din proiectul dvs. le folosește, așa că nu trebuie să o repetați. Clasa .button-orange folosește doar stilurile relevante pentru butonul portocaliu. Ați face același lucru pentru toate celelalte butoane și ați defini culorile de fundal și text.

Modulul dvs. de butoane ar putea ajunge să conțină mai multe butoane independente, gata de a fi utilizate oricând aveți nevoie de ele.

Dar lucruri mai complexe?

Urmați aceleași principii pentru orice altă componentă de care ați putea avea nevoie. Scopul este de a crea module care sunt elemente independente, independente de alte module. Când sunt combinate, aceste module vor forma șabloane, în care pur și simplu reutilizați modulele după cum este necesar și lucrați pentru a vă finaliza designul.

Pentru a citi mai multe despre dezvoltarea front-end modulară, aș recomanda cu tărie SMACSS, care este arhitectura pe care tind să o folosesc în toate proiectele mele, mari sau mici.

Amintiți-vă, procesul modular este totul despre construirea, testarea și iterare. Un modul este mai întâi produs în editorul dvs., apoi testat într-un browser, apoi repetat dacă este necesar. Repetați acel ciclu ori de câte ori este necesar.

Implicarea Clientului

Nu uitați de nevoile clientului - aceștia vor să fie ținut la curent și să primească confirmarea că își câștigă banii. Frumusețea acestui proces de dezvoltare este că clienții pot fi membri activi ai echipei tale. Le puteți arăta în siguranță modulele și pot trece cu vederea procesul de dezvoltare și pot prezenta în orice moment pentru a îmbunătăți produsul. Nu trebuie să aștepte ca o compoziție statică să fie terminată sau să fie atins un punct de hotar înainte de a vedea un progres real. Dacă vă acordați ceva timp pentru a explica cum funcționează modulele clienților dvs., aceștia vor avea o mai bună înțelegere și apreciere a procesului de proiectare și a timpului petrecut pentru construirea lor.

Modul în care aș proceda de obicei despre prezentarea modulelor unui client este la fel ca Bootstrap - configurarea unui modul izolat împreună cu codul său este o modalitate excelentă de a implica toți designerii, dezvoltatorii și clienții în proces.

Utilizați modulele pe care le-ați construit ca elemente de bază pentru pagini. Pentru pagina dvs. de index, puteți pune modulul de navigare în partea de sus, un modul erou în continuare, unele dintre modulele de conținut în continuare, apoi subsolul în partea de jos. Înainte să știi, ai deja o pagină pentru un prototip HTML. Dar ce este un prototip, mai exact? Întotdeauna mi-a plăcut definiția prototipului dată de Leah Buley din marea sa carte The User Experience Team of One:

Exemple funcționale sau semi-funcționale despre modul în care proiectul ar trebui să se comporte și să funcționeze odată implementat.

Prin construirea unui prototip, exact asta veți obține în faza incipientă a proiectului - un site web semi-funcțional. Acolo unde machetele statice și InVision nu se potrivesc, prototipurile HTML excelează. Prototipul servește ca un produs perfect receptiv pentru clienții dvs. Și odată ce clientul este în regulă cu aspectul și senzația prototipului dvs., tot ce trebuie să faceți este să îl lustruiți până când funcționează așa cum trebuie. Construiți, testați, repetați.

Reutilizați blocurile de construcție

Modulele și prototipurile vă vor permite să reutilizați codul pentru proiectul curent, dar și pentru proiectele viitoare. Modificarea unui modul din ultimul proiect vă poate economisi mult timp - modulele de care aveți nevoie în fiecare proiect sunt adesea similare. Am o bibliotecă mare de module pe care le reutilizam adesea: file, meniuri de navigare, butoane, breadcrumbs, formulare, tabele, paginare, liste etc. În timp ce codul acelor module nu este exact același în toate proiectele, o bună parte din el. poate fi reutilizat, economisindu-mi mult timp de dezvoltare. Sfatul meu pentru tine este să creezi module reutilizabile și pentru tine. Consultați BASSCSS, Pure și Refills pentru a vă inspira.

Nu vă descurajați dacă trecerea la proiectarea și dezvoltarea modulare necesită timp. Desigur, dacă principiile modulare sunt noi pentru dvs., acestea vor necesita o modificare a procesului dvs. de proiectare și dezvoltare, dar schimbarea se poate dovedi a fi utilă.

Metodele și tehnicile modulare pe care le-am abordat în acest articol sunt doar zgârieturi de suprafață. Cu toate acestea, sper din tot sufletul că acest articol a fost util și că v-a intrigat să vă scufundați în design și dezvoltare modulară.