معرفی فریمورک NUXT.JS جاوااسکریپت

جاوااسکریپت (JavaScript) از زبان های برنامه نویسی سمت کلاینت (Client) است. در راستای توسعه زبان های برنامه نویسی، چارچوب هایی داخل این زبان طراحی شده اند که به آن ها فریمورک(Framework) گفته می شود. فریمورک ها در کل، امکان طراحی برنامه های کاربردی تری را برای برنامه نویس فراهم می کنند. همچنین حجم کدنویسی توسط برنامه نویس را کاهش می دهند. جاوااسکریپت فریمورک های زیادی از جمله node.js ، vue.js ، react.js دارد. نمی توان گفت یک فریمورک نسبت به فریمورک های دیگر برتری خاصی دارد. فقط هر کدام از آن ها نقاط ضعف و قوتی دارند که سبب توصیه هر کدام برای استفاده در کاربردی خاص می شود. در این مقاله قصد داریم شما را با فریمورک NUXT.JS آشنا کنیم.

فریمورک NUXT.JS

فریمورک NUXT.JS یا NUXT، یک فریمورک سطح بالا است؛ که به صورت منبع باز و رایگان ارائه می شود. طراحی NUXT.JS بر اساس Vue.js ،Node.js ،Express.js ،Babel.js و Webpack صورت گرفته است. توسعه وب اپلیکیشن های تک صفحه ای یا اپلیکیشن های جهانی با استفاده از این فریمورک تسهیل می شود. Nuxt.js چارچوبی برای ایجاد برنامه های Vue.js است. هدف آن کمک به توسعه دهندگان Vue است تا از فناوری های درجه یک، سریع، آسان و به روشی سازمان یافته استفاده کنند.

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

موارد استفاده از NUXT.JS

nuxt.js به شما امکان می دهد انواع مختلفی از برنامه ها را ایجاد کنید. در زیر سه مدل برنامه محبوب ساخته شده با nuxt.js آورده شده است.

• صفحات ایجاد شده استاتیک

این نوع وب سایت به هیچ منبع محتوای خارجی نیاز ندارد؛ زیرا محتوا قبلاً در HTML جاسازی شده است. نمونه‌هایی از این نوع وب‌سایت‌ها شامل وب‌سایت‌های نمونه کار، نمایشی و آموزشی است.

• برنامه های تک صفحه ای (SPA)

این رویکرد توسعه فرانت اند محتوای پویا را از یک سرور ریموت (API) خارجی واکشی می کند و آن را در سمت مشتری نمایش می دهد. اکثر فریم ورک های جاوا اسکریپت مانند  Vue.js، React.js، Angular و Ember.js، همگی فریم ورک های کاربردی تک صفحه ای هستند.

علاوه بر این، سیستم مسیریابی SPA با سرور ریموت تاریخچه HTML 5 یا هَش (hash- یک مدل رمزگذاری یک طرفه) مکان برای مسیریابی به دست می‌آید؛ که به توسعه‌دهندگان این امکان را می‌دهد تا URL وب‌سایت را بدون بازخوانی کامل صفحه تغییر دهند.

• برنامه های کاربردی جهانی

Universal application یا «برنامه جهانی» اصطلاحی است که استفاده از رویکرد رندر سمت سرور برای واکشی داده های سمت سرویس گیرنده روی سرور قبل از رندر کامل صفحه در مرورگر مشتری را توصیف می کند. رندر سمت سرور (SSR) یک مشکل شناخته شده در Vue.js است؛ زیرا شامل پیکربندی های خسته کننده برای درست کردن آن است.

nuxt.js مشکل SSR را در Vue.js حل می کند؛ که برای بهینه سازی موتورهای جستجو (SEO) مفید است. NUXT.JS حتی می‌تواند برنامه‌های Universal را گسترش دهد تا یک برنامه یکپارچه و کامل را در خود جای دهد؛ جایی که فرانت‌اند و بک اند یک پایگاه کد واحد را به اشتراک می‌گذارند.

 عملکرد NUXT.JS  

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

اکشن ها و متدهای اصلی مورد استفاده در nuxt.js

در ادامه با متدهای اصلی فریمورک nuxt.js، آشنا خواهید شد.

• اکشن nuxtServerInit

این اولین قلاب چرخه حیات است که در صورت فعال بودن فروشگاه Vuex در سمت سرور فراخوانی می شود. این یک اکشن Vuex است که فقط در سمت سرور برای پر کردن فروشگاه از قبل فراخوانی می شود. در نهایت می توان از آن برای ارسال سایر اقدامات در فروشگاه Vuex استفاده کرد. ( Vuex یک کتابخانه مدیریت وضعیت برای ایجاد اپلیکیشن‌های پیچیده در Vue.js است).

• تابع validate

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

• متد asyncData

برای واکشی داده ها و ارائه داده ها در سمت سرور استفاده می شود، در حالی که متد fetch برای پر کردن فروشگاه، قبل از رندر صفحه استفاده می شود. به عنوان مثال، هنگامی که یک سایت Nuxt.js بازدید اولیه از صفحه را دریافت کند، به اکشن nuxtServerInit فراخوانی می کند تا حالت های Vuex را بروزرسانی کند. در غیر این صورت، اگر nuxtServerInit تعریف نشده باشد، به مرحله دیگری می رود. سپس به دنبال میان افزارها (middleware)، به ترتیب زیر، می گردند. ابتدا فایل nuxt.config.js را برای هر میان افزار جهانی بررسی می کند. اگر تعریف شده باشد، قبل از بررسی، صفحات طرح بندی برای میان افزار اجرا می شود. در نهایت، میان افزار صفحه جداگانه را اجرا می کند.

پس از اجرای تمام میان افزارها به ترتیب، پویا بودن مسیر را بررسی می کند و متد validate ایجاد شده و اعتبارسنجی شده را اجرا می کند. سپس متد asyncData صفحه را برای واکشی و رندر کردن داده‌ها در سمت سرور، قبل از فراخوانی متد fetch برای پر کردن فروشگاه Vuex در سمت سرویس گیرنده (کلاینت ساید) فراخوانی می‌کند. در این مرحله، صفحه باید تمام داده ها و محتوای مورد نیاز برای نمایش یک صفحه وب مناسب را داشته باشد. سپس صفحه توسط موتور NUXT.JS رندر شده و به بازدید کننده نشان داده می شود و فرآیند تکمیل می شود.

مزایای NUXT.JS

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

• ایجاد برنامه های جهانی بدون دردسر

Nuxt.js  ایجاد برنامه های رندر سمت سرور را بسیار آسان می کند. اگر تا به حال سعی کرده اید یک برنامه رندر سمت سرور با Vue.js توسعه دهید، احتمالاً به دلیل گزینه های پیکربندی بی شماری که برای سمت سرور و سمت سرویس گیرنده موجود است، از موانع دشواری عبور کرده اید.

ویژگی سمت سرور بودن (SSR- Server-side rendered ) قبلاً در Nuxt.js تعبیه شده است و استفاده از آن آسان است. این ویژگی به ویژگی‌های isServer و isClient در اجزای شما اجازه می‌دهد تا تصمیم بگیرید که آیا چیزی را در سمت کلاینت یا سمت سرور ارائه می‌کنید. همچنین روش asyncData را برای واکشی و ارائه داده ها در سمت سرور جزء صفحه شما ارائه می دهد.

•  رندر برنامه های Vue  با مزایای جهانی به صورت ایستا  

وب سایت های تولید شده استاتیک در صنعت وب در حال افزایش هستند و با یک دستور nuxt generate می توانید نسخه ایستا از وب سایت خود را با HTML یا مسیرهای مربوطه ایجاد کنید. دستور nuxt generate دقیقاً مانند رویکرد کاربردی جهانی با تمام ویژگی‌های SSR فعال است، اما برای یک وب‌سایت استاتیک تولید شده است. در Nuxt.js یک وب‌سایت استاتیکی ایجاد می‌شود؛ ساخت یک برنامه جهانی قدرتمند بدون سرور برای قدرت بخشیدن به ویژگی SSR، مثال مناسبی برای آن می باشد.

• دریافت تقسیم خودکار کد

یکی از دلایلی که nuxt.js در عملکرد بسیار سریع است، به دلیل ویژگی تقسیم کد است. جایی که به یک فایل جاوا اسکریپت تنها با کد مورد نیاز، برای اجرای آن مسیر داده می شود، بنابراین، اندازه برنامه شما کاهش می یابد. این ویژگی تقسیم کد از پیکربندی Webpack استفاده می‌کند؛ که هنگام تولید نسخه ایستا از وب‌سایت شما به صورت داخلی ارائه می‌شود.

• بارگذاری مجدد داغ (Hot Reload)

بارگذاری مجدد داغ یک ویژگی عالی است که برای حل و فصل روش زمان‌بر تغییر و به‌روزرسانی توسعه نرم‌افزار اضافه شده است. زمانی که فایلی را در دایرکتوری از ریشه تغییر می دهید، به گونه ای پیکربندی شده است که سرور توسعه را به طور خودکار به روز کند.

هنگام توسعه و کار بر روی فایل‌های vue، از پیکربندی Webpack برای بررسی تغییرات استفاده می‌کند و همه چیز را برای شما کامپایل می‌کند. این رویکرد باعث صرفه جویی در زمان توسعه دهندگان می شود و آن ها را برای توسعه سریعتر برنامه تشویق می کند.

• دریافت کامپایل ES6/ES7

nuxt.js با Webpack و Babel برای ترجمه و کامپایل آخرین نسخه های جاوا اسکریپت، مانند ES6 and ES7 t از پیش ساخته شده است؛ که می تواند در مرورگرهای قدیمی تر اجرا شود. Babel به گونه ای پیکربندی شده است که می تواند همه فایل‌های .vue و کدهای ES6 داخل برچسب‌های اسکریپت را کامپایل کند؛ به طوری که در همه مرورگرها کار می‌کند.

ایجاد برنامه  nuxt.js

ایجاد یک پروژه جدید آسان و سر راست است. شما می توانید یک پروژه با رویکردهای مختلف، همان طور که در اسناد رسمی ذکر شده است، ایجاد کنید؛ اما ترجیح داده شده ترین و توصیه شده ترین روش استفاده از CLI است. CLI  مخفف Command Line Interface یعنی یک رابط کاربری مبتنی ‌بر متن است. برای ایجاد یک برنامه جدید با استفاده از CLI، مطمئن شوید که npx را نصب کرده اید. هنگامی که yarn یا npm 5.2.0  را نصب می کنید، npx به طور پیش فرض ارسال می شود.

سپس دستور زیر را در پوشه ای که می خواهید پروژه خود را قرار دهید تایپ کرده و مطمئن شوید که نام پروژه > را با نام واقعی پروژه جایگزین کنید.

npx create-nuxt-app

cd

npm run dev

درک ساختار پوشه nuxt.js

هنگامی که با استفاده از هر یک از روش‌های نصب مختلف در اسناد رسمی، یک برنامه جدید را داربست می‌کنید، فایل‌ها و پوشه‌های مختلفی که توسط CLI تولید شده‌اند، به شما نمایش داده می‌شود. این فایل ها و پوشه ها حیاتی هستند و نیاز دارند که برخی از پوشه ها بدون پیکربندی اضافی و بدون تغییر باقی بمانند. لیست پوشه های nuxt.js در تصویر زیر کاملاً مشخص است.

صفحات و سیستم مسیریابی NUXT.JS

به کمک nuxt.js ایجاد سیستم مسیریابی، دایرکتوری ها و فایل ها در پوشه page آسان تر می شود. این به طور خودکار یک فایل روتر را بر اساس فایل ها و ساختار پوشه آن دایرکتوری تولید می کند. به عنوان مثال، اگر یک فایل about.vue در دایرکتوری صفحات داشته باشید، به طور خودکار مسیر را تبدیل می کند، سپس می توانید مسیر را در مرورگر خود مشاهده کنید تا محتوای صفحه « about» را ببینید. این سیستم مسیریابی همچنین به شما اجازه می دهد تا تنها با ایجاد فایل ها و پوشه ها، سه مسیر مختلف را تعریف کنید. بیایید این نوع مسیرها را با جزئیات بیشتر بررسی کنیم.

1. مسیریابی اولیه

مسیریابی پایه، مسیرهایی هستند که برای کار کردن به تنظیمات اضافی نیاز ندارند. این ساده ترین نوع مسیریابی در nuxt.js است و می تواند به سادگی  /about ،/contact و غیره باشد. برای ایجاد یک سیستم مسیریابی اولیه، می توانید دایرکتوری صفحات خود را مانند شکل زیر ساختار دهید.

/pages

--| services.vue

--| contact.vue

--|  index.vue

nuxt.js یک فایل روتر را با استفاده از فایل هایی که در فهرست صفحات اضافه کرده اید به طور خودکار تولید می کند. پس از آن تمام فایل ها به شکل منظم ساختار یافته و به طور خودکار مسیریابی می شوند.

router: {
routes: [
   {
    name: 'index',
    path: '/',
    component: 'pages/index.vue'
   },
  {
    name: ‘services’,
    path: '/services’,
    component: 'pages/services’
   },
   {
    name: 'contact',
    path: '/contact',
    component: 'pages/contact'
    },
   ]
}

 2. مسیریابی تودرتو 

مسیرهای تودرتو مسیرهایی هستند که در یک مسیر والد ایجاد می شوند. مسیرهای تودرتو برای ایجاد سطوح مختلف مسیریابی عمیق استفاده می شوند. برای ایجاد مسیرهای تودرتو، یک پوشه والد ایجاد کنید و همه فایل های مسیر را در آن پوشه قرار دهید. بیایید ایجاد یک مسیر تودرتو در nuxt.js را امتحان کنیم.

pages/
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| contact.vue
--| index.vue

در ساختار پوشه بالا، یک فایل و پوشه جدید با نام داشبورد ایجاد کردیم و در مرحله بعد، فایل های user.vue و settings.vue  را به عنوان فرزندان پوشه داشبورد اضافه کردیم. این ساختار پوشه ساده یک روتر با مسیرهایی شبیه به مسیر زیر ایجاد می کند.

router: {
routes: [
  {
    name: 'index',
    path: '/',
    component: 'pages/index.vue'
   },
  {
   name: 'services',
   path: '/services',
   component: 'pages/services'
   },
{
   name: 'contact',
   path: '/contact',
   component: 'pages/contact'
},
{
   name: 'dashboard',
   path: '/dashboard',
   component: 'pages/dashboard.vue',
   children: [
{
   name: 'dashboard-user',
   path: '/dashboard/user',
   component: 'pages/dashboard/user.vue'
},
{
   name: 'dashboard-settings',
   path: '/dashboard/settings',
   component: 'pages/dashboard/settings.vue'
 }
]
}
]
}

 3. مسیریابی پویا 

مسیرهای پویا با مسیرهای ناشناخته ایجاد می شوند. دلیل این موضوع این است که یا به تماس API بستگی دارد یا نمی خواهید صفحه را به طور مکرر ایجاد کنید. این ها مسیرهایی هستند که از یک متغیر یا نام، شماره یا شناسه بازیابی شده از داده های مشتری در برنامه تعریف می شوند. این برای ساخت یک برنامه خبری مفید است، به عنوان مثال، جایی که شناسه یا اسلاگ پستی را که کاربر برای خواندن روی آن کلیک می کند، نمی دانید؛ با مسیر پویا می توانید ID/Slug پست را بازیابی کنید و با ID/Slug پست صحیح را رندر کنید.

برای ایجاد یک مسیر پویا در nuxt.js، یک زیر خط به فایل .vue یا نام دایرکتوری اضافه می کنید. می‌توانید فایل یا فهرست را با هر نامی که انتخاب می‌کنید، نامگذاری کنید؛ اما برای پویا کردن آن باید یک خط ضمیمه شود. به عنوان مثال، اگر یک فایل _slug.vue را در فهرست صفحات تعریف کنید، می توانید با استفاده از آبجکت params.slug به مقدار دسترسی پیدا کنید. ما با یک مثال نحوه ایجاد یک مسیر پویا را نشان خواهیم داد.

pages/
--|user/
-----| index.vue
-----| about.vue
-----| _routeName
-------| index.vue
-------| info.vue
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| _id.vue
--| contact.vue
--| index.vue

اضافه کردن underscore به _id و _routeName یک مسیر پویا برای صفحه با پارامتر ID، همراه با یک مسیر والد با یک پارامتر رشته با مسیرهای فرزند بالا ایجاد می کند. این ساختار صفحه، یک روتر با مسیرهای زیر در فایل ایجاد می کند.

{
name: 'work',
path: '/work',
component: 'pages/work'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
{
name: 'id',
path: '/:id',
component: 'pages/_id.vue'
}
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-about',
path: '/user/about',
component: 'pages/user/about.vue'
},
{
name: 'user-routeName',
path: '/user/:routeName',
component: 'pages/user/_routeName/index.vue'
},
{
name: 'user-routeName-info',
path: '/user/:routeName/info',
component: 'pages/user/route.vue'
},
{
name: 'dashboard',
path: '/dashboard',
component: 'pages/dashboard.vue',
children: [
{
name: 'dashboard-user',
path: '/dashboard/user',
component: 'pages/dashboard/user.vue'
},
{
name: 'dashboard-settings',
path: '/dashboard/settings',
component: 'pages/dashboard/settings.vue'
}
]
}
]
}

اکنون که سیستم‌های مسیریابی مختلفی را که در چارچوب nuxt.js تعبیه شده‌اند با بررسی کردیم، بیایید نحوه ایجاد و مدیریت فروشگاه‌های Vuex را بیاموزیم.

استفاده از Vuex Store در NUXT.JS

nuxt.js مشکل ساختار Vue را با ساده کردن نحوه مدیریت Vuex هنگام ساخت یک پروژه سازمانی حل می کند. پوشه فروشگاه به طور خودکار هنگام ایجاد یک برنامه جدید ساخته می شود. می توانید با ایجاد یک فایل index.js داخل پوشه فروشگاه، فروشگاه Vuex را فعال کنید. با این پیشرفت ساده، فروشگاه Vuex اکنون با استفاده از بهترین شیوه های ذکر شده در اسناد رسمی Vuex ساختار یافته شده است، که توسعه برنامه در مقیاس بزرگ را تشویق می کند.

فایل index.js شما باید دارای ساختار زیر باشد تا با نحوه ساختار فروشگاه Vuex شما مطابقت داشته باشد. بیایید نگاهی به آن بیندازیم.

export const state = () => ({

})
export const getters = {

}
export const mutations = {

}
export const actions = {

}

nuxt.js به شما امکان می دهد از رویکرد تقسیم بر ویژگی در برنامه کاربردی خود در مقیاس بزرگ استفاده کنید. با این رویکرد، فایل‌های فروشگاه Vuex مختلفی را ایجاد می‌کنید تا با ویژگی‌هایی که در برنامه‌های خود دارید مطابقت داشته باشد. به عنوان مثال، اگر برنامه شما دارای ویژگی های کاربران، پست ها و نظرات است، می توانید این فایل های مختلف مانند  users.js، posts.js و comments.js را در فهرست فروشگاه خود ایجاد کنید.

این روش، دسترسی به یک فایل فروشگاهی خاص را بر اساس ویژگی برنامه ها آسان می کند و فرآیند خسته کننده مکان یابی و به روز رسانی داده ها را به یک پیاده روی بدون زحمت در پارک تبدیل می کند.

صحبت پایانی 

nuxt.js یک فریمورک SSR بسیار محبوب و Vue frontend است؛ که به صورت ایستا تولید شده است. این نه تنها مشکل پیکربندی و راه‌اندازی SSR را در برنامه‌های Vue حل می‌کند، بلکه توسعه برنامه‌های کاربردی سازمانی را با رعایت بهترین شیوه‌ها در ساختار و معماری برنامه‌های کاربردی Vue در مقیاس بزرگ تقویت می‌کند.

این مقاله همه چیزهایی را که باید در مورد nuxt.js بدانید، از جمله آنچه می توانید با آن بسازید، بررسی می کند. ما در مورد صفحات ایجاد شده توسط استاتیک، برنامه های کاربردی تک صفحه ای (SPA) و برنامه های کاربردی جهانی و نحوه توسعه آن ها با استفاده از nuxt.js بحث کردیم. اکنون متوجه شده اید که انتخاب nuxt.js برای پروژه سازمانی بزرگ بعدی شما چقدر آسان و سودمند است.

اگر علاقه مند به یادگیری فریمورک NUXT.JS شدید، آموزش این فریمورک را از آکادمی کدیاد از دست ندید.