מה זה Single Page Application ?

תמלול ההרצאה: מה זה Single Page Application ?

הטקסט המלא של הדקות הראשונות בהרצאה «מה זה Single Page Application ?» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אפשר להגיד שישנם שלושה סוגים של Web Applications אפשר לבנות אתר שהוא נחשב אתר סטטי לחלוטין אפשר לבנות אתר שנחשב אתר דינמי ואפשר לבנות אתר שנחשב Single Page Application שככה React עובדת by default יש לה את הכלים לבנות אתר כ-Single Page Application ופה חשוב לנו להבין מה זה לפני כשאנחנו בעצם פותחים אפליקציית React 1. קודם

2. 00:33

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

3. 00:43

   אנחנו יודעים שכאשר אנחנו מפתחים אתר אינטרנט יש לנו שני צדדים פה, יש לנו את צד ה-Client מה נקרא Front-End ויש לנו את צד ה-Server מה נקרא Back-End.

4. 00:54

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

5. 01:12

   מה שבעצם קורה זה שבצד השרת אנחנו בונים דפי אינטרנט. בוא נניח שאנחנו משתמשים ב-HTML ולכן הסיומת של דף היא HTML. אז בוא נניח שיש לנו אתר ויש לו שלושה דפים, יש לנו דף בית, יש לנו דף about אודות האתר שלנו ויש לנו דף מוצרים בואו נקרא לו products.html אז מה שאנחנו עושים כאשר אנחנו בונים אתר בטכניקה שנקראת static

6. 01:43

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

7. 02:01

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

8. 02:27

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

9. 02:53

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

10. 03:08

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

11. 03:21

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

12. 03:43

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

13. 04:01

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

14. 04:25

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

15. 04:38

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

16. 04:47

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

17. 05:13

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

18. 05:23

    השיטה הבאה כאמור נקראת Dynamic Website. יש לנו פה את ה-Client, Front-End, יש לנו פה את ה-Server, Back-End, הנה ה-End-User, הנה המחשב שלו שמריץ כמובן דפדפן.

19. 05:35

    מה יושב בצד ה-Server? אז אנחנו רוצים את אותו אתר בדיוק, ואותו אתר בדיוק כלל דף בית, דף About ודף מוצרים.

20. 05:44

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

21. 06:02

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

22. 06:17

    אם אתם בונים את כל הסרבר ב-Java, אז יהיה לנו כאן JSP, Java Server Page, ASP זה Active Server Page, SP שייך ל-Microsoft, ל-C-Sharp, ו-JSP שייך ל-Java, היום זה של אורקל.

23. 06:35

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

24. 07:06

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

25. 07:29

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

26. 07:53

    בשביל לעצב את הדף עם ה-CSS ובכדי להריץ את ה-JavaScript מקומי בצד של הדפדפן אם הוא רוצה פעולות לוגיות כאן ב-Front End.

27. 08:03

    אז מה קורה כשהיוזר מבצע גלישה? זה יוזר גולש לדף הבית על ידי איזשהו תפריט ומקבל את דף הבית ומציג אותו וגולש לדף האבאוט ומקבל את דף האבאוט ומציג אותו.

28. 08:15

    אפילו שהדף הוא עם סיומת ASPX עדיין המידע שיושב פה יכול להיות מידע HTML טהור שמגיע לפרונט והדפדפן ברגע שהוא מקבל HTML מציג את ה-HTML אין פה שום בעיה אבל ברגע שהדפדפן גולש לפרודקטס נקודה ASPX או PHP או כל טכנולוגיית Server-Side אחרת, הטכנולוגיה הזאת מסוגלת לרוץ בצד של הסרבר, מה שלא קרה לנו לפני כן בשיטה הקודמת בסטטיק ובסייט, ובונה דינמית את המידע מהדאטאבייס, כלומר היא גולשת לדאטאבייס,

29. 08:53

    מביאה את המידע, הטכנולוגיה יכולה לגשת לדאטאבייס, ומייצרת HTML מהמידע העדכני שהגיע מהדאטאבייס. הייצור של ה-HTML הזה היה בצד של הסרבר, מתבצע בצד של הסרבר.

30. 09:09

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

31. 09:31

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

32. 09:49

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

33. 10:02

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

34. 10:27

    זה עבד במשך שנים עד שבאמת אתרים התחילו לקבל פיקים כאלה של bad performance והתעשייה חיפשה פתרון אחר והפתרון הזה הוא single page application.

35. 10:41

    כאן אנחנו הולכים לראות איך React מסוגלת לעבוד by default. יש לנו שוב פעם את ה-client, יש לנו את ה-server, יש לנו את ה-end user, הנה המחשב עם הדפדפן שלו, אבל מה יושב לנו בצד של ה-server?

36. 10:54

    המטרה ב-single page application זה פשוט מאוד לעשות כמה שפחות כמה שפחות מה צריך להיות בסרבר ברור שבסרבר חייב להיות לנו דאטאבייסט דאטאבייסט זה משהו שלא נמצא אצל הקליינט כי הוא אחד ויחיד עבור כל הלקוחות ונשמר לנו בסרבר אבל בייסיקלי כמה שיותר דברים אנחנו רוצים להעביר כך שהם ירוצו פה בפרונט אנד מפני שתחשבו שאם יש לנו כרגע

37. 11:22

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

38. 11:34

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

39. 11:44

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

40. 11:58

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

41. 12:18

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

42. 12:27

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

43. 12:48

    זאת הסיבה שיש לנו בסרבר דף אחד שנקרא Single Page. הדף הזה נהוג לקרוא לו index.html וכל מה שיש בדף הזה זה לינק ל-CSS כמו שהיה בטכנולוגיות הקודמות ולינק ל-JavaScript כמו שהיה בטכנולוגיות הקודמות רק בכדי שאיזשהו דף אחד ויחיד יגיע לפרונט ויביא איתו את ה-HTML

44. 13:13

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

45. 13:34

    אין לנו פה שום דפים אחרים. מה כן יש בסרבר? דאטאבייס עם כל המוצרים כמו מקודם. אני מזכיר, אנחנו רוצים דף Home, About ו-Products.

46. 13:45

    מה הדבר שמסוגל להחצין את המוצרים האלה לכל העולם, לכל ה-Front End? זה יהיה כמובן Service. Service זה משהו שנמצא בשרת, מסוגל לקבל פניות, ריקווסטים, מסוגל לפנות לדאטאבייס, הוא יכול להריץ פה קוד, הקוד יכול להיות C-Sharp, הוא יכול להיות Java, הוא יכול להיות Python, הוא יכול להיות C++,

47. 14:10

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

48. 14:37

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

49. 14:59

    אין פה את דף הבית,