آموزش vue.js در کنار Laravel

از اونجایی که مقاله ی آموزشی برای vue.js خالی و laravel خالی یک عالمه در اینترنت وجود داره ولی مقاله ی خوبی برای مچ کردن لاراول و ویو جی اس پیدا نکردم این مقاله را نوشتم تا افرادی که مثل من پروژه های لاراولی در کنار vue.js دارند شاید به دردشون بخوره .

لاراول و ویو جی اس ، زوجی که این روزها در بحث وب محبوب شده است

جالبه بدونید که laravel و vue.js بعنوان یک مکمل در کنار همدیگر همه چیز را میسازند .

هر دو فریمورک هستند یکی برای فرانت اند و یکی برای بک اند و اگر برنامه نویس وب باشید میدانید که کلا بحث توسعه ی وب دو بخش اصلی است :‌ بک اند ( backend ) و فرانت اند ( frontend ) .

فریمورک Laravel بعنوان قویترین و پراستفاده ترین فریمورک زبان برنامه نویسی PHP است که برای ساخت انواع وب سایت ها در سمت سرور یا همان بک اند کاربرد داره .

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

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

ولی من در این مقاله قصد دارم تا جایی که بتونم بصورت جدا در مورد اینها توضیح بدم بعد بریم سراغ جفت کردن این دو عزیز :)

خلاصه ای درباره ی فریمورک Vue.js

بطور خلاصه vue.js که بصورت ویو یا view تلفظ میشود یک فریمورک opensource برای زبان جاوااسکریپت است که با هدف توسعه ی فرانت اند اپلیکیشن های تحت وب طراحی شده است .

یکی از تمرکزهای دیگر Vue.js ساخت وب سایت های تک صفحه ای یا spa بوده است .

این فریمورک توسط Evan You ساخته شده و روی ساخت کامپوننت های مختلف روی صفحه ی وب تمرکز میکنه تا با استفاده از DOM مجازی که در سایت میسازه میتونه رابط کاربری یا فرانت اند را بصورت پیشرفته ای کنترل بکنه

تا امروز فریمورک ویو در گیتهاب خودش ، حدود 156 هزار ستاره خورده :)

5 ویژگی خوب Vue.js

• Virtual Dom
• Data Binding
• Components
• Animation/ Transition
• Templates

من قصد ندارم بصورت مفصل درباره ی vue.js اینجا صحبت کنم اگر دوست دارید میتونید این دوره ی آموزشی فارسی زبان درباره ی Vue.js را ببینید که عالیست .

خلاصه ای درباره ی فریمورک Laravel

لاراول یک فریمورک رایگان و اوپن سورس برای طراحی وب است که بر روی زبان برنامه نویسی PHP استوار شده است .

این فریمورک توسط Taylor Otwell ساخته شده .

لاراول دائما بروزرسانی میشود و یکی از ویژگی های خوب این فریمورک است که باعث محبوبیت آن شده است . طبق قول تیم توسعه باید هر 6 ماه یکبار نسخه ی جدیدی منتشر شود .

5 ویژگی یا ابزار خوب Laravel را ببینیم :‌

• Eloquent ORM
• Template Engine
• Artisan
• Automatic Package Delivery
• Database Migration

اما Vue.js چطور کار میکنه ؟‌

اگر در سال های قبل با فرانت اند وب کار کرده باشید مطمئنا متوجه دردسرهای جاوا اسکریپت یا فریمورک های جاوا اسکریپت برای کنترل DOM ( Document Object Model ) داشتید .
اگر بخواهیم بصورت مختصر درباره ی DOM و کاربرد آن توضیح دهم به توضیح زیر اکتفا میکنم .

اگر در یک صفحه ی وب جاری بخواهید فقط بخشی از سایت بدون اینکه صفحه ی سایت ریفرش شود یا دوباره بصورت کلی در مرورگر لود شود شما باید DOM مربوط را آپدیت کنید .
سپس شما میتوانید بدون لود شدن کل صفحه ی سایت فقط یک بخش کوچک به نام DOM را لود کنید . اینطوری حس اپلیکیشن بودن سایت جاری به کاربر القا میشود .
بذارید یه مثال بزنم براتون روشن بشه :
فرض کنید در یوتیوب در حال تماشای یک فیلم هستید و یهو یه کامنتی توسط یه کاربر دیگه زیر اون ویدیو نوشته میشه و یوتیوب قصد داره که شما از این کامنت جدید مطلع شوید .
یکی از راه ها این است که کل صفحه دوباره لود شود و شما بتوانید کامنت را بخوانید خب مشکل اینجاست در این صورت تماشای ویدیوی شما قطع میشود ویدیو از ابتدا شروع میشود و همه چیز بهم میخورد . باید لود شدن بخش نظرات بدون دخالت در امور بخش پخش ویدیو و دیگر بخش های سایت انجام بگیره .
در این صورت بخش نظرات سایت بعنوان یک DOM در نظر گرفته میشود و خودش آنجا بروزرسانی میشود و شما در نتیجه وقتی هنگام تماشای ویدیو به بخش نظرات نگاهی بکنید میبینید که یک نظر جدید بصورت خودکار اضافه شده است .

فریمورک Vue.js قصد دارد تمام این کار ها را توسط DOM مجازی یا Virtual DOM انجام دهد . آنچه اساسا Vue.js انجام میدهد ساختن یک کپی از DOM و ذخیره ی آن است .

اگر تغییری در بخشی از DOM ایجاد شود ، دقیقاً همان بخش DOM را بدون بارگذاری مجدد کل DOM به روز می کند. این بدان معنی است که نظرات ویدیو یوتیوب در مثال بالا ، بدون اینکه حتی متوجه آن شوید ، به روز می شوند.

فریمورک Vue.js کامپوننت های واکنشی و سازنده ای را فراهم میکند .

Vue.js به هر بروزرسانی پاسخ میدهد و تغییرات لازم را سریعا در DOM اعمال میکند .

کامپوننت های سازنده ی آن میتوانند براساس هر چیزی که نیاز است انتخاب و ترکیب شوند .

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

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

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

چرا باید Vue.js در کنار Laravel استفاده شود ؟

شاید اینطور تصور کنید که خب Laravel یک فریمورک برای PHP هست و بک اند

و Vue.js هم یک فریمورک برای JavaScript هست و برای فرانت اند

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

اما این مسئله از دیدگاه من اینطور است که Vue.js از Laravel پشتیبانی میکند آن هم نه از طرف بلکه به طرق مختلفی این ساپورت انجام میگیرد .

در زیر دلایل اینکهه چرا باید Vue.js را با Laravel استفاده کنید و چطور Vue.js از Laravel پشتیبانی میکند آورده ایم :

دلیل 1 : همه چیز در فرانت اند اتفاق میوفتد .

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

دلیل 2 :‌ فراهم کردن کامپوننت های واکنشی

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

از آنجایی که کامپوننت های ویو به راحتی با Laravel سازگار است شما میتوانید توسط لاراول هر بروزرسانی را در قالب یک کامپوننت به اپلیکیشن خود ارائه دهید .

دلیل 3 :‌ ساخت صفحات فرانت اند پیچیده بصورت بهینه

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

استفاده از جاوااسکریپت خالی یا دیگر کتابخانه های جاوا اسکریپت مثل Jquery که از سیستم Virtual DOM یا DOM مجازی پشتیبانی نمیکنند نه تنها کار توسعه و برنامه نویسی را سخت میکند بلکه نتیجه ی نهایی مطلوب و بهینه نخواهد بود . اپلیکیشن تحت وب شما دارای سرعت کم و باگ های زیادی خواهد بود .

ولی vue با عنایت به استفاده از Virtual DOM این کار را بسیار راحت تر وبهینه تر انجام داده است .

شما همچنین میتوانید Flux, Redux و Vuex را نیز تست کنید که برای ساختن اپلیکیشن های پیچیده مناسب هستند و کار را راحت میکنند .

دلیل 4 :‌ توانایی ساختن سایت های تک صفحه ای یا Single Page Application
شاید میشه گفت بهترین و بزرگترین اتفاق در بحث وب ، در دهه ی گذشته اختراع SPA ها یا سایت های تک صفحه ای بود .

نمونه ی خوب نسخه ی وب تلگرام است . اپلیکیشنی که تحت وب است یعنی یکبار اپلیکیشن لود میشود و سپس برای فعالیت ها دیگر کاربر هیچ احساسی بابت ارسال ودریافت دیتا به سمت سرور ندارد .

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

حالا نسخه ی وب تلگرام با انگولار است ولی به راحتی با ویو هم قابل پیاده سازی است .

دلیل 5 :‌ یادگیری و استفاده ی آسان
ویو راحت است . به سادگی میتوانید آموزش ببینید و به سادگی تمام با vue کدنویسی کنید . یکی از دلایل انتخاب سریع این فریمورک توسط جامعه ی زیادی از برنامه نویسان سادگی یادگیری آن بود . سریعا میتوانید در عرض چند روز مسلط شوید و آنرا به سایت خود اضافه کنید .

ادامه دارد ...