Ce înseamnă să fii dezvoltator front-end în 2020 (și mai departe)

Publicat: 2019-12-19

Te-ai gândit vreodată la ce înseamnă cu adevărat partea front -end a dezvoltatorului front-end? L-am întrebat odată pe Eric Meyer (care construiește site-uri web de aproape atâta timp cât au existat site-uri web) dacă știa ce înseamnă termenul încă din primele zile și a spus da. Deci, nu este un titlu sau o poziție nou-nouță, dar cu siguranță sa mutat în domeniu de-a lungul anilor.

„Front-end” înseamnă în esență browser web. Mă consider un dezvoltator front-end și, sincer, nu aș urî dacă m-ai numi dezvoltator de browser web. Dar, probabil că asta nu va prinde bine (și sună ca și cum ați construi browsere web). În calitate de dezvoltator front-end, lucrați îndeaproape cu browserele web și scrieți codul care rulează în acestea, în special HTML, CSS, JavaScript și câteva alte limbi pe care le vorbesc browserele web (de exemplu, formate media precum SVG). Sau, poate chiar mai des explicat, cod care în cele din urmă este procesat în acele limbi pe care browserele le înțeleg. Acesta este teritoriul tău ca dezvoltator front-end!

Browserele nu există singure, ci rulează pe un peisaj larg de dispozitive. Am învățat asta prin era designului responsive. Și cel mai important: utilizatorii folosesc acele browsere pe acele dispozitive. Nimeni nu este mai aproape de utilizator decât dezvoltatorii front-end. Deci, dezvoltatorii front-end scriu cod pentru persoanele care folosesc browsere care rulează pe o mare varietate de dispozitive.

Imagine cu 7 mâini care țin diferite dispozitive mobile, cum ar fi telefoane, laptopuri și tablete.
Imagine de la Shuttershock

Doar a face față acestui peisaj imens de utilizatori, dispozitive și browsere este o treabă în sine! Aș crede că nu în fiecare zi te gândești filozofic la titlul postului tău și asta e bine; Facem doar o mică reflecție aici cu bătrânul tău Chris.

Dacă tocmai ați absolvit un bootcamp de codare și experiența dvs. în construirea de site-uri web este oarecum îngustă și nouă, ați putea fi iertat dacă vă gândiți la dezvoltarea front-end ca „lucrurile React” și dezvoltarea back-end ca „nodul lucruri” sau „lucrurile Python”, așa cum sunt cele mai tari arome din zilele noastre. Nici tu nu te înșeli. React este folosit în general ca un cadru front-end (este literalmente JavaScript care rulează în browsere). Node și Python sunt exemple de limbaje care nu rulează cu adevărat în browserele web; sunt construite pentru a rula pe servere web (uhh, computere).

Rămâneți în acest domeniu pentru o vreme și veți vedea aceste biblioteci, limbi, procese de construire și, la naiba, chiar și filozofii întregi despre cum să construiți cel mai bine site-uri web vin și merg ca un val lent.

S-ar putea să fii martorul unor bătrâni care flutură din când în când cu pumnul, strigând că ar trebui să învățăm din greșelile trecutului. De asemenea, ai putea fi martorii unor tineri deosebit de zbuciumați care flutură pumnii la fel de sus, pronunțând trecutul ca un context irelevant și nu mai este un punct de discuție util.

Imaginea unui copil fiind prost, iar celălalt pare foarte furios și își scutură pumnul.
Imagine de la Shuttershock

Amândoi au dreptate, probabil. Atâta timp cât nimeni nu este urât, totul face parte din flux.

Lucrurile se schimbă. Consider că este adevărat că multe site-uri web de astăzi sunt mai complexe decât site-urile din trecut. Mai ales cele mari. Rețelele sociale și playerele media. Site-urile de rezervare de călătorii. Vitrinele de comerț electronic. Instrumentele de inginerie. Aceste site-uri au început mari și doar au devenit mai mari. Sunt economii pentru ei înșiși, cu echipe masive care îi sprijină. Această complexitate este o cauză a schimbării în tehnologia web și o cauză a frecării între școlile noi și vechi (dacă o putem picta așa simplu).

Mulți oameni care lucrează în tehnologie lucrează, în esență, pentru un site mare. Și așa auzim de la acești oameni cel mai des. Acești oameni construiesc instrumente. Ei scriu postări pe blog, merg pe podcasturi, susțin discuții. Ele ajută la schimbarea tehnologiei în sine, pentru a se potrivi nevoilor lor.

În tot acest timp, „front-end” este încă doar browserul. Limbile browserelor, HTML, CSS și JavaScript sunt încă tehnologiile de bază în joc. Acele limbi evoluează, la fel și browserele în sine, dar mai lent. Ei fac exact opusul sloganului preferat al Silicon Valley: mișcă-te repede și sparge lucrurile . Se mișcă încet și foarte rar sparg ceva.

​​A fi un dezvoltator front-end încă îți pasă de utilizatorii care folosesc acele browsere pe acele dispozitive. Experiența lor este treaba noastră. Uneltele ne ajută doar să o facem, sperăm.

Deci, ce faci ca dezvoltator front-end?

  • Execuți designul astfel încât să arate bine pe orice ecran
  • Aplicați semantică conținutului
  • Creați interfața de utilizare în mod abstract, astfel încât să puteți reutiliza piese și stiluri eficient
  • Luați în considerare accesibilitatea a ceea ce se redă în browser
  • Ești îngrijorat de performanța site-ului, ceea ce înseamnă că ai de-a face cu cât de mare și câte resurse sunt folosite de browser.

Aceste lucruri au fost întotdeauna adevărate și vor fi întotdeauna, deoarece sunt în mod fundamental preocupări la nivel de browser și asta este front-end-ul.

Ceea ce se schimbă este că browserul este capabil să lucreze din ce în ce mai mult. Există tot felul de motive pentru asta, cum ar fi API-urile browserului care devin mai capabile, bibliotecile devin mai sofisticate și computerele devin mai bune, în general. Descărcarea lucrărilor de pe server în browser a avut din ce în ce mai mult sens de-a lungul anilor (aplicații cu o singură pagină!). Deși este interesant să urmărești balansarea pendulului înapoi (site-uri pre-rendate!) și să găsești o cale de mijloc (JAMstack!).

Dezvoltarea front-end în aceste zile ar putea include și:

  • Arhitectarea întregului site de la cea mai mică componentă la pagini întregi până la nivelul URL
  • Preluarea propriilor date de la API-uri și manipularea datelor după cum este necesar pentru afișare
  • Să te ocupi de starea site-ului pe cont propriu
  • ​​Mutarea/modificarea datelor prin interacțiunea și introducerea utilizatorului și păstrarea acestor date în stare și înapoi la servere prin API-uri

Acestea sunt toate lucrurile care pot fi făcute în browser acum, spre marea ochilor acestui vechi dezvoltator. Acesta este un car de fân de responsabilitate când consideri că este peste toate lucrurile pe care deja trebuie să le faci.

O imagine a câțiva oameni diferiți care se uită într-un car de fân mare.
Imagine de la Shuttershock

În timp ce carul de fân de locuri de muncă tinde să crească de-a lungul anilor, lumina călăuzitoare pe care o avem ca dezvoltatori front-end nu s-a schimbat prea mult. Responsabilitatea noastră principală este încă să avem grijă de utilizatorii care folosesc browsere web pe dispozitive. Deci trebuie să luăm niște date. Este grozav, o facem pentru a construi o pagină rapidă, semantică și accesibilă pentru a satisface nevoile utilizatorilor noștri. Deci trebuie să construim un sistem de proiectare. Este grozav, o facem pentru a construi o interfață ușor de înțeles pentru utilizatorii noștri, capabilă să evolueze fără a crea o mizerie inconsecventă. Așa că trebuie să învățăm o nouă tehnologie necunoscută. Ei bine, este datoria noastră să fim atenți și să ne asigurăm că acel lucru nou este în cele din urmă acolo pentru a îmbunătăți site-ul nostru pentru utilizatori.

Mult succes!

O imagine cu Chris Coyier lucrând la biroul lui.
Fotografie de la Kimberly Bailey, fotograful intern al Flywheel

Ce urmează: De ce Chris Coyier alege Local și Flywheel pentru a-și alimenta site-urile web

Aflați cum Chris folosește Local și Flywheel pentru a-și duce site-urile la nivelul următor. Vezi care sunt funcțiile lui preferate, cum se bazează pe Flywheel pentru a-și migra site-urile (gratuit!) și multe altele! Apasa aici pentru a afla mai multe.