LAS 10 LIBRERÍAS DE JAVASCRIPT MÁS UTILIZADAS
Si has estado sumergido en el mundo del desarrollo web durante los últimos años, tal vez has notado el gran crecimiento de JavaScript como lenguaje de programación elegido por los desarrolladores, y con él el aumento en el uso de librerías de JavaScript.
Como prueba de lo anteriormente mencionado, IEEE Spectrum, revista editada por el Instituto de Ingenieros Eléctricos y Electrónicos, ubica a JavaScript en el puesto número 8 como el mejor lenguaje de programación dentro de una lista de 50 de ellos. Ver más
¿Qué hay de las librerías de JavaScript?
A la par del crecimiento de JavaScritps, crecen sus librerías. Sin duda son una excelente forma de ahorrar tiempo y esfuerzos en el desarrollo de tus sitios web y cada vez son más los desarrolladores que hacen uso de estas.
Existe una gran variedad, una realmente útiles y otras no tantas. En este blog te mostraremos las más populares y cómo implementarlas en tu sitio web, pero antes de eso, iniciaremos explicando qué son y algunas de sus ventajas.
¿Qué son las librerías?
Para explicarlas mejor, comparémoslas con la librería de tu escuela, acudías a ella cuando necesitabas información sobre un tema en específico o querías solucionar un problema, de esta misma forma funcionan las librerías JavaScript, son archivos con instrucciones para agregarle diversas funcionalidades y efectos a las páginas de internet, haciendo uso este lenguaje de programación.
Estas librerías podrás encontrarlas en diversos CDNs y podrás descargarlas e implementarlas libremente.
Principales CDNs
Npm: Es el administrador de paquetes para JavaScript más grande del mundoy, por ende, el preferido por los desarrolladores. Te permitirá instalar, compartir y distribuir código con otros desarrolladores de manera colaborativa.
Yarn: Se trata de un administrador de paquetes de códigos. Te permitirá hacer uso y/o compartir códigos con otros desarrolladores de todo el mundo de forma rápida, segura y confiable. Ver más
Angular
La primera versión de Angular lleva el nombre de AngularJS y consiste en una librería que te permitirá crear una sólida estructura de tu sitio web. Gracias a su éxito y acogida, pasó de ser librería a convertirse en framework para aplicaciones web desarrollado en TypeScript la cual es una variación de JavaScript que soporta tipado y es orientada a objetos.
Lodash
Esta librería de JavaScript es utilizada para simplificar el manejo y edición de objetos, arrays, números, matrices, etc. Sin duda alguna te evitará molestias al itinerar matrices, objetos y cadenas; al manipular y probar valores y al crear funciones compuestas.
Moment.js
Moment.js es una librería de JavaScript que te permitirá procesar, validar y manipular fechas de manera rápida y sencilla. Podrás utilizarla, por ejemplo, para hacer un conteo regresivo de la fecha de un evento, o para incluir un calendario en tu sitio web.
¿Cómo implementarla?
Para implementar esta libraría solo deberás llamar a la función moment().format() desde el javascript
Elevator.js
La función de esta librería la describe perfectamente su nombre. Gracias a esta podremos agregar un botón al final de nuestra página web que actuará como un elevador y nos permitirá volver a la parte superior de esta sin necesidad de hacer scroll.
Podrás descargarla en su Github
Chart.js
Los datos o cifras en tu sitio web no tienen por qué ser información irrelevante o aburrida para los usuarios que ingresan a este. Gracias a esta herramienta podrás representar tu información haciendo uso de gráficas o datos de una manera interactiva y atractiva.
AOS
Gracias a esta librería podrás agregarle diversos efectos a tu página web para cuando los usuarios hagan scroll en tu sitio web, de esta forma lograrás que este luzca más atractivo.
¿Cómo implementarla?
Paso 1: Añade las siguientes líneas en la sección HEAD:
<link href=”https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css” rel=”stylesheet”>
<script src=”https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js”></script>
Para agregar animaciones a un elemento en particular podrás añadir el nombre de la animación en la propiedad data-aos del elemento.
Popper.JS
En esta librería de JavaScript podrás encontrar códigos que te permitirán crear etiquetas con información sobre un determinado elemento de una página. Podrás elegir su ubicación, agregarles límites, incluirle flechas y personalizarlo a tu manera.
Código para incluir Popper según su ubicación:
Derecha:
var popper = new Popper(referenceElement, onPopper, {
placement: ‘right’
});
Izquierda:
var popper = new Popper(referenceElement, onPopper, {
placement: ‘left’
});
Parte inferior:
var popper = new Popper(referenceElement, onPopper, {
placement: ‘bottom’
});
Parte superior:
var popper = new Popper(referenceElement, onPopper, {
placement: ‘top’
});
Código para Volteo personalizado
var popper = new Popper(referenceElement, onLeftPopper, {
placement: ‘left’,
modifiers: {
flip: {
behavior: [‘left’, ‘bottom’, ‘top’]
},
preventOverflow: {
boundariesElement: container,
},
},
});
Código para Popper en contenedor de desplazamiento
var popper = new Popper(referenceElement, onLeftPopper, {
placement: ‘left’,
});
Código para Poppers desplazados
var shiftStart = new Popper(referenceElement, shiftStartPopper, {
placement: ‘left-start’,
});
var shiftEnd = new Popper(referenceElement, shiftEndPopper, {
placement: ‘bottom-end’,
});
Código para agregar límites de la vista
var popper = new Popper(referenceElement, onBottomPopper, {
placement: ‘bottom’
});
Bideo.js
Si deseas un sitio web dinámico y atractivo, no hay nada mejor que un video. Esta librería te permitirá agregarlos al fondo de tus elementos o textos de una forma sencilla y rápida y, además, es responsive y será compatible con todas las pantallas.
Podrás descargarlo desde Github
Granim.js
Los degradados han sido en tendencia en el mundo de la web durante el 2018 y al parecer sus usos seguirán vigentes durante mucho más tiempo. Esta librería te permitirá crear fondos degradados con variaciones en sus colores. Un efecto sutil que sin duda le dará un toque interactivo y creativo a tu sitio web.
Podrás descargarlo a través de su Github
Iconate
La belleza está en los detalles y esta herramienta es la muestra de ello. ¿Por qué tener íconos estáticos cuando puedes sorprender a tus usuarios con animaciones o cambios repentinos al hacer clic sobre ellos?
Esta librería te permitirá hacer cientos de variaciones para personalizar tus íconos a tu manera. Por ejemplo, podrás hacer que tu ícono de barra se convierta en una fecha y rote al momento de hacer la transmisión. Pondrás a prueba tu creatividad y harás que tu sitio web luzca más atractivo.
Podrás descargarlo a través de su Github
Ahora que conoces estas librerías y dónde descargarlas, que nada de detenga. ¡Crea sitios web irresistibles para tus usuarios y agrégales valor a sus diseños!
¡Aprender a programar páginas web nunca fue tan fácil!
Dominar los lenguajes de código, herramientas, arquitectura, bases de datos sí es posible. Ingresa a nuestro sitio web y conoce los beneficios que tenemos para ti. ¡Aprovecha la semana de #NextUWebWeek y sé el experto que todas las empresas buscan!
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario