Wielką zaletą JavaScriptu jest dostępność niezliczonej ilości ułatwiających programowanie frameworków i bibliotek. Dziś przyjrzymy się tym drugim – oto lista dwudziestu ciekawych bibliotek JavaScript, które warto znać.
Anime.js
Anime.js umożliwia tworzenie animacji i mikrointerakcji, dodając aplikacjom nieco dynamiki i uroku.
Chart.js
Chart.js ułatwia tworzenie przeróżnych wykresów i grafów, np. przy analizie danych lub statystyce, prezentując je w atrakcyjny i przejrzysty sposób.
D3.js
D3 pozwala na wizualizację danych poprzez manipulację elementami drzewa DOM. Może je zbierać z różnych źródeł i w różnych formatach, a następnie utworzyć na ich podstawie np. tabelę HTML lub – przy wyższej złożoności – plik SVG. W pewnym sensie D3 “ożywia” dane.
Cleave.js
Cleave oferuje ciekawe możliwości formatowania pól <input>, np. dla numerów kart płatniczych, daty i czasu, telefonu. Biorąc ten ostatni rodzaj pola jako przykład, Cleave ułatwi stworzenie pola wyboru kraju i numeru kierunkowego, a także sformatuje wprowadzone dane dzieląc numer na trzycyfrowe grupy.
Leaflet
Leaflet ułatwia integrację interaktywnych map na stronach internetowych. Pozwala dodawać warstwy, np. markery, graficzne nakładki, popupy, kafelki, obsługuje interakcję z mapami poprzez różnego typu gesty, klawiaturę, zdarzenia. Zapewnia także wysoką wydajność map i płynność ich działania dzięki akceleracji sprzętowej, modularności i sztuczkom w CSS.
fullPage.js
fullPage.js to biblioteka dla chcących stworzyć pełnoekranowe strony internetowe z przewijaniem do konkretnej sekcji, tzw. onepagery. Oferuje responsywność, autoprzewijanie podczas ładowania strony, zagnieżdżanie sekcji przewijanych w poziomie, dobrze integruje się także z popularnymi frameworkami.
Hammer.js
Hammer.js ułatwia dodawanie gestów do interfejsów aplikacji webowych, zarówno tych dokonanych myszą, jak i dotykiem lub poprzez pointerEvents. Szczególnie dobrze sprawdza się przy obsłudze gestów multi-touch.
Three.js
Three.js to biblioteka dla wszystkich fanów zaawansowanych animacji 3D. Działa przy użyciu WebGL i zapewnia szerokie możliwości kreowania geometrii, świateł, cieni, materiałów, scen, efektów i wielu innych.
Bideo.js
Bideo.js ułatwia wykorzystywanie wideo jako tła strony – dodatkowo skalując i dostosowując do wymiarów wyświetlacza.
TaffyDB
TaffyDB tworzy coś na wzór bazy danych w kodzie JavaScript. Może się przydać szczególnie w projektach zakładających użycie znacznych ilości danych.
Granim.js
Granim.js pozwala tworzyć gradientowe tła, dodając do nich płynne przejścia i interaktywne zachowania.
Popper.js
Popper.js upraszcza dodawanie wyskakujących okienek (pop-upów) do elementów interfejsu aplikacji. Przykładowo, po najechaniu myszką na określoną frazę, pojawić się może jej definicja.
Parsley
Biblioteka Parsley zapewnia obsługę dynamicznej walidacji przeróżnych rodzajów formularzy.
Premonish
Przewidywanie przyszłości w JavaScript? Nic trudnego! Premonish na podstawie ruchów myszy przewiduje, jaki element może zostać kliknięty przez użytkownika jako następny. Może zostać wykorzystany przykładowo do wywoływania ciekawych animacji.
Slick
Slick oferuje szerokie możliwości tworzenia animowanych “karuzeli”, np. ze zdjęciami. Zapewnia responsywność, możliwość przewijania gestem, synchronizację odrębnych karuzeli i wiele innych.
Velocity.js
Velocity.js to niezwykle wydajny silnik animacji lub całych ich sekwencji bez konieczności tworzenia znacznych ilości kodu CSS lub jQuery. Z tej biblioteki w swoich aplikacjach korzystają m.in. Uber i WhatsApp.
Socket.io
Socket.io obsługuje dwustronną komunikację między serwerem a oknem przeglądarki użytkownika. Może wykrywać utratę połączenia, a także tworzyć połączenia automatyczne. Składa się z dwóch komponentów – serwera w node.js oraz biblioteki klienta.
Modernizr
Modernizr wykrywa, jakie funkcje HTML, CSS i JavaScript są obsługiwane przez daną wersję przeglądarki, z której korzysta użytkownik. Następnie te dane można wykorzystać m.in. do zapewnienia poprawnego działania naszej aplikacji także w starszych przeglądarkach, np. wyłączając dynamicznie niektóre funkcje lub nawet udostępniając inną jej wersję.
jQuery
Choć jQuery jest dziś biblioteką nieco przestarzałą, odbiegającą od obecnych standardów technologii webowych, szczególnie z uwagi na rozwój rozbudowanych frameworków, wciąż jednak znacząco ułatwia programowanie z użyciem JavaScriptu. Jest bezproblemowo obsługiwana we właściwie każdej współczesnej przeglądarce, oferuje manipulację drzewem DOM i arkuszami stylów CSS, obsługę eventów, animacji, AJAX-u.
Thanos.js
Na koniec Thanos.js – niezwykła biblioteka, która błyskawicznie optymalizuje rozmiar naszej aplikacji zmniejszając go nawet o 50%, co przekłada się oczywiście na wydajność i zadowolenie użytkowników. Użyłeś kilkudziesięciu bibliotek i kilku frameworków jednocześnie? Stworzyłeś kod spaghetti? Odpowiedzią jest Thanos, który… losowo usuwa połowę plików projektu. Biblioteka jest oczywiście żartem i nie polecam testować jej na produkcji 😉