Cample.js

Cample.js: ¡uno de los marcos más rápidos sin un DOM virtual en Internet!

Sitio web • Documentación • Ejemplos • Fuente de ejemplos

Versión alfa

¿Sobre Cample.js?

Cample.js es un marco de código abierto JavaScript para crear interfaces de usuario. El marco funciona en un enfoque basado en componentes, donde cada componente puede interconectarse importando y exportando el estado actual. Cample.js no usa un DOM virtual para interactuar con el DOM real, lo que hace que el proceso de reactividad sea mucho más rápido.

Ventaja principal

Diagrama de rendimiento de los marcos y bibliotecas de JavaScript.
Resultados basados en la versión 123

Instalación

Para crear una aplicación, es mejor utilizar el comando oficial de campo de campo para generar un "punto de partida", eligiendo entre dos plantillas actualmente disponibles.

npx cample-start

Las dos plantillas principales se basan en dos agrupadores de módulos, como Webpack y Parcel. Para seleccionar uno de ellos de la lista en la terminal, puede seleccionar la más adecuada. Todos ellos tienen apoyo oficial.

Además, para instalar solo el marco, puede usar el siguiente comando:

npm i cample

Con esta instalación, las funciones seguirán disponibles directamente desde el módulo. Instalación utilizando Cample-start simplemente especifica los archivos de inicio para la aplicación.

Empezando

Después de configurar el punto de partida de la aplicación, el archivo JS contendrá el siguiente código, o el mismo, pero con importación HTML.

Javascript

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;

Html

 < div id =" app " > </ div >

Puede cambiar este código a cualquier otro que desee. Este código se presenta como un ejemplo de cómo funciona el marco.

Artículo de enlace: comenzando.

Reactividad

La reactividad en el marco se entiende como la capacidad, en respuesta a los cambios de datos, para actualizar automáticamente partes del código JavaScript o nodos HTML que usaron estos datos.

Este diagrama muestra que los datos se actualizan cuando usa una función que lo actualiza. Es decir, es como si se esté creando una actualización de datos de un solo hilo. En versiones futuras, la estructura puede cambiar ligeramente debido al procesamiento de datos asincrónicos.

Artículo de enlace: Reactividad.

Colegio de cambios

Colegio de cambios

Contribución

Si desea contribuir a este marco, consulte la guía de contribución. ¡Gracias!

Inspiración

Si le gusta el marco, será genial si califica el repositorio con una estrella ★

Contacto

Correo electrónico - [email protected]

Licencia

Con licencia bajo MIT