10 страхотни библиотеки на JavaScript, които трябва да изпробвате през 2020 г.

JavaScript е един от най-популярните езици в мрежата. Въпреки че първоначално беше разработен само за уеб страници, през последните две десетилетия той отбеляза експоненциален растеж.

Сега JavaScript може да прави почти всичко и работи на няколко платформи и устройства, включително IoT. И с неотдавнашното стартиране на SpaceX Dragon, JavaScript е дори в космоса.

Една от причините за популярността му е наличието на голям брой рамки и библиотеки. Те правят разработката много по-лесна в сравнение с традиционната разработка на Vanilla JS.

Има библиотеки за почти всичко и почти всеки ден излизат други. Но с толкова много библиотеки, от които да избирате, става трудно да се следи всяка една и как тя може да бъде съобразена конкретно с вашите нужди.

В тази статия ще обсъдим 10 от най-популярните JS библиотеки, които можете да използвате, за да изградите следващия си проект.

Брошура

Мисля, че Leaflet е най-добрата библиотека с отворен код за добавяне на удобни за мобилни устройства интерактивни карти към вашето приложение.

Неговият малък размер (39kB) го прави чудесна алтернатива за разглеждане пред други картотеки. С ефективност на различни платформи и добре документиран API, той има всичко необходимо, за да се влюбите.

Ето няколко примерни кода, които създават карта на брошурата:

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") });

В брошурата трябва да предоставим слой от плочки, тъй като по подразбиране няма такъв. Но това също така означава, че можете да избирате от широка гама от слоеве, както безплатни, така и първокласни. Тук можете да разгледате различни безплатни слоеве от плочки.

Прочетете Документите или следвайте уроците, за да научите повече.

fullPage.js

Тази библиотека с отворен код ви помага да създавате уебсайтове за превъртане на цял екран, както можете да видите в горния GIF. Той е лесен за използване и има много опции за персонализиране, така че не е изненада, че се използва от хиляди разработчици и има над 30 000 звезди в GitHub.

Ето демонстрация на Codepen, с която можете да играете:

Можете дори да го използвате с популярни рамки като:

  • реакция-пълна страница
  • vue-fullpage
  • ъглова-пълна страница

Попаднах на тази библиотека преди около година и оттогава тя се превърна в една от любимите ми. Това е една от малкото библиотеки, които можете да използвате в почти всеки проект. Ако още не сте започнали да го използвате, просто опитайте, няма да бъдете разочаровани.

anime.js

Една от най-добрите библиотеки за анимация там, Anime.js е гъвкава и лесна за използване. Това е идеалният инструмент, който ще ви помогне да добавите наистина страхотна анимация към вашия проект.

Anime.js работи добре със CSS свойства, SVG, DOM атрибути и JavaScript обекти и може лесно да се интегрира във вашите приложения.

Като разработчик е важно да имате добро портфолио. Първото впечатление, което хората имат за вашето портфолио, помага да решите дали ще ви наемат или не. И какъв по-добър инструмент от тази библиотека, за да вдъхнете живот на вашето портфолио. Това не само ще подобри вашия уебсайт, но ще ви помогне да покажете действителните умения.

Вижте този Codepen, за да научите повече:

Можете също така да разгледате всички други страхотни проекти на Codepen или да прочетете документите тук.

Screenfull.js

Попаднах на тази библиотека, докато търсех начин да реализирам функция на цял екран в моя проект.

Ако искате да имате и функция на цял екран, бих препоръчал да използвате тази библиотека вместо API на цял екран поради нейната ефективност в различни браузъри (въпреки че е изградена върху всичко това).

Толкова е малък, че дори няма да го забележите - само около 0.7kB gzipped.

Изпробвайте демонстрацията или прочетете Документите, за да научите повече.

Moment.js

Работата с дата и час може да бъде огромна болка, особено при API извиквания, различни часови зони, местни езици и т.н. Moment.js може да ви помогне да разрешите всички тези проблеми, независимо дали манипулира, проверява, анализира или форматира дати или час.

Има толкова много готини методи, които са наистина полезни за вашите проекти. Например използвах .fromNow()метода в един от моите блогови проекти, за да покажа времето на публикуване на статията.

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

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

// 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

Read the Docs here.

Update September 2020: Moment.js has entered maintenance mode. Read more about it here. You may want to explore alternatives such as Day.js or date-fns.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

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

Read the Docs here.

Masonry

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.

Read more about it here.

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.