Cash, una alternativa pequeña a jQuery para navegadores modernos

 (github.com/fabiospampinato)
4 puntos por GN⁺ 2024-11-04 | 1 comentarios | Compartir por WhatsApp

Introducción a CashCash

  • CashCash es una alternativa muy pequeña a jQuery para navegadores modernos (IE11+), y ofrece una sintaxis estilo jQuery para manipular el DOM.
  • Aprovecha las funciones de los navegadores modernos para mantener una base de código mínima, y ofrece métodos encadenables similares a jQuery con un tamaño de archivo mucho menor.
  • No busca una coincidencia funcional del 100% con jQuery, pero cubre la mayoría de los casos de uso cotidianos.

Comparación

  • Comparación de tamaño

    • Sin minificar: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minificado: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minificado y con Gzip: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • Tiene una reducción de tamaño del 76.6% frente a jQuery Slim.

  • Comparación de funciones

    • Soporte para navegadores antiguos: Cash ❌, Zepto ❌, jQuery Slim ✔
    • Soporte para navegadores modernos: Cash ✔, Zepto ✔, jQuery Slim ✔
    • Mantenimiento activo: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Eventos con namespace: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Base de código en TypeScript: Cash ✔, Zepto ❌, jQuery Slim ❌
    • Tipos de TypeScript: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • Soporte para builds parciales: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Uso

  • Cash está disponible en jsDelivr y puede usarse de la siguiente manera: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • También puede usarse a través de npm con el paquete cash-dom: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

Documentación

  • Cash ofrece selectores de consulta, métodos de colección y algunos métodos de librería.
  • Se puede consultar la API de jQuery, y Cash implementa la mayoría de las funciones compatibles con jQuery.
  • Cash puede ampliarse con métodos personalizados.

Contribuir

  • Si encuentras un problema o tienes una solicitud de función, debes abrir un issue.
  • Para enviar un pull request, sigue estos pasos:
    1. Clona el repositorio: git clone https://github.com/fabiospampinato/cash.git
    2. Ve al repositorio clonado: cd cash
    3. Instala las dependencias: npm install
    4. Recompila Cash automáticamente al hacer cambios: npm run dev
    5. Abre la suite de pruebas: npm run test
    6. Actualiza el README si hace falta

Agradecimientos

  • Gracias a todas las personas que contribuyeron al desarrollo de Cash.
  • Gracias a @hisk por encargarse del diseño del logo.

Licencia

  • MIT © Fabio Spampinato

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-11-04
Opiniones de Hacker News

  • El navegador simplifica la manipulación del DOM, así que el trabajo se puede hacer con solo dos líneas de código

    • Se usan document.querySelector y document.querySelectorAll enlazados
    • Se importan y usan esas dos funciones desde un módulo
    • Enlace de GitHub

  • La ventaja de jQuery es el manejo automático de listas y la capacidad de consultar al elemento padre

    • El problema es que falla silenciosamente con listas vacías
    • Si se volviera a implementar jQuery, haría que lanzara errores con conjuntos vacíos y que solo fallara silenciosamente cuando fuera necesario
    • Está relacionado con el viejo debate entre librerías y frameworks

  • Como los sitios web convencionales usan mucho JavaScript, reescribir toda la librería es ineficiente

  • Presentación de una librería alternativa a jQuery hecha personalmente

    • Las animaciones se implementan con CSS
    • Usa de forma transparente un solo elemento o una lista
    • Prioriza Vanilla JavaScript, sin dependencias, 1 archivo, menos de 340 líneas
    • Enlace de GitHub

  • Se enteró de las diferencias entre jQuery y Cash

  • Experiencia usando Shoestring para reducir JS

    • Cash también ofrece funciones similares, pero están ocultas en la documentación
    • Usar las funciones nativas del navegador es una mejor opción
    • La alternativa a jQuery pesa 6 kB, mientras que Preact tiene la mitad de ese tamaño

  • Objetivo de inferir el tipo de los elementos usando cadenas de plantilla de TypeScript

    • Por ejemplo, $('div#name') se infiere como HTMLDivElement

  • jQuery 4 es una alternativa para navegadores modernos

  • Se usó jQuery en extensiones de navegador, pero luego se cambió a una librería JSX

  • Gustan las librerías y frameworks pequeños, pero en la práctica se termina usando librerías grandes

    • Framework: 50KB
    • Versión pequeña: 5KB
    • Librería irremplazable: 1MB