10 مكتبات JavaScript رائعة يجب أن تجربها في 2020

تعد JavaScript واحدة من أكثر اللغات شيوعًا على الويب. على الرغم من أنه تم تطويره في البداية لصفحات الويب فقط ، فقد شهد نموًا هائلاً في العقدين الماضيين.

الآن ، JavaScript قادر على فعل أي شيء تقريبًا ويعمل على العديد من الأنظمة الأساسية والأجهزة بما في ذلك IoT. ومع إطلاق SpaceX Dragon الأخير ، أصبح JavaScript موجودًا في الفضاء.

أحد أسباب شعبيته هو توافر عدد كبير من الأطر والمكتبات. إنها تجعل التطوير أسهل بكثير مقارنة بتطوير Vanilla JS التقليدي.

توجد مكتبات لكل شيء تقريبًا ويصدر المزيد كل يوم تقريبًا. ولكن مع وجود العديد من المكتبات للاختيار من بينها ، يصبح من الصعب تتبع كل واحدة وكيف يمكن تصميمها خصيصًا لتلبية احتياجاتك.

في هذه المقالة ، سنناقش 10 من أكثر مكتبات JS شيوعًا والتي يمكنك استخدامها لبناء مشروعك التالي.

منشور

أعتقد أن Leaflet هي أفضل مكتبة مفتوحة المصدر لإضافة خرائط تفاعلية متوافقة مع الجوال إلى تطبيقك.

حجمه الصغير (39 كيلوبايت) يجعله بديلاً رائعًا عن مكتبات الخرائط الأخرى. بفضل الكفاءة عبر الأنظمة الأساسية وواجهة برمجة التطبيقات (API) الموثقة جيدًا ، فإنه يحتوي على كل ما تحتاجه لتجعلك تقع في الحب.

إليك بعض نماذج التعليمات البرمجية التي تنشئ خريطة Leaflet:

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

في Leaflet ، نحتاج إلى توفير طبقة تجانب نظرًا لعدم وجود طبقة بشكل افتراضي. ولكن هذا يعني أيضًا أنه يمكن الاختيار من بين مجموعة واسعة من الطبقات المجانية والمميزة. يمكنك استكشاف العديد من طبقات البلاط المجانية هنا.

اقرأ المستندات أو اتبع البرامج التعليمية لمعرفة المزيد.

fullPage.js

تساعدك هذه المكتبة مفتوحة المصدر على إنشاء مواقع تمرير بملء الشاشة كما ترى في GIF أعلاه. إنه سهل الاستخدام ولديه العديد من الخيارات للتخصيص ، لذلك فليس من المستغرب أن يستخدمه آلاف المطورين ولديه أكثر من 30 ألف نجمة على GitHub.

إليك عرض Codepen يمكنك اللعب به:

يمكنك حتى استخدامه مع أطر عمل شائعة مثل:

  • رد فعل ملء الصفحة
  • vue-fullpage
  • الزاوية الكاملة للصفحة

صادفت هذه المكتبة منذ حوالي عام ومنذ ذلك الحين أصبحت واحدة من المفضلة لدي. هذه واحدة من المكتبات القليلة التي يمكنك استخدامها في كل مشروع تقريبًا. إذا لم تكن قد بدأت في استخدامه بالفعل ، فجربه فقط ، فلن تشعر بخيبة أمل.

Anime.js

تعد Anime.js واحدة من أفضل مكتبات الرسوم المتحركة الموجودة هناك ، فهي مرنة وسهلة الاستخدام. إنها الأداة المثالية لمساعدتك في إضافة بعض الرسوم المتحركة الرائعة إلى مشروعك.

يعمل Anime.js جيدًا مع خصائص CSS و SVG وخصائص DOM وكائنات JavaScript ويمكن دمجها بسهولة في تطبيقاتك.

كمطور من المهم أن يكون لديك محفظة جيدة. يساعد الانطباع الأول لدى الأشخاص عن محفظتك في تحديد ما إذا كانوا سيوظفونك أم لا. وما هي أفضل أداة من هذه المكتبة لإضفاء الحيوية على محفظتك. لن يؤدي ذلك إلى تحسين موقع الويب الخاص بك فحسب ، بل سيساعد في عرض المهارات الفعلية.

تحقق من هذا Codepen لمعرفة المزيد:

يمكنك أيضًا إلقاء نظرة على جميع المشاريع الرائعة الأخرى على Codepen أو قراءة المستندات هنا.

Screenfull.js

صادفت هذه المكتبة أثناء البحث عن طريقة لتنفيذ ميزة ملء الشاشة في مشروعي.

إذا كنت ترغب أيضًا في الحصول على ميزة ملء الشاشة ، فإنني أوصي باستخدام هذه المكتبة بدلاً من واجهة برمجة تطبيقات ملء الشاشة نظرًا لكفاءتها عبر المستعرضات (على الرغم من أنها مبنية على رأس ذلك).

إنه صغير جدًا لدرجة أنك لن تلاحظه - فقط حوالي 0.7 كيلو بايت مضغوط.

جرب العرض التوضيحي أو اقرأ المستندات لمعرفة المزيد.

لحظة. js

يمكن أن يكون العمل مع التاريخ والوقت معاناة كبيرة ، خاصة مع مكالمات واجهة برمجة التطبيقات ومناطق زمنية مختلفة ولغات محلية وما إلى ذلك. يمكن أن يساعدك 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

اقرأ المستندات هنا.

تحديث سبتمبر 2020: دخل Moment.js في وضع الصيانة. قراءة المزيد عنها هنا. قد ترغب في استكشاف بدائل مثل Day.js أو date-fns.

Hammer.js

Hammer.js عبارة عن مكتبة JavaScript خفيفة الوزن تتيح لك إضافة إيماءات متعددة اللمس لتطبيقات الويب الخاصة بك.

أود أن أوصي بهذه المكتبة لإضافة بعض المرح إلى مكوناتك. هنا مثال للعب به. ما عليك سوى تشغيل القلم والنقر أو النقر فوق div الرمادي.

يمكنه التعرف على الإيماءات التي تتم عن طريق اللمس والماوس ومؤشر الأحداث. بالنسبة لمستخدمي jQuery ، أوصي باستخدام المكون الإضافي jQuery.

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

اقرأ المستندات هنا.

الماسونية

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.

هذه هي 10 مكتبات JavaScript يمكنك تجربتها والبدء في استخدامها في مشاريعك اليوم. ما هي مكتبات JavaScript الرائعة الأخرى التي تستخدمها؟ هل ترغب في مقال آخر مثل هذا؟ غرد وأخبرني.