Estudio de Librerías JavaScript

Catálogo de las 66 librerías de JavaScript más populares (datos de junio 2023), extraído del artículo de Web Reactiva. Cada librería se agrupa por categoría (UI, visualización, backend, animaciones, testing, bundling, juegos…), con su categoría, stars de GitHub y caso de uso principal para elegir la herramienta correcta para tu proyecto. Incluye scripts minimalistas por categoría y el flujo animado de cómo elegir una librería.

1 · Catálogo completo — 66 librerías por categoría

Agrupadas por categoría (36). La # es su puesto por popularidad (stars de GitHub). ⭐ = stars aproximadas (junio 2023).

2 · Scripts minimalistas por categoría

El ejemplo más corto para probar una librería "a la primera" por categoría. npm i <paquete> + snippet.

# npm i react react-dom
import React from 'react';
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root'))
  .render(<h1>Hola React</h1>);

# npm i chart.js
import Chart from 'chart.js/auto';
new Chart(document.getElementById('g'), {
  type: 'bar',
  data: { labels: ['A','B'],
          datasets: [{ data: [10, 20] }] },
});

<script src="https://cdn.jsdelivr.net/npm/animejs@3/lib/anime.min.js"></script>
anime({ targets: '.caja', translateX: 250,
       duration: 800, easing: 'easeInOutQuad' });

# npm i axios
import axios from 'axios';
const { data } = await axios.get('https://api.example.com/x');
console.log(data);

# npm i express
import express from 'express';
const app = express();
app.get('/', (req,res) => res.send('Hola'));
app.listen(3000);

# npm i -D jest
test('suma', () => { expect(1+2).toBe(3); });

# npm i -D parcel
# npx parcel index.html   → empaqueta sin configurar

<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 300,
  scene: { create() { this.add.text(20,20,'Hola'); } } });

L.map('mapa').setView([6.244, -75.581], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

# npm i dayjs
import dayjs from 'dayjs';
console.log(dayjs().format('YYYY-MM-DD'));

3 · Cómo elegir una librería de JavaScript

Factores clave del artículo de Web Reactiva para decidir bien.

4 · Grafo animado — el flujo para elegir una librería

El token 🟠 recorre el flujo de decisión. Clic en el gráfico reinicia la animación.

5 · Referencia — categorías y regla de librerías