۱۰ کتابخانه فوق‌العاده جاوااسکریپت که باید در سال ۲۰۲۰ امتحان کنید

جاوااسکریپت یکی از محبوب‌ترین زبان‌های وب است. اگرچه در ابتدا فقط برای صفحات وب توسعه داده شد، اما در دو دهه اخیر شاهد رشد تصاعدی این زبان بوده‌ایم.

اکنون جاوااسکریپت قادر به انجام تقریبا هر کاری است و در چندین پلتفرم و دستگاه از جمله IoT کار می‌کند. و با پرتاب فضاپیمای SpaceX Drogon، جاوااسکریپت حتی در فضا هم است. یکی از دلایل محبوبیت آن، وجود تعداد زیادی فریمورک و کتابخانه است. آن‌ها توسعه را در مقایسه با توسعه قدیمی و سنتی Vanilla JS آسان‌تر می‌کنند.

کتابخانه‌های آن تقریبا برای همه چیز است و تقریبا هر روز تعداد بیشتری از آن‌ها به بازار عرضه می‌شود. با وجود این که کتابخانه‌های زیادی برای انتخاب وجود دارد، اما حفظ و نگهداری آن‌ها در یک جا و تنظیم آن‌ها مطابق با نیاز‌های شما دشوار می‌شود.

در این مقاله، درباره ۱۰ مورد از محبوب‌ترین کتابخانه‌های JS که می‌توانید برای ساخت پروژه بعدی خود از آن‌ها استفاده کنید، بحث خواهیم کرد.

۱. Leaflet

من فکر می‌کنم که Leaflet بهترین کتابخانه منبع‌باز برای اضافه کردن نقشه‌های تعاملی دوستانه تلفن همراه به برنامه شماست. حجم کم آن (۳۹ کیلوبایت) آن را به عنوان یک جایگزین بسیار مهم در مورد سایر کتابخانه‌های map قرار می‌دهد.

با بهره‌وری از قابلیت کراس پلتفرم و API کاملا مستند، شما را وادار می‌کند تا عاشق این کتابخانه شوید.

در ادامه یک نمونه کد برای ایجاد Leaflet map قرار داده‌ایم:

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

ما باید در Leaflet یک tile layer ارائه دهیم، زیرا چنین چیزی به طور پیش‌فرض وجود ندارد. اما این بدان معناست که شما می‌توانید طیف گسترده‌ای از layerهای رایگان و پریمیم (نسخه پولی) را انتخاب کنید. شما می‌توانید tile layerهای رایگان را در اینجا مشاهده کنید.

۲. fullPage.js

این کتابخانه منبع‌باز به شما کمک می‌کند تا وبسایت‌هایی ایجاد کنید که قابلیت اسکرول کردن تمام صفحه‌ای را دارند، همانطور که در GIF فوق مشاهده می‌کنید. استفاده از آن بسیار آسان است و گزینه‌های زیادی برای سفارشی‌سازی دارد، بنابراین جای تعجب ندارد که توسط هزاران نفر از توسعه دهندگان استفاده می‌شود و بیش از ۳۰ هزار ستاره در GitHub دارد.

در ادامه نسخه نمایشی Codepen را مشاهده خواهید کرد:

https://codepen.io/lelouchb/embed/WNrLvLG?default-tab=&theme-id=

حتی می‌توانید از آن در فریمورک‌های محبوبی که در ادامه ذکر می‌کنم استفاده کنید:

- react-fullPage

- vue-fullPage

- angular-fullPage

حدود یک سال پیش این کتابخانه را پیدا کردم و از آن زمان به یکی از علاقه‌مندی‌های من تبدیل شده است. این یکی از معدود کتابخانه‌هایی است که تقریبا می‌توانید در هر پروژه از آن استفاده کنید. اگر تابحال از آن استفاده نکرده‌اید، حتما امتحانش کنید، مطمئن باشید که ناامید نخواهید شد.

۳. anime.js

یکی از بهترین کتابخانه‌های انیمیشن موجود anime.js است. این یک ابزار کامل است که به شما برای افزودن یک انیمیشن جالب به پروژه‌تان کمک می‌کند.

Anime.js با ویژگی‌های CSS، SVG، DOM و آبجکت‌های جاوااسکریپت به خوبی کار می‌کند و می‌تواند به راحتی در برنامه‌های شما ادغام شود.

داشتن یک نمونه کار خوب به عنوان یک توسعه دهنده مهم است. اولین تصور مردم از نمونه کار شما این است که آیا به تصمیم‌گیری در مورد استخدام شما کمک می‌کند یا خیر. و چه ابزاری بهتر از این کتابخانه برای پیشرفت نمونه کاری شما وجود دارد؟! این کار نه تنها وبسایت شما را تقویت می‌کند، بلکه به نمایش مهارت‌های واقعی کمک خواهد کرد.

در ادامه نسخه نمایشی Codepen را برای یادگیری بیشتر مشاهده خواهید کرد:

https://codepen.io/lelouchb/embed/XWXoboE?default-tab=&theme-id=

۴. Screenfull.js

من در حالی که به دنبال راهی برای پیاده‌سازی یک ویژگی تمام صفحه در پروژه خود بودم، با این کتابخانه مواجه شدم. اگر شما همچنین می‌خواهید از ویژگی تمام صفحه استفاده کنید، توصیه می‌کنم به دلیل بهره‌وری از Cross browser، از این کتابخانه به جای Fullscreen API استفاده کنید.

حجمش آنقدر کم است که حتی متوجه آن نمی‌شوید، تقریبا ۰.۷ کیلوبایت

۵. Moment.js

کار با تاریخ و زمان می‌تواند درد بزرگی باشد، خصوصا با API call، مناطق مختلف زمانی، زبان‌های محلی و غیره. Moment.js می‌تواند به شما کمک کند تا همه موارد را حل کنید، از دستکاری کردن گرفته تا اعتبار سنجی، تجزیه و یا قالب بندی تاریخ یا زمان.

روش‌های بسیار جالبی وجود دارد که برای پروژه‌های شما واقعا مفید هستند. به عنوان مثال، من برای نشان دادن زمان انتشار مقاله از روش .fromNow() در یکی از پروژه‌های وبلاگ خود استفاده کردم.

const moment = require('moment'); 

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

اگرچه زمان زیادی گذشته که دیگر از این روش استفاده نمی‌کنم، اما دوست دارم این روش جهانی شود. برای مثال، می‌توانیم نتیجه بالا را با روش .locale() سفارشی کنیم.

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

۶. Hammer.js

Hammer.js یک کتابخانه جاوااسکریپت کم حجم است که به شما این امکان را می‌دهد که حرکات چندلمسی را به برنامه‌های وب خود اضافه کنید.

من این کتابخانه را توصیه می‌کنم تا کمی سرگرمی به کامپوننت‌های شما اضافه کند. در ادامه مثالی برای شما ارائه کرده‌ایم، بر روی Run Pen کلیک کنید تا نحوه اجرای آن را تجربه کنید:

https://codepen.io/lelouchb/embed/abdPOPj?default-tab=&theme-id=

این کتابخانه می‌تواند حرکات ایجاد شده توسط لمس کردن، ماوس و نشانه‌گر را تشخیص دهد. به کاربران jQuery توصیه می‌کنم که از این پلاگین استفاده کنند.

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

۷. Masonry

Masonry یک کتابخانه جاوااسکریپت است که طرح‌بندی را به صورت شبکه‌ای (grid) انجام می‌دهد. بسیار فوق‌العاده است و من برای بسیاری از پروژه‌های خود از آن استفاده می‌کنم.

این کتابخانه می‌تواند عناصر ساده شما را بگیرد و آن‌ها را بر اساس فضای عمودی موجود قرار دهد، انجام این کار به مانند پیمان‌کارانی است که سنگ یا بلوک را در دیوار قرار می‌دهند. شما می‌توانید از این کتابخانه برای نمایش پروژه‌های خود به یک سبک دیگر استفاده کنید. با کارت‌ها، تصاویر، شیوه‌ها و غیره از آن استفاده کنید.

در ادامه یک مثال ساده جادویی وجود دارد. خب، دقیقا جادویی نیست، اما چگونه وقتی روی صفحه وب زوم می‌کنید، چیدمان تغییر می‌کند.

در اینجا کد مربوط به موارد فوق ذکر شده است:

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

var msnry = new Masonry( '.grid');

در ادامه نسخه نمایشی Codepen را مشاهده خواهید کرد:

https://codepen.io/lelouchb/embed/qBbLdLQ?default-tab=&theme-id=

شما می‌توانید این پروژه‌ها را بررسی کنید:

- https://halcyon-theme.tumblr.com/

- https://tympanus.net/Development/GridLoadingEffects/index.html

- https://www.erikjo.com/work

۸. js.۳D

اگر یک توسعه دهنده داده هستید، این کتابخانه برای شما مناسب است. هنوز کتابخانه‌ای بهتر از ۳D پیدا نکرده‌ام که داده‌ها را به طور موثر و زیبا دستکاری کند. ۳D با بیش از ۹۲ هزار ستاره در GitHub، یک کتابخانه تجسمی داده است که مورد علاقه بسیاری از توسعه‌دهندگان قرار گرفته است.

۹. Slick

Slick کاملا واکنش‌گرا بوده و علاوه بر قابلیت swipe و گردش بی‌نهایت قابلیت‌های بیشتری را نیز دارا می‌باشد. همانطور که در صفحه اصلی اشاره شد، این کتابخانه واقعا ﺁخرین کاروسلی است که شما به آن نیاز خواهید داشت.

مدتی است که از این کتابخانه استفاده می‌کنم و این باعث شد تا زمان زیادی برایم صرفه جویی شود. فقط با چند خط کد، می‌توانید ویژگی‌های بسیاری را به کاروسل خود اضافه کنید.

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

نسخه نمایشی این کتابخانه را در اینجا بررسی کنید.

۱۰. Popper.js

Popper.js یک کتابخانه جاوااسکریپت کم حجم (۳ کیلوبایت) است که هیچ وابستگی ندارد و یک موتور موقعیت‌یابی قابل اعتماد و قابل توسعه را برای شما فراهم می‌کند تا اطمینان حاصل شود که تمام عناصر popper در جای مناسب قرار گرفته‌اند.

شاید مهم نباشدکه وقت خود را برای پیکربندی عناصر popper صرف کنید، اما این موارد کوچک همان چیزهایی هستند که باعث می‌شود شما به عنوان یک توسعه دهنده متمایز بمانید. و با این حجم کم، فضای زیادی را به خود اختصاص نمی‌دهد.

نتیجه‌گیری

به عنوان یک توسعه دهنده، داشتن و استفاده از کتابخانه‌های مناسب جاوااسکریپت از اهمیت بالایی برخوردار است. این کار باعث می‌شود که شما تولید بیشتری داشته باشید و توسعه را برایتان بسیار ﺁسان‌تر و سریع‌تر می‌کند. در آخر باید بگویم که همه چیز به شما بستگی دارد که کدام کتابخانه را انتخاب می‌کنید.

منبع