Pitch: Jevity - um framework javascript 👨‍💻

Introdução

Um framework Javascript simples para construir layouts simples, facilitar as requisições e também servir como um utility tool para operações repetitivas. Este projeto surgiu com o intuito de ser um laboratório de ideias e conceitos.

Minha ideia é tentar desenvolver itens que julgo necessários e interessantes de outros frameworks aqui nesse. Um dos maiores exemplos é fazer uma requisição ao clicar num botão e já retornar o conteúdo direto numa div especificada pelo seu ID por exemplo.

Um pouco do uso

Para criar um componente basta adicionar o atributo jevity ao elemento HTML. Exemplo de um botão:

<button jevity>Clique aqui</button>

Após isso, para dar dinamismo a esse botão basta adicionar mais alguns atributos. Para um melhor exemplo, vamos ao clicar no botão, fazer uma requisição GET e injetar o conteúdo do retorno em uma div:

<div class="card">
    <div class="card-body" id="content">
        Nenhum conteúdo.
    </div>
    <div class="card-footer">
        <button 
            class="btn btn-primary" 
            jevity
            j-event-type="click"
            j-url="https://dummyjson.com/products/2"
            j-method="GET"
            j-target="#content"
            j-template="t1">
            Carregar
        </button>
    </div>
</div>

Sobre cada atributo:

• j-event-type se refere a qualquer tipo válido de evento (click, mouseover, blur, focus, etc);
• j-url se refere a URL em si que você pretende fazer a requisição;
• j-method é onde é definido o verbo HTTP (POST, GET, PUT, PATCH, etc);
• j-target é definido o selector para onde o retorno vai ser injetado, exatamente como funciona a função nativa 'querySelector' do Javascript;
• j-template é o ID atribuído na função addTemplate que nesse exemplo foi 't1' como pode ser mostrado abaixo:

function testTemplate(props){
    console.log(props);
    return `
        <p class="fw-bold">#${props.id} - ${props.title}</p>
        <p>${props.description}</p>
    `;
}

(async () => {
    const jevity = new Jevity();   
    
    jevity.addTemplate('t1', testTemplate);
    
    jevity.start();
})();

A função addTemplate é pertencente ao framework e o primeiro parâmetro se refere ao ID, que pode ser tanto um número quanto um texto que faça você se lembrar rapidamente. Ao fazer a requisição e definir esse template, será enviado como parâmetro o objeto de resposta, como podemos ver no parâmetro props que recebe todo o retorno da API definida nesse exemplo.

Uma ideia que estou testando no momento

Na questão de templating estou testando no momento apenas a utilização da tag template e seu conteúdo ter propriedades dentro de chaves para fazer o bind direto com o retorno dos dados de uma API.

<div class="card">
    <div class="card-body" id="content">
        Nenhum conteúdo
        <template>
            <p class="fw-bold">#{id} - {title}</p>
            <p>{description}</p>
            <p class="text-muted">R$ {price}</p>
        </template>
    </div>
    <div class="card-footer">
        <button 
            class="btn btn-primary" 
            jevity
            j-event-type="click"
            j-url="https://dummyjson.com/products/2"
            j-method="GET"
            j-target="#content"
        >
            Carregar
        </button>
    </div>
</div>

Série de vídeos sobre o desenvolvimento

Criei um primeiro vídeo falando sobre o framework: https://www.youtube.com/watch?v=UiwY6JKIcZk

Minha ideia é desenvolver uma série de vídeos conforme vou evoluindo a ideia e conceitos. Inclusive se tiver discussões aqui com a comunidade pretendo linkar os assuntos aos vídeos. Pretendo com esse projeto evoluir meu conhecimento, trocar conhecimentos em si e desenvolver algo colaborativo e útil.

Repositório do projeto

Coloquei como fonte, mas o link pode ser acessado por aqui também: https://github.com/rodrigocborges/jevity

Observação: muita coisa pode mudar, muitas ideias e lógicas estão sendo testadas, principalmente na parte de templating, se uso por funções Javascript e/ou diretamente no HTML através da tag template por exemplo.

Inclusive, até o presente momento não surgiu uma versão "usável" oficial, onde o código estará otimizado e pronto para um único import e já funcionar perfeitamente!