ערכתי לאחרונה בתאריך 31.05.14 בשעה 11:50 בברכה, MrSus
טוב אני מצטער מראש על האורך של הפוסט הזה, זה הולך להראות יותר כמו בלוג פוסט, אבל אני מרגיש שאני חייב לכתוב אותו, ואולי להעלות פה איזה דיון, כי אין לי מקום אחר מי שרוצה מוזמן לקרוא, ואם לא אתם מוזמנים לפחות להשתתף בדיון שהעלתי בפסקה האחרונה.טוב האמת היא שאני לא בנאדם של client side בכלל, וכל פעם שאני צריך לעשות דברים שקשורים לצד לקוח אני הולך לאיבוד.. תמיד הסתבכתי עם העניין הזה של עיצוב GUI נכון, מהי הדרך הכי טובה, יעילה, פרודקטיבית ומודולרית להכניס את ההתנהגות לממשק.. איך צריך להראות המבנה של הפרויקט, וכו'... תמיד כשהייתי צריך לכתוב קצת קוד בג'אווה סקריפט ויתרתי מהר מאד.. השפה תמיד נראתה לי מגעילה וכל קוד שנתקלתי בו, שכתוב בג'אווה סקריפט היה נראה לי קוד ספגטי מגעיל, גם אם בפועל הקוד היה כתוב תחת איזשהו design pattern מודולרי.. אף פעם לא הצלחתי לראות את זה.
אומנם ההיסטוריה שלי עם ג'אווה סקריפט לא כזו ארוכה, אבל כבר כמה שנים שאני מנסה את "מזלי" עם השפה הזו ותמיד ויתרתי. תמיד שיש לי איזה רעיון לפרויקט, גם אם הוא פשוט יחסית, אבל פרויקט שדורש ממשק משתמש, בד"כ אני אוותר עליו.. הכל הרגיש לי מאד מורכב *יחסית למה שזה צריך להיות בפועל*.. מאין אינטואיציה כזו שכשאתה מקבל משימת תכנות אתה יכול לראות בראש את המורכבות הנדרשת עבורה... ותמיד הרגשתי שהכלים שעומדים לרשותי במימוש של client side מצריכים מורכבות גדולה מידי (ואני לא מדבר על מורכבות במובן של קשה למימוש, אלא יותר מורכבות סיזיפית מגעילה שמצריכה הרבה קוד).
במשך תקופה ארוכה אני שומע על כל מיני שמות מפוצצים של ספריות/פריים וורקס בג'אווה סקריפט - Backbone, Angular, Ember.. וגם Jquery, Underscore כמובן... אבל אף פעם לא רציתי להכניס את הראש שלי לכלים האלה כי הרגשתי שהידע שלי בג'אווה סקריפט בפרט, ובמימוש של client side בכלל, הוא ממש מועט.. למרות שהשפה עצמה - ג'אוה סקריפט, לא קשה בכלל (אבל את זה יכול להגיד כל מי שיודע כבר כמה שפות תכנות ובא ללמוד שפה חדשה, למרות ההבדלים של ג'אוהסקריפט משפות אחרות), עדיין חשבתי שבגלל החוסר ניסיון שלי במימוש פרויקטים שעושים שימוש אינטנסיבי בשפה הזו, ובכלל, עבודה מול ה- DOM API (שתאלכס לדעתי זה יותר קריטי מאשר ידיעת השפה עצמה, ואני יותר מדבר על שימוש נכון ב- API ולא סתם להכיר את הממשק), אולי לא כדאי לי עכשיו להתחיל ללמוד גם את הפריים וורקס האלה.. יש לי מספיק בלאגן בראש גם ככה.
אני יכול להגיד עכשיו שזו הטעות הגדולה ביותר שעשיתי בשנים האחרונות בכל הקשור ללימוד נושאים טכנולוגיים חדשים. זה פשוט מנע ממני לממש פרויקטים, חלקם גדולים, חלקם קטנים, שמצריכים ממשק משתמש גרפי(ובנינו, אלו רוב הפרויקטים שבאמת נותנים סיפוק שעשית משהו שיכול לעזור למישהו, וגם מקבלים הערכה - אם זה לקוח פרטי, אם זו מחלקה בארגון מסוים, אם זה סתם כלי עזר שעוזר למשתמשים באינטרנט, ואם זה אתה עצמך).. ממשק משתמש טוב גורם למשתמש להעריך מאד את מה שקורה מאחורי הממשק הזה, גם אם הוא לא נחשף אליו ישירות (ואני כמובן מדבר על ה- business logic).. הוא מאפשר בדיוק את האבסטרקציה שצריך כדי לגרום למשתמש לרצות להשתמש בתוכנה שלך, וזה דבר חשוב מאד.
עד לפני כמה שנים, הייתי עובד המון עם אקסל, הרגשתי ממש בנוח בתוכנה הזו.. היה לי מאד נוח שהתוכנה מביאה איתה ממשק משתמש מוכן לשימוש וכל מה שנישאר זה טיפה לעצב אותו ולהכניס לוגיקה עם VBA. העניין של הלוגיקה אף פעם לא היוה בעיה אצלי, זה תמיד היה הממשק משתמש (הגרפי)! אז היה לי מאד נוח להשתמש באקסל שבה הממשק משתמש כבר מוכן לשימוש.. אבל כמובן שאקסל תוכנה מוגבלת מאד (למרות שהיא תוכנה מדהימה), ובמהרה אתה מגלה שיש גבול למורכבות האפליקציות שאתה יכול לבנות... אבל זה היה הפתרון שבו השתמשתי לדברים קטנים, ואפילו בינוניים.
אז לפני מספר שבועות החלטתי לקחת ברצינות את עניין ה- client side כי הגעתי למסקנה שבלי זה יהיה לי קשה מאד להתפתח. יש לי בראש כבר תקופה ארוכה כמה רעיונות לפרויקטים (רובם פרויקטים פנים-ארגוניים, אבל חלקם דברים אישיים, טיפה יותר גרנדיוזיים), וכולם מצריכים ממשק משתמש, ולכולם הממשק משתמש הכי מתאים ללא ספק זה ממשק וובי. חשבתי קצת והגעתי למסקנה שאולי אני טיפה מגזים, אולי פיתוח client side הוא לא כזה מורכב כמו שאני עושה מזה, אולי אני מפספס משהו.
אז צפיתי בקורס על jQuery ב- pluralsight. האמת זו לא הפעם הראשונה שאני עושה היכרות עם הספריה הזו, וכבר אפילו השתמשתי בה פעם ושם לדברים ממש קטנים.. אבל מחוסר זמן לא נכנסתי יותר מידי לעומק, ושכחתי מהר מאד כל מה שלמדתי (שזה למעשה היה בעיקר הנושא של selectors, ולא מעבר). אז ישבתי וראיתי את הקורס, ואני לא יודע למה, אבל פתאום הרבה דברים התחילו להתבהר לי, פתאום זה עשה לי קצת סדר בראש.. אני לא יודע אם זה בגלל כל הזמן שעבר והניסיונות החוזרים והנשנים שלי להשתמש בשפה (ג'אוהסקריפט), ולכן בטוח שכל מיני דברים קטנים נקלטו עם הזמן, או שאולי זה בגלל הקורס עצמו שידע להעביר את הנושאים בצורה תמציתית ופרקטית.. מה שבטוח, זה גרם לי להעריך מאד את השימוש בספריות, ובכלל את הרמת אבסטרקציה שהן נותנות.
אני מאד אוהב ומעריך את האבסרטקציה שמאפשרות שפות תכנות (ובפרט שפות תכנות דינמיות), אבל הרבה פעמים אני פשוט מסתפק בשפה עצמה ולא נכנס לעומק לתוך ספריות סבוכות ומורכבות מידי, וזו טעות גדולה. האבסטרקציה שספריות מסוימות מאפשרות היא מדהימה, ובפרט jQuery הופכת כל משימה בג'אווה סקריפט שהייתה נראית לי מורכבת יתר על המידה, לקלה בצורה מדהימה - בדיוק כמו שאני חושב שהיא צריכה להיות. וכמובן יש לזה השלכות על הפרודקטיביות - אפשר סוף סוף לכתוב תוכניות במהירות מבלי להכנס יותר מידי לנושאי המימוש.
אבל גם jQuery היא ספריה שלא מתאימה לכל הצרכים.. היא ספריה שמקצרת הרבה מאד פעולות, אבל כשמדובר בהתעסקות עם הממשק משתמש הגרפי (וב- HTML מדובר כמובן על DOM Manipulation), כל ספריה/שפה שהיא אימפרטיבית (לענייננו זה אומר שצריך לכתוב רצף של הוראות/פקודות כדי להשיג משהו), נראית לא אינטואטיבית מספיק. ממשק משתמש צריך להיות דקלרטיבי, בדיוק כמו HTML, ושאר ממשקים שאפשר לכתוב ב XML, כמו android , windows wpf , qt gui , ואפילו מסמכים אלקטרוניים למיניהם הם בפורמט של XML מתחת לכל השכבות (אני מדבר בעיקר על אופיס של מייקורוספט, ו open office בקוד פתוח).. ואפשר להכניס פה גם שפות דקלרטיביות נוספות דוגמת latex... ועוד. זו הדרך שנראית הכי נכונה ואינטואטיבית לממש ממשק משתמש.
אני חושב, והדבר שנראה לי הכי אינטואטיבי זה שכל הדברים שקשורים לממשק המשתמש, צריכים להיות בתוך ה- HTML עצמו.. וזה כולל גם תוכן דינמאי, רובריקות שמופיעות ונעלמות, דברים שזזים מצד לצד וכו'... כל דבר שיש לו קשר לפרזנטציה למשתמש צריכה להיות בצורה דקרלטיבית! זה אף פעם לא נראה לי בסדר שצריך להשתמש בג'אוה סקריפט (בצורה מפורשת) כדי לשנות תוכן של אלמנט מסוים, או בשביל להוסיף שורה בטבלה.. זה לא היה נראה לי בסדר שצריך לשלב קוד HTML בתוך קוד javascript (כדי ליצור אלמנטים בצורה דינאמית ולהכניס אותם תחת איזה אלמנט אב).. צריכה להיות הפרדה ברורה, זה גורם לדברים להראות כל כך נקיים, מודולריים אם תרצו.. זה גורם לך לא לאבד את הראש כשאתה רואה קוד כזה.. אתה יודע בדיוק מה אתה צריך לשנות כדי להשפיע על התצוגה או על הלוגיקה...
אז HTML בפני עצמו הוא נחמד והכל, אבל הבעייתיות שקיימת מראשית הדרך היא שהוא נכתב מראש במטרה להציג דפים סטטיטיים. בתחילת הדרך אף אחד לא חשב על דפים עם תוכן משתנה, אפליקציות שלמות שנכתבות בתוך עמוד אחד, או בכלל על האפשרות שמתישהו יהיה ajax שיאפשר את כל הדברים האלה.
ואז הגיע AngularJS....
טוב האמת שאני בטוח שלפני AngularJS היו ניסיונות אחרים לכתוב פריים וורקס MVC לג'אווה סקריפט, ואולי חלקם הצליחו, ועודם מצליחים, אבל אני החלטתי ללכת עם Angular כי אני רואה שהיא מופיעה כמעט בכל מישרת דרושים של javascript, והבנתי שהפופולאריות שלה עולה בזמן האחרון, וזה פשוט נראה לי זמן מצוין ללמוד אותה. שמעתי עליה גם שיש לה עקומת לימוד חדה יחסית (שזה טיפה מרתיע), אבל החלטתי בכל זאת לבדוק על מה כל המהומה.
אז לפני שבוע התחלתי לקרוא קצת באתר של angularjs, וכמובן לא הבנתי כלום. לא הבנתי מאיפה הגיעו ה- attributes שהיא עושה בהם שימוש, לא הבנתי איך כל הרכיבים שם מתחברים, מה זה המשתנה $scope ואיך הוא מגיע לתוך הפונקציה (ה- controller), ולא הבנתי איך עובד ה- controller... ועוד כל מיני דברים שנראו לי מוזרים, רק כי התרגלתי לראות html נקי מכל ה- directives שאנגולר מוסיפה. מכיוון שיש לי יותר ניסיון ב- server side, היה לי קשה לשנות תפיסה ל- mvc של client side.. ובטח אחד כזה שנכתב ב- javascript - שפה מלאה בהתנהגויות מוזרות.
ואז הנחתי לזה ליום-יומיים, ובזמן הזה חזרתי לחשוב על איך אני ממש כל מיני דברים בצורה נכונה ב- jQuery.. עוד לא נפל לי האסימון ש- AngularJS זו בדיוק ה-ספריה שהכי מתאימה לי! (וכמעט פספסתי את זה עד הפעם הבאה שאחליט ללמוד ג'אוה סקריפט, שיכלה להיות עוד שנה אפילו) אז אחרי יומיים מצאתי את עצמי שוב אוכל סרטים עם jQuery, ומכיוון שאני פרפקציוניסט, כל פעם שהיה לי איזה רעיון לאיך צריך לממש משהו, חשבתי שאולי הוא לא מספיק טוב, אולי יש פתרון אחר.. בקיצור זה ממש תוקע אותי במקום!
ואז תפסתי את עצמי בידיים, נכנסתי ליוטיוב וצפיתי בסרטון של שעה על מבוא ל- Angular, שהעלה Dan Whalin שמסתבר ממש ממש במקרה שזה בדיוק אותו אחד שהיה הקריין של הקורס שראיתי על jQuery ב- Pluarlsight. אני חושב שהוא תותח, והוא מצליח להסביר דברים בצורה קלילה, זורמת, נוגע בדיוק בנקודות הנכונות. הוא הצליח לגרום לי להבין שבסה"כ בצורה הכללית והמופשטת ביותר AngularJS היא בסה"כ פריים וורק שמאפשר לייצר templates דינמיים של דפי HTML. בדיוק אותם templates שהייתי כותב בצד השרת ושולח ללקוח, והתבאסתי שהלקוח לא יכול להוסיף להם אלמנטים בצורה דינמית ופשוטה (כמו שהם מיוצרים ב- template renderer שבשרת), אז זה בדיוק הכח ש- angular נותנת, זה בדיוק מה שהיה חסר לי. כמובן שעם templates מגיעים גם הנתונים שנכנסים בכל מיני מקומות ב- template, ומכיוון שמדובר ב- template דינאמי, הנתונים האלה גם יכולים להשתנות, ובהתאם ה- template ישתנה. זה ההבנה שלי בצורה הכי פשוטה, את הכוח ש- angular מוסיפה.
כמובן ש-angular הרבה הרבה יותר חזקה מזה, וככל שאני קורא עליה יותר בימים האחרונים אני פשוט אוכל את עצמי איך לא גיליתי אותה לפני כן.. היא פשוט הופכת את החיים להרבה הרבה יותר קלים (בכל מה שקשור לפיתוח client side כמובן).. היא בדיוק מוסיפה את האבסטרקציה שהייתה חסרה לי, היא לוקחת הכל לכיוון הנכון - ככה צריך להראות פיתוח של ממשק משתמש!
אני סוף סוף ממש נהנה לכתוב ממשקי משתמש! בתוך יום-יומיים אני אתחיל לעבוד על אחד הפרויקטים שדחיתי המון המון זמן, ואני מאמין שעכשיו זה יזרום לי בצורה הרבה יותר קלה. אני ממליץ לכל מי שמפתח web, ומרגיש כמוני שהוא נלחם ב- dom בכל פעם שהוא רוצה לעשות משהו טיפה דינאמי - תלמדו AngularJS!!
נכון שהיא לא הספריה הכי יעילה שיש, והיא אולי לא מתאימה לכל אפליקציה.. אבל לרוב האפליקציות היא מתאימה ויעילה בצורה מספקת (בצורה מספקת זה אומר שלא תרגישו פגיעה בביצועים כלל). גם אם יש איזושהי בעיית ביצועים (שהסיבה העיקרית, למיטב הבנתי, היא בד"כ קיום של לולאה ב- template), אפשר למזער אותה בצורה קלה יחסית (למשל לבטל data-binding מאלמנטים שאנחנו יודעים שלא ישתנו על-ידי המשתמש בעתיד.. אלו דברים שאני לומד ממש עכשיו לאט לאט)... בנתיים עושה רושם שהספריה הזו נמצאת בכיוון הנכון, ואני מקווה גם שאולי היא תשפיע על הגרסאות הבאות של HTML (כפי שהמפתחים טוענים שהיא forward thinking).. והאמת כבר היום יש דפדפנים שמממשים את הסטנדרד של Web Components שאמור להוסיף אפשרויות רבות ל- html של היום, ביניהן template system (כך למיטב הבנתי בכל אופן).. אז אם זה נכון בטח כבר בשנים הקרובות כל התכונות המלאכותיות ש- angular מוסיפה, יהיו זמינים natively בדפדפן. בקיצור אני חושב שזו השקעה משתלמת.
אגב, אני לא חושב שעקומת הלימוד של angular כזו חדה כמו שטוענים.. בסה"כ בתוך מספר ימים הצלחתי להבין את הליבה של הספריה ולמעשה היא נורא נורא אינטואטיבית.. מי שמגיע מ- server side אני חושב שיכנס לעניינים מהר מאד, צריך רק לתת צ'אנס (ואחרי זה אולי עוד צ'אנס)
אז לסיכום, בכל זאת אשאל, האם יש פה אנשים שעובדים עם Angular ב production? מה אתם חושבים על הספריה הזו? האם נתקלתם בבעיות ביצועים עד היום? אשמח לשמוע על כל טיפ שיש לכם!