Modular
Haz componentes sencillos y únelos en algo más complejo. El DOM virtual maneja el actualizar del HTML cuando las propiedades del componente cambian.
@composi/core es pequeñito, apenas 2KB. Tiene tres funciones principales: h, render y run, y tres eventos de ciclo de vida: onmount, onupdate y onunmount.
Declarativo
Define el marcado para los componentes con JSX o Hyperscript.
Todo es tan sólo JavaScript. Puedes usar el JavaScript dento de las funciones de render.
No hay que usar ningún marcado especial ni directivos.
Reusable
Los componentes funcionales y los programas de entorno de ejecución encapsulan su propiedades y funcionalidades en sí. Así que puedes reusarlos en otras aplicaciones fácilmente.
Se puede producir HTML en el servidor y, con Composi, se puede activarlo en cuando se carga la página.
@composi/core
El núcleo hace posible los componentes funcionales así como los de React, usando el JSX. Hay una función
render para inyectar el contenido en el DOM: render(<Component />, document.body). Ésta se
usa equal que la función ReactDOM.render. A diferencia de React, los componentes funcionales vienen con
soporte para tres ganchos de ciclo de vida. Estos se implementan como props para que pueda realizar un
seguimiento de cualquier elemento a medida que se
monta, actualiza y desmonta. No hay necesidad de escribir los eventos con notación de camellos ni atributos
especiales como React. Utilice los atributos normales de HTML. Puede usar JSX para componentes. React
requiere el uso de className, onClick, etc. Por otra parte, Composi te permite
usar class, onclick, etc. Puedes usar innerHTML cómo normal. Es tan sólo un
atributo de HTML que accepta una cadena de letras. Se supone que uno estará conciente de los riesgos de
seguridad al usarlo.
El núcleo también hace posible el manjeo de estado para componentes funcionales a través de su entorno de ejecución. Inspirado por la arquitectura Elm, el entorno de ejecución se basa en el patrón de SVU-State, View y Update (Estado, Vista y Actualización). Estado puede ser cualquier tipo de dato JavaScript válido. La vista es una función que devuelve una representación del estado. La actualización es como una versión simplificada de Redux, pero sin toda la plantilla. El entorno de ejecución también proporciona una manera de lidiar con los efectos. Los programas de entorno de ejecución también admiten la composición, con comunicación entre padres e hijos a través de los efectos.
En solo 2KB, @composi/core con el entorno de ejecución proporciona la misma funcionalidad que los
componentes
funcionales React, pero con una gestión de estado similar a Redux. @composi/core no tiene necesidad de
shouldComponentUpdate, etc. Antes de renderizar la vista, Composi revisa las props y, si no
han cambiado, deja de continuar.
Un Componente Funcional Sencillo
Se usa render para injectar marcado en el DOM. Esta función espera dos argumentos: un
componente functional y un contenedor en el cual se va renderizar.
See the Pen @composi/core - HolaMundo-2 by Robert Biggs (@rbiggs) on CodePen.
Actualización de un Componente
Se puede actualizar un componente functional renderizándolo con nuevos valores para sus propiedades.
En este ejemplo actualizamos el component cada segundo hasta cien. Usamos el evento de ciclo de vida
onmount para empezar el funcionamiento del método tick.
See the Pen @composi/core - temporizador by Robert Biggs (@rbiggs) on CodePen.
Lista de Tareas
Aquí se presenta una lista de tareas usado @composi/core con el entorno de ejecución para manejo de estado, junto con una unión etiquetada para simplicar las acciones de actualización y los mensajes. Ítemes de lista heredan su estado a través de las propiedades pasadas del padre a los hijos. Los hijos comunican con su padre a través de los mensajes.
Los eventos en línea manejan las interacciones del usuario. Todas las tareas se guardan en localStorage. Cuando el navegador se recarga, se usan los ítemes que fueron guardados.
Las animaciones se implementan utilizando los eventos de ciclo de vida onmount y onunmount.
See the Pen @composi/core - runtime Lista de Tareas by Robert Biggs (@rbiggs) on CodePen.
Una Calculadora
Aquí hay una calculadora simple implementada con @composi/core y @composi/datastore. El componente principal gestiona eventos para todos los subcomponentes. Este componente tiene muchos métodos personalizados para manejar todos los cálculos matemáticos, etc.
See the Pen @composi/core Mac Calculator by Robert Biggs (@rbiggs) on CodePen.
Un navegador de imágenes con ventanas emergentes
Esto utiliza @composi/core con el entorno de ejecución y una unión etiquetada para la administración estatal. Agarra imágenes de flickr. Puede hacer clic en una imagen para ver más de cerca. Al hacer clic de nuevo se cerrará.
Cuando hace clic en el botón "10 más", envía un mensaje a la función de update del programa, que obtiene diez imágenes más y devuelve el nuevo estado para volver a representar la vista.
See the Pen @composi/core Image Browser with runtime & tagged unions by Robert Biggs (@rbiggs) on CodePen.
Animación de SVG
Aquí estamos usando D3 para animar un árbol de Pitágoras usando el DOM virtual de Composi para actualizar el SVG en tiempo real. Mueva el cursor sobre el panel. Al hacerlo, se crearán, animarán y destruirán hasta 2.000 rectángulos según la posición del cursor. Esto muestra cuán eficiente es el DOM virtual de Composi.
Se puede utilizar muchas librerías y frameworks con Composi, como Redux, Mobx, RxJS, Lodash, Bootstrap, Material Design Lite, etc.
See the Pen @composi/core Pythagoras Dancing Tree by Robert Biggs (@rbiggs) on CodePen.
Contadores Dinámicos
Este es un componente funcional que genera contadores con clave. Utiliza el entorno de ejecución junto con una unión etiquetada para la gestión del estado. Esto es similar a cómo se implementó la aplicación de tareas anteriormente. Cada contador ocupa un ítem de lista con clave. Esto lo hace más eficiente para eliminar contadores aleatorios de la lista.
También estamos usando la etiqueta Fragment para generar un grupo de elementos hermanos, es
decir, los botones que
constituyen el contador.
See the Pen @composi/core --Contadores by Robert Biggs (@rbiggs) on CodePen.