Cash, une petite alternative à jQuery pour les navigateurs modernes

 (github.com/fabiospampinato)
4 points par GN⁺ 2024-11-04 | 1 commentaires | Partager sur WhatsApp

Présentation de CashCash

  • CashCash est une alternative très légère à jQuery pour les navigateurs modernes (IE11+), qui fournit une syntaxe de style jQuery pour la manipulation du DOM.
  • Le projet s'appuie sur les fonctionnalités des navigateurs modernes afin de réduire au minimum la taille du code, tout en proposant des méthodes chaînables similaires à jQuery dans un fichier bien plus petit.
  • L’objectif n’est pas d’atteindre une parité fonctionnelle à 100 % avec jQuery, mais de couvrir la plupart des cas d’usage quotidiens.

Comparaison

  • Comparaison de taille

    • Non minifié : Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minifié : Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minifié & Gzippé : Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • Cela représente une réduction de taille de 76.6 % par rapport à jQuery Slim.

  • Comparaison des fonctionnalités

    • Prise en charge des anciens navigateurs : Cash ❌, Zepto ❌, jQuery Slim ✔
    • Prise en charge des navigateurs modernes : Cash ✔, Zepto ✔, jQuery Slim ✔
    • Maintenance active : Cash ✔, Zepto ❌, jQuery Slim ✔
    • Événements avec namespace : Cash ✔, Zepto ❌, jQuery Slim ✔
    • Codebase TypeScript : Cash ✔, Zepto ❌, jQuery Slim ❌
    • Types TypeScript : Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • Prise en charge des builds partiels : Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Utilisation

  • Cash est disponible sur jsDelivr et peut être utilisé comme suit : 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • Il peut aussi être utilisé via npm avec le package cash-dom : 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

Documentation

  • Cash fournit des sélecteurs de requête, des méthodes de collection et certaines méthodes de bibliothèque.
  • Vous pouvez vous référer à l’API de jQuery, et Cash implémente la plupart des fonctionnalités compatibles avec jQuery.
  • Cash peut être étendu avec des méthodes personnalisées.

Contribution

  • Si vous trouvez un problème ou avez une demande de fonctionnalité, vous devez ouvrir une issue.
  • Pour soumettre une pull request, suivez les étapes suivantes :
    1. Cloner le dépôt : git clone https://github.com/fabiospampinato/cash.git
    2. Aller dans le dépôt cloné : cd cash
    3. Installer les dépendances : npm install
    4. Recompiler automatiquement Cash lors des modifications : npm run dev
    5. Ouvrir la suite de tests : npm run test
    6. Mettre à jour le README si nécessaire

Remerciements

  • Merci à tous les contributeurs qui ont participé au développement de Cash.
  • Merci à @hisk pour la conception du logo.

Licence

  • MIT © Fabio Spampinato

À lire aussi

1 commentaires

 
GN⁺ 2024-11-04
Commentaires sur Hacker News

  • Les navigateurs simplifient la manipulation du DOM, au point que deux lignes de code suffisent souvent

    • utilisation de document.querySelector et document.querySelectorAll via binding
    • import des deux fonctions depuis un module
    • Lien GitHub

  • L’avantage de jQuery réside dans le traitement automatique des listes et la capacité à interroger les parents

    • le problème est l’échec silencieux sur les listes vides
    • si jQuery devait être réimplémenté, cela lèverait une erreur sur un ensemble vide et n’échouerait silencieusement qu’en cas de besoin
    • cela renvoie à l’ancien débat entre bibliothèques et frameworks

  • Comme les sites web grand public utilisent beaucoup de JavaScript, réécrire toute la bibliothèque est inefficace

  • Présentation d’une bibliothèque alternative à jQuery créée à titre personnel

    • les animations sont implémentées en CSS
    • utilisation transparente d’un seul élément ou d’une liste
    • priorité au JavaScript vanilla, sans dépendance, en un seul fichier, moins de 340 lignes
    • Lien GitHub

  • Découverte des différences entre jQuery et Cash

  • Retour d’expérience sur l’utilisation de Shoestring pour réduire le JS

    • Cash offre des fonctionnalités similaires, mais elles sont cachées dans la documentation
    • il vaut mieux utiliser les fonctionnalités natives du navigateur
    • cette alternative à jQuery fait 6 kB, alors que Preact en fait la moitié

  • Objectif d’inférer le type des éléments à l’aide des chaînes de gabarit TypeScript

    • par exemple, $('div#name') est inféré comme HTMLDivElement

  • jQuery 4 est une alternative pour les navigateurs modernes

  • Utilisation de jQuery dans une extension de navigateur, puis transition vers une bibliothèque JSX

  • J’aime les petites bibliothèques et les petits frameworks, mais en pratique je finis par utiliser de grosses bibliothèques

    • framework : 50 KB
    • petite version : 5 KB
    • bibliothèque irremplaçable : 1 MB