Vue.js چیست؟ آشنایی با فریم‌ورک محبوب جاوا اسکریپت

جاوا اسکریپت یک زبان اسکریپت‌­نویسی (یا برنامه­‌نویسی) است که برای افزودن ویژگی­‌های پیچیده (مانند انیمیشن­‌های 2 و 3 بعدی، نقشه­‌های واکنش­‌گرا و…) به وب­‌سایت از آن استفاده می­‌شود. برنامه‌­نویسان جاوا اسکریپت به منظور کدنویسی کم­‌تر و رسیدن به نتیجه مورد نظر در کوتاه‌­ترین زمان، از فریم‌­ورک‌­های این زبان مانند Vue ، React،  Angular و… استفاده می­‌کنند. هر کدام از این فریم‌­ورک­‌ها شامل کتابخانه­‌های کوچک و بزرگ به همراه قواعد و دستورات خاص خود هستند و برنامه‌­نویسان برای انتخاب هر کدام از آن‌ها دلایل خود را دارند. شما نیز اگر در انتخاب کتابخانه­‌های جاوا اسکریپت برای یادگیری مردد هستید، ابتدا باید ویژگی­‌های هر کدام را به خوبی بشناسید. در مطالب قبلی درباره فریم‌ورک React Native صحبت کرده‌ایم و در ادامه این مقاله با فریم‌ورک در حال رشد و محبوب Vue.JS آشنا خواهیم شد.

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

فریم‌ورک Vue js چیست؟

ویو یک فریم‌ورک متن باز زبان javascript است که از آن برای توسعه رابط کاربری استفاده می­‌شود. Vue.js برای اولین بار در دسامبر سال 2013 توسط Evan You، یکی از کارمندان سابق گوگل، به دنیا معرفی شد. ایوان که در شغل پیشین خود از فریم­ورک Angular js در توسعه برنامه‌­ها استفاده می‌کرد، تصمیم گرفت تا فریم‌ورکی برای استفاده در پروژه‌­های خود خلق کند که به اندازه Angular قدرتمند و در عین حال سبک‌وزن و انعطاف‌پذیر باشد.

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

چه ویژگی­‌هایی Vue.js را منحصر به فرد کرده است؟

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

مستندات جامع و ساده

 هر چیزی که برای کدنویسی با فریم‌­ورک Vue.js به آن نیاز داشته باشید، از مباحث ساده و مقدماتی گرفته تا کدهای نمونه، سوالات، روش‌های خطایابی، API و غیره همگی در مستندات سایت Vue.js موجود است. برای دسترسی به مستندات و راهنمای ساده استفاده از Vue.js اینجا را کلیک کنید.

یادگیری آسان

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

جامعه محور بودن JS

 ممکن است برخی برنامه­‌نویسان Vue را انتخاب مناسبی ندانند زیرا این فریم‌ورک توسط شرکت‌­های بزرگی مانند Google که از Angular پشتیبانی می‌کند و همچنین Facebook که ارائه دهنده React Native است، پشتیبانی نمی‌شود. اما استفاده زیاد از این فریم‌ورک توسط برنامه‌نویسان، داشتن انجمن­‌های پرسش و پاسخ فراوان و همچنین استفاده شرکت‌­های بزرگ از این فریم‌ورک، موجب علاقه مندی برنامه‌نویسان سراسر جهان به توسعه و رشد سریع آن شده است؛ به گونه‌­ای که بسیاری از برنامه‌­نویسان Vue را بر سایر فریم­ورک­های جاوا اسکریپت ترجیح می­دهند.

ادغام آسان و انعطاف پذیری

کدهای نوشته شده با فریم­ورک Vue قابل استفاده در هر پروژه­ دیگری هستند. بیش از 81% از توسعه‌دهندگان تاکید کرده‌اند که این ویژگی Vue، مهم­ترین دلیل آن­‌ها برای استفاده از این فریم­‌ورک است. همچنین  Vue.js نسبت به React Native و Angular حجم کمتر و در عین حال سرعت بالاتری دارد.

نسخه­‌های Vue.js

از زمان معرفی این فریم‌ورک تا امروز همواره شاهد توسعه و به روزرسانی آن بوده‌­ایم. اولین نسخه ویو در سال 2013 و جدیدترین نسخه آن (2.6) در فوریه سال 2019 عرضه شده است. در نسخه 3 ویو که در سال 2020 منتشر خواهد شد، شاهد تغییرات گسترده‌ای مانند کم شدن حجم، افزایش سرعت و بازنویسی برخی دستورات خواهیم بود.

فریم ورک جاوا اسکریپت

کتابخانه‌های محبوب Vue js

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

  •  Element UI :  ابزاری برای توسعه UI اپلیکیشن‌­های تحت وب و دسکتاپ است. اگر تمایل به ساخت اپلیکیشن­‌های دسکتاپ با استفاده از فریم‌ورک Electron دارید، این کتابخانه را به شما توصیه می‌کنیم.
  • IView : این کتابخانه ابزاری برای توسعه UI ویجت‌­ها و کامپوننت­‌ها است. با استفاده از این کتابخانه می‌­توانید کدهایی تمیز و قابل نگهداری داشته باشید.
  • Vuetify : برای ساخت کامپوننت­‌هایی با قابلیت استفاده مجدد می‌توانید از کتابخانه Vuetify استفاده کنید. این کتابخانه از طراحی متریال گوگل بهره‌­مند بوده و با تمامی مرورگرهای مدرن از جمله Safari 9 و IE11 سازگار است.
  • Mint UI : مینت یک کتابخانه رابط کاربری موبایل با کامپوننت‌­های Css و Js است. اگرچه این کتابخانه در کشور چین ساخته شده اما ترجمه انگلیسی مستندات آن نیز موجود است. سادگی و حجم بسیار کم این کتابخانه (حدودا 30kb)  از علت‌­های محبوبیت آن است.

کدام شرکت‌­ها از Vue js استفاده می‌­کنند؟

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

Evan You سازنده این فریم‌­ورک اهل کشور چین است و بسیاری از کمپانی‌­های معتبر چینی مانند

  • Alibaba
  • Baidu
  • Xiaomi

و غیره Vue را برای توسعه انتخاب کرده‌اند. بسیاری از شرکت‌­های معتبر مانند ،GitLab، Adobe و com نیز از این فریم‌ورک در توسعه محصولات خود بهره می‌برند. Nasa نیز اخیرا آگهی‌­هایی برای استخدام توسعه‌­دهندگان مسلط به Vue منتشر کرده­ است.

پیش نیازهای یادگیری Vue js

از آنجا که ویو فریم‌ورکی برای توسعه رابط کاربری و برنامه‌نویسی تحت وب است، یادگیری Html5 و Css3 پیش از یادگیری آن ضروری است. ویو مبتنی بر جاوا اسکریپت است پس از این زبان محبوب نیز نباید غافل شد. علاوه بر این زبان‌ها آشنایی با مفاهیم برنامه‌نویسی شی گرایی (Objected-Oriented Programing) هم می‌تواند دید خوبی به شما بدهد گرچه ضروری نیست. اگر با این موارد آشنایی دارید یادگیری ویو برای شما بسیار آسان خواهد بود.

آینده شغلی Vue js

اینطور به نظر می­‌رسد که این فریم­‌ورک توانسته به سرعت جای خود را در دنیای توسعه دهندگان جاوا اسکریپت و فرانت-­اند باز کرده و با رقبای بزرگی مثل انگولار و React Native و غیره رقابت کند. اما موفقیت ویو به همین­جا ختم نمی‌شود و جای رشد و پیشرفت زیادی دارد. کمپانی‌ها نیز ترجیح می­‌دهند همواره از توسعه دهندگانی استفاده کنند که به فریم­ورک­‌های متن باز مدرنی مانند ویو تسلط دارند. شما نیز اگر به توسعه فرانت اند با فریم‌­ورک Vue علاقه­‌مند هستید فرصت را از دست ندهید و همین حالا آموزش حرفه ای فریم ورک VueJS 2.0 را شروع کنید.

 

جمع‌بندی

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

 

فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر:

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۶ دیدگاه
۰۸ بهمن ۱۴۰۰، ۲۱:۲۲
سلام وقت بخیر
من حدودا یک سالی هست که با vuejs کار می کنم و یک پروژه حسابداری تحت وب هم با ویو تولید کردم . از نیازهای این پروژه ، کار به صورت آفلاین ، ذخیره سندهای ثبت شده توسط کاربر در مرورگر و ذخیره در انتهای کار در سرور ، استفاده از کلیدهای میانبر برای کار با امکانات صفحه ، اعمال تغییرات در اسناد در دل خود سند ( عدم باز شدن پنجره های متعدد ) و سرعت بالای لود و نمایش اطلاعات و ... بود .
در ابتدای پروژه اصلا تصمیم به استفاده از ویو نداشتم ولی هر چقدر بررسی کردم دیدم با جیکوئری نمی تونم تمام این قابلیت ها رو به راحتی ایجاد کنم و بعد هم توسعه بدم ، لذا سراغ شناسایی یک فریمورک مبتنی بر جاوا رفتم و بعد از بررسی های زیاد کار با ویو رو شروع کردم .
اگر در این متن امکان ارسال تصویر بود حتما خروجی کار رو براتون اسکرین شات می فرستادم تا متوجه بشید که چه کار زیبا و انعطاف پذیر و مشتری پسندی از کار درآومده .

در مجموع من ویو رو این طور توصیف می کنم :
1- هر صفحه وب از این اجزاء تشکیل شده : Html ، CSS ، JavaScript و Data
2- به طور معمول وقتی شما در محیط Asp یا php دارید سایت تولید می کنید ، موتور این برنامه ها تمام اجزاء صفحه را با هم ترکیب می کنند و صفحه را می سازند و به سمت مرورگر ارسال می کنند ، لذا شما به عنوان توسعه دهنده ، سمت مرورگر بر روی دیتای صفحه کار خاصی نمی تونید انجام بدهید چرا که با سایر اجزای صفحه مخلوط شده و در واقع در دل Html صفحه قرار گرفته و اگر هم بخواهید با اجزای صفحه تعامل داشته باشید و به رویدادهای کاربر واکنش نشان بدهید توسط جاوااسکریپت ( یا jQuery ) کارهای محدودی رو می تونید صورت بدید ، اینجاست که نیاز به یک فریم ورک مبتنی بر جاوااسکریپت خودش رو نشون میده .
3- فریم ورک های مبتنی بر جاوا اسکریپت ( انگولار ، ری اکت ، ویو یا ... ) مدیریت بخش Html , CSS , JavaScript رو از بخش Data جدا کردند ، لذا به شما به عنوان توسعه دهنده این امکان رو میدهند که از دیتای دریافتی بارها و بارها در جاهای مختلف و متناسب با نیاز پروژه استفاده کنید ( دیتا رو فیلتر کنید ، مرتب سازی کنید ، در دیتا جستجو کنید ، بخشی از دیتا رو برداشته و در صفحه ی دیگه ای مورد استفاده قرار بدید ، اگر در صفحه دیگه روی دیتا تغییر اتفاق افتاد در صفحه اصلی متوجه بشید و کلی کار دیگه )
4- حالا که بخش دیتا از سایر اجزاء صفحه جدا شده ، قابلیت لود یکباره Html , CSS , JavaScript برای فریم ورک وجود داره و این یعنی یک سایت تک صفحه ای ! این یعنی اینکه فریم ورک در یک حرکت Html , CSS , JavaScript تمام صفحات سایت رو دریافت می کنه ( که البته بسیار کم حجم هستند و به شدت هم قابلیت فشرده سازی دارند ) و بعد بسته به نیاز هر صحفه از سمت سرور دیتا رو تقاضا می ده و می گیره و در مخزن محلی خودش این دیتا رو نگهداری می کنه تا قابلیت استفاده مجدد داشته باشه و Html , CSS , JavaScript هر صفحه رو هم خودش سمت مرورگر کاربر داره ، لذا صفحه را با دیتا پر می کنه و به کاربر در مرورگرش نمایش میده .
5- این قابلیت فریم ورک های جاوااسکریپتی یک چالش هم داره و اون اینکه اگر کاربر از دکمه بک ( Back ) مرورگر استفاده کنه با خطا مواجه میشه چون صفحه قبلی رو مرورگر از سمت سرور لود نکرده که در حافظش مونده باشه و حالا بتونه به اون مراجعه کنه ، بلکه فریم ورک از محتویات در اختیار خودش لود کرده و در مرورگر نمایش داده !! برای حل این مشکل هم ، فریم ورک ها قابلیت مدیریت روت ( جابجایی بین صفحات ) رو ارائه می دهند ، یعنی در لحظه نمایش یک صفحه جدید ، آدرس داخل آدرس بار مرورگر رو هم بروزرسانی می کنند تا اگر کاربر دکمه بک رو زد و مرورگر به آدرس قبلی خودش مراجعه کرد ، اون رو دریافت و صفحه قبلی رو از محتویات در اختیار خودشون تولید و در مرورگر نمایش بدهند . این قابلیت برای گوگل هم بسیار مهم هست چرا بر اساس همین آدرس می تونه صفحه رو ایندکس کنه و در مراجعات بعدی هم با خطا مواجه نشه .
6- ارتباط دو یا چند طرفه بین اجزای صفحه هم بسیار کاربردی هست ! این یعنی اینکه دیگه لازم نیست شما مقدار درج شده کاربر داخل یک Input رو با دستورات جاوا به صورت دستی دریافت کنید و بعد در توابع مورد نظر استفاده کنید بلکه خود محیط فریم ورک با اتصال متغییری که برای این منظور تعریف کردید و به Input مورد نظر متصل کردید انجام میده . در واقع به محضی که کاربر در Input تغییر ایجاد کنه در متغییر ، درج میشه و شما می تونید ازش استفاده کنید . همچنین شما هم اگر تغییری در متغییر ایجاد کنید در Input نمایش داده میشه و نیاز به انجام کار اضافه ای از جانب شما نیست .
7- استفاده از DOM مجاز در ویو هم بسیار کاربردی بود ! این هم یعنی اینکه اگر در قسمتی از صفحه نیاز هست تغییر ایجاد کنید مرورگر نیاز نداره کل صفحه رو مجدد رندر کنه ، فقط همون قسمت رو رندر و تغییر میده . این در سرعت کار صفحه بسیار موثر هست . به عنوان مثل من وقتی روی آیکون ویرایش کلیک می کنم مایلم سطر جاری به حالت قابل ویرایش برای کاربر نمایش داده شود و این کار در ویو به راحتی آب خوردن انجام می شود .

در این رابطه هنوز هم مطالب دارم ولی تا اینجا هم خیلی زیاد شد ( خودش یک مقاله شد ) . هدف این بود که متوجه بشید این فریم ورک ها بسیار مفید و کاربردی هستند و به خصوص ویو که من باهاش کار کردم به شدت ساده ، کاربردی ، انعطاف پذیر و البته قدرتمند هست .
امیدوارم این مطلب برای شما مفید بوده باشد .
۱۷ بهمن ۱۴۰۰، ۱۲:۴۲
سلام و وقت بخیر . مطلب بسیار مفیدی بود. در این باب قصد داشتم مشاوره ای از شما در یافت کنم.در صورت تمایل لطفا به این شماره پیامی ارسال کنید.
سامان ۰۷ آذر ۱۴۰۰، ۱۵:۲۳
من خودم vue دوست دارم چون طعمش خوبه اما شما درباره ی واکنش گرایی و رسپانسیو بودن و کاربردش برای رابط کاربری در موبایل و تبلت پاسخ بدید و همچنیت میشه با کد ایگنیتر (php framwork _codeIgniter) این vue را به عنوان رابط کاربری گرافیکی سایت هندل کرد یا بزنم تو کار بوت استراپ برای کد ایگنیتر...
Nazanin KarimiMoghaddam ۰۸ آذر ۱۴۰۰، ۱۰:۱۴
درود
برای ریسپانسیو بودن پکیجهای زیادی داره که میتونید استفاده کنید و فک نکنم به مشکل خاصی بخورید.
برای سوال دوم تون هم شدنی هست و پیشنهاد میکنم این ویدیو رو ببینید.
محمد میرزایی جوینانی ۰۴ بهمن ۱۳۹۸، ۱۱:۴۳
بر چه اساس نوشتید Vue یک فریمورک MVC هستش؟