فریمورک جاوااسکریپت مجموعه‌ای از کامپوننت‌ها و کتابخانه‌ها است که کدی را برای کارهای برنامه نویسی معمول مانند مسیریابی، درخواست‌های HTTP و موارد دیگر فراهم می‌کند. بنابراین لازم نیست همه چیز را از ابتدا بنویسید.
در این مقاله من روند تفکر خود را در مورد اینکه چگونه توانستم یک teck-stack که تمام معیارهای لازم برای ساخت یک وبسایت با ساختار مناسب را برآورده می‌کند، توضیح خواهم داد:
- عملکرد سریع
- سئو و بهینه سازی برای دیده شدن در وب
- مهارت توسعه دهنده برای کارآمد بودن
- نوآوری در زمینه ابزارهای وبسایت
- کنجکاوی طبیعی به عنوان یک توسعه دهنده برای آزمایش فناوری‌های جدید
از آنجا که می‌خواستم به سراغ وب سایتی برمبنای نصب مدرن JAMStack بروم، این گزینه‌ها را براساس محبوبیت فریمورک و کارآمد بودن در اختیار داشتم:
- Next.js
- Gatsby
- Hugo
- Nuxt.js
- و موارد دیگر
شما میتوانید لیست کاملی از تولیدکنندگان سایت‌های ایستا موجود را که توسط Netlify در StaticGen ارائه شده مشاهده کنید، می‌بینید که رقبای زیادی وجود دارد.
Next.js
از آنجا که من حدود 2 سال تجربه حرفه‌ای کار با React دارم، انتخاب Next.js به عنوان فریمورک مورد نظر من بسیار منطقی خواهد بود.
برای تطبیق بیشتر با فریمورک‌های مختلف جاوااسکریپت موجود، تصمیم گرفتم بر خلاف فریمورکی مبتنی بر React مانند Next.js را انتخاب کنم.
Gatsby
من نمی‌خواستم Gatsby را انتخاب کنم، زیرا در حال حاضر از آن برای پروژه دیگری استفاده می‌کنم که اخیراً کار آن را با نام مقایسه DAW آغاز کردم.
جدا از اینکه می‌خواستم ابزارهای مختلف را امتحان کنم، از تجربه توسعه دهنده با استفاده از Gatsby خیلی لذت نبردم، زیرا در عملکرد با مشکل روبه رو شدم و درمورد اینکه چگونه می‌توان تصویر gatsby را به روشی که من می‌خواهم به کار بگیرم و همچنین به دلیل پلاگین‌های تکراری راضی‌ام نکرد.
با این وجود مطمئن هستم که Gatsby برای ماندن اینجاست و به یک فریمورک عالی تبدیل خواهد شد، خصوصا از آنجا که در حال حاضر هم محبوب است و 28 میلیون دلار بودجه در ماه مه 2020 دریافت می‌کند.
Hugo
اگرچه من در برخی موارد علاقه‌مندم زبان Go را برای نوشتن یک پروژه امتحان کنم، اما به دلیل سینتکس الگوی ساختاری گیج کننده آن مورد انتخاب من نیست، به عنوان مثال:
{{ define "main" }}
<main aria-role="main">
<header class="homepage-header">
<h1>{{.Title}}</h1>
{{ with .Params.subtitle }}
<span class="subtitle">{{.}}</span>
{{ end }}
</header>
<div class="homepage-content">{{.Content}}</div>
<div>{{ range first 10 .Site.RegularPages }} {{ .Render "summary"}} {{ end }}</div>
</main>
{{ end }}شاید این یک تولید کننده سایت واقعا قدرتمند باشد، اما هدف من سادگی در پروژه وب سایتم است.
Nuxt.js
ایجاد وب سایتی با Nuxt.js کاملا منطقی خواهد بود، زیرا من تجربه عملی در هر سه فریمورک اصلی جاوااسکریپت (React ، Angular و Vue.js) را کسب کرده‌ام.
Vue.js در گیت‌هاب محبوبیت زیادی پیدا کرده، زیرا تقریبا بهترین ویژگی‌های React و Angular را ترکیب می‌کند. اما همانطور که در ادامه می‌خوانید، در نهایت تصمیم گرفتم که با underdog همراه شوم.
انحراف کوچک
چندی پیش، من Svelte را بررسی کردم و احساس درک یک رویکرد جدید کاملا بنیادی در ایجاد رابط‌های کاربری کردم که مرا مجذوب خود کرد.
همانطور که در وبسایت آن‌ها دیده می‌شود، Svelte بیشتر کارهایی که معمولا در مرورگر انجام می‌شود را به یک مرحله کامپایل تغییر می‌دهد که هنگام ساخت برنامه اتفاق می‌افتد. به نظر می‌رسد این یک روش عالی برای حل مسائل اجرایی است.
بعد از اینکه با Svelte کار کردم، چند لحظه حالت تعجب داشتم که تحت تأثیر سادگی مطلق و تجربه بی‌نظیر توسعه آن قرار گرفتم.
با این وجود، پس از تأیید اینکه بیش از حد زیرزمینی است و ممکن است دیر یا زود با یک مرگ وحشتناک از بین برود و فاقد پروژه‌ای واقعی برای آزمایش آن باشد، آن را رد کردم و Svelte را هم فراموش کردم.
SapperJS
سریعا به سمت تحقیقات اولیه در مورد راه‌اندازی JAMStack این وبسایت رفتم. به طور تصادفی نگاهم به SapperJS افتاد و فهمیدم که با Svelte طراحی شده و توسط همان تیم اصلی توسعه یافته است. پس از یک لحظه خوشحالی، این اطلاعیه را در مستندات آن‌ها دیدم:
"Sapper در حال توسعه است و برخی از موارد ممکن است قبل از انتشار نسخه 1.0 تغییر کنند. این سند در حال انجام است. اگر گیر کردید، برای کمک در اتاق گفتگوی Discord کمک بگیرید.
برای راهنمایی در مورد ارتقا از نسخه‌های قدیمی، به راهنماهای مهاجرت مراجعه کنید."
به نظر می‌رسد هنوز مشکلات بسیاری در آن وجود دارد. من هنوز هم به روزرسانی‌های Angular 2 به 4 و Webpack 3 به 4 را خیلی خوب به خاطر دارم.
بنابراین انتخاب‌های من به نتیجه رسید.
با Nuxt.js پایدار و پخته پیش بروید، به بازار کار مرتبط باشید و در صورت گیر افتادن و مجبور شدن، از یک جامعه بزرگ در Stack Overflow بهره بگیرید.
نسخه اولیه SapperJS را انتخاب کنید چون هنوز نسخه اصلی منتشر نشده است و به طور بالقوه با چند تغییر اساسی در طول مسیر مواجه می‌شود.
اگر شک دارید، مورد دوم را انتخاب کنید
انتخاب ساده‌ای نیست، درست است؟ تصمیم گرفتم از یک همکار سابق پبپرسم که همیشه می‌توانم برای اطلاعات و مشاوره به آن اعتماد کنم.
او حدود 20 سال تجربه در اکوسیستم جاوااسکریپت دارد، بنابراین در چنین شرایطی کمکم می‌کند.
من پرسیدم: "می‌خواهم از SapperJS برای وبسایت خود استفاده کنم، اما هنوز در مراحل اولیه است، آیا این کار درستی است؟"
او پاسخ داد: "باید توجه داشته باشی که ممکن است لازم باشد تعداد زیادی کد را مجددا اصلاح کنی یا دوباره انجام دهی. اما به خصوص در پروژه‌های شخصی، امتحان کردن ابزارهای جدید تجربه بسیار خوبی است."
با تعجب از اینکه او این ایده را رد نکرد و حتی مرا تشویق کرد که آن را امتحان کنم، احساس انگیزه کردم و کار با آن را شروع کردم.
شروع با یک فریمورک underdog به معنای کمبود اکوسیستم افزونه‌ها و راه‌حل‌ها بود، اما من از آن آگاه بودم و آن را به عنوان بخشی از ساخت وبسایت از ابتدا و دیدن آن به عنوان یک تجربه عالی یادگیری پذیرفتم.
پیشرفت سریع با Sapper
من با sapper-template-rollup شروع کردم و سریعا صفحه اول را تنظیم کردم.
اکنون بعد از حدود یک ماه کار در وبسایت، افتخار می‌کنم که به این اهداف رسیده‌ام:
- سایت سریع، کارآمد و کاملا واکنش گرا
- یک وبلاگ با گزینه فیلتر صفحات برای دسته بندی‌ها
- انطباق با GDPR با اعلان کوکی خود و شرکت در Google Analytics
- یک سیستم نظردهی با ReplyBox
- یک ظاهر طراحی سریع از طرح‌ها با Tailwind CSS
- حجم کمتر از 300 کیلوبایت منابع و 20 درخواست در هر صفحه
- بارگذاری تنبل و بهینه سازی تصاویر
- استقرار آسان در Netlify
من بدون نگرانی در مورد عملکرد سایت توانستم تقریبا منحصرا بر روی این اهداف تمرکز کنم، زیرا Sapper با ویژگی‌های پیشرفته و بهینه سازی‌هایی مانند پیش تنظیم مسیر، رندر سمت سرور، تقسیم کد خودکار و پشتیبانی آفلاین ارائه می‌شود.
تجربیات من تا به امروز
در صورتی که احساس می‌کنید کار با SapperJS را شروع کنید، موارد زیر تجربیات من از این فریمورک است:
مزایا
- الگوی آغازگر عالی با گزینه‌های بهینه سازی فراوان ارائه شده است
- این نرم‌افزار بدون هرگونه بخش و خطای عجیب و غریب کار می‌کند، حتی اگر در مراحل اولیه توسعه باشد
- شما به طور خودکار از ویژگی‌های عالی Svelte مانند سینتکس مختصر، lint های داخلی، a11y، CSS استفاده نشده و موارد دیگر بهره‌مند می‌شوید
- سرور توسعه سریع شروع می‌شود و بارگیری ماژول را انجام می‌دهد
- هیچ کامپوننت <link> خاصی برای فریمورک وجود ندارد و فقط تگ <a> است که به صورت پیش فرض پشتیبانی می‌کند
- تضمین یکپارچه سازی روان با Rollup که توسط ریچ هریس، بنیانگذار Svelte ایجاد شده است
معایب
- اسناد Sapper خوب است اما موارد مختلفی را که در حال توسعه هستند، پوشش نمی‌دهد
- بسیاری از ویژگی‌های لازم سئو به طور پیش فرض تنظیم نشده‌اند، به عنوان مثال meta description
- فاقد کتابخانه اکوسیستم و اینکه کامپوننت‌ها یا وجود ندارند یا در اوایل توسعه هستند. به عنوان مثال Svelma (کامپوننت Bulma برای Svelte)
در مجموع من در زمان نوشتن این مقاله با موارد منفی جدی روبه رو نبودم و خوش‌بین هستم که با همه هیاهوهای زیاد در مورد SvelteJS، شاهد رشد پیوسته اکوسیستم به یک فریمورک وب بالغ و قابل احترام خواهیم بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید