Jamstack چیست؟ انقلاب استاتیک وب سایت در حال توسعه وب

بیاموزید که چگونه Jamstack شیوه‌های توسعه مدرن را با صفحات وب استاتیک قدیمی ترکیب می‌کند تا توسعه‌دهندگان بتوانند وب‌سایت‌های سریع‌تر بسازند.

• معماری Jamstack
• وب‌سایت‌های ثابت و Jamstack
• Netlify و Jamstack
• Jamstack با گتسبی
• CMS بدون سر
• چرا از Jamstack استفاده کنیم؟
• چه زمانی از Jamstack استفاده نکنید
• آیا Jamstack محبوب است؟
• آموزشهای Jamstack

Jamstack یک فلسفه توسعه وب محبوب است که هدف آن افزایش سرعت توسعه وب و زمان لازم برای دانلود یک صفحه وب است. با طراحی از devops و CI/CD، Jamstack تکنیک‌های قدیمی را برای ساخت صفحات وب تعاملی، تغییر اجرای کد در زمان بارگذاری از سرورهای وب و به سمت جاوا اسکریپت درون مرورگر ارتقا می‌دهد. و خدمات خارجی قابل دسترسی از طریق API. نتیجه نهایی یک رویکرد توسعه‌دهنده پسند برای ساختن وب‌سایت‌های ثابت است که خیلی سریع رندر می‌شوند و می‌توانند به راحتی برای چندین پلتفرم سفارشی شوند.

معماری Jamstack

Jamstack یک معماری برنامه وب مبتنی بر سه ستون است که حروف اول را در نام خود ارائه می دهد: JavaScript، APIs، و نشانه گذاری. صفحات وب در یک سایت Jamstack از زبان نشانه گذاری استاندارد تشکیل شده است، بنابراین می توان آنها را در هر مکانی ساخت و آزمایش کرد، بدون وابستگی به سرورهای برنامه یا فناوری های سمت سرور مانند Node.js. هر عملکرد تعاملی توسط کد جاوا اسکریپت استاندارد که در مرورگر اجرا می‌شود، ارائه می‌شود که از طریق HTTPS با APIهای قابل استفاده مجدد تماس می‌گیرد. این تماس‌ها برای دسترسی به داده‌های خارجی یا هر قابلیت دیگری که نمی‌تواند در خود صفحه وب ایجاد شود استفاده می‌شود.

برای درک اینکه چرا Jamstack انقلابی است، پشته LAMP را در نظر بگیرید، که نمونه ای از روشی است که اکثر توسعه دهندگان در مورد توسعه وب در ۱۵ سال گذشته فکر کرده اند. LAMP مخفف Linux (سیستم عاملی که اکثر سرورهای وب را تامین می کند)، Apache (نرم افزار سروری که روی آن ماشین های لینوکس اجرا می شود)، MySQL ( پایگاه داده ای که داده های برنامه وب در آن ذخیره می شود)، و PHP/Perl/Python (زبان مورد استفاده برای نوشتن کد سمت سرور). هنگامی که مرورگر خود را به یک وب‌سایت مبتنی بر LAMP هدایت می‌کنید، وب سرور کد سمت سرور را اجرا می‌کند که صفحه وب را در لحظه تولید می‌کند و داده‌ها را در صورت نیاز از پایگاه داده MySQL ترسیم می‌کند.

معماری LAMP به توسعه‌دهندگان اجازه می‌دهد تا وب‌سایت‌های پویا و تعاملی ایجاد کنند، اما به یک وب سرور قدرتمند نیز نیاز دارد—و هر چه یک سایت ترافیک بیشتری دریافت کند، به قدرت محاسباتی سمت سرور بیشتری نیاز دارد. حتی با وجود یک سرور کاملاً برجسته، ساخت و بارگذاری صفحات وب پویا زمان زیادی طول می کشد. در دنیایی از افراد با بازه توجه کوتاه، که اغلب در حال مرور وب با تلفن خود هستند، این تأخیر به یک نقطه دردناک تبدیل شده است.

Jamstack به عنوان بخشی از جنبش وب سایت ایستا متولد شد، که در اواسط دهه ۲۰۱۰ به عنوان واکنشی در برابر این مدل سنتی از نحوه عملکرد یک وب سایت به وجود آمد. برای درک Jamstack، باید فناوری پشت وب‌سایت‌های استاتیک را بدانید.

وب سایت های استاتیک و Jamstack

اگر مجبور بودید به یک تازه کار کامل توضیح دهید که وب چگونه کار می کند، ممکن است چیزی شبیه به این باشد: جایی در سیستم فایل سرور وب فایل های HTML وجود دارد که با آدرس های HTTP قابل دسترسی هستند، که مرورگر وب آن ها را دانلود می کند و سپس برای ایجاد آنها تفسیر می کند. یک صفحه وب اما این توصیفی از یک وب‌سایت استاتیک است: فرض می‌کند که فایل‌های HTML از قبل وجود دارند که مرورگر وب به دنبال آنها می‌گردد. اما بخش زیادی از وب در دهه گذشته تحت تسلط وب سایت های پویا بود، که فایل های HTML را در پاسخ به درخواست های وب، اغلب بر اساس پارامترهایی که از طریق فرم ها یا در URL به سرور وب ارسال می شود، تولید می کنند. خودش.

مولدهای سایت استاتیک

در روزهای اولیه وب، زمانی که صفحات وب همیشه ثابت بودند، بسیاری از توسعه دهندگان وب کد HTML را با دست می نوشتند. با پیچیده تر شدن صفحات وب، ابزارهایی مانند Dreamweaver Macromedia وارد شدند و شروع به تولید صفحات HTML ایستا به صورت برنامه ریزی کردند. با شروع حرکت وب سایت ایستا، موج جدیدی از تولیدکنندگان سایت استاتیک شروع به ظهور کردند، از جمله گتسبی، هوگو و جکیل. برخلاف ابزارهای WYSIWYG مانند Dreamweaver، ژنراتورهای سایت استاتیک از خط فرمان هدایت می‌شوند و طوری طراحی شده‌اند که به خوبی با فرآیندهای CI/CD یکپارچه شوند. فایل‌های HTML توسط این ابزارها، اغلب بر اساس محتوای نوشته شده در Markdown، تولید می‌شوند و به‌طور خودکار در یک مخزن کنترل نسخه مانند GitHub آپلود می‌شوند. از آنجایی که این فایل‌ها آماده برای تولید علامت‌گذاری می‌شوند، صفحات ثابت در وب‌سایت زنده به‌طور خودکار به‌روزرسانی می‌شوند.

شبکه های تحویل محتوا

نکته مهمی که باید در نظر داشت این است که ایستا در این زمینه به صفحات وب ۱.۰ ساده که تعاملی نیستند دلالت نمی کند. این صفحات می توانند شامل جاوا اسکریپت پیشرفته ای باشند که در مرورگر اجرا می شود و API را با پایگاه داده ها، عملکرد سمت سرور یا توابع بدون سرور میزبانی شده برقرار می کند. اما از آنجایی که هیچ یک از این اجراها روی سرور وب اتفاق نمی‌افتد، یک سایت ثابت نیازی به یک میزبان وب صنعتی مجهز به پایگاه داده ندارد. بسیاری از سایت‌های ثابت در شبکه‌های تحویل محتوا یا CDN مستقر شده‌اند، جایی که محتوا در چندین سرور در سراسر جهان منعکس می‌شود تا به سرعت به کاربران در هر کجا تحویل داده شود.

Mathieu Dionne، رهبر بازاریابی در Snipcart، روزهای اولیه این دنیای جدید از وب سایت های ثابت را شرح می دهد. یک پست وبلاگ، و اشاره می کند که در حدود سال ۲۰۱۵، “بنیانگذاران Netlify … به تازگی اصطلاح “Jamstack” را برای بررسی مفهوم منفی “وب استاتیک” ارائه کرده بودند.”

ما فرآیند Jamstack را در این بخش توضیح داده‌ایم. اکنون، اجازه دهید به طور خلاصه به Netlify و نقش آن در اکوسیستم Jamstack بپردازیم.

Netlify و Jamstack

Netlify یک شرکت رایانش ابری و میزبانی وب است و یکی از بنیانگذاران آن، Mathias Biilmann، اصطلاح Jamstack را ابداع کرد. خدمات Netlify برای مشتریانی که می خواهند بر اساس فلسفه Jamstack سایت بسازند، طراحی شده است.

Netlify ادعا می‌کند که مشکل خاصی را که باعث می‌شد وب‌سایت‌های ثابت را متوقف کند، شکسته است، که ابطال کردن حافظه پنهان است. وب‌سایت‌های پویا مبتنی بر پایگاه داده ممکن است منابع سرور زیادی را مصرف کنند، اما می‌توانید مطمئن باشید که آخرین نسخه وب‌سایت شما را برای هر بازدیدکننده‌ای که بازدید می‌کند ارائه می‌کنند. از آنجایی که وب‌سایت‌های Jamstack اغلب بر روی چندین سرور توزیع‌شده یک CDN میزبانی می‌شوند، به‌روزرسانی‌ها ساده‌تر نیستند. از چند دقیقه تا چند ساعت طول می کشد تا هر سرور CDN متوجه شود که نسخه کش سایت دیگر معتبر نیست. برای حل این مشکل، CDN Netlify بی اعتباری حافظه پنهان فوری برای فایل های HTML.

در سال‌هایی که Netlify پرچم Jamstack را برافراشت، این شرکت از این فناوری به‌عنوان ستون اصلی ارائه PaaS خود استفاده کرده است و یک پلتفرم محتوا برای شرکت‌های بزرگی مانند نایک و پلتون فراهم می‌کند.

Jamstack با گتسبی

Netlify تنها ارائه‌دهنده میزبانی در فضای Jamstack نیست، و هیچ نوع علامت تجاری یا کنترل اختصاصی بر این اصطلاح ندارد. انواع راه‌حل‌های میزبانی و استقرار Jamstack در دسترس هستند و بسیاری از ارائه‌دهندگان بزرگ ابری در حال انجام این عمل هستند، از جمله Amazon خدمات وب، Google Firebase، و Microsoft Azure. سایر شرکت‌های تخصصی‌تر نیز وارد این فضا شده‌اند، از جمله Gatsby, Inc.، خالق سازنده سایت استاتیک به همین نام.

گتسبی (شرکت) یک خدمات پرپرواز در پشت مولد سایت گتسبی ساخته است. به دلیل ریشه های منبع باز، مولد سایت گتسبی توسط سایر ارائه دهندگان خدمات نیز ارائه می شود، از جمله Netlify.

CMS بدون سر

البته، ساخت و میزبانی وب‌سایت تازه شروع کار است، همانطور که می‌دانید آیا تا به حال مجبور شده‌اید یک وب‌سایت را مدیریت کنید. شما همچنین به راهی برای ایجاد محتوای جدید و افزودن آن به سایت خود نیاز دارید. از آنجایی که افرادی که این کار را انجام می دهند معمولاً برنامه نویس نیستند، به یک ابزار کاربر پسند نیاز دارند – یعنی سیستم مدیریت محتوا یا CMS. CMS های سنتی، مانند وردپرس، یک رابط کاربری (UI) ارائه می دهند که در آن می توانید محتوای وب سایت را وارد کنید، پایگاه داده ای را مدیریت کنید که در آن محتوا ذخیره می شود، و صفحات وب پویا ایجاد کنید که آن محتوا را در پاسخ به درخواست های مرورگر ارائه می دهد.

CMSهای سایت‌های Jamstack متفاوت عمل می‌کنند و عموماً به عنوان headless شناخته می‌شوند. یک CMS بدون هد یک رابط کاربری برای وارد کردن و مدیریت محتوا و یک پایگاه داده یا سایر ابزارهای ذخیره آن ارائه می دهد، اما خود کد HTML را برای تجزیه و تحلیل مرورگر تولید نمی کند. در عوض، صفحات HTML ایستا وبسایت از جاوا اسکریپت برای برقراری تماس با APIهای CMS استفاده می‌کنند و CMS محتوا را در قالبی برمی‌گرداند که جاوا اسکریپت بتواند به یک صفحه وب تبدیل شود.

این سیستم به طور کامل محتوا را از ارائه جدا می کند، که البته ایده آل دیرینه برنامه نویسی است. از آنجا که CMS دارای یک API قابل دسترسی است، چندین صفحه وب می توانند به راحتی از آن استفاده کنند. به عنوان مثال، اگر نسخه‌های جداگانه موبایل، دسکتاپ و ساعت هوشمند وب‌سایت خود را ساخته‌اید، همه این نسخه‌ها می‌توانند به محتوای ذخیره شده در CMS دسترسی داشته باشند.

همانطور که ممکن است انتظار داشته باشید Netlify پیشنهاد خاص خود را در این فضا دارد که NetlifyCMS نام دارد، اما پیشنهادات دیگری نیز وجود دارد. توسعه دهنده Nebojsa Radakovic آنها را در معرفی CMS های بدون هد خود تجزیه و تحلیل می کند. تعداد زیادی از افراد مطرح در آن لیست و همچنین یک نام بسیار آشنا وجود دارد. در حالی که ما از وردپرس به عنوان نمونه ای از یک CMS سنتی استفاده کردیم، می توان آن را به عنوان یک CMS بدون هد نیز برای تقویت یک سایت Jamstack اجرا کرد.

چرا از Jamstack استفاده کنیم؟

ما به بسیاری از مزایای استفاده از Jamstack اشاره کرده‌ایم، اما اکنون که تصویر کاملی دارید، ارزش آن را دارد که دوباره آنها را خلاصه کنیم:

• سرعت: سایت‌های استاتیک سریع‌تر بارگیری می‌شوند—و این فقط یک موضوع راحتی نیست. Google سایت‌های کند را با کاهش رتبه جستجوی آن‌ها جریمه می‌کند و مشتریانی که به پاسخ‌های سریع عادت کرده‌اند، اگر مراحل بارگیری کند باشد، اغلب معاملات تجارت الکترونیک را کنار می‌گذارند.
• تجربه توسعه‌دهنده: توسعه‌دهندگان می‌توانند با استفاده از تکنیک‌های devops که شیوه‌ها و بهره‌وری صنعت را تغییر داده است، سایت‌های ثابت بسازند. و فلسفه Jamstack مجموعه‌هایی از سایت تولید می‌کند که نگرانی‌ها را کاملاً از هم جدا می‌کند، و به توسعه‌دهندگان اجازه می‌دهد تا بر حوزه‌های تخصصی خود تمرکز کنند: طراحان و توسعه‌دهندگان می‌توانند سایت‌هایی را بدون نیاز به تسلط به زبان سمت سرور بسازند، در حالی که توسعه‌دهندگان پشتیبان می‌توانند تمرکز کنند. در API ها سوالات محتوا به طور کامل در حوزه CMS بررسی می شوند.
• انعطاف پذیری: سایت های استاتیک را می توان توسط وب سرورهای سنتی، CDN، سرویس های تخصصی یا ترکیبی از این سه میزبانی کرد. و از آنجایی که CMS های بدون هد از طریق API ها با فرانت اند ها تعامل دارند، می توانید به راحتی سایت هایی برای پلتفرم های متعددی بسازید که محتوای یکسانی را به اشتراک می گذارند.

چه زمانی از Jamstack استفاده نکنید

با همه آن مزایا، هنوز هم باید گفت که Jamstack برای همه مناسب نیست. جنبه دیگر Jamstack که برای نیازهای توسعه دهندگان طراحی شده است این است که اگر می خواهید یک سایت مبتنی بر Jamstack را اجرا کنید، بیشتر از آنچه که بخواهید به توسعه دهندگان متکی خواهید بود. این برای شرکت‌هایی که قبلاً یک تیم توسعه وب اختصاصی با مهارت‌های لازم برای Jamstack را دارند یا می‌خواهند استخدام کنند، چندان بد نیست. اما بسیاری از فروشگاه‌های کوچکتر به استفاده از نرم‌افزارهای تجاری یا منبع باز استفاده می‌کنند که به آنها اجازه می‌دهد وب‌سایت‌های خود را بدون نیاز به مشارکت روزانه توسعه‌دهنده اجرا کنند. سایت‌های تجارت الکترونیک، به‌ویژه، تمایل دارند به طیف گسترده‌ای از افزونه‌ها و کتابخانه‌های توسعه‌یافته در طول سال‌ها برای راه‌حل‌های میزبانی وب سنتی متکی باشند. معادل‌های Jamstack آنها چندان گسترده یا بالغ نیستند، به این معنی که Jamstack همیشه برای تجارت الکترونیک خوب نیست.

آیا Jamstack محبوب است؟

با وجود هیاهویی که پیرامون آن وجود دارد، Jamstack در حال حاضر از بخش کوچکی از همه وب سایت ها پشتیبانی می کند. Web Almanac تخمین زد که در سال ۲۰۲۱، سایت هایی که توسط مولدهای سایت ایستا ساخته شده اند (تقریباً همه آنها مطابق با فلسفه Jamstack ساخته شده اند) فقط حدود ۱ درصد از تمام وب سایت ها. گفتنی است، Jamstack در یک دوره رشد سریع قرار دارد و سهم بازار آن در سه سال گذشته هر سال بیش از دو برابر افزایش یافته است. یک نشانه بزرگ از افزایش علاقه توسعه دهندگان به این فناوری: حدود یک سوم از توسعه دهندگان Jamstack کاملاً تازه وارد صحنه هستند، با کمتر از دو سال تجربه.

آموزش Jamstack

می‌خواهید عمیق‌تر بروید؟ این آموزش‌های برنامه‌نویس Jamstack را بررسی کنید:

• Hasura، شرکتی که بر روی سیستم GraphQL API که توسط گتسبی و دیگر پلتفرم‌های Jamstack استفاده می‌شود تمرکز دارد، یک آموزش سطح بالا دارد که شما را قدم به قدم در ملاحظات معماری و انتخاب هایی که در سایت Jamstack وجود دارد.
• میزبان وب Digital Ocean آموزش خوبی در مورد ساخت سایت نمونه کارها Jamstack با استفاده از Angular و Scully.
• Netlify یک آموزش ویدئویی که زمینه های زیادی از مبانی تا موضوعات پیشرفته تر را پوشش می دهد و شامل مقدمه ای برای ساختن یک سایت Jamstack مبتنی بر پایگاه داده است.

هنگامی که بر مفاهیم اولیه ذکر شده در اینجا مسلط شدید، آماده استفاده از اصول و فناوری های Jamstack برای وب سایت های خود خواهید بود. یادگیری مبارک!