Curiosity: Află cum funcționează butonul Like în aplicații web

Contextul

Bun venit! Sunt Mihai, dezvoltator web și am avut mereu curiozități despre cum funcționează, în spate, tehnologiile pe care le folosim zi de zi. Acesta a fost unul din motivele pentru care m-am decis să devin programator.

Mi-am dorit mereu să înțeleg principiile și felul în care funcționează tehnologiile pe care le folosesc considerând că astfel pot aprecia cel mai bine munca și efortul depus de creatorii lucrurilor respective.

În următorul articol vei descoperi detalii despre modul în care funcționează butonul like, prezent pe toate platformele de socializare. Am ales să analizez acest element de design deoarece, în timp de este unul dintre cele mai simple și intuitive metode de interacțiune, este unul care poate descrie felul în care funcționează în mare măsură aplicațiile web și website-urile în general.

Călătoria unui Like: De la apăsare, la server și înapoi

Butonul like, deși este un element arhicunoscut și prezent pe multe platforme sau website-uri, ascunde în spatele lui un mecanism foarte interesant. Fiecare apăsare de buton pornește o serie de evenimente care fac ca Like-ul tău să apară instantaneu pe ecran.

Tehnologiile Facebook sunt atât de avansate, având scopul de a menține o experiență de utilizator cât mai imperturbabilă. Astfel ele nu pot fi cuprinse într-un singur articol. Din acest motiv detaliez mai jos un proces simplificat și cât mai ușor de înțeles.

“Actorii” din poveste

În general, în acest proces sunt implicați Frontend-ul, Backend-ul și Baza de date.

1. Frontend-ul

Este aplicația sau website-ul cu care interacționezi.

Când acesta are nevoie de date noi de la baza de date, Frontend-ul trimite cereri către Backend și îi cere acestuia să îi aducă din baza de date informațiile necesare prelucrate.

2. Backend-ul

Este o aplicație care prelucrează like-ul tău și îl trimite la baza de date pentru a fi stocat. Îl denumim server.

Primește cereri de la Frontend, face modificări în baza de date și trimite datele prelucrate înapoi pentru a fi reflectate in interfață.

3. Baza de date

Stochează like-ul tău și toate datele din aplicație.

Este precum un excel imens unde toate datele sunt stocate pe categorii.

Astfel, datele tale circulă înainte și înapoi între acești 3 actori pentru a-ți oferi experiența cu care ești obișnuit să comunici cu prietenii tăi în cea mai facilă modalitate de până acum.

Apăsarea butonului de Like

Întreg internetul se bazează, într-o manieră aparent minimalistă, pe 4 tipuri de cerere între Frontend (aplicații, site-uri) și Backend (aplicații de tip server). Prin aceste cereri, Frontend-ul îi cere Backend-ului să facă modificări în baza de date și să returneze date actualizate.

Aceste metode (și traducerile lor în română, raportate la subiectul curent) sunt:

• GET = Obține date
• POST = Adaugă/Postează date
• PUT = Modifică/Updatează date
• DELETE = Șterge date

În momentul în care apeși ‘Like’, browser-ul (frontend) tău inițiază o cerere de tip POST către server (backend), solicitându-i acestuia din urmă să preia datele tale, să le proceseze, să le adauge în baza de date și apoi să trimită rezultatul înapoi către Frontend pentru a afișa modificările.

Cererea POST este un mesaj pe care browser-ul îl trimite serverului Facebook, spunând „Hei, acest utilizator a apăsat butonul Like la această postare! Pune asta în baza de date!”

Este ca și cum ai trimite un mesaj rapid prietenului tău pentru a-i spune că ți-a plăcut ceva. Această cerere conține informații esențiale, cum ar fi ID-ul utilizatorului și ID-ul postării.

Traseul și procesarea rapidă a datelor

În general, din momentul în care apeși like și cel în care datele prelucrate se întorc de la Backend trece un interval de timp de ordinul fracțiunilor de secundă, în funcție de conexiunea ta la internet.

Rapiditatea acestui ciclu se datorează, pe de o parte, infrastructurii avansate a serverelor. Facebook folosește servere puternice care pot procesa milioane de cereri pe secundă.

Un al doilea motiv este dat de optimizările infrastructurii prin metode inedite de a reflecta modificările în interfața cu care interacționezi. Iată un exemplu de optimizare care, după părerea mea, este foarte ingenios și simplu.

Astfel, se poate observa cum răspunsul din aplicație este instantaneu, fără a mai exista vreun interval de așteptare de la interacțiune și până la modificarea interfeței pentru a reflecta schimbările dorite.

Securitatea datelor tale

Securitatea este unul din motivele pentru care există separarea între Frontend și Backend.

Datele sensibile despre contul tău (parole, ID-uri) sunt procesate pe un server, în timp ce tu, utilizatorul platformei, interacționezi nativ cu o interfață grafică. Facebook implementează măsuri riguroase pentru a proteja datele utilizatorilor în timpul transferului.

Interacțiunile dintre Frontend și Backend sunt criptate, ceea ce înseamnă că datele sunt transformate în coduri secrete pe care doar serverul și browserul tău le pot descifra.

Acest lucru previne interceptarea datelor de către terțe părți rău intenționate. În plus, Facebook utilizează tehnologii de prevenire a atacurilor pentru a se asigura că Like-urile sunt autentice și nu generate de roboți.

Impactul (in)vizibil al fiecarui Like

Fiecare Like pe care îl dai nu doar că influențează postarea respectivă, dar contribuie și la algoritmii de recomandare de pe Facebook. Acești algoritmi folosesc interacțiunile utilizatorilor pentru a personaliza fluxurile de postări, asigurându-se că vezi conținutul care te interesează cel mai mult.

Practic, fiecare Like este o mică bucată dintr-un puzzle uriaș care formează experiența ta personalizată pe platformă.

Notă de final

Iată cum un element atât de simplu poate ascunde un mecanism foarte complex și multe ore de muncă pentru ca experiența clienților să fie una excepțională.

Seria de articole The Webfield Curiosity are menirea de a analiza cum funcționează tehnologiile pe care le folosim zi de zi. Sunt aspecte care m-au motivat să le înțeleg la început de carieră și care mă fascinează în momentul acesta.

Am pornit proiectul The Webfield, din dorința de a oferi servicii de calitate în domeniul dezvoltării web. Fie că ai nevoie de un website nou pentru afacerea ta, îți dorești un redesign la unul existent sau ești interesat de dezvoltarea unei aplicații, alege The Webfield pentru viitorul tău proiect.

• Tags:
• online
• Technology
• UI/UX
• web application