כשיש דילמה נוסח: “כיצד כותבים אפליקציות מסוג T ?” – פשוט הולכים לתיעוד של מייקרוסופט או סאן עורקל ולומדים מהי “הטכנולוגיה המומלצת” לצורך זה: ASP.NET? Entity Framework אולי JAAS או javaFaces? הכל (לכאורה) שם.
תמיד היה ניתן לחפש “מחוץ לקופסה” ולמצוא הרבה ספריות קוד-פתוח מעניינות – אך הספריות שהגיעו בחבילה היו “מספיק טובות”.
בעולם הג’אווהסקריפט אין שום חבילה: כל מתכנת לעצמו.
ג’אווהסקריפט עצמה היא שפה עם כמה כשלים בתכנון (נתתי דוגמאות לכמה בעיות אפשריות בחלק השני של הפוסט מבוא מואץ לג’אווהסקריפט), אין לה IDE מוסכם וקרוב לוודאי שתזדקקו לכמה ספריות עבור פיתוח כל אפליקציה שהיא לא מאוד קטנה.
מאיפה מוצאים את הספריות הללו? תחפשו!
כנראה שתגיעו מהר מאוד תוסיפו לארסנל שלכם את jQuery כמה פקדים ויזואליים וכלי Shim (אם אתם תומכים בדפדפנים ישנים).
מעבר לבסיס הזה יש עוד הרבה ספריות חשובות שכדאי להכיר.
אני לא מדבר על הספריות ל”כיבוי שרפות” נוסח “אני זקוק לפקד של תאריך” או “אנימציה של שעון מסתובב” – את אלו תמצאו בגוגל ברגע שיעלה הצורך. אני מדבר על ספריות שהן יותר לטווח הארוך – על מנת לכתוב ג’אווהסקריפט בצורה מסודרת ונכונה יותר. ספריות חשובות אך לא דחופות.
הכירו את JSter
הטריגר לפוסט הוא אתר נחמד שנתקלתי בו בשם JSter המרכז רשימה של ספריות ג’אווהסקריפט.
האם אין המון אתרים כאלה? – יש, אבל בג’סטר היו 2 דברים שקסמו לי:
- הוא מנסה למיין את הספריות (בתוך הקטגוריות) ע”פ הפופולריות שלהן – ולהציג קודם את הספריות החשובות ביותר.
- הוא מוסיף לכל ספרייה את הלוגו שלה – תוספת קטנה, אבל חשובה, לטעמי. הכרת הסמלים עוזרת להתמצא ביתר קלות ולזהות מהר יותר ספריות שאתם “נתקלים בהן פעם נוספת”. שמות הספריות רבות בג’ווהסקריפט דומה ומזכיר אחד את השני. למשל: EmbedJs, Ember.js ו emojify.js או sprite.js, spine.js, spry ו spin.js. כאלה. לכו תבדילו.
- לכלי אוטומטי יש הטיות וטעויות. למשל ג’סטר קבע ש SenchaTouch היא ספריית ה Mobile במקום ה 16 (מתוך 19), ממש לאחר ספרייה כלשהי בשם JindoMobile (??). זו שטות גמורה ודיי ברור ש Sencha היא השנייה הפופולארית אחרי jQueryMobile, אם לא הראשונה. מקור הטעות נובע כנראה מכך שעל ספריות שלא מנוהלות ב Github לג’סטר אין נתונים והוא מדרג אותן אחרונות / ע”פ הצבעות באתר בלבד.
- רציתי להוסיף כמה הערות משלי. ישנן ספריות פופולאריות אך בירידה, ישנן ספריות חדשות אך מאוד מעניינות ויש כמה מילים שאפשר לכתוב על הספרייה שיוצר הספרייה לא כתב עליה.
- כפי שציינתי, ניסיתי להתמקד בספריות “טווח ארוך” ולא כאלו שפותרות בעיה מיידית.
- ניסיתי לקבץ את הספריות קצת אחרת מג’סטר בצורה שנראתה לי יותר הגיונית.
- עדיין השתמשתי בצילומי מסך מג’סטר הכוללים נתונים שימוש מ github. ג’סטר יתעדכן עם הזמן, והפוסט הזה – לא.
- יש כאן עניין של דעה אישית – שאחרים עלולים לא להסכים איתה. אני כבר מצפה לכמה תגובות בנוסח: “אבל איך לא ציינת את ?”
- גם ל”כלי אנושי” יש הטיות וטעויות. ייתכן ויש ספריות שאני חושב שהן “לא פעילות” או “פאסה” – ואני פשוט לא יודע.
- אני מציג בכל קטוגריה מספר ספריות שהן חלופות אחת לשנייה. אינני מנסה להמליץ ללמוד את כולן, חס ושלום. בעיקר נראה לי חשוב להכיר את האופציות השונות ותחומים בהן כל אופציה חזקה.
ספריות בסיס
- Zepto, בהגדרה, תומכת רק בדפדפנים מודרניים. היא לא תומכת ב IE (אם כי תמיכה ב IE גרסה +10 נשקלת).
- היא לא כוללת את כל הפונקציונליות, אלא קצת פחות. מה שקיים – תואם ל jQuery.
- גודל הספרייה היה כשישית מ jQuery כשהספרייה הוצגה, כיום הוא כשליש.
דיי מהר הפכה Zeprto לאופציה פופולרית בעולם המובייל. “שליטה בעולם המובייל?!” – jQuery נלחצה, נבהלה, והגיבה בהתאם: התפצלה לגרסת “Legacy Support” (גרסאות 1.9) וגרסה רגילה (גרסאות +2) והוסיפה אופציה לוותר על פיצ’רים כדי להפחית את נפח ההורדה ולצמצם פערים מול Zepto (עדיין יש פער – אבל מפתחים רבים יוותרו עליו בכדי לזכות ב jQuery שהם מכירים). נחייה ונראה כיצד תחרות זו תמשיך ותתפתח.
Frameworks בסיס
בניגוד ל jQuery, שהיא ספרייה (כלומר: הקוד שלנו קורא לה כשאנו מחליטים), ישנם גם Frameworks (כלומר: הם קוראים לקוד שלנו כשהם מחליטים). מטבעם Frameworks הם רחבים יותר מספריה והתלות בהם גדולה יותר: הם מכתיבים לנו איך לכתוב את הקוד אבל יכולים, מצד שני, לאפשר לנו להגיע לאפליקציה הרצויה בפחות קוד.
עוד הבדל מהותי הוא שבפיתוח עם jQuery המפתח עדיין עובד עם ה abstractions של הדפדפן, קרי Style Sheets, DOM וכו’ – jQuery מספקת API נוחים יותר לעבודה עם מודל זה. עקרון זה נכון גם, פחות או יותר, עבור Polymer.
Enyo, YUI ו Dojo מספקים abstraction שהוא הרבה יותר Object Oriented ומבוסס javaScript – תמונת עולם שמשקפת פחות טוב את מה שקורה בדפדפן – ולכן כנראה קשה יותר לסגל אותה לחידושים בדפדפן.
הבדל מהותי אחרון הוא נושא ההיקף: אפשר לומר של jQuery ו YUI (או Dojo) יש חפיפה, אולם בעוד של 80% מהיכולות של jQuery יש תחליפים ב YUI/Dojo – אולי ל 30% מהיכולות של YUI/Dojo יש תחליפים ב jQuery. רשימת היכולות שיש ל YUI ואין ל jQuery כוללת: פקדי UI (מה שמכוסה חלקית ע”י jQuery UI), הרחבות לשפת ג’אווהסקריפט שמספקות מחלקות (בניגוד לאובייקטים, מה שנקרא Class System), ניהול state על ה URL, יכולות input validation, ועוד.
שתיהן ספריות שהשפיעו רבות על הרבה עולם הג’אווהסקריפט ורבות מהספריות החדשות שאנו רואים כיום הושפעו לקחו רעיונות משתי ספריות אלה. על כן, שמור להן מקום של כבוד בפנתאון של עולם הג’אווהסקריפט – לנצח (קרי כ-5 עד 10 שנים).
כתבה רלוונטית: Google Believes Web Components are the future of Web Development.
עדכון: עוד Framework נפוץ למדי הוא ExtJS. בשנת 2010 ExtJs חברו לספריות jQtouch (בהמשך) ו Rafael (בפוסט ההמשך) לחברה שנראה Sencha.
ExtJS היא ספרייה עשירה ומלאה בנוסח YUI ו Dojo, אם כי ברמת מודל ההפשטה שלה היא התרחקה צעד נוסף מה DOM/HTML/CSS והיא קרובה יותר למודלים של פיתוח אפליקציות Desktop כגון Spring או AWT. המומחיות של ספרייה זו היא אפליקציות עסקיות ויש לה פקדים עשירים מאוד ליצירת טבלאות וגרפים. ל ExtJS יש כנראה את סט הפקדים העשיר ביותר מבין ספריות הג’אווהסקריפט. התוצרים של ExtJS “כבדים” יותר מ YUI ו Dojo מבחינת כמות ומורכבות ה javaScript שנוצר – ולכן מתאימים יותר לאפליקציות שרצות ב LAN (בניגוד ל YUI ו Dojo שכוונו לאפליקציות אינטרנט). בגרסה האחרונה שלה (4.0) ExtJS עברה הרחבות משמעותיות הוסיפה גם תשתית MVC.
קישור: השוואה בין יכולות הספריות שהזכרנו (מלבד Polymer שעדיין לא נכנסה לטבלה)
ספריות למובייל
בנוסף היא עוזרת לטפל ב touch (תכונה חשובה מאוד במובייל) ויש לה סט גדול של פקדים המותאמים למובייל. היא כוללת Theme Roller שמסייע לשנות את צבעי האפליקציה בקלות (אם כי הוא קצת מוגבל) ואפשר למצוא לה עורכי WYSIWYG – לתחילת עבודה מהירה.
הבדל גדול בין JQM ל Sencha הוא ש JQM היא חינמית בעוד Sencha תגבה כסף מארגונים (יש כמה הקלות עבור סטארטאפים ופרויקטי קוד פתוח). Sencha Touch, כמו YUI או Dojo מספקת תמונת עולם (הפשטה) שאיננה מבוססת על HTML, DOM ו CSS – יש שאוהבים זאת ויש כאלו שלא (אני מאלו שלא).
אני רואה אותה מוזכרת הרבה במאמרים ובפוסטים – אם כי אני לא מכיר אף אחד שבאמת עובד איתה.
- חינמית (כרגע)
- תלויה ב jQuery – וחולקת איתה את פילוסופיית השמירה על ה abstraction של הדפדפן.
- מיועדת כרגע רק ל webKit (צעד טקטי, לפי דעתי), בעוד JQM מיועדת לכמעט כל מכשיר מובייל ששמעתם עליו.
- כמו KendoUI – מספקת UI שמחקה את מערכת ההפעלה עליה היא רצה.
אני מבין את Sencha שרוצה Plan B במידה ויתגלה שהאסטרטגיה של Sencha Touch נכשלת. האם הייתי מהמר באפליקציות שלי על ספרייה שכזו?…
ספריות Client Side MVC
ספריות אלו הפכו כמעט לחלק בלתי-נפרד מפיתוח של כל מערכת בגודל בינוני ומעלה בג’אווהסקריפט (צד-לקוח). במיוחד ב Single Page Applications (בקיצור: SPA).
כתבתי על הקונספט וקצת על הספריות בפוסט הצצה מהירה על Backbone.js
עלי לציין שבעת כתיבת הפוסט ההוא הייתי תחת הרושם ש Backbone, Ember ו Knockout הן שלושת הגדולות ויש עוד “כמה בינוניות” בניהן Angular.js. מאז, למדתי מכמה מקורות ש Angular היא דווקא מאוד פופולרית, כנראה שנייה לאחר Backbone ובעלת אופק חיובי. התחלתי להכיר אותה ולהבין גם מדוע.
Backbone היא עדיין הספריה הפופולרית ביותר – אם כי במגמת ירידה קלה. מתכנתים רוצים יותר ממה שהיא מספקת. אופציה מעניינת אחת הוא plugin פופולרי ל Backbone בשם MarionetteJS שחוסך הרבה “הקלדות חוזרות” שקיימות ה Backbone.
עדיין נראה לי שתוך שנה-שנתיים האחרות יתפסו את הבכורה ו Backbone תהפוך קצת יותר לספריית נישה לאלו שאוהבים הרבה שליטה על הקוד שלהם.
עדיין – זו הספרייה הטובה ביותר להתחיל ללמוד ממנה מהו Client-Side MVC. הייתי עדיין פותח בה בכדי ללמוד את העולם הזה, לפני שהייתי מבצע בחירה אחרת ומשקיע את הזמן הרב הנדרש בלימוד Ember, Angular או Knockout.
ספריות צד-שרת
Node.js היא ממש מהפיכה: זוהי פלטפורמה לכתיבת קוד צד-שרת (או מקומי על מערכת ההפעלה) המבוססת על ג’אווהסקריפט ו V8 (מנוע הג’אווהסקריפט המצוין של כרום, מבית גוגל). יש לה המון ספריות, קהילה גדולה ועתיד מזהיר.
Node מספקת לקוד הג’אווהסקריפט שאפליקציות שרת צריכות ואין להן באופן טבעי בשפה:
- גישה לקבצים
- פעולות Networking
- ריבוי threads (לפחות נרצה אחד לכל Core של מעבד)
- הפשטה וכלים לביצוע משימות נפוצות של פיתוח צד-שרת, כגון Express שהיא המקבילה (ה low level) של Servlets על Node.
האם היא תחליף את ג’אווה כפלטפורמה – עדיין מוקדם לומר.
Meteor היא מעין יציר כלאיים: מטרתה לאפשר פיתוח מהיר מאוד של אפליקציות. “לאיפה הולך זמן רב?” החבר’ה של Meteor שאלו – “אהה, כן. לאינטגרציה בין שרת ולקוח”. Meteor רצה מצד אחד על Node לכתיבת השרת ומצד שני בצד הלקוח על הדפדפן ועושה את האינטגרציה – קלה מתמיד. היא דיי חדשה – אך יש מסביבה לא מעט באזז.
כותבי אפליקציות עסקיות: זוהי ספרייה שמכוונת להיות Enterprise class ולא עוד “צעצוע”.
בחלק הבא
בפוסט ההמשך נראה עוד ספריות חשובות: בדיקות, Template Engines, ויזואליזציה, ניהול תלויות ועוד – וכך נשלים את המספר ל 47. זאת התכנית, לפחות.
שיהיה בהצלחה!
שווה לציין גם את ExtJS, שלדעתי הוא ה UI framework הכי עשיר שיש כרגע בשוק..עוד חוסר דיוק קטן בנוגע ל – Dojo: מדובר בספריה מצויינת ומאוד עשירה (אין מה להשוות בכלל ל jQuery), אחת הבודדות שמשתמשות ב – AMD מה שאומר שאתה לא צריך לטעון את כל כמויות הקוד שלה אלא רק את המינימום ההכרחי, והיא לדעתי הספריה היחידה שניתן \”לקמפל\” עם google closure compiler (חוץ מ google closure library כמובן)אני לא חושב שהולכת להיעלם בקרוב מהסיבה הפשוטה שעדיין יש לה קהילה פעילה, ושהרבה ענקיות תוכנה אימצו אותה (כמו IBM, Sum, Zend ועוד)חוץ מזה, השוואה די ממצה, כל הכבוד!
תודה על התגובה.לגבי extjs – ייתכן ואתה צודק, זו דילמה מתמשכת אילו ספריות להכליל – כי תמיד יהיו עוד ספריות בחשיבות דומה לאחרונות שנסקרו.לגבי Dojo – בהחלט אתה צודק, לא ניסיתי להשוות בכלל ל jQuery. אציין בצורה ברורה יותר שהפסקה שמשווה בין YUI ל jQuery (מבחינת ההיקף) התייחסה גם ל Dojo.ליאור
http://www.jsdb.io/לדעתי יותר טוב.
אגב, כתבת \”עורקל\” בכוונה?לא יודע למה, זה נשמע כמו מפלצת כשמאייתים את זה ככה..גם אני חש איבה בלתי מוסברת לחברה הזאת..
אחלה סקירה ! אני מחזיק בארסנל שלי 25% מהספריות, אך תרשה לי לא להסכים עם המלצתך לדעת את כולן. לטעמי הבחירה האשירה שקיימת בשוק היום מאפשרת לאנשי פיתוח להרכיב את \”ארגז כלים\” והיתן להתקדם, ואם וכאשר אחד הכלים נישבר (במקרה שלנו – לא מתקדם מספיק) ניתן להחליפו בקלות בכלי אחר. בכבוד רב, יבגני.
הכוונה היא בהחלט לא \”לדעת\” את כולן – הרי יש בכל קטגוריה המון חפיפה.הכוונה הן להכיר שהן קיימות – שיש בכלל אופציה כזו.אולי אשנה את כותרת הפוסט ל\”לדעת על קיומן\”?תודה על התגובה,ליאור