Millor framework per a apps mòbils a Andorra: React Native vs Flutter vs Capacitor vs PWA

El dilema del desenvolupament mòbil el 2026

Escollir el framework correcte per desenvolupar una aplicació mòbil és una decisió estratègica que afecta directament al pressupost, els terminis de lliurament i l'experiència d'usuari final. En un mercat com el d'Andorra, on les empreses necessiten solucions àgils i eficients, aquesta decisió és encara més rellevant.

L'ecosistema de desenvolupament mòbil ha madurat enormement en els últims anys. Ja no estem limitats a escollir entre desenvolupament natiu pur (Swift per a iOS, Kotlin per a Android) o solucions híbrides de baix rendiment. Avui existeixen frameworks cross-platform que ofereixen rendiment gairebé natiu, accés complet a les APIs del dispositiu i una experiència de desenvolupament productiva.

En aquest article analitzem en profunditat les quatre opcions més rellevants per al desenvolupament d'aplicacions mòbils el 2026: React Native, Flutter, Capacitor i Progressive Web Apps (PWA). Compartim codi real, mètriques de rendiment i la nostra experiència en projectes per a empreses andorranes.

React Native: l'estàndard de la indústria

React Native és el framework creat per Meta (Facebook) que permet construir aplicacions mòbils natives utilitzant JavaScript i React. Des del seu llançament el 2015, s'ha convertit en el framework cross-platform més adoptat del món.

Arquitectura i rendiment

React Native utilitza una arquitectura basada en ponts (bridges) que comunica el fil de JavaScript amb els components natius de la plataforma. Amb la New Architecture (Fabric + TurboModules), llançada oficialment el 2024, el rendiment ha millorat de forma significativa en eliminar el pont asíncron i permetre comunicació directa entre JavaScript i el codi natiu.

El resultat és un rendiment que s'acosta molt al natiu, especialment en transicions, animacions i operacions d'I/O.

Avantatges clau

• Ecosistema React: si el teu equip ja treballa amb Next.js o React web, la corba d'aprenentatge és mínima
• Hot Reload: canvis en temps real sense perdre l'estat de l'aplicació
• Comunitat massiva: milers de llibreries, tutorials i recursos disponibles
• Expo: plataforma que simplifica dràsticament el desenvolupament, build i distribució
• Accés natiu complet: pots escriure mòduls natius en Swift/Kotlin quan ho necessitis

Exemple pràctic: llistat amb FlatList

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Image, StyleSheet, TouchableOpacity } from 'react-native';

const API_URL = 'https://api.latuaempresa.ad/v1/products';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(API_URL)
      .then(res => res.json())
      .then(data => {
        setProducts(data.items);
        setLoading(false);
      });
  }, []);

  const renderProduct = ({ item }) => (
    <TouchableOpacity style={styles.card}>
      <Image source={{ uri: item.image }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.price}>{item.price} EUR</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={products}
      renderItem={renderProduct}
      keyExtractor={item => item.id.toString()}
      contentContainerStyle={styles.list}
      refreshing={loading}
      onRefresh={() => setLoading(true)}
    />
  );
}

const styles = StyleSheet.create({
  list: { padding: 16 },
  card: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 12,
    marginBottom: 12,
    overflow: 'hidden',
    elevation: 2,
  },
  image: { width: 100, height: 100 },
  info: { flex: 1, padding: 12, justifyContent: 'center' },
  name: { fontSize: 16, fontWeight: '600', marginBottom: 4 },
  price: { fontSize: 14, color: '#059669', fontWeight: '700' },
});

Expo: l'accelerador

Expo és una plataforma construïda sobre React Native que elimina gran part de la complexitat de configuració. Amb Expo, pots compilar per a iOS i Android des del núvol sense necessitar un Mac, gestionar actualitzacions OTA (over-the-air) i accedir a desenes d'APIs natives preconfigurades.

# Crear un nou projecte amb Expo
npx create-expo-app@latest la-meva-app-andorra
cd la-meva-app-andorra
npx expo start

Per a la majoria de projectes empresarials a Andorra, Expo és la forma més ràpida d'arribar a producció amb React Native.

Flutter: el contendent de Google

Flutter és el framework de Google basat en el llenguatge Dart. A diferència de React Native, Flutter no utilitza components natius de la plataforma. En comptes d'això, renderitza cada píxel a la pantalla usant el seu propi motor gràfic (Skia / Impeller), cosa que li dona un control total sobre la interfície.

Arquitectura i rendiment

Flutter compila directament a codi natiu ARM, cosa que resulta en un rendiment excel·lent. El motor gràfic Impeller, introduït com a default el 2024, elimina els problemes de jank (micro-pauses) que existien amb Skia i ofereix animacions a 120fps de forma consistent.

Aquesta arquitectura té un avantatge important: la interfície es veu idèntica en totes les plataformes. No hi ha diferències subtils entre iOS i Android perquè Flutter dibuixa tot des de zero.

Avantatges clau

• Rendiment gràfic superior: ideal per a interfícies complexes amb animacions elaborades
• Consistència visual: pixel-perfect en totes les plataformes
• Dart: llenguatge modern, tipat i optimitzat per a UI
• Hot Reload: tan ràpid com React Native
• Multiplataforma real: iOS, Android, web, desktop (Windows, macOS, Linux) des d'un sol codebase

Exemple pràctic: llistat amb ListView

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ProductListScreen extends StatefulWidget {
  const ProductListScreen({super.key});

  @override
  State<ProductListScreen> createState() => _ProductListScreenState();
}

class _ProductListScreenState extends State<ProductListScreen> {
  List<dynamic> products = [];
  bool loading = true;

  @override
  void initState() {
    super.initState();
    fetchProducts();
  }

  Future<void> fetchProducts() async {
    final response = await http.get(
      Uri.parse('https://api.latuaempresa.ad/v1/products'),
    );
    if (response.statusCode == 200) {
      setState(() {
        products = json.decode(response.body)['items'];
        loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return const Center(child: CircularProgressIndicator());
    }

    return RefreshIndicator(
      onRefresh: fetchProducts,
      child: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return Card(
            margin: const EdgeInsets.only(bottom: 12),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            child: ListTile(
              leading: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.network(
                  product['image'],
                  width: 60,
                  height: 60,
                  fit: BoxFit.cover,
                ),
              ),
              title: Text(
                product['name'],
                style: const TextStyle(fontWeight: FontWeight.w600),
              ),
              subtitle: Text(
                '${product['price']} EUR',
                style: const TextStyle(
                  color: Color(0xFF059669),
                  fontWeight: FontWeight.w700,
                ),
              ),
              onTap: () {},
            ),
          );
        },
      ),
    );
  }
}

Desavantatge principal

El principal inconvenient de Flutter és que Dart no és un llenguatge tan estès com JavaScript. Si el teu equip ja treballa amb React o Node.js, l'adopció de Flutter implica aprendre un llenguatge nou. A més, els components de Flutter no són natius, cosa que significa que els botons i la navegació no es senten 100% com una app nativa d'iOS o Android a menys que es personalitzin curosament.

Capacitor: tecnologies web, runtime natiu

Capacitor és el runtime creat per l'equip d'Ionic que permet empaquetar aplicacions web (HTML, CSS, JavaScript) com a aplicacions natives. És el successor espiritual de Cordova/PhoneGap, però amb una arquitectura moderna i accés a APIs natives a través de plugins.

Arquitectura

Capacitor executa la teva aplicació web dins d'un WebView natiu, però a diferència de les solucions híbrides antigues, ofereix un sistema de plugins robust que connecta directament amb les APIs natives del dispositiu. Pots accedir a la càmera, GPS, notificacions push, sistema de fitxers i més.

Avantatges clau

• Reutilitza el teu codi web: si ja tens una app en React, Vue, Angular o fins i tot Laravel amb Livewire, la pots empaquetar
• Corba d'aprenentatge mínima: és desenvolupament web estàndard
• Plugins natius: accés real a funcionalitats del dispositiu
• Cost reduït: un sol equip web manté web + mòbil
• Migració progressiva: pots començar com a PWA i evolucionar a app nativa

Exemple: accés a la càmera

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

async function takePhoto() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
  });

  // image.webPath conte la URI de la foto
  const imageUrl = image.webPath;
  return imageUrl;
}

// Us en un component React
function PhotoCapture() {
  const [photo, setPhoto] = useState<string | null>(null);

  const handleCapture = async () => {
    const url = await takePhoto();
    if (url) setPhoto(url);
  };

  return (
    <div>
      <button onClick={handleCapture}>Fer foto</button>
      {photo && <img src={photo} alt="Captura" />}
    </div>
  );
}

Quan té sentit

Capacitor és una opció excel·lent quan ja tens una aplicació web funcional i necessites presència a les botigues d'aplicacions. També és ideal per a apps internes d'empresa (ERPs, dashboards, eines de gestió) on el rendiment gràfic no és crític però la velocitat de desenvolupament sí.

Progressive Web Apps (PWA): sense botiga, sense fricció

Les PWA són aplicacions web que utilitzen tecnologies modernes del navegador (Service Workers, Web App Manifest, Cache API) per oferir una experiència similar a una app nativa. S'instal·len des del navegador, funcionen offline i poden enviar notificacions push.

Avantatges clau

• Sense App Store: no necessites passar pel procés de revisió d'Apple o Google
• URL compartible: qualsevol hi pot accedir amb un enllaç
• Actualitzacions instantànies: sense esperar aprovació de la botiga
• Cost mínim: és la teva web, optimitzada
• SEO: en ser una web, Google la indexa normalment

Limitacions

• iOS restrictiu: Apple limita les capacitats de les PWA a Safari (sense notificacions push completes en versions antigues, emmagatzematge limitat)
• Sense accés a certes APIs natives: Bluetooth, NFC i algunes funcions avançades no estan disponibles
• Percepció de l'usuari: molts usuaris encara esperen trobar apps a la botiga

Exemple: Service Worker bàsic

// service-worker.js
const CACHE_NAME = 'app-andorra-v1';
const STATIC_ASSETS = [
  '/',
  '/css/app.css',
  '/js/app.js',
  '/offline.html',
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request).catch(() => {
        if (event.request.destination === 'document') {
          return caches.match('/offline.html');
        }
      });
    })
  );
});

Comparativa directa

Rendiment: números reals

Per donar context, aquests són els resultats típics que observem en projectes reals en mesurar el temps d'inici en fred (cold start) i el consum de memòria en un dispositiu Android de gamma mitjana:

Flutter guanya en rendiment brut gràcies a la seva compilació AOT i motor gràfic dedicat. React Native s'hi acosta molt amb la New Architecture. Capacitor i PWA depenen del motor del WebView, que és performant per a la majoria de casos d'ús però no arriba al nivell dels frameworks natius en interfícies complexes.

Consideracions per al mercat andorrà

Andorra té particularitats que influeixen en la decisió:

Mercat multilingüe

Qualsevol app a Andorra necessita suport per a català, castellà i francès com a mínim. Tots els frameworks suporten internacionalització (i18n), però React Native amb react-i18next i Flutter amb flutter_localizations ofereixen les solucions més madures.

Base d'usuaris reduïda

Amb una població d'aproximadament 80.000 habitants, el volum de descàrregues no justifica sempre el cost de mantenir una app nativa a dues botigues. Una PWA o una solució Capacitor pot ser més eficient en cost per a negocis locals.

Turisme com a motor

Per a sectors com hostaleria, comerç i serveis turístics, les apps mòbils necessiten funcionar bé sense connexió estable (zones de muntanya) i oferir geolocalització precisa. React Native i Flutter tenen millor suport offline i accés a GPS que les PWA.

Integració amb sistemes existents

Moltes empreses andorranes ja tenen sistemes web basats en PHP o JavaScript. Si el teu backend és Laravel, connectar amb React Native o Capacitor resulta natural a través d'APIs REST. Si uses Next.js, React Native comparteix el mateix ecosistema React.

Intel·ligència artificial on-device

Una tendència creixent és l'execució de models d'intel·ligència artificial directament al dispositiu. Flutter i React Native permeten integrar TensorFlow Lite o Core ML per a funcionalitats com reconeixement d'imatge, processament de llenguatge natural o recomanacions personalitzades sense dependre de connexió a internet.

Quan escollir cada framework

Escull React Native si...

• El teu equip ja coneix React o JavaScript/TypeScript
• Necessites accés complet a funcionalitats natives
• Vols publicar a l'App Store i Google Play
• El projecte requereix animacions fluïdes i UI nativa
• Planifiques usar Expo per accelerar el desenvolupament

Escull Flutter si...

• Necessites rendiment gràfic excepcional (animacions complexes, canvas)
• Vols una UI idèntica a totes les plataformes
• El teu equip està disposat a aprendre Dart
• El projecte abasta mòbil, web i desktop
• La consistència visual pixel-perfect és prioritària

Escull Capacitor si...

• Ja tens una aplicació web que funciona bé
• El pressupost és limitat i necessites presència a botigues
• L'app és principalment informativa o de gestió (CRUD)
• El teu equip és exclusivament web (HTML, CSS, JS)
• Necessites llançar ràpid i iterar

Escull PWA si...

• No necessites estar a les botigues d'aplicacions
• L'app és complementària a la teva web principal
• El pressupost és molt ajustat
• Les funcionalitats natives requerides són bàsiques (geolocalització, càmera)
• Vols actualitzacions sense dependre del procés de review de les botigues

La nostra recomanació per a empreses a Andorra

Després d'haver desenvolupat projectes mòbils per a empreses andorranes de diferents sectors, la nostra recomanació general és la següent.

Per a la majoria d'empreses locals que necessiten la seva primera app, React Native amb Expo ofereix el millor equilibri entre rendiment, cost i velocitat de desenvolupament. L'ecosistema és enorme, la documentació és excel·lent i la possibilitat de compartir coneixement amb l'equip web (si ja usa React o Next.js) redueix els costos de formació.

Per a projectes amb requisits visuals exigents (apps de luxe, fintech amb gràfics complexos, jocs casuals), Flutter és l'opció més sòlida.

Per a negocis que ja tenen una web funcional i volen fer el salt a mòbil amb pressupost contingut, Capacitor permet reutilitzar la inversió existent.

I per a casos on la simplicitat prima sobre tot, una PWA ben feta pot cobrir les necessitats sense la complexitat de mantenir apps a dues botigues.

Conclusió

No existeix un framework universalment millor. La decisió correcta depèn del teu equip, el teu pressupost, els teus terminis i les funcionalitats que necessites. El que sí podem afirmar és que el 2026, desenvolupar dues apps natives separades (una en Swift i una altra en Kotlin) rarament té sentit per a una empresa a Andorra. Els frameworks cross-platform han assolit un nivell de maduresa que els converteix en l'opció més intel·ligent per a la gran majoria de projectes.

A AndorraDev t'ajudem a avaluar el teu cas concret i escollir la tecnologia que maximitzi el retorn de la teva inversió.