Pe care să alegi și când

de
Tweet
Share
Share
Pin

În primele mele incursiuni în dezvoltarea frontend, termenii JavaScript, React, HTML și CSS erau omniprezenți. Deși HTML și CSS sunt relativ ușor de înțeles, JavaScript și React se pot dovedi mai dificil de stăpânit.

Discuția dintre React și JavaScript este constantă în sfera UI. Care este, de fapt, diferența dintre React și JavaScript? Când este preferabil să folosim React în locul JavaScript și invers? Acestea sunt întrebări pe care probabil ți le pui acum.

În acest articol, voi examina React și JavaScript ca tehnologii esențiale în dezvoltarea web, voi compara atributele lor și voi oferi sfaturi privind utilizarea adecvată a fiecăreia în construirea de aplicații.

Ce este JavaScript?

JavaScript este un limbaj de scripting care transformă paginile web în entități interactive și dinamice. Adesea, vei auzi termenul „Vanilla JavaScript” sau „JavaScript simplu” folosit pentru a descrie acest limbaj. Majoritatea dezvoltatorilor frontend se bazează pe JavaScript, alături de limbajul de marcare hipertext (HTML) și foile de stil în cascadă (CSS), pentru a construi interfețe utilizator.

JavaScript este un limbaj versatil, capabil să creeze aplicații web, jocuri și chiar aplicații mobile. Simplitatea sa și flexibilitatea l-au poziționat ca cel mai popular limbaj de programare, conform Studiului StackOverflow 2023.

Sursa imagine: stackoverflow.co

Caracteristici JavaScript

JavaScript și-a menținut poziția de cel mai utilizat limbaj de programare timp de mulți ani. Caracteristicile sale explică dominația și popularitatea sa:

Un limbaj de scripting cu programare asincronă

JavaScript permite scrierea de scripturi ce pot fi executate într-un mediu de rulare. Un limbaj de scripting precum JavaScript este ideal pentru prototipare rapidă, dezvoltarea de aplicații web și automatizarea sarcinilor repetitive.

JavaScript nu este blocant și utilizează mecanisme precum callback-uri, Promisiuni și async/await pentru a suporta programarea asincronă. Această caracteristică simplifică preluarea datelor de pe un server fără a bloca firul principal de execuție.

Exemplu de cod:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Date preluate cu succes!");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data);  // Afișează: Date preluate cu succes!
});

Funcția fetchData returnează o promisiune. Parametrii „resolve” și „reject” indică finalizarea sau eșecul operațiunii asincrone.

Manipularea DOM

Manipularea Document Object Model (DOM) facilitează modificarea structurii unui document HTML în funcție de acțiunile utilizatorului.

Exemplu de cod:

var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
            heading.textContent="Text schimbat!";
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });

Avem un listener de evenimente care detectează modificările bazate pe acțiunile utilizatorului. Când butonul este apăsat, culoarea titlului se schimbă.

Tipizare dinamică

Tipurile de date ale variabilelor în JavaScript sunt stabilite la momentul execuției. Această particularitate permite dezvoltatorilor să scrie cod rapid, fără a fi necesară specificarea explicită a tipurilor de variabile.

Exemplu de cod:

let variable1 = 42;  // variable1 este de tip număr
console.log(variable1);  // Afișează: 42

variable1 = "Bine ai venit pe tipstrick.ro!";  // Acum variable1 este de tip șir de caractere
console.log(variable1);  // Afișează: Bine ai venit pe tipstrick.ro!

În primul exemplu, am atribuit variabilei1 valoarea 42. Ulterior, îi putem atribui valoarea „Bine ai venit pe tipstrick.ro!” în al doilea exemplu.

Extensibilitate

JavaScript poate fi extins prin diverse biblioteci și cadre de lucru terțe. Angular este un exemplu de framework JavaScript, în timp ce React este o bibliotecă JavaScript.

Ce este React?

React este o bibliotecă JavaScript populară pentru crearea interfețelor de utilizator web și mobile. Această bibliotecă a fost dezvoltată de Meta (fostă Facebook) pentru uz intern și ulterior a fost lansată ca proiect open-source. React a fost creat pentru a reduce erorile pe care dezvoltatorii le întâmpină atunci când construiesc interfețe utilizator. Această bibliotecă permite construirea de componente reutilizabile, mici fragmente de cod.

React este cunoscut pentru sintaxa sa, JSX, care combină HTML și JavaScript. Această sintaxă permite dezvoltatorilor să scrie HTML și JavaScript în același fișier. React poate fi folosit și cu framework-uri front-end precum Bootstrap pentru a stiliza aplicația.

Caracteristici React

React se numără printre cele mai utilizate tehnologii web, conform Studiului Stackoverflow 2023.

Sursa imagine: stackoverflow.co

Următoarele caracteristici explică popularitatea sa:

Bazat pe componente

React adoptă o arhitectură modulară care facilitează construirea de mici fragmente de cod, ușor de refolosit. Astfel, componentele pot fi modificate, editate, adăugate sau eliminate fără a fi necesară rescrierea codului.

Această bibliotecă are un director „src” unde se află toate componentele. Aceasta este structura de directoare a unei aplicații React.

Declarativ

Această bibliotecă permite dezvoltatorilor să descrie starea aplicației și a interfeței utilizator. React se ocupă de actualizările necesare, în conformitate cu descrierea dezvoltatorului. Practic, dezvoltatorul descrie rezultatul dorit, iar React determină modalitatea de implementare.

Exemplu:

const numbers = [1, 2, 3, 4];

const DoubledNumbersList = () => {
  return (
    <ul>
      {numbers.map(number => (
        <li key={number}>{number * 2}</li>
      ))}
    </ul>
  );
};

// Redare componentă
ReactDOM.render(<DoubledNumbersList />, document.getElementById('root'));

Avem un array „numbers” și o componentă „DoubledNumbersList”. Am declarat că fiecare număr trebuie dublat și afișat sub formă de listă. Astfel, am descris cum ar trebui să arate interfața utilizator.

Legare de date unidirecțională

React utilizează un flux unidirecțional de date. Această caracteristică descrie modul în care datele circulă de la componentele părinte la componentele copil. Dacă o modificare este realizată în componenta părinte, componentele copil reflectă automat schimbările.

Însă, modificările unei componente copil nu vor fi reflectate în componenta părinte. Această legare unidirecțională a datelor simplifică gestionarea stării aplicației într-un mod previzibil.

import React, { useState } from 'react';

// Componenta copil
const ChildComponent = ({ data }) => {
  return (
    <div>
      <p>Date primite de la parinte: {data}</p>
    </div>
  );
};

// Componenta parinte
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Date initiale');

  const handleDataChange = () => {
    // Modificarea starii in componenta parinte
    setParentData('Date actualizate');
  };

  return (
    <div>
      <button onClick={handleDataChange}>Schimba Date</button>
      {/* Transmiterea datelor catre componenta copil ca proprietate */}
      <ChildComponent data={parentData} />
    </div>
  );
};

// Componenta App
const App = () => {
  return (
    <div>
      <h1>Exemplu React Legare Date Unidirectionala</h1>
      {/* Redarea componentei parinte */}
      <ParentComponent />
    </div>
  );
};

export default App;

ParentComponent folosește useState pentru a gestiona starea parentData. Funcția handleDataChange îi modifică starea.

Avem o componentă funcțională, ChildComponent, care afișează datele primite ca proprietăți.

DOM virtual

React creează un DOM virtual de fiecare dată când starea unei componente React se schimbă. Această bibliotecă compară modificările din DOM-ul virtual cu DOM-ul real și actualizează doar porțiunile necesare.

Exemplu de cod:

import React, { useState } from 'react';

const App = () => {
  // Stare pentru a urmari un contor
  const [counter, setCounter] = useState(0);

  // Gestionar eveniment pentru a actualiza contorul
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Contor: {counter}</h1>
      <button onClick={incrementCounter}>Incrementeaza</button>
    </div>
  );
};

export default App;

Am declarat o variabilă cu un buton care crește la fiecare clic al utilizatorului. React nu modifică întregul DOM atunci când un utilizator apasă butonul. Verifică doar schimbările, le compară cu DOM-ul real și îl actualizează.

React vs. JavaScript

Caracteristică React JavaScript
Utilizare/Tip React este o bibliotecă JavaScript pentru construirea interfețelor de utilizator. JavaScript este un limbaj de programare utilizat în dezvoltarea web. Este folosit mai ales în frontend, dar a fost adoptat și în backend cu tehnologii ca Node.js.
Curba de învățare React are o curbă de învățare mai abruptă, datorită introducerii sintaxei JSX și a arhitecturii bazate pe componente. Cunoștințele de bază în JavaScript sunt necesare pentru a înțelege conceptele React. JavaScript Vanilla este mai ușor de înțeles. Un dezvoltator trebuie să cunoască HTML și CSS pentru a putea folosi eficient JavaScript.
Istoric React a fost lansat în 2013 și a crescut rapid în popularitate. JavaScript a fost lansat în 1995 și a devenit cel mai folosit limbaj de-a lungul timpului. Nu este corect să-l compari cu React, care este o bibliotecă ce face parte din ecosistemul JavaScript.
Mentenanță React permite construirea de componente modulare și reutilizabile. Mentenanța acestora este simplă, deoarece nu este nevoie să rescrii codul pentru a adăuga noi funcționalități sau a le actualiza pe cele existente. Aplicațiile mari pot fi dificil de întreținut. Prea mult JavaScript în același fișier afectează lizibilitatea codului.
Performanță UI/UX React utilizează DOM virtual pentru a construi și gestiona interfețe complexe. Această bibliotecă permite organizarea codului în fragmente mici, facilitând actualizarea rapidă a DOM-ului. JavaScript simplu necesită multă intervenție manuală pentru a obține performanțele dorite.
Securitate React este construit pe interoperabilitate, ceea ce îl face vulnerabil la anumite atacuri. Însă, securitatea unei aplicații React poate fi îmbunătățită cu ajutorul aplicațiilor terțe. JavaScript are diverse funcții de securitate încorporate. API-urile sale nu oferă token-uri de securitate temporare, ceea ce îl face mai sigur.
Ecosistem React are o colecție mare de biblioteci și framework-uri terțe, dar ecosistemul său este mai mic în comparație cu JavaScript. JavaScript are mii de biblioteci, inclusiv React, și framework-uri precum Vue și Angular. Unele dintre acestea pot fi utilizate în diverse ecosisteme.

Limitările React

În ciuda numeroaselor avantaje, React are anumite limitări:

  • Nu suportă browsere mai vechi: React este conceput să funcționeze cu browsere moderne precum Google Chrome, Opera, Mozilla Firefox, Apple Safari și Microsoft Edge. Pot apărea probleme la rularea React pe browsere mai vechi.
  • Proiectat pentru frontend: React ajută dezvoltatorii să creeze interfețe de utilizator. Poate fi utilizat și cu framework-uri Node.js, cum ar fi ExpressJS, pentru aplicații full-stack.
  • Curbă de învățare abruptă: Învățarea React poate fi dificilă pentru începătorii în programare.

Limitări ale JavaScript

JavaScript este un limbaj puternic. Conform Statista, mai mult de 63% dintre dezvoltatori folosesc JavaScript.

Totuși, limbajul prezintă următoarele dezavantaje:

  • Consumă mult timp: dezvoltatorii trebuie să scrie cod de la zero când utilizează JavaScript simplu în aplicație.
  • Nu este ideal pentru aplicații mari: mentenanța aplicațiilor mari în JavaScript poate fi complicată.
  • Un singur fir de execuție: JavaScript procesează o operație pe rând, limitând performanța sarcinilor ce necesită mult CPU.

React vs JavaScript: Pe care să o alegi?

React și JavaScript nu sunt concurenți direcți. React este doar o parte din multitudinea de biblioteci JavaScript pentru construirea interfețelor utilizator.

Totuși, există scenarii în care poți alege între JavaScript și React. În anumite cazuri, React va fi mai potrivit decât JavaScript și invers. Din analiza mea, poți utiliza oricare dintre tehnologii atunci când:

Când să alegi React în defavoarea JavaScript

  • Dorești să construiești rapid aplicații: React oferă un cod standard ce simplifică crearea de aplicații. Poate fi folosit alături de diverse framework-uri și biblioteci, ușurând munca.
  • Construiești aplicații mari: arhitectura modulară a React facilitează construirea și mentenanța aplicațiilor mari. Poți actualiza, șterge sau adăuga componente noi pentru a-ți scala aplicația fără a modifica codul sursă.
  • Creezi aplicații cu conținut dinamic: poți folosi React alături de biblioteci terțe, cum ar fi Redux, pentru a gestiona starea aplicației. Această bibliotecă creează un DOM virtual care actualizează doar porțiunile necesare, în momentul în care utilizatorii actualizează aplicația.

Când să alegi JavaScript în defavoarea React

  • Aplicații mici: JavaScript este ideal pentru aplicații mici care nu necesită multe interacțiuni din partea utilizatorului.
  • Dorești să înțelegi cum funcționează JavaScript: JavaScript Vanilla îți oferă posibilitatea de a configura majoritatea aspectelor de la zero, permițând o înțelegere profundă a limbajului.

Concluzie

Sperăm că acum înțelegi diferențele dintre React și JavaScript, caracteristicile și scenariile de utilizare. Din analiza noastră, JavaScript este ideal pentru proiecte mici, în care scopul este de a înțelege funcționarea limbajului.

Pe de altă parte, React poate fi utilizat în cazul proiectelor mari, unde accentul se pune pe interfața utilizator. Atât React, cât și JavaScript oferă posibilitatea de a utiliza diverse framework-uri și biblioteci JavaScript.

Dacă dorești să analizezi o tehnologie concurentă cu React, consultă articolul nostru despre React vs Angular.