JavaScript: bazele limbajului, React Native și dezvoltarea aplicațiilor mobile

Ce este JavaScript?

JavaScript (JS) — limbaj de programare de nivel înalt cu tipizare dinamică, moștenire prototipală și funcții ca obiecte de primă clasă. Creat de Brendan Eich în 1995 în 10 zile. Este unul dintre cele trei limbaje principale ale tehnologiilor web (HTML, CSS, JS) și baza platformei server Node.js (2009), care a permis JS să iasă dincolo de browser.

În dezvoltarea mobilă, JavaScript este utilizat în trei paradigme: compilare nativă (React Native cu Hermes/JSC), containere WebView (Ionic, Cordova) și JS server (Node.js + Express pentru backend-ul aplicațiilor mobile). React Native — tehnologia dominantă: conform Statista (2025), 38% dintre proiectele cross-platform folosesc React Native, cedând doar în fața Flutter (46%).

Caracteristica cheie a JavaScript — modelul de execuție cu un singur fir cu I/O neblocant. Event loop permite procesarea a mii de operații asincrone într-un singur fir fără a crea fire de sistem de operare. Aceasta face JS eficient pentru aplicații încărcate cu I/O (cereri de rețea, lucru cu baze de date), dar necesită prudență la calcule CPU-intensive.

Standarde JavaScript: ES5, ES6, ES2025

Standardul ECMAScript (ES) definește specificația JavaScript. ES6 (2015) a introdus let/const, funcții săgeată, clase, module, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Motoarele moderne Hermes (React Native) și V8 (Node.js) suportă ES2022+. React Native Hermes suportă ES2020+ cu limitări separate privind Proxy și Symbol.

Sintaxa JavaScript: tipuri, funcții și prototipuri

Sintaxa JavaScript — asemănătoare cu C, tipizată dinamic. Tipul variabilei este determinat de valoare și se poate schimba în runtime. let și const (ES6) au înlocuit var pentru domeniul de vizibilitate la nivel de bloc. Tipuri primitive: string, number, boolean, null, undefined, symbol, bigint. Orice altceva este obiect (object, array, function, date, regexp).

Funcții ca obiecte de primă clasă

JavaScript — limbaj cu funcții de ordin superior. Funcțiile pot fi atribuite variabilelor, transmise ca argumente, returnate din alte funcții. Funcțiile săgeată (=>) nu au propriul this — ele moștenesc this din contextul extern. Închiderea (closure) — o funcție care reține variabilele din domeniul de vizibilitate în care a fost creată.

// Tipuri de date și funcții în JavaScript
// Tipuri primitive
const name = 'React Native';
let version = 0.71;
var isActive = true; // var învechit

// Obiecte și array-uri
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// Funcție de ordin superior
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Închidere (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Operator spread pentru copierea obiectelor
const newApp = { ...app, version: 16 };

Operatorul spread ... creează o copie superficială a obiectului. Destructurarea (const { platform, version } = app) extrage câmpuri în variabile. Funcția săgeată în filterByVersion este mai scurtă decât expresia function și nu creează propriul this — acest aspect este critic în componentele React Native, unde this se referă la clasa componentei.

Moștenire prototipală

JavaScript utilizează moștenirea prototipală, nu pe cea bazată pe clase ca Java sau C#. Clasele (ES6) — zahăr sintactic peste prototipuri. Fiecare obiect are o referință internă [[Prototype]] către un alt obiect. La accesarea unei proprietăți care nu există în obiect, JS o caută în lanțul de prototipuri. Sintaxa bazată pe clase (extends, super) face codul mai lizibil, dar sub capotă rămân prototipuri.

// Clase în JavaScript — zahăr sintactic
class PlatformService {
  // Câmp privat (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // Metodă statică
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Getter
  get info() {
    return `${this.name} SDK`;
  }

  // Metodă asincronă
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// Moștenire
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Câmpurile private #apiKey (ES2022) asigură o adevărată încapsulare, inaccesibilă cu convențiile _underscore. Metoda statică getPlatforms aparține clasei, nu instanței. Getter-ul info este calculat la accesare. async/await face codul asincron liniar. React Native Hermes suportă câmpuri private de la versiunea 0.71.

Asincronitate în JavaScript: Event Loop și Promise

Asincronitatea JavaScript se bazează pe event loop — o buclă infinită care verifică stiva de apeluri (call stack) și cozile de sarcini. Call stack — cod sincron, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop preia sarcinile mai întâi din microtask, apoi din macrotask. Blocarea call stack (buclă infinită) oprește întregul UI.

Promise — un obiect care reprezintă o valoare viitoare. Promise poate fi pending (în așteptare), fulfilled (succes), rejected (eroare). Lanțul .then().catch().finally() procesează rezultatul asincron. async/await (ES8) — zahăr sintactic: funcția async returnează un Promise, await suspendă execuția până la rezolvarea promisiunii, fără a bloca firul de execuție.

// Încărcarea asincronă a datelor în React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Fetch failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

Hook-ul useEffect cu funcția async fetchUser execută o cerere HTTP la montarea componentei. Fanionul cancelled previne setState după demontare — o problemă frecventă în React Native. Optional Chaining user?.name și Nullish Coalescing ?? gestionează undefined fără erori. ActivityIndicator se afișează în timpul încărcării — un model asincron familiar fiecărui dezvoltator JS.

React Native: JavaScript pe platforme mobile

React Native — framework de la Meta (Facebook) pentru crearea de aplicații mobile native în JavaScript. Spre deosebire de abordarea WebView, React Native randează componente native reale (UIView pentru iOS, ViewGroup pentru Android). Codul JS este executat într-un fir separat (Hermes sau JSC) și comunică cu firul UI nativ prin Bridge (arhitectură veche) sau JSI (noua arhitectură Fabric).

Arhitectura React Native

React Native constă din firul JS (codul tău), firul nativ (UI) și Bridge/JSI pentru interacțiunea lor. În arhitectura veche (Bridge) mesajele JSON sunt serializate și transmise asincron — aceasta creează întârzieri la animații rapide. Noua arhitectură Fabric (React Native 0.68+) folosește JSI (JavaScript Interface) — interacțiune directă între JS și obiecte C++ fără serializare.

// Componentă React Native cu API nativ
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

Componenta LocationTracker demonstrează lucrul cu API-ul nativ de geolocație. Platform.OS diferențiază Android și iOS. PermissionsAndroid.request — dialogul nativ de permisiuni Android. Geolocation.getCurrentPosition — modulul @react-native-community/geolocation, conectat prin npm. React Native oferă interfețe JS pentru cameră, Bluetooth, accelerometru și alți senzori.

Ionic și Cordova: containere WebView

Ionic — framework pentru aplicații mobile hibride, care utilizează WebView pentru randarea HTML/CSS/JS. Spre deosebire de React Native, Ionic nu creează componente native — aplicația rulează în interiorul unui container web (WebView) pe iOS (WKWebView) și Android (Android WebView). Aceasta oferă reutilizarea 100% a codului web, dar limitează performanța animațiilor complexe.

Apache Cordova — baza Ionic, care asigură accesul la API-uri native prin pluginuri JavaScript. Camera, GPS, contacte, sistemul de fișiere — totul este accesibil prin cordova-plugin-*. Ionic 7+ folosește Capacitor — succesorul Cordova cu performanță mai bună, suport ESM și acces direct la iOS/Android SDK prin Swift și Kotlin.

Instrumente pentru dezvoltatorul JavaScript

Instrumentele dezvoltatorului JS pentru aplicații mobile includ Node.js, npm/yarn, Expo, React Native CLI și Metro bundler. Node.js — mediu de execuție JS în afara browserului, baza ecosistemului. npm (Node Package Manager) — manager de pachete cu peste 2 milioane de biblioteci. npx — utilitar pentru rularea pachetelor npm fără instalare.

Ecosistemul instrumentelor

Expo — un strat peste React Native, care simplifică dezvoltarea: nu necesită Xcode/Android Studio pentru a începe, oferă Managed Workflow cu biblioteci preinstalate. Expo Application Services (EAS) — construire și publicare în cloud. Metro — bundler-ul React Native, care colectează codul JS și dependențele într-un singur fișier. Hermes — motorul JS de la Meta, optimizat pentru dispozitive mobile cu compilare AOT.

// package.json — configurarea proiectului React Native
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

Fișierul package.json — baza oricărui proiect JS. Scripturile start, android, ios pornesc bundler-ul Metro și construirea. Dependențele sunt împărțite în dependencies (runtime) și devDependencies (teste, lintere). React Navigation — router standard. Jest — framework de testare. ESLint — analizor static care verifică stilul codului și erorile potențiale.