Cash, uma pequena alternativa ao jQuery para navegadores modernos

 (github.com/fabiospampinato)
4 pontos por GN⁺ 2024-11-04 | 1 comentários | Compartilhar no WhatsApp

Introdução ao CashCash

  • CashCash é uma alternativa muito pequena ao jQuery para navegadores modernos (IE11+), oferecendo uma sintaxe no estilo jQuery para manipulação do DOM.
  • Ele aproveita recursos de navegadores modernos para manter a base de código mínima e oferece métodos encadeáveis semelhantes ao jQuery em um arquivo muito menor.
  • Não tem como objetivo alcançar 100% de compatibilidade funcional com o jQuery, mas cobre a maioria dos casos de uso do dia a dia.

Comparação

  • Comparação de tamanho

    • Unminified: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minified: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minified & Gzipped: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • Em comparação com o jQuery Slim, há uma redução de tamanho de 76.6%.

  • Comparação de funcionalidades

    • Suporte a navegadores antigos: Cash ❌, Zepto ❌, jQuery Slim ✔
    • Suporte a navegadores modernos: Cash ✔, Zepto ✔, jQuery Slim ✔
    • Manutenção ativa: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Eventos com namespace: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Base de código em TypeScript: Cash ✔, Zepto ❌, jQuery Slim ❌
    • Tipos TypeScript: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • Suporte a builds parciais: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Como usar

  • Cash está disponível no jsDelivr e pode ser usado da seguinte forma: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • Também pode ser usado via npm com o pacote cash-dom: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

Documentação

  • Cash oferece seletores de consulta, métodos de coleção e alguns métodos de biblioteca.
  • É possível consultar a API do jQuery, e o Cash implementa a maior parte dos recursos compatíveis com jQuery.
  • Cash pode ser expandido com métodos personalizados.

Contribuição

  • Se você encontrar um problema ou tiver uma solicitação de recurso, deve abrir uma issue.
  • Para enviar um pull request, siga estas etapas:
    1. Clonar o repositório: git clone https://github.com/fabiospampinato/cash.git
    2. Ir para o repositório clonado: cd cash
    3. Instalar as dependências: npm install
    4. Recompilar automaticamente o Cash ao fazer alterações: npm run dev
    5. Abrir a suíte de testes: npm run test
    6. Atualizar o README, se necessário

Agradecimentos

  • Agradecimentos a todos os contribuidores que ajudaram no desenvolvimento do Cash.
  • Agradecimentos a @hisk pelo design do logo.

Licença

  • MIT © Fabio Spampinato

Leituras relacionadas

1 comentários

 
GN⁺ 2024-11-04
Opiniões no Hacker News

  • Os navegadores simplificam a manipulação do DOM, então dá para fazer o trabalho com apenas duas linhas de código

    • Usa document.querySelector e document.querySelectorAll com binding
    • Importa as duas funções do módulo para usar
    • Link do GitHub

  • A vantagem do jQuery é o processamento automático de listas e a capacidade de consultar elementos pai

    • O problema é que ele falha silenciosamente em listas vazias
    • Se fosse reimplementar o jQuery, faria com que lançasse erro em conjuntos vazios e só falhasse silenciosamente quando necessário
    • Isso se relaciona ao antigo debate entre bibliotecas e frameworks

  • Como sites mainstream usam muito JavaScript, reescrever a biblioteca inteira é ineficiente

  • Apresentação de uma biblioteca alternativa ao jQuery feita pessoalmente

    • As animações são implementadas com CSS
    • Trata de forma transparente um único elemento ou uma lista
    • Vanilla JavaScript em primeiro lugar, sem dependências, 1 arquivo, menos de 340 linhas
    • Link do GitHub

  • Passei a conhecer as diferenças entre jQuery e Cash

  • Já usei Shoestring para reduzir JS

    • Cash também oferece funcionalidade semelhante, mas isso fica escondido na documentação
    • Usar os recursos nativos do navegador é uma escolha melhor
    • Enquanto essa alternativa ao jQuery tem 6 kB, o Preact tem metade disso

  • O objetivo é inferir o tipo do elemento usando template strings do TypeScript

    • Por exemplo, $('div#name') é inferido como HTMLDivElement

  • jQuery 4 é a alternativa para navegadores modernos

  • Usei jQuery em extensões de navegador, mas migrei para uma biblioteca JSX

  • Gosto de bibliotecas e frameworks pequenos, mas na prática acabo usando bibliotecas grandes

    • Framework: 50 KB
    • Versão pequena: 5 KB
    • Biblioteca insubstituível: 1 MB