מה זה ריאקט? ואיך מפתחים איתה אתרים?

קצת רקע על ריאקט

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

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

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

אבל מה היה רע להם בכלל הרי פייסבוק כבר היו קיימים בשנת 2013?

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

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

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

הפתרון היה

• מערכת זרימת מידע חד כיוונית
• מערכת קומפוננטות עם הורשת משתנים props.
• סטייט שלא ניתן לשינוי

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

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

JSX (JavaScript XML)

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

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

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

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

מה זה תכנות הצהרתי?

תכנות הצהרתי(דקלרטיבי) הינה גישה לכתיבה של קוד עם ביטויים ללא פקודות ביצוע ספציפיות.

כאשר כותבים בג'אווה סקריפט ללא פריימוורקים כותבים בצורה אימפרטיבית (תכנות פקודתי)

כתיבה אימפרטיבית אומרת לדפדפן איזה פקודות הוא צריך להריץ על מנת לעדכן את הDOM.

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

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

תכנות פקודתי אימפרטיבי

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

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

קומפוננטות

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

למשל אם היינו צריכים לרשום כרטיסיות המציגות סרטים, והיו לנו 1000 סרטים לרשום...

            
<div class="movie-container">
  <div class="movie-title">Doctor Strange (2016)</div>
  <div class="movie-description">While on a journey of physical and spiritual healing,
    a brilliant neurosurgeon is drawn into the world of the mystic arts.</div>
</div>

<div class="movie-container">
  <div class="movie-title">Dirty Pretty Things (2002)</div>
  <div class="movie-description">While on a journey of physical and spiritual healing,
    a brilliant neurosurgeon is drawn into the world of the mystic arts.</div>
</div>

<div class="movie-container">
  <div class="movie-title">Lord of the rings (2001)</div>
  <div class="movie-description">While on a journey of physical and spiritual healing,
    a brilliant neurosurgeon is drawn into the world of the mystic arts.</div>
</div>

.....רואים לאן זה הולך
            
          

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

לסיכום

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

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

רוצים ייעוץ חינם מהדוקטור?

צרו איתי קשר לכל שאלה ואשמח לעזור!

לכל המעוניינים ללמוד תכנות

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

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

הצטרפו לפייסבוק

עקבו באינסטה

הצטרפו לקהילה

הצטרפו לווצאפ

צפו במדריכים

גם בטיקטוק