Hei! Ne bucurăm ca ești aici! Noi suntem Denisa și Andrei și, de ceva timp, dezvoltarea web și-a făcut loc printre pasiunile noastre. Din acest motiv, s-a născut și dorința de a da mai departe cunoștințele acumulate până acum, dar și de a învăța cât mai multe pe parcurs. Astfel, au apărut pagina @we.code și acest articol. Lectură plăcută! 😀

Dacă te-ai întrebat vreodată cum funcționează toate paginile web pe care le accesăm zi de zi sau care este rolul unui programator în dezvoltarea acestora, atunci continuă să citești acest articol pentru a-ți forma o idee despre acest domeniu plin de oportunități. De asemenea, vei afla și ce tehnologii se folosesc pentru dezvoltare, dar și câteva resurse importante de învățare și inspirație pentru un programator. 

Let’s goo!

Magia din spatele browser-ului

Înainte de a vorbi despre cum putem dezvolta pagini web, credem că ar fi util să vorbim puțin și despre cum acestea ajung la noi. 

Toate website-urile sunt găzduite de servere, care ne „servesc” paginile de care avem nevoie. Atunci când căutăm, de exemplu, 4MAYO în browser, acesta face o cerere către serverul DNS pentru a afla adresa IP a serverului pe care 4mayo.ro este găzduit. 

Domain Name System (DNS) este asemănător unei cărți de telefoane, știi pe cine vrei să suni (4MAYO), dar nu știi și numărul la care trebuie să suni (adresa IP a serverului). Prin urmare, ai nevoie să verifici în cartea de telefoane (DNS), legătura dintre cele două informații. 

Odată ce browserul obține această adresa IP, face o cerere HTTP (protocol de tip text, folosit pentru comunicarea browser – server) către serverul gazdă, care îi răspunde cu o copie a website-ului, ce va fi afișată în final utilizatorului. Acesta este motivul pentru care modificările realizate cu ajutorul inspect element nu sunt persistente. Odată ce se face refresh, browserul reia procesul și o nouă copie este încărcată.

Pentru a înțelege mai ușor, ți-am pregătit și o ilustrație 😀

Ce înseamnă Web Development ? 

În linii mari, Web development se referă la dezvoltarea și mentenanța unui website sau a unei aplicații web. Programatorii au rolul de a dezvolta o aplicație ce arată și funcționează bine, este ușor de folosit și oferă o experiență fluidă utilizatorilor. 

Datorită evoluției tehnologiei, în prezent există numeroase website buildere, ce nu necesită o pregătire în domeniu pentru a dezvolta o pagină web (desigur, cunoștințele te vor ajuta să înțelegi mai bine ce se întâmplă în spate). Acestea sunt folosite în general pentru crearea de magazine online sau pagini de prezentare a companiilor. Exemplele cele mai populare și pe care ți le recomandăm să te documentezi despre ele sunt: WordPress, Wix, Shopify 

În general, dezvoltarea web se împarte în două mari părți, front-end (partea vizibilă de utilizator) și back-end (programele ce rulează pe un server). În momentul în care stăpânești ambele zone, te poți numi un full stack developer, destul de cool ;). Vom detalia puțin ce cuprind acestea, poate una dintre ele te va atrage în acest domeniu.

Ce reprezintă Front-end?

Așa cum am menționat și mai sus puțin, dezvoltarea front-end este implementarea componentei vizuale a unui website și a modului în care aceasta reacționează la acțiunile userului (click, scroll, window resize, etc.). Este posibil să auzi și de termenul de client-side rendering, acesta fiind doar o altă modalitate de a face referire către front-end. 

Pentru a realiza această componentă vizuală, cele mai folosite limbaje sunt: HTML, CSS și JavaScript, acestea fiind nelipsite din suita unui front-end developer. Totodată, de cele mai multe ori, aceste limbaje sunt folosite împreună cu un framework UI, precum Vue, React sau Angular. Gândindu-ne atât la experiența personală, cât și la opiniile altor programatori, dintre cele trei, VueJS este considerat cel mai prietenos cu un junior, fiind urmat apoi de ReactJS. 

  Și pentru că aceste informații și multe altele mai complexe despre front-end development se pot găsi foarte ușor cu o simplă căutare, haide să vedem dacă ție ți s-ar potrivi un astfel de job.

În primul rând, ce face un frontend developer? 

• Implementează design-urile UI/UX (user interface/user experience), iar uneori oferă și feedback asupra acestora;
• Întreține și îmbunătățește implementările existente;
• Asigură o funcționare cât mai rapidă a website-ului din punct de vedere UI;
• Se asigură că website-ul este responsive la principalele dimensiuni ale ecranelor;
• Realizează teste manuale și automate;

Cum știi tu că ți se potrivește un astfel de job? 

• Îți plac implementările vizuale și web design-ul;
• Ai vrea să ai un feedback vizual aproape instant; 
• Ți-ar plăcea să lucrezi la ceea ce văd userii și să le asiguri o experiență cât mai plăcută. 
• Ești atent/ă la detalii (uneori website-urile trebuie să fie pixel perfect);

Ce este în spate? Back-end 

Acum să vorbim puțin și despre ce cuprinde dezvoltarea back-end. În teorie, se ocupă cu implementarea aplicațiilor ce vor rula pe un server, ce vor asigura comunicarea între o bază de date și browser-ul utilizatorului. 

Aici se va pune mai mult accent pe rapiditatea de rulare a codului și a eficienței algoritmilor implementați, astfel încât datele primite din browser (request) să fie procesate rapid și să răspundă imediat cu datele necesare browserului (response).

Totodată, trebuie menționat că pentru aplicațiile ce nu necesită o logică mai complexă pe partea de back-end, dezvoltatorii apelează din ce în ce mai mult la servicii precum Firebase, Parse, Back4App și multe alte “Back-end as a service” ce asigură programatorilor o bază de date, funcționalități de trimitere a e-mailurilor, funcții în cloud și multe alte beneficii reprezentative pentru un server. Acestea sunt foarte folosite pentru a duce produsul creat cât mai repede pe piață și permite unei companii să își scaleze produsul odată cu numărul de utilizatori.

Dacă ți se pare interesant, hai să vedem câteva detalii despre un job în această zonă.

Ce face mai exact un back-end developer?

• Dezvoltă procese pentru interpretarea cererilor (request-uri) browser-ului;
• Testarea apelurilor; 
• Crearea unei logici eficiente în interacțiunea cu o bază de date;
• Creează arhitectura claselor și a bazei de date;
• Testări unitare.

Cum știi tu că ți se potrivește un astfel de job? 

• Ești o persoană tehnică;
• Pasionat de algoritmică și de a scrie cod eficient;
• Cunoașterea algoritmilor de bază și a structurilor de date;

Dacă ai ajuns și până aici, uite și cele mai populare limbaje de programare folosite în dezvoltarea back-end, pentru a le studia mai îndeaproape: Java, Python, Ruby, Javascript (Node.js), C# (.NET)

Pentru a înțelege mai bine diferența dintre cele două, ne putem gândi la un website ca la un ceas, frontendul este ceea ce vedem la ceas – cadranul, cifrele, limbile acestuia, în timp ce backendul este reprezentat de rotițele ce ne oferă ora afișată. 

Crezi că una dintre acestea ți se potrivește? Sau poate amandouă? Iată câteva resurse care pe noi ne-au ajutat: 

• The Net Ninja – Tutoriale despre cele trei framework-uri și nu numai
• Andrei Neagoie – Cursuri despre ReactJS, structuri de date și multe altele
• Dev Ed – Tutoriale despre Web Development & more

„Lecția” de astăzi ți-a fost prezentată de către Andrei și Denisa, iar pe noi ne poți găsi cu mai multe informații despre dezvoltare web pe @we.code._.