برنامه نویسی 537 بازدید

Vue.js یک فریمورک مدرن فرانت‌اند است که به همه کمک می‌کند تا بتوانند یک وب‌سایت یا وب‌اپلیکیشن بسازند. Vue.js یک فریمورک سبک و انعطاف‌پذیر است و یادگیری شروع به کار با آن آسان است. با این حال Vue.js یک فریمورک کامل و با امکانات فراوان است که می‌تواند نیازهای هر نوع اپلیکیشن پیشرفته را رفع سازد. در این مقاله بررسی می‌کنیم که Vue.js چیست و چه کاربردهایی دارد.

Vue.js چیست؟

Vue.js متنوع‌ترین فریمورکی است که هم‌اینک برای جاوا اسکریپت عرضه شده است. تقریباً همه افرادی که با HTML کار کرده‌اند، عموماً با این مانع مواجه شده‌اند که می‌خواستند کاری را با HTML انجام دهند ولی امکان آن را نداشته‌اند.

برای نمونه اگر بخواهیم یک سوئیچ برای تغییرتم وب‌سایت از روشن به تیره اضافه کنیم چه کار باید بکنیم؟ یا اگر بخواهیم یک منوی ساده به وب‌سایت اضافه کنیم که پشت منوی همبرگری پنهان شود، چطور باید عمل کنیم؟ همه این‌ها به استفاده از جاوا اسکریپت نیاز دارند.

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

<html>
    <head> </head>
    <body>
        <div id="example"></div>
        <script>
            document.getElementById("example").innerHTML = "Hello World!";
        </script>
    </body>
</html>

بازنویسی با Vue

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

<html>
    <head>
        <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    </head>
    <body>
        <div id="example">
            {{ message }}
        </div>
        <script>
            var app = new Vue({
                el: "#example",
                data: {
                    message: "Hello Vue!",
                },
            });
        </script>
    </body>
</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.js چیست

تفاوت 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 این است که بر اساس عمل‌گرایی و نه نظر یک کمیته خاص طراحی شده است و این در واقع مزیت نرم‌افزارهای متن‌-باز محسوب می‌شود.

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

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

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

بر اساس رای 4 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *