نقشه‌ی راه: نحوه‌ی شروع کار با فریم ورک Vuejs

سلام، در Vuejs تازه کار هستید؟ خب نگرانی‌هایتان را کنار بگذارید و این نقشه‌ی راه که مربوط به توسعه دهندگان vue هست را مطالعه کنید. اینجا من شما را قدم به قدم راهنمایی می‌کنم تا به یک توسعه دهنده Vue تبدیل بشید.

حالا Vuejs چیست؟!

ویو یکی از قوی‌ترین فریم‌ورک‌های جاواسکریپت هست که به صورت متن باز در اختیار عموم قرار گرفته و برای پویا سازی صفحات وب اسفاده می‌شود. این فریم‌ورک برای ساده سازی توسعه‌ی صفحات وب به تازگی شهرت زیادی بین برنامه نویسان پیدا کرده است. تمرکز Vuejs روی لایه‌ی ظاهری(View) می‌باشد. به راحتی و بدون هیچ مشکلی قابل استفاده در پروژه‌های بزرگ فرانت (front-end) هست.

چرا Vuejs؟

ویو تمام قابلیت‌ها و کیفیت لازم برای روان و لذت بخش کردن روند توسعه را دارد. قابل توجه‌ ترین عامل برای استفاده ویو یادگیری آسان و ملایم آن هست که اصطلاحا منحنی یادگیری (Learn Curve) نامیده می‌شود. همچنین سبک، منعطف، ماژولار و بسیار کارآمد هست.

قابلیت‌ها:

• اتصال داده (Data Binding)
• مولفه (Components)
• مدیریت رویداد‌ها (Event Handling)
• انیمیشن (Animation/Transition)
• خصوصیات محاسبه شده (Computed Properties)
• الگو‌ها (Templates)
• واکنش پذیری (Reactivity)

خب، وقتشه که شروع کنیم.

جدول پایین نقشه‌ی راه برای توسعه‌ دهندگان Vuejs را نمایش می‌دهد. این جدول راه‌های تبدیل شدن به یک توسعه دهنده‌ی حرفه‌ای ویو را نشان می‌دهد که توسط MarekBrainhub ساخته شده است.

نکته: اگر برای شروع و یا یادگیری کمی گیج شدید جای نگرانی نیست این نقشه‌ی راه به شما چشم اندازی از مسیر تبدیل شدن به یک توسعه دهنده‌ی Vuejs می‌دهد و شما را راهنمایی می‌کند. در پایان، این به تجربه شما بستگی دارد زیرا شما درك خواهید کرد كه چرا یك ابزار برای بعضی موارد بهتر از ابزار دیگر است. لزوما چیزی که خوش استفاده و مرسوم هست همیشه عالی نیست. بنابراین همین حالا شروع کن و از مسیر نقشه‌ی راه عبور کن. :)

نقشه‌ی راه توسعه دهندگان Vuejs:

اگر دنبال نسخه با کیفیت عکس هستید و یا فکر می‌کنید نقشه نیاز به بهبود دارد، لطفا مشکل یا ایده‌ی خودتان را در GitHub repo به اشتراک بگذارید.

۱. منابع:

مورد اول HTML:

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

• پایه‌ی اولیه HTML را یاد بگیرید.
• چند صفحه‌ی وب به عنوان تمرین بسازید.

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

مورد دوم CSS:

‌صفحات استایل آبشاری که توسط اون‌ها می‌توانیم تمامی خصوصیات ظاهری صفحه‌ی وب‌سایت را تعیین کنیم.

• پایه‌ی اولیه CSS را یاد بگیرید.
• به کمک CSS ظاهر چند صفحه‌‌ی بخش قبلی را بسازید.
• با استفاده از قابلیت grid و flex یک صفحه طراحی کنید.

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

مورد سوم JS: زبان JavaScript که به اختصار JS نیز نامیده می‌شود، یکی از محبوبترین زبان‌های برنامه نویسی است.

• با نحوه‌ی کد نویسی جاوا اسکریپت آشنا شوید.
• عملگر‌های پایه‌ و کار با DOM را یاد بگیرید.
• مکانیسم‌های معمولی را بیاموزید (Hoisting, Event Bubbling, Prototyping).
• چند درخواست AJAX به کار ببرید.
• قابلیت‌های جدید مثل (ECMA Script 6+) را یاد بگیرید.
• در صورت تمایل با کتابخانه jQuery نیز آشنا شوید.

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

۲. مهارت‌های توسعه عمومی:

در زیر برخی از مهارت‌های مورد نیاز شما وجود دارد زیرا با یادگیری این مهارت‌ها می‌توانید سفر خود را به عنوان یک توسعه دهنده‌ی Vuejs با خیال راحت آغاز کنید. این بخش یکی از قسمت‌های حیاتی این نقشه‌ی راه برای توسعه دهندگان Vuejs هست، زیرا این مهارت‌ها بسیار ضروری است.

• از سرچ کردن در گوگل نترسید! Power Searching With Google
• پروتکل (HTTPS) و روش‌های درخواست (GET, POST, PATCH, DELETE, OPTIONS) را بشناسید.
• با ترمینال آشنا شوید و تنظمیات پیکربندی shell شامل (bash, zsh, fish) را انجام دهید.
• چند کتاب در مورد الگوهای طراحی بخوانید.
• چند کتاب در مورد الگوریتم‌ها و ساختارهای داده بخوانید.
• گیت (GIT) را بیاموزید، چند مخزن (Repository) در GitHub ایجاد کنید، کد خود را با افراد دیگر به اشتراک بگذارید.

گیت (Git) ابزاری است که برای ذخیره کد و ایجاد نسخه‌های مختلف آن استفاده می‌شود و به شما امکان می‌دهد با توسعه دهندگان دیگر همکاری کنید. مکان برتر برای ذخیره کد و همکاری در مورد نرم افزار منبع باز GitHub است.

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

۳. ویو را در وب سایت رسمی Vuejs.org بیاموزید یا برخی از دوره ها را بگذرانید:

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

۴. با ابزارهای مفیدی که می‌توانند به شما کمک کنند آشنا شوید:

لازم است مدتی روی ابزارهای یادگیری سرمایه گذاری کنید که می‌خواهید از آنها به عنوان توسعه دهنده Vuejs استفاده کنید مانند ابزارهای ساخته شده، ابزار آزمایش واحد (Unit Testing)، ابزارهای رفع اشکال و غیره استفاده کنید.

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

این ابزارها به شما امکان میدهند صفحات را در خود مرورگر آزمایش و تنظیم کنید، با روش‌های مشخص که مرورگر چگونه کد شما را تفسیر می‌کند.

مورد اول مدیران بسته (Package Managers):

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

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

در زیر چند مدیر بسته مفید آورده شده است:

• مدیر بسته npm
• مدیر بسته yarn
• مدیر بسته pnpm

مورد دوم اجرا کنندگان دستورات (Task Runners):

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

• اسکریپت npm scripts
• ابزار gulp

مورد سوم Vue-cli ابزار استاندارد برای توسعه Vuejs:
ویو یک CLI یا همان Command-Line Interface رسمی برای داربست کردن سریع برنامه‌های جاه‌ طلبانه‌ی تک صفحه‌ای (Single Page) فراهم می‌کند. همچنین تنظیمات ساخت همراه باتری(batteries-included) را برای نصب فرانت فراهم می‌کند. علاوه بر این، فقط چند دقیقه طول می‌کشد تا hot-reload ، lint-on-save و production-ready را راه اندازی کند.

مورد چهارم Webpack بسته نرم افزاری برای جاوا اسکریپت و دوستان:

بسیاری از ماژول‌ها را به چند دارایی همراه بسته بندی می‌کند. تقسیم کد امکان بارگذاری قسمت‌های برنامه را در صورت تقاضا فراهم می‌کند. از طریق "بارگذلری کننده‌ها (loaders)"، ماژول ها می‌توانند مولفه‌‌های CommonJs ، AMD ، ES6 ، CSS تصاویر ، JSON ، Coffeescript ، LESS و موارد سفارشی شما باشند.

برای یادگیری می‌توانید از beginner’s guide to webpack استفاده کنید.

مورد پنجم Parcel بسته نرم افزاری سریع وب بدون نیاز به پیکربندی:

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

مورد ششم کتاب داستان (StoryBook): مولفه‌های ضد گلوله‌ی UI را با سرعت بسازید:

این Storybook ابزاری متن باز برای توسعه‌ی مولفه‌های UI به صورت جداگانه برای React ، Vue ، Angular و موارد دیگر است. ساخت رابط‌های کاربری خیره کننده را سازمان یافته و کارآمد می‌کند.

۵. طراحی ظاهر (Styling):

مورد اول پیش پردازنده CSS:

پیش پردازنده CSS برنامه ای است که به شما امکان می‌دهد CSS را به نحو منحصر به فرد خود پیش پردازنده تولید کنید. پیش پردازنده‌ها می‌توانند کد CSS را سازماندهی کنند.

• پیش پردازنده Sass/CSS
• پیش پردازنده PostCSS
• پیش پردازنده Less
• پیش پردازنده Stylus

مورد دوم کتابخانه‌های مولفه (Component libraries):

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

• مولفه Quasar
• مولفه Vuetify
• مولفه iView
• مولفه Vuesax
• مولفه Bootstrap-Vue

۶. الگوی مدیریت حالات (State Management Pattern):

این یک برنامه خودمختار با قطعات زیر است:

• حالت (State)، منبع حقیقت است که برنامه ما را هدایت می‌کند.
• ظاهر (View)، نقشه ای اعلانی از حالت (State) است.
• اقدامات (Actions)، راه‌های احتمالی تغییر حالت(State) در واکنش به ورودی‌های کاربر از در قسمت ظاهر(View).

مورد اول ماندگاری داده (Data persistence) یا همان vue-persistedstate:

مورد دوم Vuex

۷. مسیر یابی (Routing):

مسیریابی فرآیند انتخاب مسیر برای ترافیک در یک شبکه، بین و یا از طریق چندین شبکه است. به طور گسترده، مسیریابی در انواع مختلفی از شبکه ها انجام می‌شود، از جمله شبکه‌های سوئیچ شده مدار، مانند شبکه تلفن سوئیچینگ عمومی (PSTN) و شبکه‌های رایانه ای مانند اینترنت.

در زیر برخی از ابزارهای مفید آورده شده است:

• ابزار Vue Router
• ابزار Router5
• ابزار Vue-component-router

برای یادگیری می‌توانید از Vue Site استفاده کنید.

۸. سرویس گیرنده API یا همان (API Clients):

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

مورد اول GraphQL:

• کتابخانه Apollo
• کتابخانه Relay

مورد دوم REST یا (Representational State Transfer):

• سرویس Fetch
• کتابخانه Axios
• کتابخانه SuperAgent

۹. کتابخانه‌های سودمند (Utility Libraries):

کتابخانه سودمند OpenGL یا همان (GLU) یک کتابخانه گرافیکی رایانه‌ای برای OpenGL هست. شامل تعدادی از توابع است که از کتابخانه‌ی OpenGL پایه برای ترسیم و تهیه طرح سطح بالاتر تا طرح‌های اصلی که OpenGL فراهم کرده استفاده می‌کند. معمولاً با بسته پایه OpenGL توزیع می‌شود.

• کتابخانه Lodash
• کتابخانه Day.js
• کتابخانه Ramda
• کتابخانه Numeral
• کتابخانه RxJS

۱۰. آزمایش (Testing):

تست یک تکنیک است که در آن رابط کاربری گرافیکی (GUI)، عملکرد و قابلیت استفاده از برنامه‌های وب یا نرم افزار آزمایش می‌شود. هدف از آزمایش‌، بررسی عملکردهای کلی برای اطمینان از عدم نقص لایه ارائه‌ی برنامه‌های وب یا نرم افزار با به روزرسانی‌های متوالی است. این یک مهارت حیاتی برای هر توسعه دهنده است.

مورد اول آزمایش واحد (Unit Testing):

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

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

• فریم ورک Jest
• فریم ورک vue-test-utils
• فریم ورک Mocha
• فریم ورک Chai
• فریم ورک AVA
• فریم ورک Tape

مورد دوم آزمایش آغاز تا پایان (End to End Testing):

در آزمایش E2E، توسعه دهنده کل برنامه را با هم آزمایش می‌کند و آن را همانند کاربر آزمایش می‌کند.

اساساً، در اینجا توسعه دهنده از ابتدا تا انتها جریان کار برنامه را آزمایش می‌کند. هدف این است که سناریوهای واقعی کاربر را تکرار کند تا سیستم برای یکپارچه سازی و یکپارچگی داده ها تأیید شود.

• ابزار Nightwatch
• ابزار Selenium, Webdriver
• ابزار Puppeteer
• ابزار Cucumber.js

برای یادگیری می‌توانید از End to End Testing استفاده کنید.

مورد سوم آزمایش یکپارچه سازی (Integration Testing):

تست‌های ادغامی اطمینان حاصل می‌کنند که قسمت‌های مختلف برنامه با هم کار می‌کنند. این یکی از حیاتی‌ترین و مهمترین آزمایشات است.

• ابزار Karma

۱۱. بین المللی سازی (Internationalization):

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

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

• پلاگین vue-i18n

۱۲. رندر سمت سرور (Server-Side Rendering):

رندر سمت سرور (SSR)، توانایی برنامه برای نمایش صفحه‌ی وب در سرور بجای ارائه‌ی آن در مرورگر می‌باشد. سمت سرور یک صفحه کاملاً رندر شده برای کاربر ارسال می‌کند. بسته‌ی جاواسکریپت کلاینت آن را بر عهده می‌گیرد و به فریم ورک SPA اجازه می‌دهد تا پردازش کند.

• کتابخانه Nuxt

۱۳. تولید کننده سایت استاتیک (Static Site Generato):

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

• ابزار VuePress
• ابزار Gridsome

در اینجا مقاله مفصلی در مورد تولید کننده سایت استاتیک و ۳ روش برای یافتن بهترین مورد آورده شده است. همچنین، می‌توانید نگاهی به تولید کننده‌ی سایت استاتیک برای Vue داشته باشید.

۱۴. اپلیکیشن موبایل (Mobile App):

برنامه‌های تلفن همراه امروزه برای هر شغلی یک ضرورت است. موارد زیر چند فریم ورک مفید هست که می‌تواند به توسعه‌ی برنامه‌های تلفن همراه کمک کند.

• فریم ورک Quasar
• فریم ورک Vue Native
• فریم ورک Nativescript Vue
• فریم ورک Weex

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

۱۵. کامپیوتر دسکتاپ (Desktop):

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

• فریم ورک Quasar
• فریم ورک Electron
• فریم ورک NW.js
• فریم ورک Vuido

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

۱۶. به یادگیری ادامه دهید:

بنابراین، پس از گذراندن از این راهنما، می‌توانید سفر خود را به عنوان یک توسعه دهنده Vuejs آغاز کنید. اگرچه‌، یادگیری تنها رمز موفقیت است. برای آن، شما باید به طور مداوم تمرین کنید و یاد بگیرید.

در زیر برخی از دوره ها و مقالات مفید آورده شده است:

• دوره‌ی VueJS tutorial
• دوره‌ی What is vuejs
• دوره‌ی Vue The complete Guide
• دوره‌ی Learn Vue Js

نتیجه گیری:

خب، این نقشه‌ی راه بود: نحوه‌ی شروع کار با VueJS. مطمئناً بسیار پر جزئیات است، ولی به احتمال زیاد بسیاری از شما بیشتر موارد را از قبل شنیده‌اید یا مطالعه کرده‌اید. حتی اگر نمی‌دانید، نیازی به سردرگمی یا غرق شدن در این نقشه‌ی راه نیست. می‌توانید از بخش‌های کوچک شروع کنید و سپس ادامه‌ی مسیر را دنبال کنید.

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

ممنون از وقتی که گذاشتید، امیدوارم براتون مفید بوده باشه :)