جاوا اسکریپت یک زبان اسکریپتنویسی (یا برنامهنویسی) است که برای افزودن ویژگیهای پیچیده (مانند انیمیشنهای 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 و ویژگیهای آن پرداختیم. اگر با برنامهنویسی وب و جاوا اسکریپت آشنایی دارید، ویو به خوبی میتواند مهارت شما را ارتقا داده و کاربردی باشد. اگر قصد شروع یادگیری جاوا اسکریپت را دارید توصیه میکنیم از این فریمورک غافل نشوید.
۸ دیدگاه
@poor@۱۵ آذر ۱۴۰۲، ۱۷:۰۲
سلام وقت بخیر
یه سوالی داشتم فریمورک vue دقیقا همون php هستش یعنی
یه سری جا میگن با لاراول میشه vue زد
نازنین کریمی مقدم۱۸ آذر ۱۴۰۲، ۱۳:۱۲
درود
خیر vue یکی از فریمورکهای زبان جاوا اسکریپت هست و برای کدنویسی بخش فرانت اند استفاده میشه.
درحالی که لاراول یک فریمورک به زبان php هست.
۰۸ بهمن ۱۴۰۰، ۱۷:۵۲
سلام وقت بخیر
من حدودا یک سالی هست که با 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۰۸ آذر ۱۴۰۰، ۰۶:۴۴
درود
برای ریسپانسیو بودن پکیجهای زیادی داره که میتونید استفاده کنید و فک نکنم به مشکل خاصی بخورید.
برای سوال دوم تون هم شدنی هست و پیشنهاد میکنم <a href="https://www.youtube.com/watch?v=HXLE6zgIWDc" target="_blank" rel="noopener nofollow ugc">این ویدیو</a> رو ببینید.