JavaScript היא אחת השפות הפופולריות ביותר באינטרנט. למרות שהוא פותח בתחילה רק לדפי אינטרנט, הוא צמח בצמיחה אקספוננציאלית בשני העשורים האחרונים.
כעת, JavaScript מסוגל לעשות כמעט כל דבר ועובד במספר פלטפורמות ומכשירים כולל IoT. ועם ההשקה האחרונה של SpaceX Dragon, JavaScript נמצא אפילו בחלל.
אחת הסיבות לפופולריות שלו היא הזמינות של מספר רב של מסגרות וספריות. הם הופכים את הפיתוח לקל בהרבה בהשוואה לפיתוח המסורתי של וניל JS.
יש ספריות כמעט לכל דבר ויותר יוצאות כמעט כל יום. אבל עם כל כך הרבה ספריות לבחירה, קשה להפוך לעקוב אחר כל אחת ואיך זה יכול להיות מותאם במיוחד לצרכים שלך.
במאמר זה נדון בעשר מספריות JS הפופולריות ביותר בהן תוכלו להשתמש לבניית הפרויקט הבא שלכם.
עָלוֹן
אני חושב שעלון היא ספריית הקוד הפתוח הטובה ביותר להוספת מפות אינטראקטיביות ידידותיות לנייד ליישום שלך.
גודלו הקטן (39kB) הופך אותו לחלופה מצוינת לשקול בספריות מפות אחרות. עם יעילות חוצה פלטפורמות ו- 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,000 כוכבים ב- GitHub.
הנה הדגמה של Codepen שתוכלו לשחק איתה:
אתה יכול אפילו להשתמש בו עם מסגרות פופולריות כגון:
- תגובה-עמוד מלא
- עמוד מלא
- עמוד זוויתי מלא
נתקלתי בספרייה הזו לפני כשנה ומאז היא הפכה לאחת האהובות עלי. זו אחת הספריות הבודדות בהן תוכלו להשתמש כמעט בכל פרויקט. אם עדיין לא התחלת להשתמש בו אז פשוט נסה את זה, אתה לא תתאכזב.
anime.js
אחת מספריות האנימציה הטובות ביותר שיש, Anime.js גמישה ופשוטה לשימוש. זה הכלי המושלם שיעזור לך להוסיף קצת אנימציה מגניבה לפרויקט שלך.
Anime.js עובד היטב עם מאפייני CSS, תכונות SVG, DOM ואובייקטים של JavaScript וניתן לשלב אותו בקלות ביישומים שלך.
כמפתח חשוב שיהיה לך תיק טוב. הרושם הראשוני שיש לאנשים מהתיק שלך עוזר להחליט אם הם יעסיקו אותך או לא. ואיזה כלי טוב יותר מספרייה זו בכדי להכניס חיים לתיק העבודות שלך. זה לא רק ישפר את האתר שלך אלא יעזור להציג מיומנויות בפועל.
עיין ב- Codepen זה למידע נוסף:
אתה יכול גם להסתכל על כל שאר הפרויקטים המגניבים ב- Codepen או לקרוא את Docs כאן.
Screenfull.js
נתקלתי בספריה זו כשחיפשתי דרך ליישם תכונה במסך מלא בפרויקט שלי.
אם תרצה גם להשתמש בתכונה במסך מלא, אני ממליץ להשתמש בספרייה הזו במקום ב- API למסך מלא בגלל היעילות שלה בין הדפדפנים (למרות שהיא בנויה נוסף על כך).
זה כל כך קטן שאתה אפילו לא שם לב לזה - בערך 0.7kB מכווץ.
נסה את ההדגמה או קרא את המסמכים למידע נוסף.
Moment.js
עבודה עם תאריך ושעה יכולה להיות כאב עצום, במיוחד עם שיחות API, אזורי זמן שונים, שפות מקומיות וכן הלאה. 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.
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.