Ejemplo de aplicación web basada en TeqFW

Fecha de publicación: 2024-06-14

La demostración muestra el uso del contenedor de objetos e inyección de dependencias @teqfw/di en una aplicación de navegador. Es una ToDo List conocida, sin parte de servidor: un conjunto de archivos estáticos que se carga y ejecuta en el navegador.

JavaScript puro con módulos ES aporta una ventaja importante al depurar: en el navegador se ven los mismos archivos que en el IDE.

Conectar el contenedor

La biblioteca está disponible como módulo ES, por ejemplo desde unpkg:

<script type="module">
  import Container from 'https://unpkg.com/@teqfw/di';
</script>

Crear y configurar

El contenedor no guarda objetos preparados de antemano. Su Resolver calcula la ruta del archivo fuente a partir de un identificador de dependencia. Tras crearlo, asociamos el espacio de nombres Demo con ./js:

const container = new Container();
const root = new URL(location.href).href.replace('index.html', '');
const resolver = container.getResolver();
resolver.addNamespaceRoot('Demo', root + '/js');

Así los nombres se convierten en direcciones de módulos:

• Demo_App → …/js/App.js;
• Demo_Defs → …/js/Defs.js;
• Demo_ToDo_Item → …/js/ToDo/Item.js;
• Demo_ToDo_List → …/js/ToDo/List.js.

Inicializar la aplicación

El símbolo $ al final del identificador pide un singleton: el contenedor lo crea una vez y devuelve siempre el mismo objeto.

const app = await container.get('Demo_App$');
app.run();

Las formas básicas son:

• Demo_App: default export tal cual;
• Demo_App$: singleton del default export;
• Demo_App$I: instancia nueva;
• Demo_App.: objeto módulo;
• Demo_App.export: export nombrado;
• los sufijos $ y $I también funcionan con exports nombrados.

Describir dependencias

Solo el contenedor se importa estáticamente; los demás módulos se enlazan mediante identificadores en el constructor:

export default class Demo_App {
  constructor({
    Demo_Defs$: defs,
    Demo_ToDo_List$: list,
  }) {
    this.defs = defs;
    this.list = list;
  }
}

El contenedor carga los módulos, crea los singleton requeridos y los entrega a la aplicación. Si se necesita la clase, no el objeto, la petición es más simple:

export default class Demo_ToDo_List {
  constructor({ Demo_ToDo_Item: ToDoItem }) {
    this.item = new ToDoItem();
  }
}

Conclusión

@teqfw/di lleva prácticas enterprise —contenedor de objetos y espacios de nombres— a SPA y PWA. Para ejecutar la demo basta con publicar la carpeta web/ en alojamiento estático. El enlace tardío es excesivo para una página estática pequeña, pero resulta útil en aplicaciones grandes y conjuntos de paquetes; el mismo enfoque también permite compartir planteamientos entre frontend y backend Node.js.