Jamstack: מהפכת האתר הסטטי העומדת בפני פיתוח אתרים

Jamstack היא פילוסופיה פופולרית יותר ויותר לפיתוח אתרים שמטרתה להאיץ הן את תהליך פיתוח האינטרנט והן את זמני הורדת דפי האינטרנט. ציור מתנועת devops וטכניקות אינטגרציה רציפה / אספקה ​​רציפה (CI / CD) ההופכות לנורמה בארגונים רבים, Jamstack מעלה טכניקות ארוכות טווח לבניית דפי אינטרנט אינטראקטיביים, הסטת ביצוע קוד זמן טעינה משרתי אינטרנט ו לכיוון JavaScript בדפדפן ושירותים חיצוניים שניתן לגשת אליהם באמצעות ממשקי תכנות יישומים (API).

מה זה ג'אמסטאק? Jamstack, מוגדר

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

כדי להבין מדוע פילוסופיית Jamstack היא מהפכנית, שקול את מחסנית LAMP, המדגימה את האופן שבו רוב היזמים חשבו על פיתוח אתרים במשך רוב 15 השנים האחרונות. LAMP מייצג לינוקס (מערכת ההפעלה המפעילה את מרבית שרתי האינטרנט), אפאצ'י (תוכנת השרת הפועלת במכונות לינוקס אלה), MySQL (מסד הנתונים בו מאוחסן המידע שיישום האינטרנט זקוק לו) ו- PHP / Perl / Python (השפה שבה קוד בצד השרת כתוב). כשאתה מכוון את הדפדפן לאתר מבוסס LAMP, שרת האינטרנט מבצע את הקוד בצד השרת שמייצר את דף האינטרנט בזמן אמת, תוך שהוא מצייר נתונים לפי הצורך ממסד הנתונים MySQL.

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

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

אתרים סטטיים, מחוללי אתרים סטטיים ו- Jamstack

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

בימים הראשונים של האינטרנט, כאשר דפי האינטרנט היו תמיד סטטיים, מפתחי אתרים רבים כתבו את קוד ה- HTML ביד. ככל שדפי האינטרנט הלכו והפכו מורכבים יותר, הגיעו כלים כמו Dreamweaver של מקרומדיה, שיכולים ליצור את דפי ה- HTML הסטטיים הללו באופן פרוגרמטי. כאשר תנועת הרשת הסטטית המריאה באמצע שנות העשרים, החל להופיע גל חדש של מה שמכונה מחוללי אתרים סטטיים , כולל גטסבי, הוגו וג'קיל. בניגוד לכלי WYSIWYG כמו Dreamweaver, מחוללי אתרים סטטיים מונעים על ידי שורת פקודה, ונועדו להיות משולבים בתהליכי CI / CD. קבצי HTML נוצרים על ידי הכלים, לעיתים מבוססים על תוכן שנכתב ב- Markdown, ומועלים אוטומטית למאגר בקרת גרסאות כמו GitHub. מכיוון שקבצים אלה מסומנים מוכנים לייצור, דפים סטטיים באתר החי מתעדכנים אוטומטית.

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

מתייה דיון, מוביל שיווקי ב- Snipcart, מתאר את ימיו הראשונים של עולם חדש זה של אתרים סטטיים בפוסט בבלוג, ומזכיר כי בסביבות שנת 2015, "מייסדי Netlify ... זה עתה העלו את המונח 'Jamstack' לעבוד סביבו הקונוטציה השלילית של 'רשת סטטית'. "במילים אחרות, תיארנו את תהליך ה- Jamstack לאורך כל החלק הזה. אך כעת עלינו לדון בקצרה ב- Netlify ובתפקידם במערכת האקולוגית.

מה זה Netlify?

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

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

אך Netlify אינה ספקית האירוח היחידה במרחב Jamstack, ואין לה שום סוג של סימן מסחרי או שליטה קניינית על המונח. ישנם מספר פתרונות אירוח ופריסה של Jamstack, ורוב ספקי הענן הגדולים נכנסים לפעולה, כולל AWS, Google Firebase ו- Microsoft Azure.

Jamstack CMS

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

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

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

Netlify, כפי שניתן היה לצפות, יש הצעה משלהם במרחב זה, הנקרא NetlifyCMS, אך קיימות מספר הצעות אחרות; היזם Nebojsa Radakovic מפרק אותם עבורך בפוסט בבלוג. יש הרבה אנשים חדשים ומופיעים ברשימה, כמו גם שם אחד מאוד מוכר. אמנם השתמשנו בוורדפרס כדוגמה ל- CMS מסורתי, אך וורדפרס יכול להיות מנוהל כ- CMS ללא ראש להפעלת אתר Jamstack גם כן.

כנס ג'אמסטאק

Netlify פועלת גם ליצירת קהילת Jamstack ומעניקה חסות לכנסי Jamstack. החברה קיימה אירועים בניו יורק, לונדון וסן פרנסיסקו בשנת 2019, והתארחה באירוע וירטואלי במאי 2020. נכון לכתיבת שורות אלה, תוכלו להירשם לאירוע בסן פרנסיסקו המתוכנן לתאריכים 6-7 באוקטובר 2020, אם כי למגפת הנגיף הכלילי עדיין קיימות תוכניות ועידת סתיו באוויר. 

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

[גם ב: 6 ה- IDE הטובים ביותר ב- JavaScript | עורכי JavaScript הטובים ביותר]

מדריכי Jamstack

מחפש להעמיק? בדוק את המדריכים הבאים של Jamstack שיעניקו לך ניסיון מעשי בבניית אתר Jamstack:

  • למפתח דייוויד ניל יש מדריך היכרות טוב לבניית אתר Jamstack, החל בפשטות רבה ואז נעשה מורכב יותר ויותר. 
  • מעבר לבלוג LogRocket, מהנדס התוכנה Ogundipe Samuel מספק מבט מעמיק, צעד אחר צעד, על בניית אתר מסחר אלקטרוני על עקרונות Jamstack. 
  • Netlify מציעה הדרכה בווידאו בת שלוש פלוס המכסה שטח רב מהיסודות לנושאים מתקדמים יותר. 

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