Bibliotecas de JavaScript

La lista de bibliotecas de JavaScript utilizables crece todos los días, desde pequeñas bibliotecas para analizar cadenas de números hasta enormes marcos que le permiten escribir aplicaciones móviles usando JavaScript.

¿Pero cuáles bibliotecas de JavaScript debería aprender?

En este artículo encontrara una selección de algunas bibliotecas de JavaScript que considero buenas para aprender y que tendrán un futuro en la comunidad de JavaScript. Si es alguien que prefiere usar bibliotecas solo cuando escribir una tarea por sí mismo llevará más tiempo del que debería.

La mayoría de estas bibliotecas de JavaScript no son nuevas ni menos conocidas, pero son útiles para una amplia gama de aplicaciones y ayudan a completar tareas fáciles o difíciles sin problemas.

1. Luxon

Luxon, como Moment.js, es una biblioteca para manejar objetos de fecha y hora. Prefiero Luxon sobre Moment.js en este momento porque está más preparado para el futuro, ya que usa el objeto Intl relativamente nuevo en lugar del objeto Date. Moment.js también toma nota de esto en su propio sitio web e intenta alejar a las personas de Moment.js cuando crean más aplicaciones preparadas para el futuro.

La sintaxis de Luxon es muy sencilla y similar a la sintaxis de Moment.js a la que todos nos hemos acostumbrado:

// Create a new date and add three hours to it
var date1 = DateTime.now();
var date2 = d1.plus({ hours: 3 });

// Compare the values.
date1.valueOf() === date2.valueOf(); 
//=> false

Siempre que necesite manejar fechas y horas, puede usar una biblioteca. Puede ser complicado calcular tiempos o fechas simples, y una biblioteca como Luxon lo hace más fácil.

Moment.js

Si bien mucha gente prefiere Luxon, Moment.js todavía tiene sus momentos. Es mejor para aplicaciones más antiguas o aplicaciones en las que no es posible actualizar o cambiar a Luxon.

Moment.js es muy fácil de usar. La sintaxis es legible y fácil de aprender, y la documentación del sitio web oficial es fácil de entender y tiene muchos ejemplos.

2. Axios

Axios es una biblioteca utilizada para solicitudes HTTP asincrónicas. Hacer llamadas a la API puede ser tan fácil o complejo como lo necesite.

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/profile?ID=4542')
  .then(function (res) {
    // Success
    console.log(res);
  })
  .catch(function (err) {
    // Error
    console.log(err);
  })

// Or
function getUserAccount() {
  return axios.get('/profile/123');
}

Basta con usar esta biblioteca algunas veces para saber que no volverá a las llamadas AJAX de vanilla JavaScript. Puede actualizar opciones como el método o la URL en un objeto en lugar de una cadena, y puede hacer mucho más.

La publicación o actualización de datos debe incluir un cuerpo de solicitud, y esto también se hace muy fácilmente. Entonces, si alguna vez necesita hacer llamadas a la API en su aplicación, tenga esto en cuenta. Podría ahorrarse muchos dolores de cabeza.

3. React

React no es muy nuevo ni el único en su clase, pero se ha ganado su nombre en esta lista. Es un marco de aplicación web basado en componentes que se puede utilizar para todo, desde pequeños sitios de marketing hasta aplicaciones empresariales.

function HomePage() {

    return (
        <div>
            <h1>Home Page</h1>
            <p>Welcome to our little HomePage</p>
        </div>
    )
}
  
export default HomePage

La sintaxis es fácil de usar y utiliza una forma de HTML en JavaScript llamada JSX. Esto hace que escribir componentes reutilizables sea muy fácil y lo hace adecuado para páginas web, sin importar cuán pequeñas o grandes sean.

Next.js y Gatsby

Next.js y Gatsby son marcos de React renderizados por servidor. Tienen algunos casos de uso diferentes, pero se utilizan para proyectos similares todo el tiempo. Estos mejoran la experiencia del desarrollador y ambos tienen sus propios sistemas fáciles de implementar.

Muchas personas, al momento de crear una aplicación en React, generalmente usará una de estas dos, por lo que se han ganado su nombre en esta lista. También hay muchos otros marcos para aplicaciones web que usan React y podría nombrarlos a todos, pero eso no sería muy divertido de leer.

Reaccionar Native

React Native es la razón por la que muchos desarrolladores comienzan a aprender React. Es un marco de JavaScript creado para desarrollar rápidamente aplicaciones móviles utilizando JavaScript. Y aunque podría pensar que sería lento y no tendría una sensación pulida, está equivocado.

function HomePage() {

    return (
        <View>
            <Text style={{fontSize: 28}}>Home Page</Text>
            <Text>Welcome to our little HomePage</Text>
        </View>
    )
}
  
export default HomePage

React Native se traduce en elementos nativos para la plataforma que estás utilizando. Esto significa que es increíblemente rápido y, al mismo tiempo, facilita el desarrollo de aplicaciones. Entonces, si desea comenzar a crear aplicaciones, esta podría ser una manera fácil de comenzar.

4. Animar en desplazamiento

AOS, o Animate on Scroll, es una pequeña biblioteca para crear fácilmente animaciones que se activarán cuando el usuario se desplace hasta el elemento. Esto se puede integrar en los componentes de React como es de esperar y también funcionaría en HTML simple.

// Import AOS files.
import AOS from 'aos';
import "aos/dist/aos.css";

// Initialize
AOS.init()

// A sample div that would fade in when scrolled in the view of the user.
<div data-aos={"fade"} className={"flex flex-col items-center mt-32"}></div>

Solo necesita una línea de código y un único atributo en sus elementos para funcionar sin problemas. Es tan fácil de usar que no podría recomendarlo lo suficiente.

5. Chalk

Chalk se destaca en esta lista. Es una biblioteca para diseñar aplicaciones basadas en consola.

const chalk = require('chalk');
const log = console.log;
 
// Combine styled and regular strings
log(chalk.blue('Hello,') + ' World' + chalk.red('!'));
 
// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));

El siguiente código produciría texto con estilo en la consola:

Si bien esto puede parecer una molestia, y aunque probablemente no sea útil en todos los casos, puede facilitar la lectura de la consola. Registrar errores con un título que tiene un fondo rojo o tareas exitosas en verde sin duda haría que leer el terminal fuera un poco más divertido.

6. Lodash

Casi todo el mundo conoce a Lodash hoy en día. Según su sitio web, es “una biblioteca de utilidades JavaScript moderna que ofrece modularidad, rendimiento y extras”. Se centra en facilitar las tareas con matrices y objetos.

Se llama Lodash porque, como jQuery, usa un símbolo en lugar de un nombre de variable para indicar sus funciones. En el caso de jQuery, es un signo de dólar. Para Lodash, es un underscore (o “guión bajo”).

_.difference([2, 1], [2, 3]);
// => [1]

_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'

Tiene tantos casos de uso y ejemplos en su sitio web que no sabría qué decirle excepto que vaya a ver si tiene algo para usted. Probablemente tenga al menos una función que podría haber intentado implementar usted mismo, pero fue demasiado difícil o simplemente lento.

Conclusión

Después de escribir esta lista, he llegado a la conclusión de que realmente no hace falta utilizar muchas bibliotecas de JavaScript y marcos más pequeños. Al ver que hay una cantidad increíble de bibliotecas útiles, hay que investigar más y seguir tratando de hacer que su vida como desarrollador sea lo más fácil posible.

Muchas gracias por leer y que tengas un buen día.