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

L'elecció de framework per a una app mòbil es pren gairebé sempre al principi del projecte, quan menys informació tens, i condiciona el pressupost, els terminis i fins i tot a qui pots contractar després. Aquí comparem les quatre opcions que avui tenen sentit, amb rendiment, cost real, ecosistema i el tipus de projecte que va bé a cadascuna, a partir del que ens hem trobat desenvolupant per a empreses andorranes.

El dilema del desenvolupament mòbil el 2026

Escollir el framework correcte per desenvolupar una aplicació mòbil es 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ó es 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 es 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 es un rendiment que s'acosta molt al natiu, especialment en transicions, animacions i operacions d'I/O.

Avantatges clau

React Native destaca per la seva capacitat d'aprofitar el coneixement previ en TypeScript i l'ecosistema React, cosa que redueix dràsticament els temps d'onboarding en equips web.

• Ecosistema React: si el teu equip ja treballa amb Next.js o React web, la corba d'aprenentatge es 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

Així es resol una llista amb scroll infinit i càrrega d'imatges a React Native:

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 es 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 es la forma més ràpida d'arribar a producció amb React Native.

Flutter: el contendent de Google

Flutter es 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 pixel 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

Flutter brilla especialment en projectes on la identitat visual es prioritària i necessites que cada pantalla es vegi exactament igual a iOS, Android i web.

• 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

El mateix llistat, resolt amb els widgets de Flutter:

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 es que Dart no es 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 son 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 es el runtime creat per l'equip d'Ionic que permet empaquetar aplicacions web (HTML, CSS, JavaScript) com a aplicacions natives. Es 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

Si el teu equip ja domina tecnologies web, Capacitor et permet saltar a mòbil sense canviar de stack ni contractar perfils nous.

• 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: es 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

Els plugins de Capacitor exposen les APIs del dispositiu amb la mateixa sintaxi que faries servir a la web:

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

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

Les PWA son 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

Per a molts negocis locals, una PWA ofereix el millor ratio cost/resultat perquè aprofita la web que ja tens i la converteix en quelcom instal·lable.

• 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: es la teva web, optimitzada
• SEO: en ser una web, Google la indexa normalment

Limitacions

Malgrat els seus avantatges, les PWA tenen restriccions tècniques que has de conèixer abans de decidir, especialment a l'ecosistema Apple.

• 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

El service worker es el que permet que una PWA funcioni sense connexió i carregui a l'instant en visites repetides:

// 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

Amb els quatre enfocaments sobre la taula, aquesta es la comparació punt per punt:

Rendiment: números reals

Per donar context, aquests son 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 es 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 andorra

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 de restauració, 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. Si necessites un sistema de reserves online, ambdós frameworks s'integren bé amb passarel·les de pagament i calendaris.

Integració amb sistemes existents

Moltes empreses andorranes ja tenen sistemes web basats en PHP o JavaScript. Si el teu backend es 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 es 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. Això es especialment rellevant per al sector fintech, on el processament local de dades sensibles afegeix una capa extra de seguretat.

Quan escollir cada framework

Escull React Native si...

React Native encaixa quan el teu equip ja viu a l'ecosistema JavaScript i vols arribar a producció ràpid sense sacrificar accés natiu.

• 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 fluides i UI nativa
• Planifiques usar Expo per accelerar el desenvolupament

Escull Flutter si...

Flutter es la millor opció quan la interfície gràfica es el diferencial del producte i necessites consistència visual absoluta en múltiples plataformes.

• 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 es prioritària

Escull Capacitor si...

Capacitor té sentit quan ja disposes d'una aplicació web sòlida i vols portar-la a les botigues sense reescriure res.

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

Escull PWA si...

Una PWA es la via més directa quan no necessites presència a botigues i vols maximitzar abast amb el mínim cost de desenvolupament.

• No necessites estar a les botigues d'aplicacions
• L'app es complementària a la teva web principal
• El pressupost es molt ajustat
• Les funcionalitats natives requerides son 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 es 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 es enorme, la documentació es 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 es 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 si podem afirmar es 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ó. Contacta'ns per analitzar el teu projecte sense compromís.