JavaScript es uno de los lenguajes más populares de la web. Aunque inicialmente se desarrolló solo para páginas web, ha experimentado un crecimiento exponencial en las últimas dos décadas.

Ahora, JavaScript es capaz de hacer casi cualquier cosa y funciona en varias plataformas y dispositivos, incluido IoT. Y con el reciente lanzamiento de SpaceX Dragon, JavaScript está incluso en el espacio.

Una de las razones de su popularidad es la disponibilidad de una gran cantidad de marcos y bibliotecas. Hacen que el desarrollo sea mucho más fácil en comparación con el desarrollo tradicional de Vanilla JS.

Hay bibliotecas para casi cualquier cosa y casi todos los días salen más. Pero con tantas bibliotecas para elegir, resulta difícil realizar un seguimiento de cada una y de cómo se puede adaptar específicamente a sus necesidades.

En este artículo, analizaremos 10 de las bibliotecas JS más populares que puede utilizar para crear su próximo proyecto.

Folleto

Creo que Leaflet es la mejor biblioteca de código abierto para agregar mapas interactivos aptos para dispositivos móviles a su aplicación.

Su pequeño tamaño (39kB) lo convierte en una excelente alternativa a considerar sobre otras bibliotecas de mapas. Con eficiencia multiplataforma y una API bien documentada, tiene todo lo que necesitas para enamorarte.

Aquí hay un código de muestra que crea un mapa de folleto:

var map = new L.Map("map", { center: new L.LatLng(40.7401, -73.9891), zoom: 12, layers: new L.TileLayer("//tile.openstreetmap.org/{z}/{x}/{y}.png") });

En Leaflet, necesitamos proporcionar una capa de mosaico ya que no hay una por defecto. Pero eso también significa que puede elegir entre una amplia gama de capas, tanto gratuitas como premium. Puede explorar varias capas de mosaicos gratuitos aquí.

Lea los documentos o siga los tutoriales para obtener más información.

fullPage.js

Esta biblioteca de código abierto lo ayuda a crear sitios web de desplazamiento en pantalla completa, como puede ver en el GIF anterior. Es fácil de usar y tiene muchas opciones para personalizar, por lo que no es de extrañar que lo usen miles de desarrolladores y tenga más de 30k estrellas en GitHub.

Aquí hay una demostración de Codepen con la que puede jugar:

Incluso puede usarlo con marcos populares como:

reaccionar-fullpage
vue-fullpage
angular-fullpage

Me encontré con esta biblioteca hace aproximadamente un año y desde entonces se ha convertido en una de mis favoritas. Esta es una de las pocas bibliotecas que puede usar en casi todos los proyectos. Si aún no ha comenzado a usarlo, simplemente pruébelo, no se sentirá decepcionado.

anime.js

Una de las mejores bibliotecas de animación que existen, Anime.js es flexible y fácil de usar. Es la herramienta perfecta para ayudarte a agregar animaciones realmente interesantes a tu proyecto.

Anime.js funciona bien con propiedades CSS, SVG, atributos DOM y objetos JavaScript y se puede integrar fácilmente en sus aplicaciones.

Como desarrollador, es importante tener una buena cartera. La primera impresión que la gente tiene de su cartera ayuda a decidir si lo contratarán o no. Y qué mejor herramienta que esta biblioteca para darle vida a tu portafolio. No solo mejorará su sitio web, sino que también ayudará a mostrar sus habilidades reales.

Consulte este Codepen para obtener más información:

También puede echar un vistazo a todos los otros proyectos interesantes en Codepen o Leer los documentos aquí.

Screenfull.js

Encontré esta biblioteca mientras buscaba una forma de implementar una función de pantalla completa en mi proyecto.

Si también desea tener una función de pantalla completa, recomendaría usar esta biblioteca en lugar de la API de pantalla completa debido a su eficiencia entre navegadores (aunque está construida sobre eso).

Es tan pequeño que ni siquiera lo notarás: aproximadamente 0,7 kB en formato gzip.

Pruebe la demostración o lea los documentos para obtener más información.

Moment.js

Trabajar con la fecha y la hora puede ser una gran molestia, especialmente con llamadas a API, diferentes zonas horarias, idiomas locales, etc. Moment.js puede ayudarlo a resolver todos esos problemas, ya sea manipulando, validando, analizando o formateando fechas u horas.

Hay tantos métodos geniales que son realmente útiles para sus proyectos. Por ejemplo, utilicé el .fromNow()método en uno de los proyectos de mi blog para mostrar la hora en que se publicó el artículo.

const moment = require('moment'); relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); // a year ago

Aunque no lo uso muy a menudo, soy fanático de su apoyo a la internacionalización. Por ejemplo, podemos personalizar el resultado anterior usando el .locale()método.

// French moment.locale('fr'); relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); //il y a un an // Spanish moment.locale('es'); relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); //hace un año

Lea los documentos aquí.

Actualización de septiembre de 2020: Moment.js entró en modo de mantenimiento. Lea más sobre esto aquí. Es posible que desee explorar alternativas como Day.js o date-fns.

Hammer.js

Hammer.js es una biblioteca de JavaScript liviana que le permite agregar gestos multitáctiles a sus aplicaciones web.

Recomendaría esta biblioteca para agregar algo de diversión a sus componentes. Aquí hay un ejemplo para jugar. Simplemente ejecute el lápiz y toque o haga clic en el div gris.

Puede reconocer los gestos realizados con el tacto, el mouse y el puntero. Para los usuarios de jQuery, recomendaría usar el complemento jQuery.

$(element).hammer(options).bind("pan", myPanHandler);

Lea los documentos aquí.

Albañilería

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in onthe web page.

And here is the code for the above:

var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { itemSelector: '.grid-item', columnWidth: 400 }); var msnry = new Masonry( '.grid');

Here is a cool demo on Codepen:

Check out these Projects

//halcyon-theme.tumblr.com/
//tympanus.net/Development/GridLoadingEffects/index.html
//www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });

Check out the demos here.

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.