Vue.js چیست و چه کاربردهایی دارد | راهنمای مقدماتی
Vue.js یک فریمورک مدرن فرانتاند است که به همه کمک میکند تا بتوانند یک وبسایت یا وباپلیکیشن بسازند. Vue.js یک فریمورک سبک و انعطافپذیر است و یادگیری شروع به کار با آن آسان است. با این حال Vue.js یک فریمورک کامل و با امکانات فراوان است که میتواند نیازهای هر نوع اپلیکیشن پیشرفته را رفع سازد. در این مقاله بررسی میکنیم که Vue.js چیست و چه کاربردهایی دارد.
Vue.js چیست؟
Vue.js متنوعترین فریمورکی است که هماینک برای جاوا اسکریپت عرضه شده است. تقریباً همه افرادی که با HTML کار کردهاند، عموماً با این مانع مواجه شدهاند که میخواستند کاری را با HTML انجام دهند ولی امکان آن را نداشتهاند.
برای نمونه اگر بخواهیم یک سوئیچ برای تغییرتم وبسایت از روشن به تیره اضافه کنیم چه کار باید بکنیم؟ یا اگر بخواهیم یک منوی ساده به وبسایت اضافه کنیم که پشت منوی همبرگری پنهان شود، چطور باید عمل کنیم؟ همه اینها به استفاده از جاوا اسکریپت نیاز دارند.
برخی کارها وجود دارند که انجام آنها در جاوا اسکریپت کاملاً آسان است. برای نمونه میتوانید یک قطعه کد جاوا اسکریپت به تگ اسکریپت وبسایت اضافه کنید تا همهی چیزهایی که میخواهید انجام شوند. به برای مثال درج متن با استفاده از جاوا اسکریپت خالص به صورت زیر انجام مییابد:
1<html>
2 <head> </head>
3 <body>
4 <div id="example"></div>
5 <script>
6 document.getElementById("example").innerHTML = "Hello World!";
7 </script>
8 </body>
9</html>
بازنویسی با Vue
روشی که جاوا اسکریپت برای اشاره به عناصر صفحههای وب استفاده میکند برای افراد مبتدی سردرگمکننده است. افزودن جاوا اسکریپت با Vue به همان سادگی اضافه کردن کد جاوا اسکریپت خالص است. اما در زمان استفاده از Vue کارکردهای بیشتری به دست میآوریم و به تکنیکهای مدرن جاوا اسکریپت دسترسی مییابیم. برای نمونه روش درج متن با استفاده از Vue به صورت زیر است:
1<html>
2 <head>
3 <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
4 </head>
5 <body>
6 <div id="example">
7 {{ message }}
8 </div>
9 <script>
10 var app = new Vue({
11 el: "#example",
12 data: {
13 message: "Hello Vue!",
14 },
15 });
16 </script>
17 </body>
18</html>
در ادامه این مثالها را مورد بررسی اجمالی قرار میدهیم. در جاوا اسکریپت کد باید ابتدا به دنبال عنصر بگردد، یک جنبه از آن را انتخاب کند و سپس آن را تغییر دهد. در Vue به HTML اعلام میکنیم که کجا باید به دنبال متن متغیر بگردد. سپس شیء جاوا اسکریپت را ایجاد کرده و آن را به عنصر انتساب میدهیم و به این ترتیب متن متغیر را تعیین میکنیم.
این مثال ساده نکته مهمی را نمایان میسازد. همواره بهتر است که کد خود را جدا از HTML نگه دارید. در مثال Vue دیدیم که این فریمورک مستقیماً HTML را دستکاری نمیکند. Vue صرفاً منظور خود را در قالب یک پیام بیان میکند و با عدم افزودن کد به HTML موجب میشود که بخش HTM کارکردهای بیشتری داشته باشد.
آیا Vue یک فریمورک است؟
اگر با فریمورکهای دیگر آشنا باشید، ممکن است آگاه باشید که به طور معمول در زمان استفاده از این فناوری نیازی به ساخت اپلیکیشنها از صفر وجود ندارد. استفاده از فریمورک موجب میشود که ساخت یک اپلیکیشن به سادگی اجرای یک دستور از طریق خط فرمان و آغاز یک سرور باشد. اما در مثال قبلی ما Vue را به یک وبسایت استاتیک و بدون هیچ نوع پیچیدگی اضافه کردیم. در هر حال Vue یک فریمورک محسوب میشود. در صفحه معرفی Vue چنین میخوانیم:
Vue برخلاف دیگر فریمورکهای مونولیتیک از صفر طوری طراحی شده است که در هر سطحی سازگاری داشته باشد.
این بدان معنی است که شما میتوانید در وباپلیکیشنهای خود از توان کمی از Vue استفاده کنید و یا این که به طور همهجانبه آن را به خدمت بگیرید. امکان استفاده از Vue برای مدیریت یک اسلایدشوی تصاویر و یا ساخت یک وباپلیکیشن تکصفحهای با همه امکانات آن وجود دارد. منظور از این امکانات مواردی مانند تست کردن، مسیریابی، مدیریت حالت، امنیت و موارد زیاد دیگر است.
Vue برای چه کسانی مناسب است؟
Vue به جهت قدرت و تنوع امکاناتش مورد توجه مخاطبان زیادی قرار گرفته است که در این بخش آنها را توضیح میدهیم.
Vue برای طرفداران سادگی مناسب است
جاوا اسکریپت یک اکوسیستم با تغییرهای سریع است. کاملاً محتمل است توجه خود را روی یک مجموعه از ابزارها متمرکز کنید و دو سال بعد متوجه شوید که آنها کاملاً منسوخ شدهاند. جاوا اسکریپت موجب افزایش پیچیدگی وبسایتها نیز میشود. نصب یک فریمورک و یک مجموعه نرمافزاری عظیم از پکیجهای Node این وضعیت را وخیمتر نیز میکند.
به همین جهت برخی افراد ترجیح میدهند که از ابزارهای مقدماتی فراتر نروند. HTML به خوبی کار میکند،CSS خصوصیات خود را دارد و جاوا اسکریپت تغییرهای سریعی دارد. اما همگی آنها در مجموع ثبات دارند. با این که اینها به طور مداوم در حال تغییر و تکامل هستند، اما این روند آرام و به مرور انجام میشود. بسیاری از فریمورکها شاهد تغییرهایی هستند که موجب از کار افتادن کد شما میشود.
با این حال چند اسکریپت مانند jQuery و Handlebars وجود دارد که موجب تسهیل کارهای توسعهدهندگان فرانتاند شدهاند. جی کوئری در ابتدا به خوبی آغاز میشود، اما زمانی که کدتان پیچیدهتر شود، بیش از حد شلوغی ایجاد میکند. Handlebars نیز خوب است، اما کار چندانی در راستای تسهیل استفاده از خود جاوا اسکریپت انجام نمیدهد.
Vue میتواند جایگزین این ابزارها شده و مشکلات آنها را حل کند. Vue این کار را بدون تصاحب کامل وبسایت شما انجام میدهد. این فریمورک رویههای مدرن جاوا اسکریپت را بدون نیاز به درگیر شدن با دردسرهای آن برای شما ارمغان میآورد.
Vue برای سریع ساخت پروتوتایپ مناسب است
Vue یک فریمورک سبک با کارکردهایی است که فریمورکهای بسیار سنگینتر ارائه میکنند. اگر در زمینه توسعه فرانتاند وب تجربه داشته باشید، میتوانید Vue را در طی چند روز یاد بگیرید. اگر چنین نباشد نیز میتوانید کار خود را با تنها مواردی که به آنها نیاز دارید آغاز کنید.
یکی از دلایل اصلی استفاده از یک فریمورک آن است که ابزارهایی در اختیار شما قرار میدهد تا فرایند توسعه را با سرعت و سهولت بیشتری انجام دهید. برای نمونه یک وباپلیکیشن پیشرونده روی ناوبری برنامهنویسیشده، لیآوت سفارشی و ساختارهایی تکیه دارد که به صورت درجا قابل تغییر هستند. فریمورکهای فرانتاند این چالش را تا حدود زیادی حل کردهاند و Vue نیز از این قاعده مستثنا نیست.
شما اینک به لطف فریمورکهای مدرن میتوانید پروژههایی که قبلاً ماهها طول میکشیدند را در طی چند هفته تمام کنید. از آنجایی که Vue بسیار سبک و کار با آن نیز آسان است، میتوانید در طی چند ساعت یا روز پروتوتایپ مورد نظر خود را طراحی کنید.
Vue برای توسعه وباپلیکیشن مناسب است
توسعهدهندگان بنا به عادت از فریمورکهای مدرن فرانتاند برخی انتظارات را دارند. جایگزینی رشته برای HTML، معماری مبتنی بر کامپوننت و ابزارهای مختلف مثال مناسبی از این انتظارات هستند. Vue همه این مزیتها را دارد و علاوه آن مزیتهای دیگری نیز دارد که در بخش قبلی در خصوص فریمورک برشمردیم.
Vue برای توسعه اپلیکیشنهای نیتیو موبایل مناسب است
توسعهدهندگان وباپلیکیشنها غالباً میخواهند کاری کنند که محصولاتشان به صورت یک اپلیکیشن موبایل نیز قابل دسترسی باشد. به طور سنتی آنها این کار را با استخدام توسعهدهندگان بیشتر برای ساخت اپلیکیشنهای اندروید و iOS انجام میدهند. سپس باید راهی برای هماهنگسازی این سه پلتفرم پیدا کنند. اما امروزه گزینههای دیگری نیز وجود دارند.
یک گزینه، استفاده از برای ساخت اپلیکیشنهای موبایل است که به توسعهدهندگان امکان میدهد تا اپلیکیشنهای اندروید و iOS را با همان کد جاوا اسکریپت بسازند. توسعهدهندگان NativeScript میتوانند حتی کد وب خود را بدون نیاز به استخدام توسعهدهندگان جدید به حوزه موبایل نیز پورت کنند. این یکی از مهمترین دلایل پشتیبانی گسترده از Vue است.
تفاوت Vue با دیگر فریمورکها چیست؟
بر اساس پیمایش وبسایت State of JS در سال 2019، گزینههای Vue، Angular و React سه فریمورک محبوب جاوا اسکریپت بودهاند. در ادامه برخی از جنبههای این موضوع را تشریح میکنیم.
سه فریمورک بزرگ
- انگولار نخستین فریمورک بزرگ فرانتاند محسوب میشود. این فریمورک از سوی گوگل و در حدود سال 2010 منتشر شده است. این فریمورک مفهوم HTML دینامیک را از طریق دایرکتیوها و اتصال داده سه طرفه که موجب بهروزرسانی بدون نیاز به رفرش صفحه میشود به دنیا معرفی کرد.
- React ابتدا در سال 2013 از سوی فیسبوک معرفی شد و به عنوان جایگزین انگولار محبوبیت بیشتری کسب کرد. ریاکت بیشتر به خاطر استفاده از JSX و کامپوننتها مشهور شده است.
- Vue در سال 2014 از سوی «ایوان یو» (Evan You) معرفی شد که کارمند سابق شرکت گوگل بود. Vue هیچ نکته متمایزکنندهای معرفی نکرده است، اما موجب میشود طرز کار بسیار بهتر و تمیزتری داشته باشیم.
مزیتهای سه فریمورک محبوب
- انگولار یک فریمورک محبوب در سطح سازمانی محسوب میشود. این فریمورک مدتهای زیادی است که معرفی شده و از سوی گوگل ساخته شده و نگهداری میشود.
- ریاکت بیشترین استقبال را از میان سه فریمورک محبوب داشته است و مشهور است که کار با آن راحت بوده و انعطافپذیری زیادی دارد.
- Vue.js به لحاظ عملی آسانترین فریمورک برای یادگیری و پیادهسازی است. همچنین باید توجه داشته باشیم که این سادگی Vue به قیمت قربانی کردن مجموعه قابلیتهای فراوان و قدرتمند به دست نیامده است.
معایب سه فریمورک محبوب
در این بخش معایب و انتقاداتی که به هر یک از این سه فریمورک رایج جاوا اسکریپت مطرح شده است را بررسی میکنیم.
انگولار
انگولار در گذشته مسیر یادگیری دشواری داشت. نسخه 1 آن یعنی AngularJS از مقدار زیادی از اصطلاحات علوم کامپیوتر که در دانشگاه رواج دارند در مستندات خود استفاده کرده بود. با این حال نسخه 2 تا حدود زیادی ساده و سرراستتر شد.
- زمانی که گوگل انگولار را منتشر کرد، مفاهیم سطح بالای موجود در AngularJS را حفظ کرد، اما جزییات را طوری تغییر داد که بسیاری از توسعهدهندگان درک آن را دشوار یافتند.
- انگولار در روزهای نخست شاهد تغییرهای زیادی بود، به طوری که تقریباً با انتشار هر نسخه جدید، کد قبلی از کار میافتاد. انگولار اکنون بهتر شده است، اما هنوز بیش از حد رسمی، صلب و یادگیری آن برای توسعهدهندگان تازهکار دشوار است.
ریاکت
یکی از بهترین و البته چالشبرانگیزترین جنبههای ریاکت، JSX است. JSX موجب ایجاد اتصال بین HTML، CSS و جاوا اسکریپت در یک زبان واحد میشود. این امر موجب میشود که همه چیز برای توسعهدهندگان سادهتر باشد، اما از دیدگاه طراحان کار دشوارتر میشود.
- JSX موجب میشود که کار با کتابخانههای موجود دشوار باشد. ضمناً یک ضد الگو برای طراحی، لیآوت و کد محسوب میشود. بدین ترتیب کدی کاملاً شلوغ و ناخوانا تولید میشود.
- ریاکت این موضوع را با استفاده از کامپوننتها برای جداسازی کد حل کرده است. اما این که از کامپوننتها به درستی استفاده شود بر عهده توسعهدهندگان است.
- ریاکت از نظر تکنیکی یک فریمورک محسوب میشود، اما فاقد قابلیتهای مهمی مانند مدیریت حالت در سطح اپلیکیشن و ناوبری است.
Vue
Vue همه مشکلاتی را که در مورد ریاکت و انگولار اشاره کردیم حل میکند. برخلاف انگولار یادگیری آن آسان است و برخلاف JSX کامپوننتهای Vue کدهای Html، CSS و جاوا اسکریپت را از هم جدا نگه میدارند.
- کار با کامپوننتهای Vue برای طراحی بسیار آسان است و همه چیز ذاتاً تمیز است و نیازی به تلاش از سوی توسعهدهنده در این راستا نیست.
- بزرگترین چالشهایی که در برابر Vue قرار دارند، نرخ استفاده نسبتاً محدود از این فریمورک و عدم وجود اپلیکیشن مشهوری است که با این فریمورک ساخته شده باشد. شرکتهای بسیار کمی از Vue استفاده میکنند و تقریباً هیچ کدام از آنها در دسته برندهای مشهور قرار نمیگیرند.
آیا Vue یک تب زودگذر است؟
با این که Vue سالها است که معرفی شده است، اما همچنان به عنوان یک تازهوارد در این حوزه به آن نگریسته میشود. همچنین Vue فاقد آن پشتیبانی سازمانی است که دو فریمورک بزرگ دیگر برخوردار هستند. همچنان که پیشتر اشاره کردیم، هیچ اپلیکیشن مشهوری وجود ندارد که با استفاده از Vue نوشته شده باشد و بتوان به آن استناد کرد.
در واقع مهمترین نقیصه Vue عدم وجود پشتیبانی سازمانی است. Vue با استفاده از شوق و اشتیاق عمومی کاربرانش توسعه یافته است. ایوان یو یک کمپین Patreon برای حمایت از خود و یک توسعهدهنده دیگر برگزار کرد. با این حال Vue به طرزی باورنکردنی زنده است. تا زمانی که علاقه کافی به Vue وجود داشته باشد تا شرکتها از آن حمایت کنند، Vue همچنان وجود خواهد داشت.
بهترین مزیتهای Vue
Vue.js بهترین مزیتهای فریمورکهای فرانتاند دیگر را در یک جا جمع کرده است و علاوه بر آن قابلیتهای زیادی دارد که منحصر به خودش هستند. در فهرست زیر به برخی از این موارد اشاره کردهایم:
- Vue از معماری مبتنی بر کامپوننت برای ایجاد ساختار و قابلیت استفاده مجدد بهره میگیرد.
- Vue بخشهای HTML، CSS و جاوا اسکریپت را در کامپوننتهای خاص خود به طور جداگانه نگهداری میکند.
- Vue هم برای طراحان و هم توسعهدهندگان ساختار آشنایی دارد.
- Vue یک GUI کامل برای عرضه، ساخت و ایجاد پروژهها ارائه میکند.
- Vue از «بارگذاری مجدد آنی» (Hot Reloading) برای اجرای اپلیکیشن استفاده میکند. این امکان موجب میشود که تغییرات ایجاد شده در یک صفحه بدون نیاز به رفرش قابل مشاهده باشند.
Vue.js یک پروژه با مالکیت خصوصی و بدون سربار سازمانی و تأثیرپذیری از سیاستگذاریهای آن است. این امر موجب میشود که این فریمورک چندان محبوب مشتریان سازمانی نباشد. اما یادگیری آن آسان و کار با آن مفرح است و از این رو گزینهای عالی برای استارتاپهای پیشرو محسوب میشود.
شاید بتوان گفت که بهترین مزیت 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 مجاز در ویو هم بسیار کاربردی بود ! این هم یعنی اینکه اگر در قسمتی از صفحه نیاز هست تغییر ایجاد کنید مرورگر نیاز نداره کل صفحه رو مجدد رندر کنه ، فقط همون قسمت رو رندر و تغییر میده . این در سرعت کار صفحه بسیار موثر هست . به عنوان مثل من وقتی روی آیکون ویرایش کلیک می کنم مایلم سطر جاری به حالت قابل ویرایش برای کاربر نمایش داده شود و این کار در ویو به راحتی آب خوردن انجام می شود .
در این رابطه هنوز هم مطالب دارم ولی تا اینجا هم خیلی زیاد شد ( خودش یک مقاله شد ) . هدف این بود که متوجه بشید این فریم ورک ها بسیار مفید و کاربردی هستند و به خصوص ویو که من باهاش کار کردم به شدت ساده ، کاربردی ، انعطاف پذیر و البته قدرتمند هست .
امیدوارم این مطلب برای شما مفید بوده باشد .