Cample.js

Cample.js - Uma das estruturas mais rápidas sem um DOM virtual na internet!

Site • Documentação • Exemplos • Exemplos Fonte

Versão alfa

Sobre Cample.js?

Cample.js é uma estrutura JavaScript de código aberto para criar interfaces de usuário. A estrutura funciona em uma abordagem baseada em componentes, onde cada componente pode ser interconectado pela importação e exportação do estado atual. Cample.js não usa um DOM virtual para interagir com o DOM real, o que torna o processo de reatividade muito mais rápido.

Principal Vantagem

Diagrama de desempenho das estruturas e bibliotecas JavaScript.
Resultados com base na versão 123

Instalação

Para criar um aplicativo, é melhor usar o comando oficial da Cample-Start para gerar um "ponto de partida", escolhendo entre dois modelos atualmente disponíveis.

npx cample-start

Os dois principais modelos são baseados em dois pacotes de módulos, como Webpack e Parcel. Para selecionar um deles na lista no terminal, você pode selecionar o mais adequado. Todos eles têm apoio oficial.

Além disso, para instalar apenas a estrutura, você pode usar o seguinte comando:

npm i cample

Com esta instalação, as funções ainda estarão disponíveis diretamente no módulo. A instalação usando o Cample-Start simplesmente especifica os arquivos de início do aplicativo.

Começando

Após definir o ponto de partida do aplicativo, o arquivo JS conterá o seguinte código ou o mesmo, mas com a importação 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 >

Você pode alterar esse código para qualquer outro que desejar. Este código é apresentado como um exemplo de como a estrutura funciona.

Artigo do link: Introdução.

Reatividade

A reatividade na estrutura é entendida como a capacidade, em resposta às alterações de dados, de atualizar automaticamente partes do código JavaScript ou nós HTML que usaram esses dados.

Este diagrama mostra que os dados são atualizados quando você usa uma função que o atualiza. Ou seja, é como se uma atualização de dados de thread única estivesse sendo criada. Em versões futuras, a estrutura pode mudar um pouco devido ao processamento de dados assíncronos.

Artigo do link: Reatividade.

Changelog

Changelog

Contribuição

Se você deseja contribuir com essa estrutura, consulte o guia contribuinte. Obrigado!

Inspiração

Se você gosta da estrutura, será muito legal se você classificar o repositório com uma estrela ★

Contato

E -mail - [email protected]

Licença

Licenciado sob o MIT