Icono del sitio Profile Software Services

One: un framework todo en uno para web, móvil y escritorio

  • Simone Rosso
    • One

    One es un framework innovador que permite desarrollar aplicaciones web, móviles y de escritorio utilizando un solo código base. Basado en React y optimizado con Vite, One ofrece una experiencia de desarrollo rápida, moderna y eficiente, integrando renderizado en el servidor (SSR) y generación de páginas estáticas (SSG). Su principal ventaja es que puedes escribir una sola aplicación y ejecutarla en múltiples plataformas sin necesidad de reescribir el código para cada una. Esto reduce tiempos de desarrollo, errores y costes, y permite enfocarse más en la lógica del negocio.

    Características clave de One

    1. Un solo código para todas las plataformas

    One permite desarrollar aplicaciones para:

    Esto significa que puedes tener una única fuente de verdad para lógica, componentes y rutas, lo que permite una sincronización más eficaz y una experiencia de usuario más coherente.

    2. Integración nativa con React y React Native

    One combina React Native con React Native Web, permitiendo compartir componentes entre todas las plataformas sin duplicación de código. Esto reduce el mantenimiento y facilita la implementación de nuevas funcionalidades. También es compatible con bibliotecas populares como:

    Estas bibliotecas facilitan la gestión del estado, la navegación y la sincronización de datos, incluso en aplicaciones complejas.

    3. Navegación universal y automática

    One incorpora un sistema de enrutamiento basado en el sistema de archivos. No necesitas configurar rutas manualmente; basta con crear archivos en la carpeta app/ y automáticamente se generan las rutas. Además, soporta:

    Este enfoque mejora la productividad y reduce los errores comunes en la configuración de rutas.

    4. Optimización con Vite

    Gracias a su integración con Vite, One proporciona tiempos de compilación extremadamente rápidos y una experiencia de desarrollo en tiempo real, con actualizaciones instantáneas al guardar. También soporta:

    Esto hace que trabajar con One sea una experiencia más moderna y fluida que con otras soluciones tradicionales basadas en Webpack.

    5. Funcionalidades extendidas

    One no solo se limita a unir plataformas, sino que ofrece una experiencia rica y completa con funcionalidades avanzadas como:

    Además, ofrece herramientas CLI que facilitan el scaffolding de nuevas páginas, componentes o funciones de servidor, agilizando aún más el flujo de trabajo.

    Para esas cosas no se necesita One necesariamente, La mayoría de esas librerías (i18next, Firebase SDK, Tailwind, etc.) no dependen de One ni están hechas para One específicamente. Lo que ocurre es que:

    Entonces, la magia está en saber cuándo puedes usar una librería sin adaptarla y cuándo necesitas un «puente» o wrapper.
    One va más allá de la simple unificación de plataformas, proporcionando una experiencia integral y avanzada con funcionalidades como:

    Además, One incluye herramientas CLI que simplifican la creación de nuevas páginas, componentes o funciones de servidor, optimizando el flujo de trabajo.

    Es importante destacar que muchas de estas librerías (i18next, Firebase SDK, Tailwind, etc.) no dependen directamente de One. La ventaja reside en que:

    Por lo tanto, la clave está en discernir cuándo una librería puede utilizarse directamente y cuándo se requiere una adaptación o «puente».

    Feature¿Funciona igual en Web y Mobile?Notas
    i18next / react-i18next✅ SíEs una librería de JS pura
    tailwindcss⚠️ Solo Web (sin extra config)Para Native necesitas twin.macro o similar
    firebase SDK⚠️ Depende del móduloFirestore funciona, pero Storage en native necesita adaptador
    react-native-image-picker❌ No funciona en webNecesita que estés en React Native
    navigator.geolocation❌ Web onlyPara mobile necesitas expo-location o similar
    stripe/react-stripe-js✅ SíPara mobile usa WebView o el SDK nativo
    auth0 SPA SDK✅ Web, ⚠️ MobileEn mobile a menudo requiere browser-based login

    Creación de páginas y navegación

    Estructura de rutas basada en archivos

    One organiza automáticamente las rutas a partir de la estructura de archivos en la carpeta app/. Por ejemplo:

    app/index.tsx:

import { View, Text } from "react-native";

export default function HomePage() {

  return (

    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

      <Text>Bienvenido a One!</Text>

    </View>

  );

}

app/about.tsx:

import { View, Text } from "react-native";

export default function AboutPage() {

  return (

    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

      <Text>Sobre esta aplicación</Text>

    </View>

  );

}

    Accede a /about desde cualquier dispositivo y verás esa página renderizada sin configuración adicional.

    Rutas dinámicas

    app/user/[id].tsx:

import { useParams } from "one";

export default function UserPage() {

  const { id } = useParams();

  return <Text>Perfil del usuario: {id}</Text>;

}

    Componentes reutilizables

    Puedes crear componentes compartidos para cualquier plataforma. Por ejemplo:

components/Button.tsx:

import { Pressable, Text } from "react-native";

export default function Button({ onPress, title }) {

  return (

    <Pressable onPress={onPress} style={{ padding: 10, backgroundColor: "blue", borderRadius: 5 }}>

      <Text style={{ color: "white" }}>{title}</Text>

    </Pressable>

  );

}

Y usarlo en cualquier página:

import Button from "../components/Button";

<Button onPress={() => alert("¡Hola!")} title="Presióname" />

    Carga de datos con Loaders

    Puedes precargar datos antes de que se renderice una página con loaders:

    app/data.ts:

export async function loader() {

  return { mensaje: "Hola desde el servidor!" };

}

En index.tsx:

import { useLoaderData } from "one";

const data = useLoaderData();

<Text>{data.mensaje}</Text>

    Conclusión de One

    One representa un cambio de paradigma en el desarrollo de aplicaciones multiplataforma. Su enfoque basado en un único código base para web, dispositivos móviles y escritorio ofrece una solución coherente, eficiente y escalable para equipos que buscan reducir la complejidad técnica sin sacrificar la calidad del producto.

    Gracias a su integración nativa con tecnologías consolidadas como React, React Native y Vite, One proporciona una experiencia de desarrollo moderna y unificada. Permite aprovechar las ventajas del ecosistema actual —como el tipado con TypeScript, el uso de librerías estándar, o el soporte para APIs nativas— dentro de un entorno fluido y bien estructurado.

    Más allá de la parte técnica, One permite mantener una visión de producto alineada entre plataformas, evitando inconsistencias y reduciendo significativamente el coste de mantenimiento. Esta sinergia entre eficiencia operativa y excelencia tecnológica lo convierte en una herramienta especialmente valiosa para startups, equipos medianos y desarrolladores individuales que aspiran a entregar productos multiplataforma con rapidez y solidez.

    En resumen, One es una plataforma potente, bien pensada y orientada al futuro del desarrollo cross-platform. Si tu objetivo es construir aplicaciones modernas, mantener una sola base de código, y optimizar el rendimiento y la productividad del equipo, One es una elección estratégica.

    Salir de la versión móvil