ההבדל בין ספריות JavaScript ו-frameworks

Umar Hansa

במאמר הזה נסביר על ההבדלים בין מסגרות לספריות בהקשר של סביבה של JavaScript בצד הלקוח, שהיא הקוד שפועל בדפדפן האינטרנט. עם זאת, חלק מהנקודות שמפורטות במאמר הזה רלוונטיות גם לסביבות אחרות, כי ספריות ו-frameworks הם חלק מתחומים רבים של הנדסת תוכנה, כמו פיתוח אפליקציות מקוריות לנייד.

הדיונים בפוסט הזה מתמקדים בהבדלים האיכותיים בין ספריות לבין מסגרות, ולא בהבדלים הכמותיים. לדוגמה:

• כמותית: בדרך כלל, המסגרות פועלות לפי העיקרון של הפיכת השליטה.
• איכותית: הניסיון עם המסגרת יכול למשוך מעסיקים פוטנציאליים יותר כשמחפשים עבודה.

למה כדאי ללמוד על ספריות ועל מסגרות?

השימוש בספריית JavaScript וב-framework נפוץ ברחבי האינטרנט. נראה שכל אתר אחר משתמש בקוד של צד שלישי כחלק ממשאבי ה-JavaScript שלו. המשקל של דפי האינטרנט הולך ונעשה גדול יותר עם הזמן, ומשפיע על המשתמשים. JavaScript תורם באופן משמעותי למשקל הכולל של הדף. זהו אותו JavaScript, שלרוב מורכב מספריות וממסגרות של צד שלישי.

לא מספיק להגיד "כדאי להפסיק להשתמש במסגרות JavaScript", כי למסגרות יש יתרונות רבים למפתחים. ה-frames יכול לעזור לכם לתכנת ביעילות ולספק תכונות במהירות, בין היתר. במקום זאת, כדאי לקבל מידע כדי שתוכלו לקבל החלטה מושכלת כשהזמן יגיע.

השאלה "האם כדאי להשתמש בספרייה או ב-framework היום?" היא לא שאלה נפוצה. ספריות ופלטפורמות הן שתי דברים שונים מאוד. עם זאת, לעיתים קרובות ספריות ומסגרות מתמזגות וככל שיש לך יותר ידע על שתיהן, כך עולה הסבירות שתקבל החלטות מושכלות בנוגע לשימוש בהן.

דוגמאות לספריות ולמסגרות (frameworks)

יכול להיות שתבחינו בקוד של צד שלישי בשמות אחרים, כמו ווידג'טים, פלאגינים, polyfills או חבילות. עם זאת, בדרך כלל כולן נכללות בקטגוריה של ספרייה או מסגרת. בעיקרון, אפשר לסכם את ההבדל בין השניים באופן הבא:

• בספרייה, קוד האפליקציה קורא לקוד הספרייה.
• כשמשתמשים ב-framework, ה-framework קורא לקוד של האפליקציה.

ספרייה

ספריות הן בדרך כלל פשוטות יותר מסגרות, ומציעות היקף מצומצם של פונקציונליות. אם אתם מעבירים קלט ל-method ומקבלים פלט, סביר להניח שהשתמשתם בספרייה.

לפניכם דוגמה של הספרייה lodash:

import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello

כמו בספריות רבות, מומלץ לקרוא את הקוד הזה ולהבין מה הוא עושה. התהליך פשוט מאוד:

1. הצהרת import מייבאת את ספריית lodash לתוכנית JavaScript.
2. השיטה capitalize() מופעלת.
3. מועבר ארגומנט אחד ל-method.
4. הערך המוחזר מתועד במשתנה.

Framework

ספריות בדרך כלל קטנות יותר מסגרות, והן תורמות יותר למשקל הכולל של הדף. למעשה, מסגרת יכולה לכלול ספרייה.

בדוגמה הזו מוצגת מסגרת פשוטה ללא ספרייה, שמשתמשת ב-Vue, מסגרת JavaScript פופולרית:

<!-- index.html -->
<div id="main">
  {{ message }}
</div>

<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';

new Vue({
  el: '#main',
  data: {
    message: 'Hello, world'
  }
});
</script>

אם תשוו את הדוגמה הזו של המסגרת לדוגמה הקודמת, ייתכן שתבחינו בהבדלים הבאים:

• קוד המסגרת כולל כמה שיטות, והוא מספק להם תיאור תיאורטי ב-API משלו.
• למפתחים אין שליטה מלאה על האופן והמועד שבהם מתבצעות הפעולות. לדוגמה, אתם לא צריכים לדאוג לאופן ולמועד שבו Vue כותב את המחרוזת 'Hello, world' לדף.
• יצירת המופע של המחלקה Vue כוללת תופעות לוואי נפוצות, כאשר משתמשים ב-frameworks, ואילו בספרייה יש פונקציות טהור.
• במסגרת מוגדרת מערכת תבניות HTML מסוימת, במקום להשתמש במערכת משלכם.
• אם תקראו טוב יותר את המסמכים של Vue framework או את רוב התיעודים האחרים של frameworks, תוכלו לראות איך frameworks מתעדות דפוסים ארכיטקטוניים שבהם תוכלו להשתמש. מסגרות JavaScript מפחיתות את העומס הקוגניטיבי, כי אתם לא צריכים להבין את הנושא בעצמכם.

מתי להשתמש בספרייה לעומת framework

אחרי שתסיימו לקרוא את ההשוואות בין ספריות לבין מסגרות, אולי תתחילו להבין מתי כדאי להשתמש בספרייה ומתי במסגרת:

• מסגרת יכולה להפחית את המורכבות עבורכם, המפתחים. כפי שציינו, מסגרת יכולה להסתיר לוגיקה, התנהגות ואפילו דפוסי ארכיטקטורה. זה שימושי במיוחד בתחילת פרויקט חדש. ספרייה יכולה לעזור להתמודד עם המורכבות, אבל בדרך כלל היא מתמקדת בשימוש חוזר בקוד.
• מחברי המסגרות רוצים לעזור לכם להיות פרודוקטיביים, ולכן הם מפתחים לעיתים קרובות כלים נוספים, תוכנות לניפוי באגים ומדריכים מקיפים, בין היתר, כדי לעזור לכם להשתמש במסגרת בצורה יעילה. גם מחברי הספריות רוצים לעזור לכם להיות פרודוקטיביים, אבל כלים מיוחדים הם נדירים בספריות.
• רוב המסגרות מספקות נקודת התחלה פונקציונלית, כמו שלד או תבנית בסיסית, שיעזרו לכם לפתח אפליקציות אינטרנט במהירות. הספרייה הופכת לחלק מבסיס הקוד הקיים שלכם.
• באופן כללי, שימוש במסגרות מוסיף מורכבות לקוד. המורכבות לא תמיד ברורה בהתחלה, אבל היא עשויה להתגלות עם הזמן.

כתזכורת, בדרך כלל לא משווים בין ספרייה לבין מסגרת כי הן דברים שונים שמשמשים למטרות שונות. עם זאת, ככל שתצברו יותר ידע על שתי האפשרויות, כך תוכלו לקבל החלטה מושכלת יותר לגבי האפשרות שמתאימה לכם. ההחלטה להשתמש במסגרת או בספרייה תלויה בסופו של דבר בדרישות שלכם.

החלפה

לא תשנו את הספרייה או המסגרת בכל שבוע. עם זאת, מומלץ להבין את החסרונות של חבילה שנועלת אותך בסביבה העסקית שלה. מומלץ גם להבין שהמפתח שמחליט להשתמש בחבילה של צד שלישי אחראי במידה מסוימת ליצירת קישור רופף בין החבילה לבין קוד המקור של האפליקציה.

קשה יותר להסיר חבילה שמקושרת לקוד המקור ולהחליף אותה בחבילה אחרת. יכול להיות שתצטרכו להחליף חבילה במקרים הבאים:

• עליך לעדכן חבילה שכבר לא מתוחזקת.
• גיליתם שהחבילה מכילה יותר מדי באגים כדי שתוכלו לעבוד איתה.
• גיליתם על חבילת שירות חדשה שמתאימה יותר לצרכים שלכם.
• דרישות המוצר השתנו ואתם כבר לא צריכים את החבילה.

עיין בדוגמה זו:

// header.js file
import color from '@package/set-color';
color('header', 'dark');

// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');

// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');

בדוגמה הקודמת, חבילת הצד השלישי @package/set-color מופיעה בשלושה קבצים נפרדים. אם אתם עובדים עם הקוד הזה ואתם צריכים להחליף את חבילת הצד השלישי, עליכם לעדכן את הקוד בשלושה מקומות.

לחלופין, תוכלו לפשט את התחזוקה ולהפשט את השימוש בספרייה במקום אחד, כפי שאפשר לראות בדוגמה הבאה:

// lib/set-color.js file
import color from '@package/set-color';

export default function color(element, theme = 'dark') {
  color(element, theme);
}

// header.js file
import color from './lib/set-color.js';
color('header');

// article.js file
import color from './lib/set-color.js';
color('.article-post');

// footer.js file
import color from './lib/set-color.js';
color('.footer-container');

בדוגמה הקודמת, השימוש הישיר בספרייה מופשט. לכן, אם צריך להחליף את חבילת הצד השלישי, צריך לעדכן רק קובץ אחד. בנוסף, עכשיו קל יותר לעבוד עם הקוד כי קובץ set-color.js הפנימי מגדיר ערכת צבעים שמוגדרת כברירת מחדל.

קלות השימוש

ל-framework עשוי להיות API מורכב, אבל היא יכולה להציע כלים למפתחים שבעזרתם קל יותר להשתמש בה באופן כללי. קלילות השימוש מבוססת על גורמים רבים ויכולה להיות סובייקטיבית מאוד. לפעמים קשה להשתמש ב-framework כי:

• למסגרת יש ממשק API מורכב מטבעו.
• התיעוד של המסגרת לא מקיף, ופתרון בעיות מחייב הרבה ניסוי וטעייה.
• המסגרת כוללת שיטות שלא מוכרות לכם ולצוות שלכם.

מסגרות יכולות לצמצם את האתגרים האלה באמצעות שיטות מומלצות נפוצות, כמו:

• המסגרת כוללת כלים למפתחים ולאבחון, שמקלים על ניפוי הבאגים.
• במסגרת יש קהילה פעילה של מפתחים שמשתפים פעולה ביצירת מסמכים, מדריכים, מדריכים וסרטונים בחינם. לאחר צריכת התוכן הזה, ה-framework עוזר לכם.
• המסגרת כוללת ממשק API שתואם למוסכמות תכנות נפוצות. אתם עובדים ביעילות עם המסגרת כי למדתם כללי התנהגות כאלה בעבר, ויש לכם היכרות רבה יותר עם סגנונות תכנות.

בדרך כלל, הנקודות האלה משויכות למסגרות, אבל אפשר לשייך אותן גם לספריות. לדוגמה, ספריית JavaScript‏ D3.js חזקה ויש לה סביבה עסקית גדולה שמציעה סדנאות, מדריכים ותיעוד, בין היתר, שכוללים משאבים שמשפיעים על קלות השימוש בה.

בנוסף, בדרך כלל מסגרת קובעת ארכיטקטורה לאפליקציית האינטרנט, בעוד שספרייה בדרך כלל תואמת לארכיטקטורה הקיימת, לא משנה מה היא.

ביצועים

באופן כללי, מסגרות יכולות להשפיע על הביצועים יותר מאשר ספריות, אבל יש יוצאים מן הכלל. ביצועי האתר הם תחום עצום עם הרבה נושאים, ולכן בקטעים האלה נתייחס לשני נושאים חשובים: ניעור עצים ועדכוני תוכנה.

Tree shaking

קיבוץ הוא רק היבט אחד של ביצועי האתר, אבל יש לו השפעה רבה על הביצועים, במיוחד בספריות גדולות יותר. השימוש ב-tree shaking במהלך הייבוא והייצוא עוזר לשפר את הביצועים, כי הוא מוצא קוד שאינו נחוץ לאפליקציה ומסיר אותו.

כשמקבצים קוד JavaScript, יש שלב שימושי שנקרא 'ניפוי עצים', שהוא אופטימיזציה חשובה של הביצועים שאפשר לבצע בקוד. עם זאת, קל יותר לבצע את הפעולה הזו בספריות מאשר במסגרות.

כשמייבאים קוד של צד שלישי לקוד המקור, בדרך כלל מקובצים את הקוד בקובץ פלט אחד או בכמה קבצים. לדוגמה, כל הקבצים header.js, footer.js ו-sidebar.js משולבים בקובץ output.js, שהוא קובץ הפלט שנטען באפליקציית האינטרנט.

כדי להבין טוב יותר את הרעידה של העץ, כדאי להיעזר בדוגמאות הקוד הבאות:

// library.js file
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js file
import {add} from './library.js';

console.log(add(7, 10));

למטרות הדגמה, דוגמת הקוד של library.js קטנה באופן מכוון בהשוואה למה שעשוי להופיע בעולם האמיתי, שבו הספרייה יכולה להכיל אלפי שורות.

תהליך חבילה פשוט עשוי לייצא את הקוד עם הפלט הזה:

// output.js file
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(add(7, 10));

למרות שאין צורך בפונקציה subtract() באפליקציה הזו, היא עדיין נכללת בחבילה הסופית. קוד מיותר כמו זה מגדיל את גודל ההורדה, את זמן הניתוח והקומפילציה, ואת עלויות הביצוע שהמשתמשים שלכם צריכים לשלם. גישה בסיסית של ניעור עצים מסירה את הקוד הלא פעיל ומפיקה את הפלט הזה:

// output.js file
function add(a, b) {
  return a + b;
}

console.log(add(7, 10));

שימו לב שהקוד קצר ותמציתי יותר. בדוגמה הזו, השיפור בביצועים הוא זניח, אבל באפליקציה בעולם האמיתי שבה הספרייה באורך של אלפי שורות, אפקט הביצועים יכול להיות משמעותי הרבה יותר. מעניין לציין שכלי ה-bundle המודרניים, כמו Parcel,‏ Webpack ו-Rollup, עוברים צעד נוסף כי הם משלבים בין דחיסה לבין הסרת קוד לא נדרש (tree shaking) כדי ליצור חבילת bundle שעברה אופטימיזציה ברמה גבוהה. כדי להדגים את היעילות של כלי החבילות, השתמשנו ב-Parcel כדי ליצור קובץ חבילה עם דוגמאות הקוד הקודמות. החבילה הוסרה כל הקוד שלא נמצא בשימוש וייצאה את המודול היחיד הזה:

console.log(7+10);

Parcel מספיק חכם כדי להסיר הצהרות על ייבוא, הגדרות פונקציות והתנהגות, בין היתר, כדי ליצור קוד מותאם במיוחד.

קיבוץ הוא רק היבט אחד של ביצועי האתר, אבל יש לו השפעה רבה על הביצועים, במיוחד בספריות גדולות יותר. בדרך כלל קל יותר לבצע ריקון עץ עם ספריות מאשר עם מסגרות.

עדכוני תוכנה

בספריות ובמסגרות רבות, עדכוני תוכנה מוסיפים פונקציונליות, מתקנים באגים ובסופו של דבר הגודל שלהם גדל עם הזמן. לא תמיד צריך להוריד עדכונים, אבל אם העדכונים כוללים תיקוני באגים, שיפורים של תכונות רצויות או תיקוני אבטחה, מומלץ לעדכן. עם זאת, ככל ששולחים יותר נתונים דרך החיבור, הביצועים של האפליקציה נפגעים וההשפעה של הביצועים על חוויית המשתמש גדלה.

אם הספרייה גדלה, תוכלו להשתמש ברעידות עצים כדי לצמצם את הצמיחה. לחלופין, אפשר להשתמש בחלופה קטנה יותר לספריית JavaScript. מידע נוסף זמין במאמר החלפה.

ככל שהמסגרת גדלה, לא רק שהרעידת העץ הופכת לאתגר גדול יותר, אלא גם קשה יותר להחליף מסגרת אחת במסגרת אחרת. מידע נוסף זמין במאמר החלפה.

כשירות תעסוקתית

זהו סוד פתוח של חברות רבות עם דרישות קשות ממפתחים שמכירים מסגרת מסוימת. יכול להיות שהם יתעלמו מהידע שלכם ביסודות האינטרנט ויתמקד רק בידע הספציפי שלכם ב-JavaScript framework מסוים. נכון או לא נכון, זו המציאות בתחומים רבים.

הידע שלכם בכמה ספריות JavaScript לא יזיק לבקשה שלכם לקבלת עבודה, אבל אין הרבה ערובה שהוא יעזור לכם להתבלט. אם אתם מכירים היטב כמה מסגרות JavaScript פופולריות, סביר להניח שבעלי עסקים יראו את הידע הזה כמשהו חיובי בשוק העבודה הנוכחי למפתחי אתרים. ארגונים גדולים מסוימים תקועים עם מסגרות JavaScript ישנות מאוד, ויכול להיות שהם אפילו מחפשים נואשות מועמדים שמתמצאים במסגרות כאלה.

תוכלו להשתמש בסוד הפתוח הזה לתועלתכם. עם זאת, חשוב להתייחס לשוק העבודה בזהירות ולהביא בחשבון את השיקולים הבאים:

• חשוב לזכור שאם תעבירו חלק גדול מהקריירה שלכם עם מסגרת אחת בלבד, יכול להיות שתפספסו חוויות למידה עם מסגרות אחרות ומודרניות יותר.
• נניח שמפתח לא מבין לעומק את העקרונות הבסיסיים של פיתוח תוכנה או פיתוח אינטרנט, אבל הוא עובד כמפתח של מסגרת עבודה. המפתח הזה לא כותב קוד יעיל, ויכול להיות שתתקשו לעבוד על קוד בסיס כזה. במקרים מסוימים, התרחיש הזה עלול להוביל לתחושת שחיקה. לדוגמה, יכול להיות שתצטרכו לבצע רפאקציה של הקוד או לשפר את הביצועים שלו כי הוא איטי.
• כשאתם מתחילים ללמוד פיתוח אתרים, הדרך הטובה ביותר היא להתמקד ביסודות של פיתוח אתרים, פיתוח תוכנה והנדסת תוכנה. בסיס חזק כזה עוזר לכם ללמוד כל מסגרת JavaScript במהירות וביעילות.

סיכום

תודה על המאמץ שהשקעת בהבנת ההבדלים בין מסגרות לספריות של JavaScript. לא כדאי לבחור מסגרות או ספריות לעיתים קרובות, אלא אם אתם עובדים על פרויקטים של greenfield או כיועצים. עם זאת, כשמתעוררות החלטות כאלה, ככל שיש לכם יותר ידע בנושא, כך ההחלטה תהיה מושכלת יותר.

כפי שלמדתם, הבחירה שלכם בפלטפורמה – ובמקרים מסוימים, הבחירה בספרייה – יכולה להשפיע באופן משמעותי על חוויית הפיתוח ועל משתמשי הקצה, למשל בנושא ביצועים.