توسعه‌دهی Vue در سال ۲۰۱۹: آنچه که باید بدانید

اگر در زمینه توسعه‌دهی Vue تازه‌کار هستید، احتمالا تعداد زیادی اصطلاح به مانند وب‌اپلیکیشن‌های تک صفحه‌ای، کامپوننت‌های async، رندر کردن سمت سرور و... را در اطراف خود می‌شنوید.

همچنین ممکن است درباره ابزار و کتابخانه‌هایی که خیلی در کنار Vue به آن‌ها اشاره می‌شود، مانند Vuex، Webpack، Vue CLI و Nuxt هم چیزهایی را شنیده باشید.

احتمالا این تعداد بی شمار اصطلاحات، برای شما باعث ناامیدی هستند. شما تنها نیستید! توسعه‌دهندگان مختلفی با سطوح تجربه مختلف، فشار مداوم چیزی که نمی‌دانند، و فکر می‌کنند که باید بدانند را حس می‌کنند.

تلاش برای یادگیری همه چیز به صورت همزمان، غافلگیر کننده و ناموثر خواهد بود، پس من در اینجا یک نقشه سطح بالا را نمایش می‌دهم، که نواحی کلیدی توسعه‌دهی حرفه‌ای Vue را پوشش می‌دهد. شما می‌توانید از این نقشه برای در هدف قرار دادن زمینه‌های یادگیری خود در سال ۲۰۱۹ استفاده کنید.

0. JavaScript و توسعه‌دهی وب پایه

اگر من به شما بگویم هر چیزی که در یک کتاب چینی وجود دارد را یاد بگیرید، شما اول باید زبان چینی را یاد بگیرید، نه؟

به طور مشابه، Vue یک فریم‌وورک JavaScript برای ساخت رابط‌های کاربری وب است. شما قبل از این که به خود Vue وارد شوید، باید اساس JavaScript و توسعه‌دهی وب را بلد باشید.

۱. مفاهیم ضروری Vue

اگر شما یک توسعه دهنده Vue جدید هستید، باید بر روی هسته اکوسیستم Vue که کتابخانه کد Vue، Vue Router و Vuex را شامل می‌باشد تمرکز کنید.

این ابزار در اکثر برنامه‌های Vue برجسته خواهند بود و چارچوبی که اکثر نواحی این نقشه، بر پایه آن می‌سازند (در اصطلاح build می‌کنند) را فراهم خواهند کرد.

امکانات هسته‌ای Vue

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

کامپوننت‌ها

کامپوننت‌های Vue، در واقع عناصر رابط کاربری با قابلیت استفاده مجدد هستند. شما باید نحوه تعریف کامپوننت‌ها، و نحوه ارتباط میان آن‌ها از طریق propها و رویدادها را درک کنید.

با توجه به این که compose کردن با کامپوننت‌ها در ساخت برنامه‌های بزرگ و مقیاس‌‌پذیر با استفاده از Vue اساسی است، یادگیری آن مهم می‌باشد.

‌اپلیکیشن‌های تک صفحه‌ای

معماری اپلیکیشن تک صفحه‌ای (SPA = Single-page Application)، یک صفحه وب تنها را قادر می‌سازد تا به عنوان یک وبسایت چند صفحه‌ای سنتی، و بدون ضعف بارگذاری مجدد و بازسازی کردن صفحه، هر زمان که کاربر به جای دیگری می‌رود عمل کند.

پس از این که شما صفحات خود را به عنوان کامپوننت‌های Vue ساختید، می‌توانید هر کدام را با استفاده از Vue Router، ابزاری برای ساخت SPAها که توسط تیم Vue نگهداری می‌‌شود، به یک مسیر خاص map کنید.

مدیریت state

همینطور که برنامه ما بزرگ‌تر می‌شود و چندین کامپوننت در میان صفحات SPA خود دارید، مدیریت state از نوع global پیچیده می‌شود و کامپوننت‌ها پر از propها و listenerهای رویداد می‌شوند.

یک الگوی خاص به نام Flux، داده‌های شما را در یک مخزن مرکزی قابل پیش‌بینی و پایدار نگه می‌دارد. کتابخانه Vuex که همچنین توسط گروه Vue‌ نگهداری می‌شود، به شما کمک می‌کند تا Flux را در یک برنامه Vue.js پیاده‌سازی کنید.

۲. Vue در دنیای واقعی

همه دانشی که در بخش ۱ به دست آوردید، می‌توانند برای ساخت برنامه‌های Vue که کارایی بالایی داشته و موثر هستند، گرچه بر روی سرور محلی شما قرار دارند مورد استفاده قرار گیرند. اما این برنامه‌ها چگونه در مرحله تولید قرار خواهند گرفت؟

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

اسکلت‌بندی پروژه

پس از این که مکررا در حال ساخت برنامه‌های Vue بودید، پی خواهید برد که برخی پیکربندی‌ها، راه‌اندازی‌ها و ابزار توسعه‌دهنده وجود دارند که تقریبا در هر پروژه‌ای به سراغ آن‌ها خواهید رفت.

تیم Vue ابزاری به نام Vue CLI را نگهداری می‌کند که شما را قادر می‌سازد تا یک محیط توسعه‌دهی Vue را تنها در چند دقیقه راه‌اندازی کنید.

مقالات مرتبط:

• کار با Vue CLI 3
• ۵ پلاگین Vue CLI 3 برای پروژه‌های Vue

برنامه‌های full-stack / تصدیق شده

برنامه‌های Vue واقعی، معمولا رابط‌های کاربری رانده شده بر پایه داده‌ها هستند. این داده‌ها اغلب از یک API امن، ساخته شده توسط Node، Laravel، Rails، Django یا برخی فریم‌وورک‌های سرور دیگر منشا گرفته می‌شوند.

مقاله مرتبط:

• ایجاد اپلیکیشنی مدرن با استفاده از Django و Vue.js

شاید داده‌ها توسط یک اِی‌پی‌آی REST یا GraphQL مرسوم فراهم شوند، یا شاید هم برخی داده‌های real-time از طریق سوکت‌های وب باشند.

شما همچنین باید با الگوهای طراحی که خیلی برای یکپارچه‌سازی Vue در یک پیکربندی full-stack استفاده می‌شوند، و همچنین ملاحظات متنوع برای امن نگه داشتن داده‌های کاربر در یک برنامه Vue آشنا شوید.

آزمایش کردن

اگر می‌خواهید برنامه‌های Vue را تولید کنید، که این برنامه‌ها در فرایند تولید هم قابل نگهداری و هم با ثبات باشند، واقعا باید آزمایش‌هایی (testهایی) را برای آن‌ها فراهم کنید.

در برنامه‌های Vue، استفاده از آزمایش‌ها تضمین می‌کند که کامپوننت‌های شما همیشه خروجی مشابهی (برای مثال HTML رندر شده یا رویدادهای منتشر شده) را برای یک ورودی داده شده (برای مثال propها یا ورودی کاربر) فراهم می‌کنند.

تیم Vue یک ابزار به نام Vue Test Utils را نگهداری می‌کند که شما را قادر می‌سازد تا آزمایش‌هایی را بر روی کامپوننت‌های Vue جداسازی شده ساخته، و اجرا کنید.

بهینه‌سازی

وقتی که شما برنامه خود را به یک سرور کنترل از راه دور گسترش می‌‌دهید و کاربران با یک ارتباط اینترنت کند به آن متصل می‌شوند، سرعت و بازدهی که در هنگام آزمایش آن تجربه کرده‌اید را نخواهد داشت.

برای بهینه‌‌سازی یک برنامه Vue، می‌توانیم به سادگی تنوعی از تکنیک‌ها شامل رندر کردن سمت سرور را به کار بگیریم. در اینجا Vue بر روی یک سرور اجرا می‌شود، و خروجی آن در صفحه HTML که به کاربر تحویل داده می‌شود دریافت می‌شود.

تکنیک‌های دیگر برای بهینه‌سازی هم مواردی مانند استفاده از کامپوننت‌های async و توابع رندر هستند.

۳. ابزار مربوط به کلید

هر چیزی که تا به حال به آن نگاهی داشته‌ایم، یا از هسته Vue.js است و یا از ابزار موجود در این اکوسیستم. اما Vue به صورت جداگانه وجود ندارد؛ بلکه فقط یک لایه در پشته frontend است.

توسعه‌دهندگان Vue تازه‌کار فقط نباید با Vue آشنا باشند؛ بلکه به آشنایی با ابزار کلیدی که بخشی از پروژه‌های بر پایه Vue خواهند بود هم نیاز دارند.

JavaScript مدرن و Babel

برنامه‌های Vue می‌توانند به طور موثر با استفاده از ES5، استاندارد JavaScript که تقریبا هر مرورگری آن را پشتیبانی می‌کند، ساخته شوند.

در جهت داشتن یک تجربه توسعه‌دهی Vue پیشرفته و بهره‌بری از ظرفیت‌های جدید مرورگر، شما می‌توانید برنامه‌های Vue خود را با استفاده از آخرین استاندارد JavaScript، یعنی ES2015 و امکانات موجود در ES2016 و بالاتر بسازید.

گرچه اگر استفاده از JavaScript مدرن را انتخاب کنید، به راهی برای پشتیبانی مرورگرهای قدیمی‌تر نیاز خواهید داشت؛ در غیر این صورت محصول شما برای اکثر کاربران کار نخواهد کرد.

ابزار مربوط به بایگانی کردن آن، Babel نام دارد. کار آن transpile کردن (ترجمه و کمپایل کردن) امکانات مدرن شما به امکانات استاندارد است.

Webpack

Webpack یک بستر ماژول است، که یعنی اگر کد شما در ماژول‌های مختلفی ساخته شده است (برای مثال فایل‌های JavaScript مختلف)، Webpack می‌تواند این ماژول‌ها را در یک فایل تنها که برای مرورگر قابل خواندن است، بسازد.

Webpack همچنین به عنوان یک pipeline، شما را قادر می‌سازد تا قبل از این که کد شما برای مثال با استفاده از Babel، Sass یا TypeScript ساخته شود، آن را تغییر شکل دهید؛ و همچنین می‌تواند برای بهینه‌سازی برنامه شما با مجموعه‌ای از پلاگین‌ها استفاده شود.

بسیاری از توسعه دهندگان درک Webpack را سخت می‌دانند، و پیکربندی آن را حتی سخت‌تر؛ اما بدون آن برخی از بهترین امکانات Vue مانند کامپوننت‌های تک فایلی، قابل دسترسی نخواهند بود.

TypeScript

TypeScript یک ابر مجموعه از زبان JavaScript است که شامل typeها (رشته، boolean، عدد و...) می‌باشد. هدف TypeScript این است که به شما کمک کند تا کدهای عظیم را بنویسید و باگ‌ها را سریعا پیدا کنید.

Vue.js 3 که در سال ۲۰۱۹ خواهد آمد، به کلی در TypeScript نوشته شده خواهد بود. معنای این مسئله این نیست که شما باید از آن در پروژه‌های Vue خود استفاده کنید؛ بلکه یعنی اگر می‌خواهید در Vue مشارکت داشته باشید و نحوه کار داخلی آن را درک کنید، نیاز خواهد بود که TypeScript را درک کنید.

۴. فریم‌وورک‌های Vue

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

تعداد زیادی فریم‌وورک Vue عالی وجود دارند، اما در اینجا به سه مورد که بیشتر استفاده می‌شوند و مهم هستند اشاره خواهیم کرد.

Nuxt.js

اگر بخواهید برنامه‌های Vue با کارایی بالا بسازید، قطعا مسیریابی بر پایه کامپوننت، رندر کردن سمت سرور، تقسیم بندی کد، و برخی امکانات ضروری دیگر را نیاز خواهید داشت. همچنین امکانات تولیدی پر کاربرد دیگری مانند تگ‌های SEO را هم نیاز خواهید داشت.

فریم‌وورک Nuxt.js تمام این موارد، و حتی گزینه‌های دیگری برای امکانات دیگر مانند PWA (وب‌اپلیکیشن‌های پیش‌رونده) را از طریق پلاگین‌های خود به همراه دارد.

مقالات مرتبط:

• پیاده‌سازی احراز هویت در یک برنامه Vue.js
• با استفاده از Nuxt.js، یک وب‌اپلیکیشن پیش‌رونده بسازید

Vuetify

استاندارد طراحی متریال گوگل در سیستم دستورالعمل‌های مربوط به ساخت رابط‌های کاربری زیبا و منطقی، به طور وسیع مورد استفاده قرار می‌گیرد، که در محصولات گوگل مانند اندروید و همچنین در وب هم مورد استفاده قرار گرفته است.

فریم‌وورک Vuetify طراحی متریال را در مجموعه‌ای از کامپوننت‌های Vue پیاده‌سازی می‌کند. این شما را قادر می‌سازد تا برنامه‌های Vue با ظاهر و استایل طراحی متریال، به علاوه ویجت‌هایی مانند modalها، هشدارها، نوارهای جهت‌یابی، صفحه‌بندی و... را سریعا بسازید.

NativeScript-Vue

Vue.js کتابخانه‌ای برای ساخت رابط‌های کاربری است. اگر می‌خواهید از آن برای رابط‌های موبایل بومی استفاده کنید، می‌توانید از فریم‌وورک NativeScript-Vue استفاده کنید.

NativeScript سیستمی برای ساخت برنامه‌ها با استفاده از کامپوننت‌های رابط کاربری بومی بر روی iOS و اندروید بوده، و NativeScript-Vue هم فریم‌وورکی بر پایه NativeScript می‌باشد، که بهره‌وری از سینتکس و کامپوننت‌های Vue را فراهم می‌کند.

۵. متفرقه

در این بخش پایانی، ما موضوعاتی که مهم بوده، اما یا غیر ضروری هستند و یا در دسته‌های بالا قرار نمی‌گیرند را پوشش خواهیم داد.

توسعه‌دهی پلاگین

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

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

انیمیشن

اگر به انیمیشن‌ها علاقه دارید، سیستم transition در Vue را که همچنین بخشی از هسته Vue است، بررسی کنید. transitionها شما را قادر می‌سازند تا هر زمان که عناصر به DOM اضافه شده، یا از آن حذف می‌شوند، انمیشین‌ها را اعمال کنید.

برای ساخت یک transition، شما کلاس‌های CSS را می‌سازید تا افکت انیمیشن مورد نظر را تعریف کنید. حال افکت مورد نظر می‌تواند محو شدن، تغییر رنگ یا هر چیزی که می‌خواهید باشد. Vue وقتی که یک عنصر به DOM اضافه شده یا از آن حذف می‌شود، آن را تشخیص داده و کلاس‌های مناسب را در طی transition مورد نظر اضافه کرده یا حذف خواهد کرد.

وب‌اپلیکیشن‌های پیش‌رونده

وب‌اپلیکیشن‌های پیش‌رونده (PWAها) وب‌اپلیکیشن‌های معمولی‌ای هستند که با امکانات مدرنی که تجربه کاربری را ارتقا می‌دهند، پیشرفت داده شده‌اند. برای مثال یک PWA می‌تواند cache کردن آفلاین، رندر کردن سرور، اعلانات push یا... را به همراه داشته باشد.

اکثر عملکرد PWA می‌تواند به سادگی و از طریق پلاگین Vue CLI 3، یا با استفاده از یک فریم‌وورک مانند Nuxt.js به یک برنامه Vue اضافه شود، اما شما همچنان باید فناوری‌های کلیدی مانند service workerها را درک کنید.

منبع