JavaScript: fondamenti del linguaggio, React Native e sviluppo mobile

Cos'è JavaScript?

JavaScript (JS) è un linguaggio di programmazione di alto livello con tipizzazione dinamica, ereditarietà prototipale e funzioni come oggetti di prima classe. È stato creato da Brendan Eich nel 1995 in 10 giorni. È uno dei tre linguaggi principali delle tecnologie web (HTML, CSS, JS) e la base della piattaforma server Node.js (2009), che ha permesso a JS di uscire dal browser.

Nello sviluppo mobile, JavaScript viene utilizzato in tre paradigmi: compilazione nativa (React Native con Hermes/JSC), contenitori WebView (Ionic, Cordova) e JS lato server (Node.js + Express per backend di app mobili). React Native è la tecnologia dominante: secondo Statista (2025), il 38% dei progetti multipiattaforma utilizza React Native, secondo solo a Flutter (46%).

La caratteristica principale di JavaScript è il modello di esecuzione a thread singolo con I/O non bloccante. L'event loop consente di elaborare migliaia di operazioni asincrone in un singolo thread senza creare thread del sistema operativo. Ciò rende JS efficiente per applicazioni intensive di I/O (richieste di rete, operazioni su database), ma richiede cautela con calcoli intensivi di CPU.

Standard JavaScript: ES5, ES6, ES2025

Lo standard ECMAScript (ES) definisce la specifica di JavaScript. ES6 (2015) ha introdotto let/const, funzioni freccia, classi, moduli, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. I motori moderni Hermes (React Native) e V8 (Node.js) supportano ES2022+. React Native Hermes supporta ES2020+ con alcune limitazioni su Proxy e Symbol.

Sintassi JavaScript: tipi, funzioni e prototipi

La sintassi JavaScript è simile al C, tipizzata dinamicamente. Il tipo della variabile è determinato dal valore e può cambiare a runtime. let e const (ES6) hanno sostituito var per l'ambito di blocco. Tipi primitivi: string, number, boolean, null, undefined, symbol, bigint. Tutto il resto è un oggetto (object, array, function, date, regexp).

Funzioni come oggetti di prima classe

JavaScript è un linguaggio con funzioni di ordine superiore. Le funzioni possono essere assegnate a variabili, passate come argomenti, restituite da altre funzioni. Le funzioni freccia (=>) non hanno un proprio this — ereditano this dal contesto esterno. Una closure è una funzione che ricorda le variabili dall'ambito in cui è stata creata.

// Tipi di dati e funzioni in JavaScript
// Tipi primitivi
const name = 'React Native';
let version = 0.71;
var isActive = true; // var obsoleto

// Oggetti e array
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Funzione di ordine superiore
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Closure
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Operatore spread per copiare oggetti
const newApp = { ...app, version: 16 };

L'operatore spread ... crea una copia superficiale di un oggetto. La destrutturazione (const { platform, version } = app) estrae i campi in variabili. La funzione freccia in filterByVersion è più corta di un'espressione function e non crea un proprio this — ciò è critico nei componenti React Native dove this si riferisce alla classe del componente.

Ereditarietà prototipale

JavaScript utilizza l'ereditarietà prototipale, non classica come Java o C#. Le classi (ES6) sono zucchero sintattico sopra i prototipi. Ogni oggetto ha un riferimento interno [[Prototype]] a un altro oggetto. Quando si accede a una proprietà che non esiste sull'oggetto, JS la cerca nella catena dei prototipi. La sintassi delle classi (extends, super) rende il codice più leggibile, ma sotto il cofano rimangono i prototipi.

// Classi in JavaScript — zucchero sintattico
class PlatformService {
  // Campo privato (ES2022)
  #apiKey;

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

  // Metodo statico
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Metodo asincrono
  async initialize() {
    return await this.#validateKey();
  }

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

// Ereditarietà
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

I campi privati #apiKey (ES2022) forniscono un vero incapsulamento, non disponibile con le convenzioni _. Il metodo statico getPlatforms appartiene alla classe, non all'istanza. Il getter info viene calcolato all'accesso. async/await rende il codice asincrono lineare. React Native Hermes supporta i campi privati dalla versione 0.71.

Asincronia in JavaScript: Event Loop e Promise

L'asincronia in JavaScript si basa sull'event loop — un ciclo infinito che controlla lo stack delle chiamate (call stack) e le code di attività. Il call stack gestisce il codice sincrono, la microtask queue gestisce Promise.then/catch/finally, la macrotask queue gestisce setTimeout, setInterval, I/O. L'event loop prende prima le attività da microtask, poi da macrotask. Bloccare il call stack (ciclo infinito) ferma tutta l'interfaccia utente.

Promise è un oggetto che rappresenta un valore futuro. Una promise può essere pending (in sospeso), fulfilled (soddisfatta) o rejected (rifiutata). La catena .then().catch().finally() gestisce il risultato asincrono. async/await (ES8) è zucchero sintattico: una funzione async restituisce una Promise, await sospende l'esecuzione fino alla risoluzione della promise senza bloccare il thread.

// Caricamento asincrono dei dati in 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 fallito:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

L'hook useEffect con la funzione async fetchUser esegue una richiesta HTTP al montaggio del componente. Il flag cancelled impedisce setState dopo lo smontaggio — un problema comune in React Native. Optional Chaining user?.name e Nullish Coalescing ?? gestiscono undefined senza errori. ActivityIndicator viene visualizzato durante il caricamento — un pattern asincrono familiare a ogni sviluppatore JS.

React Native: JavaScript su piattaforme mobili

React Native è un framework di Meta (Facebook) per creare applicazioni mobili native in JavaScript. A differenza dell'approccio WebView, React Native esegue il rendering di veri componenti nativi (UIView per iOS, ViewGroup per Android). Il codice JS viene eseguito in un thread separato (Hermes o JSC) e comunica con il thread nativo dell'UI tramite Bridge (vecchia architettura) o JSI (nuova architettura Fabric).

Architettura React Native

React Native è composto dal thread JS (il tuo codice), dal thread nativo (UI) e da Bridge/JSI per la loro interazione. Nella vecchia architettura (Bridge), i messaggi JSON vengono serializzati e trasmessi in modo asincrono — ciò crea ritardi durante le animazioni veloci. La nuova architettura Fabric (React Native 0.68+) utilizza JSI (JavaScript Interface) — interazione diretta di JS con oggetti C++ senza serializzazione.

// Componente React Native con API nativa
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>
  );
}

Il componente LocationTracker dimostra il lavoro con l'API nativa di geolocalizzazione. Platform.OS distingue tra Android e iOS. PermissionsAndroid.request è il dialogo nativo per i permessi Android. Geolocation.getCurrentPosition — un modulo di @react-native-community/geolocation, installato tramite npm. React Native fornisce interfacce JS per fotocamera, Bluetooth, accelerometro e altri sensori.

Ionic e Cordova: contenitori WebView

Ionic è un framework per applicazioni mobili ibride che utilizza WebView per il rendering di HTML/CSS/JS. A differenza di React Native, Ionic non crea componenti nativi — l'applicazione viene eseguita all'interno di un contenitore web (WebView) su iOS (WKWebView) e Android (Android WebView). Ciò consente il riutilizzo del 100% del codice web ma limita le prestazioni di animazioni complesse.

Apache Cordova è il fondamento di Ionic, che fornisce accesso alle API native tramite plugin JavaScript. Fotocamera, GPS, contatti, file system — tutto è disponibile tramite cordova-plugin-*. Ionic 7+ utilizza Capacitor — il successore di Cordova con prestazioni migliori, supporto ESM e accesso diretto all'SDK iOS/Android tramite Swift e Kotlin.

Strumenti dello sviluppatore JavaScript

Gli strumenti dello sviluppatore JS per applicazioni mobili includono Node.js, npm/yarn, Expo, React Native CLI e Metro bundler. Node.js è un ambiente di esecuzione JS fuori dal browser, la base dell'ecosistema. npm (Node Package Manager) è un gestore di pacchetti con oltre 2 milioni di librerie. npx è un'utilità per eseguire pacchetti npm senza installazione.

Ecosistema di strumenti

Expo è un livello sopra React Native che semplifica lo sviluppo: non richiede Xcode/Android Studio per iniziare, fornisce Managed Workflow con librerie preinstallate. Expo Application Services (EAS) — compilazione e pubblicazione nel cloud. Metro è il bundler di React Native che assembla codice JS e dipendenze in un unico file. Hermes è un motore JS di Meta ottimizzato per dispositivi mobili con compilazione AOT.

// package.json — configurazione del progetto 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"
  }
}

Il file package.json è la base di qualsiasi progetto JS. Gli script start, android, ios avviano il bundler Metro e la build. Le dipendenze sono divise in dependencies (runtime) e devDependencies (test, linter). React Navigation è il router standard. Jest è un framework di test. ESLint è un analizzatore statico che verifica lo stile del codice e potenziali errori.