معرفی فریم ورک Nuxt.js + مزایا و معایب آن

حتما برای شما سوال پیش آمده است که آیا فریم ورک های زبان های برنامه نویسی خودشان نیاز به فریم ورک دیگری دارند یا خیر؟ اگر با فریم ورک Vue.js سر و کار دارید حتماً نام فریم ورک Nuxt.js یا ناکس جی اس را شنیده اید، اما شاید دانشی از کارکرد و مزایای آن نداشته باشید؛ در حقیقت Nuxt.js یکی از فریم ورک های Vue.js است که امروز در این مقاله به معرفی جامع آن خواهیم پرداخت و مزایا و معایب آن را نیز به طور مختصر بررسی خواهیم کرد.

فریم ورک Nuxt.js چیست؟

فریم ورک Nuxt.js یک فریم ورک سطح بالا محسوب می شود که پایه های آن بر Vue.js استوار است. ناکس فرآیند توسعه وب اپلیکیشن های تک صفحه ای یا اپلیکیشن های جهانی Vue.js را آسان می نماید. در حقیقت این فریم ورک با خلاصه سازی جزییات سرورهای مورد استفاده و توزیع کدهای کاربران باعث می شود تا برنامه نویسان بر روی فرآیند توسعه اپلیکیشن تمرکز بیشتری داشته باشند.

هدف اصلی فریم ورک Nuxt.js در واقع این است که با انعطاف پذیری بالای خود به توسعه دهندگان وبسایت این امکان را بدهد تا از آن به عنوان پایگاه اصلی پروژه استفاده کنند. در حقیقت با دانلود این فریم ورک کم حجم و اضافه کردن آن به فایل های JS اقیانوسی از امکانات در اختیار شما قرار خواهد گرفت!

نحوه کارکرد Nuxt.js

زمانی که کاربر از یک وب اپلیکیشن Nuxt.js بازدید می کند یا از طریق <nuxt-link> به سمت یکی از صفحات وب آن ارجاع داده می شود، مراحل زیر اتفاق می افتد :

• وقتی که کاربر از وب اپلیکیشن بازدید می کند اگر اکشن nuxtServerInit به طور واضح در استور تعریف شده باشد، فریم ورک js آن عمل را خوانده و استور را بروز رسانی می کند.
• فریم ورک ناکس جی اس تمامی میان افزارهای (Middleware) موجود را برای وب اپلیکیشن بازدید شده اجرا می کند. ابتدا برای میان افزارهای گلوبال فایل های nuxt.config.js را مورد بررسی قرار می دهد و سپس برای آن صفحه درخواست شده به بررسی فایل های منطبق می پردازد. در آخر نیز صفحه وب را برای میان افزار چِک می کند، به گونه ای که میان افزارها بدین ترتیب اولویت بندی می شوند.
• اگر آن Route بخصوص که کاربر از آن بازدید کرده است یک روت داینامیک حاوی مِتُد validate() باشد، آنگاه می توان گفت که آن مسیر معتبر محسوب می شود.
• سپس فریم ورک js با فراخوانی متدهای fetch() و asyncData() قبل از رندر شدن صفحه اطلاعات را بارگزاری می نماید. متد asyncData() به منظور واکشی (Fetch) و رندر کردن دیتا به صورت سمت سرور (Server-Side) مورد استفاده قرار می گیرد، در طرف دیگر متد fetch() زمانی مورد استفاده قرار می گیرد که پُر کردن استور قبل از رندر شدن صفحه وب مورد نظر باشد.
• در قدم آخر صفحه وب دارای دیتای صحیح رندر خواهد شد.

عملکرد فریم ورک Nuxt.js

فریم ورک Nuxt برای ساخت یک اپلیکیشن ساده Hello World در هرثانیه 190.05 ریکوئست را پردازش می کند. میانگین زمان مصرف شده بر روی هر ریکوئست حدود 52.619 میلی ثانیه است. بر این اساس این فریم ورک در مقایسه با موارد دیگر ضعیف تر عمل می کند، اما در فاکتورهایی نظیر دسترسی، عملکرد و سئو بهترین امتیاز را بدست آورده است.

جامعه کاربری ناکس جی اس

در وبسایت گیت هاب دسترسی به ماژول ها و پروژه های این فریم ورک امکان پذیر است، علاوه بر این ابزارهای دیگری نظیر  awesome-nuxt، ویترین ها، منشن ها، مقالات آموزشی، کتاب، بلاگ ها و الگوهای آغازین نیز برای فریم ورک Nuxt.js موجود است. پشتیبانی این فریم ورک از طریق کانال هایی نظیر تلگرام، انجمن روسیه، چت روم Gitter، شبکه اجتماعی Discord، توییتر و کانال یوتیوب با کاربران ارتباط برقرار می کنند.

مزایای فریم ورک Nuxt.js

1- به راحتی اپلیکیشن های جهانی بسازید :

اپلیکیشن های جهانی (Universal Apps) برای تعریف کدهای JS و اجرای آن ها به صورت سمت سرور (Server-Side) و سمت کاربر (Client-Side) مورد استفاده قرار می گیرند. بسیاری از فریم ورک های پیشرفته جاوا اسکریپت نظیر Vue با هدف توسعه اپلیکیشن های تک صفحه ای (Single-Page) یا همان SPA ها طراحی شده اند.

استفاده از اینگونه صفحات فواید بسیاری را برای وبسایت های قدیمی و سنتی به ارمغان می آورد. برای مثال با استفاده از SPA قادر خواهید بود تا رابط کاربری بسیار سریع بسازید که از نظر بروز رسانی نیز عملکرد پرسرعتی داشته باشد، البته استفاده از اینگونه صفحات معایبی نظیر زمان بارگذاری زیاد را دارند.

علاوه بر این گوگل نیز برای ایندکس کردن صفحات با مشکل مواجه می شود چرا که در ابتدای کار صفحات، محتوایی در خود ندارند تا خزنده های گوگل برای اهداف سئو در آنها جستجو کنند. تمام محتوای صفحات در حقیقت با JS تولید می شوند. اپلیکیشن های جهانی در حقیقت اپلیکیشن های تک صفحه ای هستند با این تفاوت که به جای صفحات خالی index.html، شما قادر خواهید بود تا وب اپلیکیشن را بر روی یک سرور پیش بارگذاری کرده و HTML های رندر شده را به عنوان پاسخ به مرورگرها ارسال کنید. این کار باعث می شود تا زمان فرآیند لودینگ بهبود یابد و کار خزنده های گوگل برای جستجوی تعیین سئوی صفحات وب نیز آسان تر شود.

اما توسعه اپلیکیشن های جهانی کمی پیچیده و دشوار است چرا که برنامه نویس باید تنظیمات زیادی را بر روی سمت سرور و سمت کاربر اعمال کند. شما با استفاده از فریم ورک Nuxt.js قادر خواهید بود کدهای مورد نظر را به راحتی بین سرور و کاربر به اشتراک گذاشته و تمرکز خود را بر روی منطق وب اپلیکیشن بگذارید. این فریم ورک همچنین امکان دسترسی به ابزارهایی مانند isClient و isServer را به شما می دهد که با استفاده از آنها به راحتی قادر به رندر کردن بر روی Client یا Server خواهید بود.

علاوه بر این کامپوننت های بخصوصی مانند no-SSR component نیز در این فریم روک تعبیه شده است که از طریق آن می توان از رندر شدن سمت سرور جلوگیری کرد. در فریم ورک Nuxt.js از طریق دسترسی  به مِتُد asyncData درون کامپوننت ها، امکان واکشی دیتا و رندر کردن آن در برنامه نویسی سمت سرور نیز وجود دارد.

2- رندر کردن استاتیک اپلیکیشن های Vue؛ بهره مندی از مزایای اپلیکیشن های یونیورسال بدون استفاده از سرور :

یکی از شاخص ترین نوآوری های فریم ورک Nuxt.js دستور nuxt generate است که از طریق آن می توان نسخه ای ایستا از وب اپلیکیشن تولید کرد؛ این دستور برای هرکدام از روت ها کدهای HTML تولید کرده و سپس درون فایل خودشان قرار می دهد. برای مثال اگر صفحات زیر را داشته باشیم :

فریم ورک Nuxt.js ساختار زیر را تولید می نماید :

مزیت این کار تقریباً همانند توسعه اپلیکیشن های جهانی است بدین گونه که نشانه گذاری هایی برای افزایش سرعت لودینگ صفحات وجود دارد؛ خزنده های شبکه های اجتماعی نیز با هدف بهبود سئو به راحتی قادرند در صفحات وب سرکشی کنند.

تنها تفاوت موجود در این است که شما دیگر نیازی به سرور نخواهید داشت، بدین معنی که همه چیز در فاز توسعه صفحات وب تولید می شوند. مزیت رندرینگ جهانی بدون نیاز به سرور بسیار کاربردی می باشد به گونه ای که شما قادر خواهید بود از صفحات گیت هاب و آمازون S3 به عنوان هاست وب اپلیکیشن خود استفاده کنید!

3- تقسیم کد به صورت اتوماتیک :

فریم ورک Nuxt.js از طریق یک Webpack مخصوص قادر است تا نسخه ای پایدار از وبسایت شما را تولید کند. به هر کدام از صفحاتی که به صورت استاتیک تولید شده اند، فایل های جاوا اسکریپت به همراه کدهای لازم برای اجرای آن صفحه نیز اختصاص می یابد. این موضوع در حقیقت باعث کاهش سایز فایل های JS شده و در نهایت منجر به افزایش سرعت صفحات وب می شود.

4- راه اندازی از طریق Command-Line مجهز به الگوی آغازین :

فریم ورک Nuxt.js مجهز به قالب ساز starter-template است که کلیه چهارچوب های مورد نیاز برای شروع پروژه را در اختیار برنامه نویسان قرار می دهد و ساختار خوبی برای فولدرها نیز به ارمغان می آورد. پس از نصب Vue CLI از طریق دستور زیر می توان Template Starter را راه اندازی کرد :

سپس با بارگذاری cd در وب اپلیکیشن دستور npm install را نیز اجرا کنید.

5- ساختار پیش فرض فوق العاده :

در اکثر وب اپلیکیشن های کوچک Vue.js مدیریت ساختمان کدها در فایل های مختلف به خوبی در اختیار شما قرار می گیرد. با استفاده از فریم ورک Nuxt.js می توان با یک روش صریح و روشن، وب اپلیکیشن را سازماندهی کرد. در ادامه برخی از دایرکتوری هایی که می توانید برای این هدف استفاده کنید معرفی شده است :

• Components : یک فولدر است که از طریق آن می توان هر کدام از مولفه های js را سازمان دهی کرد.
• Layout : فولدری حاوی طرح های اصلی یک وب اپلیکیشن است.
• Page : یک پوشه است که روت های وب اپلیکیشن را در خود دارد. فریم ورک js تمام فایل های مربوط به Vue در این دایرکتوری را می خواند و سپس روترهای وب اپلیکیشن را می سازد.
• Store : یک فولدر حاوی تمام فایل های ذخیره شده اپلیکیشن Vuex است.

6- بروز رسانی اتوماتیک سرور :

فرآیند توسعه اپلیکیشن از طریق فریم ورک Nuxt.js در مقایسه با روش هایی تنظیم شده توسط شما یا برنامه نویسان دیگر بسیار روان تر است؛ در حقیقت این فرم ورک مجهز به یک سرور با قابلیت بروز رسانی خودکار است که باعث آسان شدن فرآیند توسعه اپلیکیشن می شود.

زمانی که شما در حال کار بر روی فایل های .vue هستید، فریم ورک Nuxt.js با استفاده از Webpack های متنوع تمامی تغییرات را پیگیری کرده و برای شما کامپایل می کند. علاوه بر این شما از طریق دستور npm run dev در پروژه Nuxt قادر خواهید بود تا یک سرور توسعه دهنده ایجاد کنید.

مزایای دیگر فریم روک Nuxt.js

• کامپایل بدون زحمت نسخه های ES6 و ES7
• سیستم روتینگ مجهز به دیتای غیر همزمان
• ماژول های بسیار جذاب
• با یک سرور با قابلیت روزرسانی خودکار می توانید به راحتی اپلیکیشن های تحت وب تولید کنید.
• ارائه فایل Static
• دارای پیش پردازش گرهای Less، Sass و Stylus

معایب فریم ورک Nuxt.js

• این فریم ورک جامعه کاربری وسیعی ندارد، به همین دلیل منابع و مستندسازی کافی از آن در دسترس نیست.
• فاقد برخی مولفه ها و پلاگین های ضروری نظیر Calendar، Google Map و Vector Maps است. البته برخی کامپوننت ها در آن وجود دارند اما به صورت پایدار کار نمی کنند.
• باید از کامپوننت ها و پلاگین های پیچیده تر استفاده کنید. اگر می خواهید برنامه ای با انعطاف پذیری بالا توسعه دهید مجبور خواهید شد تا توابع (مانند JSX) مختلفی ارائه کنید؛ برای مثال باید مولفه های یک بخش را در فضای دیگری رندر کنید.
• پشتیبان ها (Props) باید به طور واضح مشخص شوند. در برخی از مواقع شاید شما قصد تغییر کلاس های CSS به Props را داشته باشید؛ بنابراین باید تمام پشتیبان ها را ذکر کرده یا از توابع $attrs/render و JSX استفاده کنید.
• ترافیک زیاد باعث ایجاد فشار روی سرورها می شود.
• زمانی که یک آیتم را به طور مستقیم از آرایه اصلی items[key]=value راه اندازی کرده باشید یا یک ابزار اطلاعاتی جدی اضافه کنید با اخطارهایی روبرو خواهید شد.
• اداره کردن و کوئری کردن DOM تنها در برخی از هوک های خاص امکان پذیر است.

نمونه یک اپلیکیشن Hello world ساده

در ادامه می توانید یکی از ساده ترین اپلیکیشن های نوشته شده با Nuxt.js را مشاهده کنید :

 کلام آخر

با مطالعه این مطلب ضمن آشنایی با ساز و کار فریم ورک Nuxt.js از مزایا و معایب آن نیز آگاه شدید. هیچ شکی در آن نیست که این فریم ورک باعث آسان شدن فرآیند توسعه اپلیکیشن های تک صفحه ای می شود به همین دلیل کمپانی های بسیاری برای پیش بردن پروژه های خود Nuxt را انتخاب کرده اند. اگر شما هم می خواهید با استفاده از این فریم ورک محبوب وب اپلیکیشن خود را طراحی کنید باید به خاطر داشته باشید که برنامه نویس استخدامی شما باید به طور کامل با Vue.js و Nuxt.js آشنایی داشته باشد.