ריאקט לא הגיונית כמעט

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

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

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

אבל זה לא אומר שאין לי דיעה על כלום ושאין סדרי עדיפות או היגיון.

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

הגיעה הזמן לדבר על הפיל שבחדר

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

הבעיה שלי עם ריאקט היא לא הספריה עצמה. הבעיה שלי היא עם JSX. הפורמט שבו ריאקט משתמשת בשביל לייצר קומפוננטות.

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

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

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

JSX מדברת בשתי שפות וזה נראה בדיוק כמו ישראלי שמנסה לדבר באנגלית, אבל חסרות לו מילים, אז הוא משלים בעברית. זה לא הולך טוב ביחד. לראייה, אי אפשר לכתוב את המילה class בתוך תבנית של JSX. למה? ככה. כי זה לא באמת HTML. אז כותבים className. קומבינה.

לשם השוואה, באנגולר יש הפרדה מלאה בין תבנית HTML, בלוק CSS וקוד. כל אחד מהם הולך לקובץ נפרד, או לכל הפחות לאזור אחר בקובץ המקור. במילים אחרות: הפרדת רשויות – SoC.

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

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

רגע, מה? מישהו מסוגל להסתכל על זה ולהבין מיד מה קורה כאן?

ככה זה נראה באנגולר:

ירים את היד מי שחושב שהגישה הראשונה מוצלחת יותר.

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

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

אני לא בא להתווכח כאן על מה טוב יותר, או מהיר יותר. אבל כנראה שיש סיבה ממש טובה למה בריאקט החלק ה-HTMLי עובר כאלה המרות, שלא רואים כבר כלום מהמקור. כי זה כזה כאילו.

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

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

לסכו"ם

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

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

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