ללמוד Laravel

[ש.ב.ח.]

@ynigun, @ניוגראף
אשמח להסבר בסיסי ומקורות מידע
על המושג ssg ו Gatsby ו-Next.js

 

[יידישע קאפ]

אשמח להסבר בסיסי ומקורות מידע
על המושג ssg ו Gatsby ו-Next.js

יש שתי קטגוריות של אתרים (בגדול):
1. אתר דינמי - יש שרת שמקבל כל בקשה, מעבד אותו, ושולח תגובה (html, json או שגיאה וכו׳).
2. אתר סטטי - יש רק קבצים סטטיים (html, js, css וכו׳) שמוגשים לכל דורש כמות שהם.

לכל אחד יש את היתרונות שלו:
אתר דינמי - יותר דינמי, SEO בקלות, יותר שליטה על החלקים שצריכים להיות מאובטחים, RDB כמו SQL שמאפשרים עבודה מאוד עוצמתית עם הנתונים, ובמיוחד עם ORM (לדוגמא Eloquent שמגיע עם Laravel).
אתר סטטי - מאוד מהיר, עם אחסון בעצם חינמי (Netlify, Vercel), בלתי ניתן לפריצה (הכל סטטי), ו-scaling בלתי מוגבל (בעזרת ב-CDN).

לכל אחד יש פתרונות לחסרונות שלו - אז אפשר להשתמש בשניהם כמעט לכל דבר היום.
אבל לכל פרוייקט יש לדעת מה יותר מתאים לו.
בלוג למשל - יותר מתאים SSG (static site generation)
אבל אתר ecommerce רציני - לא כ״כ... בטח אפשר, ואני עשיתי את זה, אבל הרבה יותר לבנות את זה דינמי...

 

[ש.ב.ח.]

אבל לכל פרוייקט יש לדעת מה יותר מתאים לו.

למשל עבור מערכת ניהול חשבון (כדגומא) נראה שזה לא מתאים? הבנתי טוב?

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

 

[יידישע קאפ]

למשל עבור מערכת ניהול חשבון (כדגומא) נראה שזה לא מתאים? הבנתי טוב?

זה לא בלתי אפשרי, אבל הייתי בוחר משהו דינמי, עם SQL שתוכל להריץ שאילתות מתקדמות.
אפשר לבנות את זה סטטי - עם משהו כמו Firebase ל-backend, אבל זה יהיה יותר מסובך, וגם זה לא ממסד-נתונים-רלטיבי (relational DB), אז זה פחות עוצמתי...

שום דבר לא בלתי אפשרי - אבל אתר דינמי הרבה יותר מתאים...

עוד אופציה - לבנות API נפרד, ואז לבנות את הקליינט (הצד הקדמי) כ-SPA סטטי. וזה משהו שהרבה עושים היום. ואז יהיו לך 2 חלקים נפרדים.
ועוד אופציה - לבנות SPA בלי לבנות API, רק dynamic backend כמו Laravel, ולחבר אותו לקליינט בעזרת Inertia.js.

האפשריות לא נגמרות...
אני אישית כרגע הייתי הולך על האופציה עם Inertia.

 

[ש.ב.ח.]

לבנות API נפרד

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

 

[יידישע קאפ]

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

אני חושב שזה הטוב משני העולמות -
יש לך הדינמיות והשליטה שאתה מקבל כשאתה בונה ה-API לבד.
הצד הקדמי שלך עולה מהר ויכול להיות מאוחסן כ-SPA סטטי על CDN.

וזה בטח פחות עבודה על השרת - כי הוא לא צריך ליצור את כל ה-html לכל מבקר, הוא רק דואג ל-data ושולח כ-json.
את כל העבודה של ה-view אתה דוחף למחשב של המשתמש.

 

[ש.ב.ח.]

הצד הקדמי שלך עולה מהר ויכול להיות מאוחסן כ-SPA סטטי על CDN.

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

 

[יידישע קאפ]

אם אני מבקש בהתחלה דף לבן

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

 

[ynigun]

יש חיסרון כרגע בכל הSSG
שאין ממשק ללקוחות לבניית האתר,הוספת דפים וכו'
אמנם אפשר לבנות משהוא עם וורדפרס וכדו'
אבל אין משהו מובנה,
יש כמה SSG שיש להם עורכים חמודים
אבל עדיין לא משהו גדול,
אני משער שזה יגיע מתי שהוא
ואז עולם הSSG יפרח עוד יותר.
@ניוגראף
אולי תרים את הכפפה?
מספיק לך לשכנע את JDN וקול חי לעבור לSSG , וכיסית את ההשקעה,
האתר שלהם יהיה מהיר כמו טיל, בעלות כמעט אפסית (אפשר לאחסן גם בS3, ולשלם רק על התעבורה).

 

[יידישע קאפ]

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

יש...
תחפש בגוגל headless CMS

Gatsby Plugin Library | Search 3,000+ Plugins | Gatsby

The library for searching and exploring Gatsby's vast plugin ecosystem to implement Node.js packages using Gatsby APIs

www.gatsbyjs.org

 

[ynigun]

יש...
תחפש בגוגל headless CMS

Gatsby Plugin Library | Search 3,000+ Plugins | Gatsby

The library for searching and exploring Gatsby's vast plugin ecosystem to implement Node.js packages using Gatsby APIs

www.gatsbyjs.org

חיפשתי בעבר ולא מצאתי משהו מושלם
(לא משהו שאפשר לתת ללקוח פשוט לנהל את האתר שלו)

 

[יידישע קאפ]

חיפשתי בעבר ולא מצאתי משהו מושלם
(לא משהו שאפשר לתת ללקוח פשוט לנהל את האתר שלו)

הנה כמה עם ממשק נוח לעורכים:

Where content drives business momentum | Contentful

Business moves faster when teams producing content have a platform that empowers them to collaborate, innovate, and deliver impactful experiences at scale.

www.contentful.com

Sanity: The Composable Content Cloud

Sanity is the modern CMS that transforms content into a competitive advantage. Customize, collaborate, and scale your digital experiences seamlessly.

www.sanity.io

כשעורך מעדכן את התוכן - הם שולחים webhook ל-Netlify או Vercel שגורם לבנייה מחדש של האתר.

 

[ynigun]

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

בכל אופן זה מי שיבנה עורך בעברית זה יכול לרוץ

 

[ynigun]

@ניוגראף
שאלת תם (באמת)
האם אתה יודע מה ההבדלים בין django לlaravel?
אני לא מכיר את שניהם, אבל סתם מעניין אותי לדעת.

 

[יידישע קאפ]

האם אתה יודע מה ההבדלים בין django לlaravel?
אני לא מכיר את שניהם, אבל סתם מעניין אותי לדעת.

שניהם פריימוורקים באותו קטגוריה - רק django בפייתון, ו-Laravel ב-PHP.

אני לא מכיר django טוב, אבל ממה שקראתי עליו נראה שהוא ג״כ פריימוורק מאוד אהוב בקרב מפתחים, כי הוא גם מגיע עם כל הדברים השכיחים מוכנים, ועם opininated folder structure, ועוד הרבה דברים טובים.

 

[ש.ב.ח.]

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

אז השאלה הראשונה שלי:
יש לי טופס ואני מבצע עליו ולידציה בController באופן הבא:

public function store(Request $request)
{

    $this->authorize('create', 'App\Post');
        
    Post::created( validate([
         'title' => 'required',
         'body' => 'required',
    ]));
    
}

האם הכנסת הid של המשתמש לפרטי הפוסט (כמובן שיש שדה כזו) מחייבת שימוש בקלט נסתר או בפירוק של הcreated לsave()?

מקווה שהובנתי.

 

[יידישע קאפ]

האם הכנסת הid של המשתמש לפרטי הפוסט (כמובן שיש שדה כזו) מחייבת שימוש בקלט נסתר או בפירוק של הcreated לsave()?

מקווה שהובנתי.

אם אתה רוצה לשייך את הפוסט למשתמש הנוכחי, תעשה ככה:

זה יצור את הפוסט עם שיוך למשתמש הנוכחי. Laravel כבר יוסיף בשבילך את ה-user_id לתוך הפוסט!
וכמובן צריך גם להוסיף את ה-relation על ה-User class:

 

[ש.ב.ח.]

@ניוגראף, ראיתי שכתבת שעברת מReact ל Vue,
למה? האם יש לו יתרונות על React?
אם ידעת כבר את React שהיא ספרייה עם גב (פייסבוק) למה עברת למי שאין לה כזה גב (כך נראה לי)?

אני פשוט כותב מתחיל בReact ומעוניין לדעת אם אני טועה...

דבר שני,
אם אתה משתמש בראוטר ואלמנטים בVeu או React זה בעצם אומר שאתה לא משתמש ביכולות של Laravel בתחום הHTML (כל הכרוכיות (@) בטמפלייטים שלהם), ואתה יותר משתמש בRoute שלו בAPI, נכון?

רק מנסה להבין את הכיוון של כתיבה בריאקט בתוך לאראוועל (הופ... הוא עבר לעברידיש... )

 

[יידישע קאפ]

אם ידעת כבר את React שהיא ספרייה עם גב (פייסבוק) למה עברת למי שאין לה כזה גב (כך נראה לי)?

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

אם אתה משתמש בראוטר ואלמנטים בVeu או React זה בעצם אומר שאתה לא משתמש ביכולות של Laravel בתחום הHTML (כל הכרוכיות (@) בטמפלייטים שלהם), ואתה יותר משתמש בRoute שלו בAPI, נכון?

שאלה מצויינת, יש כמה שיטות בזה, הנה כמה:

1. לבנות הצד-לקוח כ-Vue-app סטטי (עם Vue-Router, Vuex וכו׳), ולדבר עם Laravel דרך API (כמו שכתבת).
2. לשלב בין שתיהם - להשתמש ב-routing ו-auth וכל הדברים הטובים של Laravel, ורק ה-view יבנה עם Vue. יש לזה ספרייה קטנה שעושה את זה מאוד קל וגעשמאק: Inertia.js. אני משתמש בו לפרוייקט גדול, וזה ממש חבל על הזמן, ממש היתרונות של שתי העולמות.

וגם לא חייבים להשתמש ב-Javascript framework אם לא צריכים. באתר הסקריפטים שלי השתמשתי רק ב-blade components, וזה ממש נהדר לעבוד אתו. זה בעצם SSR...
(לקצת הדינמיות שהייתי צריך שמה - השתמשתי ב-Alpine.js - פריימוורק פצפונת שנותן לך הרבה מה ש-Vue נותן).

 

[ש.ב.ח.]

יש לזה ספרייה קטנה שעושה את זה מאוד קל וגעשמאק: Inertia.js. אני משתמש בו לפרויקט גדול, וזה ממש חבל על הזמן, ממש היתרונות של שתי העולמות.

לקחת לי עכשיו שעתיים לקרוא... !!!!
זה באמת נראה ממש משכנע...

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