10 чудових бібліотек JavaScript, які слід спробувати в 2020 році

JavaScript - одна з найпопулярніших мов в Інтернеті. Незважаючи на те, що спочатку він був розроблений лише для веб-сторінок, за останні два десятиліття він спостерігав експоненціальне зростання.

Зараз JavaScript здатний робити майже все і працює на декількох платформах та пристроях, включаючи IoT. І з нещодавнім запуском SpaceX Dragon, JavaScript навіть у космосі.

Однією з причин його популярності є наявність великої кількості фреймворків та бібліотек. Вони значно полегшують розробку в порівнянні з традиційною розробкою Vanilla JS.

Є бібліотеки майже для всього, і майже кожен день вони виходять. Але з такою кількістю бібліотек на вибір стає важко відстежувати кожну та те, як вона може бути адаптована конкретно до ваших потреб.

У цій статті ми обговоримо 10 найпопулярніших бібліотек JS, які ви можете використовувати для створення свого наступного проекту.

Листівка

Я думаю, що Leaflet - найкраща бібліотека з відкритим кодом для додавання інтерактивних карт, зручних для мобільних пристроїв, до вашої програми.

Його невеликий розмір (39 кБ) робить його чудовою альтернативою для розгляду порівняно з іншими бібліотеками карт. Завдяки міжплатформенній ефективності та добре задокументованому 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 тис. Зірок на GitHub.

Ось демонстрація Codepen, з якою ви можете грати:

Ви навіть можете використовувати його з популярними фреймворками, такими як:

  • реакція-fullpage
  • vue-fullpage
  • angular-fullpage

Я зіткнувся з цією бібліотекою близько року тому, і з тих пір вона стала однією з моїх улюблених. Це одна з небагатьох бібліотек, яку можна використовувати майже в кожному проекті. Якщо ви ще не почали його використовувати, просто спробуйте, ви не будете розчаровані.

anime.js

Одна з найкращих бібліотек анімації, Anime.js є гнучкою та простою у використанні. Це ідеальний інструмент, який допоможе вам додати по-справжньому круту анімацію до вашого проекту.

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

Як розробнику важливо мати хороший портфель. Перше враження, яке мають люди про ваше портфоліо, допомагає вирішити, найматимуть вас чи ні. І що може бути кращим інструментом, ніж ця бібліотека, щоб оживити ваше портфоліо. Це не тільки покращить ваш веб-сайт, але і допоможе продемонструвати фактичні навички.

Перегляньте цей Codepen, щоб дізнатись більше:

Ви також можете поглянути на всі інші цікаві проекти на Codepen або прочитати Документи тут.

Screenfull.js

Я зіткнувся з цією бібліотекою, шукаючи спосіб реалізації повноекранної функції у своєму проекті.

Якщо ви також хочете мати повноекранну функцію, я б радив використовувати цю бібліотеку замість повноекранного API через її ефективність між браузерами (хоча вона побудована поверх цього).

Він настільки малий, що ви його навіть не помітите - приблизно 0,7 кБ в 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.