Pautas:

Cómo Empezar un Proyecto

Instalar el CLI

Se podría descargar todo lo necesario de Github y configurar el entorno de desarrollo, pero hay una forma más sencilla: @composi/create-composi-app. Esto te permite crear un proyecto configurado con todo lo que necesitas. Instálalo de NPM:

npm i -g @composi/create-composi-app

Después de eso puedes crear un nuevo proyecto Composi así:

create-composi-app Mi-Proyecto

Ésto creará un proyecto en el escritorio. Abre la terminal y usa el comando cd para acceder a la carpeta del nuevo proyecto. Entonces ejecuta:

npm i

Cuando finalice la instalación, puede ejecutar npm start para compilar el nuevo proyecto y abrirlo en el navegador predeterminado. Todo el código importante reside en la carpeta dev del proyecto. Cuando se realizan cambios en su contenido, el proyecto se reconstruye y vuelve a cargar el navegador automáticamente. El núcleo del código del proyecto está en dev/js/app.js. Aquí es donde ensamblas todas las piezas para que la aplicación funcione.

Elecciones

@composi/core es pequeño pero brinda mucha functionalidad. Ésto significa que tienes que hacer una decisiones básicas cuando empiezas uno nuevo proyecto. Usando @composi/create-composi-app, puedes crear un proyecto ya listo para usar. Hay varios enfoques que podrías tomar para hacer su aplicación, algunos más complicados que los otros. Te recomendamos que comiences lo más simple posible. Un nuevo proyecto viene con un título renderizado a la página. El archivo app.js importa h y render. Eso es todo lo que necesitas para empezar.

Manejando los Datos del Proyecto

Ojalá quieras algo más que un título. Tu aplicación probablemente tendrá que generar algún tipo de recopilación de datos. Necesitas crear una vista que pueda manejar eso. Es probable que desees permitir que el usuario interactúe con la aplicación. No te molestes con eso al principio. Simplemente cree un componente que pueda representar los datos básicos y la estructura de la aplicación. Estos datos son un objeto separado en el código que utiliza para representar la vista. Cuando vea que tiene lo que espera, regrese y agregue eventos, uno por uno. Ahora la elección importante es cómo hacer que la aplicación reaccione a los eventos. Debido a que sus datos son inertes, los eventos tendrán que actualizarlos y volver a renderizar la vista.

DataStore

Hacer que los eventos manipulen el estado y que las vistas se vuelvan a renderizarse es complicado. Cuando la aplicación llegue a esta etapa, probablemente debería pensar en utilizar un dataStore. Tendrá que importarlo en el proyecto para usarlo. Un dataStore le proporciona datos inmutables y la actualización del estado puede volver a representar la vista. De esa manera los eventos solo tienen que actualizar el estado del dataStore.

Persistencia de Datos del Lado del Cliente

En algún momento, es posible que desees habilitar la persistencia de las interacciones del usuario, como agregar o eliminar elementos. Puedes hacerlo con un dataStore a través de su método putInLocalStorage. Pruébalo. LocalStorage tiene limitaciones, la cantidad de datos que puede guardar y el hecho de que todos los datos tienen que convertirs en cadenas de texto. Cuando esto es un probema, piensa en utilizar @composi/idb. Este es un envoltura basada en promesas para IndexedDB que proporciona una interfaz simple y similar a localStorage.

Complejidad de Interacción

El uso de un dataStore o de IndexedDB y observadores con la aplicación puede ser todo lo que necesitas. Sin embargo, si encuentras que hay muchos eventos que deben ser rastreados por los escuchas de dataStore u observadores, es posible que desees una alternativa. Eso sería @composi/core runtime. Ya está en tu proyecto como parte de @composi/core. Solo necesitas importarlo en tu aplicación:

import { h, render, run} from '@composi/core'

El entorno de ejecución proporciona un ámbito encapsulado con administración de estado para sus componentes funcionales. Si es la primera vez que usa @composi/core, desearía comenzar con uno de los enfoques más simples descritos anteriormente. Cuando se sienta cómodo creando y actualizando con componentes funcionales, eche un vistazo a cómo usar el entorno de ejecución.

Empezando con el Entorno de Ejecución

Si ya estás familiarizado con el uso del entorno de ejecución de @composi/core, entonces está bien comenzar con él de inmediato. Sin embargo, aún debes seguir pasos similares a los que describimos anteriormente. Comienza con la implementación más simple posible: algunos datos estáticos. Luego, agrega lentamente eventos a la vista y acciones a la función de actualización (update). Poco a poco va refactorizando para incidir en la complejidad. De esa forma, si algo se rompe, ya sabes dónde buscar.

Recuerde, todo lo que necesitas para crear un programa de entorno de ejecución válido es esto:

import { h, render, run } from '@composi/core'
const program = {
  init: [],
  update() {},
  view() {}
}
// Ejecute el programa:
run(program)

Y, aquí está vivo:

See the Pen @composi/core + runtime Basic-es by Robert Biggs (@rbiggs) on CodePen.

Comienza simple. Luego agrega una vista estática. Luego agrega un evento y una acción para manejarlo. Mantenlo todo en un archivo al principio. A medida que el programa crece en complejidad, mueve las piezas a sus propios archivos.