Este documento proporciona una visión general de la arquitectura del proyecto Hippy, un framework para desarrollo de aplicaciones móviles multiplataforma. Se detalla la organización del código fuente, los archivos de entrada y la configuración esencial.

Estructura del repositorio principle

La carpeta raíz del proyecto de Hippy se organiza en módulos funcionales. La estructura jerárquica es la siguiente:

/
├── herramientas-desarrollo
├── capa-dom
├── motor-ejecucion
│   └── capa-js
│       ├── demos
│       ├── encabezados
│       └── modulo-principal
│           ├── integracion-react
│           ├── adaptador-react-web
│           ├── integracion-vue
│           ├── cargador-estilos-vue
│           ├── cargador-componentes-vue
│           ├── componentes-nativos-vue
│           └── enrutador-vue

Descripción de los componentes clave

• herramientas-desarrollo: Módulo que contiene utilidades para la depuración y el desarrollo.
• capa-dom: Implementación de la abstracción del modelo de objetos del documento.
• motor-ejecucion: Incluye las capas de interfaz de usuario.
  • capa-js: Lógica principal del motor en JavaScript.
    • demos: Ejemplos de implementación.
    • modulo-principal: Paquetes npm que forman el framework.

Puntos de antrada de la aplicación

Cada paquete dentro de modulo-principal posee su propio archivo de inicialización. Para una aplicación basada en Vue, el fichero principal podría danominarse inicio.js:

// modulo-principal/integracion-vue/inicio.js
import { createApp } from 'vue';
import Interfaz from './Interfaz.vue';

const instancia = createApp(Interfaz);
instancia.mount('#raiz');

Este script crea la instancia de la aplicación y la vincula al elemento raíz del DOM. En proyectos con React, la lógica de arranque utilizaría ReactDOM.render o createRoot.

Archivos de configuración del proyecto

La gestión de dependencias y los comandos de automatización se definen en package.json. Un ejemplo simplificado sería:

{
  "nombre": "mi-aplicacion-hippy",
  "version": "0.1.0",
  "punto-entrada": "./inicio.js",
  "scripts": {
    "ejecutar": "webpack serve --config ./webpack.config.js",
    "compilar": "webpack --mode production"
  },
  "dependencias": {
    "vue": "^3.2.0",
    "hippy-vue-next": "^3.0.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "css-loader": "^6.0.0"
  }
}

Adicionalmente, un archivo webpack.config.js permite definir loaders específicos para transformar archivos Vue (SFC), resolver alias de módulos y configurar el servidor de desarrollo para el hot-reload. La configuración de estos módulos de construcción es fundamental para el correcto empaquetado del código y los recursos estáticos.