10 úžasných knižníc jazyka JavaScript, ktoré by ste mali vyskúšať v roku 2020

JavaScript je jedným z najpopulárnejších jazykov na webe. Aj keď bol pôvodne vyvinutý iba pre webové stránky, za posledné dve desaťročia zaznamenal exponenciálny rast.

JavaScript je teraz schopný robiť takmer všetko a funguje na viacerých platformách a zariadeniach vrátane IoT. A s nedávnym uvedením modelu SpaceX Dragon na trh je JavaScript dokonca vo vesmíre.

Jedným z dôvodov jeho popularity je dostupnosť veľkého množstva rámcov a knižníc. Uľahčujú vývoj v porovnaní s tradičným vývojom vo Vanilla JS.

Existujú knižnice takmer pre všetko a ďalšie vychádzajú takmer každý deň. Ale s toľkým počtom knižníc, z ktorých si môžete vybrať, je ťažké udržať prehľad o každej z nich a o tom, ako by mohla byť prispôsobená konkrétne vašim potrebám.

V tomto článku sa budeme zaoberať 10 najobľúbenejšími knižnicami JS, ktoré môžete použiť na zostavenie svojho ďalšieho projektu.

Leták

Myslím si, že Leaflet je najlepšou knižnicou otvoreného zdroja na pridávanie interaktívnych máp vhodných pre mobilné aplikácie do vašej aplikácie.

Jeho malá veľkosť (39 kB) z neho robí skvelú alternatívu, ktorú je potrebné vziať do úvahy pred ostatnými knižnicami máp. Vďaka efektivite viacerých platforiem a dobre zdokumentovanému API má všetko, čo potrebujete, aby ste sa zamilovali.

Tu je niekoľko ukážkových kódov, ktoré vytvárajú mapu letákov:

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

V letáku musíme poskytnúť vrstvu dlaždíc, pretože v predvolenom nastavení nie je. To však tiež znamená, že si môžete vybrať zo širokej škály vrstiev, a to zadarmo aj prémiovo. Môžete tu preskúmať rôzne voľné dlaždice.

Prečítajte si dokumenty alebo postupujte podľa pokynov, kde sa dozviete viac.

fullPage.js

Táto knižnica otvoreného zdroja vám pomáha vytvárať posúvané webové stránky na celej obrazovke, ako vidíte na obrázku GIF vyššie. Ľahko sa používa a má veľa možností prispôsobenia, takže nie je prekvapením, že ho používajú tisíce vývojárov a na GitHube má viac ako 30 000 hviezd.

Tu je ukážka Codepen, s ktorou si môžete zahrať:

Môžete ho dokonca použiť s populárnymi rámcami, ako sú:

  • reagovať-celá stránka
  • vue-fullpage
  • uhlová -stránka

Na túto knižnicu som narazil asi pred rokom a odvtedy sa stala jednou z mojich najobľúbenejších. Toto je jedna z mála knižníc, ktoré môžete použiť takmer v každom projekte. Ak ste ho ešte nezačali používať, jednoducho to vyskúšajte, nebudete sklamaní.

anime.js

Jedna z najlepších knižníc animácií, Anime.js, je flexibilná a ľahko použiteľná. Je to dokonalý nástroj, ktorý vám pomôže do projektu pridať skutočne skvelú animáciu.

Anime.js funguje dobre s vlastnosťami CSS, SVG, atribútmi DOM a objektmi JavaScript a dá sa ľahko integrovať do vašich aplikácií.

Ako vývojár je dôležité mať kvalitné portfólio. Prvý dojem, ktorý majú ľudia z vášho portfólia, pomáha rozhodnúť sa, či vás prijmú alebo nie. A aký lepší nástroj ako táto knižnica môže oživiť vaše portfólio. Zlepší to nielen váš web, ale pomôže predviesť skutočné zručnosti.

Ak sa chcete dozvedieť viac, pozrite si tento kód.

Môžete sa tiež pozrieť na všetky ďalšie vynikajúce projekty na stránke Codepen alebo Prečítajte si dokumenty tu.

Screenfull.js

Na túto knižnicu som narazil pri hľadaní spôsobu implementácie funkcie celej obrazovky do môjho projektu.

Ak chcete mať tiež funkciu zobrazenia na celú obrazovku, odporučil by som túto knižnicu použiť namiesto API na celú obrazovku kvôli jej efektivite naprieč prehliadačmi (aj keď je nadstavená).

Je taký malý, že si ho ani nevšimnete - iba zhruba 0,7 kB zazipovaných.

Vyskúšajte ukážku alebo si prečítajte Dokumenty, kde sa dozviete viac.

Moment.js

Práca s dátumom a časom môže byť veľkým utrpením, najmä s hovormi API, rôznymi časovými pásmami, miestnymi jazykmi atď. Moment.js vám môže pomôcť vyriešiť všetky tieto problémy, či už ide o manipuláciu, overovanie, analýzu alebo formátovanie dátumov alebo času.

Existuje toľko skvelých metód, ktoré sú pre vaše projekty skutočne užitočné. Napríklad som použil .fromNow()metódu v jednom zo svojich blogových projektov, aby som ukázal čas zverejnenia článku.

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

Aj keď to nepoužívam veľmi často, som fanúšikom jeho podpory internacionalizácie. Vyššie uvedený výsledok môžeme napríklad prispôsobiť pomocou .locale()metódy.

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

Dokumenty si prečítajte tu.

Aktualizácia september 2020: Moment.js vstúpil do režimu údržby. Prečítajte si o tom viac tu. Možno budete chcieť preskúmať alternatívy, ako je Day.js alebo date-fns.

Hammer.js

Hammer.js je ľahká knižnica JavaScriptu, ktorá vám umožňuje pridávať do vašich webových aplikácií viacdotykové gestá.

Odporúčam tejto knižnici pridať trochu zábavy do vašich komponentov. Tu je príklad na hranie. Stačí spustiť pero a klepnúť alebo kliknúť na sivú div.

Dokáže rozpoznať gestá vykonané dotykom, myšou a pointerEvents. Pre používateľov jQuery by som odporúčal použiť plugin jQuery.

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

Dokumenty si prečítajte tu.

Murivo

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.

Toto je 10 knižníc jazyka JavaScript, ktoré môžete vyskúšať a začať používať už dnes vo svojich projektoch. Aké ďalšie skvelé knižnice JavaScriptu používate? Chceli by ste ďalší takýto článok? Tweetujte a dajte mi vedieť.