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.js
راهکاری که جاوااسکریپت برای اشاره به عناصر صفحات وب به کار می‌گیرد، برای برخی از توسعه‌دهندگان تازه‌کار عجیب و غریب است. اضافه کردن جاوااسکریپت با 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 ویژگی‌های خاص خود را دارد و جاوا اسکریپت تغییرهای سریعی دارد. با این‌حال، تمامی آن‌ها در مجموع ثبات زیادی دارند. در شرایط که این مولفه‌های وب دائما در حال تغییر و تکامل هستند، اما این روند به آرامی انجام می‌شود. بیشتر چهارچوب‌ها شاد تغییراتی هستند که باعث می‌شوند کدهای شما با مشکلات زیادی روبرو شوند. با این‌حال چند اسکریت همچون جی‌کوئری و Handlebars وجود دارند که کار توسعه‌دهندگان فرانت‌اند را ساده کرده‌اند. جی‌کوئوری در ابتدا به خوبی آغاز می‌شود، اما به مرور زمان کدهایتان پیچیده می‌شوند و شلوغی به یکباره افزایش پیدا می‌کند. Handlebars خوب است، اما در زمینه به‌کارگیری ساده جاوا اسکریپت کار زیادی انجام نمی‌دهد. Vue می‌تواند جایگزین ابزارهای یاد شده شود و بسیاری از مشکلات را بطرف کند. Vue این کار را بدون آن‌که سایت شما را به‌طور کامل تصاحب کند انجام می‌دهد. این چهارچوب رویه‌های مدرن جاوا اسکریپت را بدون نیاز به درگیر شدن با دردسرهای مختلف برای توسعه‌دهندگان به ارمغان می‌آورد.
Vue برای ساخت سریع نمونه‌های اولیه مناسب است
Vue یک چهارچوب سبک با عملکردهایی است که چهارچوب‌های بسیار سنگین‌تر ارائه می‌کنند. اگر در زمینه توسعه فرانت‌اند وب تجربه دارید، قادر هستید تنها ظرف چند روز Vue را یاد بگیرید. اگر این‌گونه نیست، بازهم می‌تواندی کار را با مواردی که در ابتدا به آن‌ها نیاز دارید آغاز کنید. یکی از مهم‌ترین دلایل به‌کارگیری چهابچوب فوق این است که ابزارهایی در اختیار توسعه‌دهندگان قرار می‌دهد تا فرآیند توسعه را با سرعت و سادگی بیشتری به پیش ببرند. به‌طور مثال، یک برنامه وب پیش‌رونده روی ناوبری برنامه‌نویسی شده، Layout سفارشی و ساختارهایی تکیه دارد که به شکل درجا قابل تغییر هستند. چهارچوب‌های فرانت‌اند چالش فوق را تا حد زیادی برطرف کرده‌اند و vue نیز از این قاعده مستثنا نیست. شما می‌توانید با استفاده از چهارچوب‌های مدرن پروژه‌هایی که چندین ماه زمان‌بر هستند را ظرف چند هفته کامل کنید. با توجه به انی‌که Vue سبک و روان بوده و کار با آن ساده است، به شما اجازه می‌دهد ظرف چند ساعت یک در نهایت یک روز نمونه اولیه موردنظر خود را طراحی کنید.
Vue برای توسعه برنامه‌های وب‌محور گزینه مناسبی است
توسعه‌دهندگان برنامه‌های وب‌محور عمدتا تمایل دارند کاری کنند که محصولاتش به شکل یک برنامه موبایل نیز در دسترس باشد. به‌طور سنتی، سازمان‌ها برای انجام این‌کار مجبور هستند توسعه‌دهندگانی را برای ساخت برنامه‌های اندرویدی و iOS استخدام کنند. در ادامه باید راهی پیدا شود تا هر سه پلتفرم در هماهنگی کامل با یکدیگر باشند. با این‌حال، امروزه گزینه‌های دیگری نیز در دسترس قرار دارند. یک گزینه به‌کارگیری ابزارهایی است که اجازه ساخت برنامه‌های همراه را می‌دهند. ابزارهایی که اجازه می‌دهند برنامه‌های اندرویدی و iOS را با کد جاوااسکریپت یکسانی طراحی کنید. توسعه‌دهندگان NativeScript می‌توانند حتا کد وب خود را بدون نیاز به استخدام توسعه‌دهندگان جدید به حوزه موبایل هدایت کنند. مورد فوق یکی از مهم‌ترین دلایل پشتیبانی گسترده از Vue است.
Vue چه تفاوتی با سایر چهارچوب‌های مشابه دارد؟
بر مبنای اطلاعات سایت State of JS در سال 2019، گزینه‌های آنگولار، Vue و ریکت سه چهارچوب محبوب جاوا اسکریپت شناخته شده‌اند.
سه چهارچوب بزرگ
انگولار نخستین چهارچوب بزرگ فرانت‌اند به شمار می‌رود. این چهارچوب توسط گوگل و در سال 2010 منتشر شد. این چهارچوب مفهوم HTML پویا را از طریق دایرکتیوها و اتصال داده سه طرفه که به‌روزرسانی صفحه بدون نیاز به نوسازی را به همراه می‌آورند را معرفی کرد.
ریکت ابتدا در سال 2013 میلادی توسط فیسبوک معرفی شد و به عنوان جایگزین انگولار توانست محبوبیت زیادی به دست آورد. ری‌اکت به دلیل استفاده از JSX و مولفه‌ها مشهور شده است.
Vue در سال 2014 میلادی توسط ایوان وی از کارمندان اسبق گوگل معرف شد. Vue هیچ قابلیت شاخصی معرفی نکرد، اما به دلیل طرز کار کارآمدتر و ارائه کدهای تمیزتور مورد توجه توسعه‌دهندگان قرار گرفت.
سه چهارچوب یاد شده چه مزایایی دارند؟
انگولار یک چهارچوب محبوب در مقیاس سازمانی است. این چهارچوب مدت زمان زیادی است که معرفی شده و توسط گوگل پشتیبانی می‌شود. ری‌اکت با استقبال بیشتری به نسبت دو چهارچوب دیگر روبرو شده و به دلیل راحتی در کار و انعطاف‌پذیری زیادی که دارد مورد توجه توسعه‌دهندگان قرار گرفته است.
Vue.js به لحاظ عملی ساده‌ترین چهارچوب برای یادگیری و پیاده‌سازی است. همچنین دقت کنید که این سادگی Vue در کنار دسترسی به قابلیت‌های قدرتمند و گسترده در اختیار توسعه‌دهندگان قرار دارد.
معایب هر یک از این چهارچوب‌ها
در کنار مزایا، هر یک از این چهارچوب‌ها معایبی نیز دارند که از مهم‌ترین معایب هر یک از این چهارچوب‌ها به موارد زیر می‌توان اشاره کرد:
انگولار: در گذشته مسیر یادگیری آن دشوار بود. نسخه 1 آن یعنی آنگولار جی‌اس مملو از اصطلاحات فنی مختلفی بود. با این حال این مشکل تا حدود زیادی در نسخه 2 برطرف شد.
زمانی که گوگل انگولار را منتشر کرد، مفاهیم سطح بالای موجود در انگولار جی‌اس را حفظ کرد، اما جزییات را به گونه‌ای تغییر داد که بسیاری از توسعه‌دهندگان شکایت کردند که درک آن دشوار است.
انگولار در روزهای اولیه تغییراتی زیادی را تجربه کرد، به‌گونه‌ای که با انتشار هر نسخه جدید، کدهای قبلی قابل استفاده نبودند. انگولار اکنون عملکرد بهتری پیدا کرده، ام هنوز هم یادگیری آن برای توسعه‌دهندگان تازه‌کار مشکل است.
ری‌اکت
یکی از چالش‌برانگیزترین جنبه‌های ری‌اکت، JSX است. JSX اتصال میان CSS، HTML و جاوااسکریپت را در قالب یک زبان واحد پدید می‌آورد. این‌کار باعث می‌شود تا همه چیز برای توسعه‌دهندگان ساده‌تر شود، اما از دید طراحان کار را دشوارتر می‌کند.
JSX باعث شد تا کار با کتابخانه‌های موجود سخت شود. همچنین یک ضد الگو برای طراحی، لی‌آوت و کد به شمار می‌رود. به این شکل ترتیب کدی کاملا شلوغ و ناخوانا به وجود می‌آید.
ری‌اکت برای حل این مشکل از مولفه‌های جدکننده کدها استفاده کرد، با این‌حال به‌کارگیری درست این مولفه‌ها بر عهده توسعه‌دهندگان است.
ری‌اکت به لحاظ تکنیکی یک چهارچوب است، اما فاقد قابلیت‌های مهمی همچون مدیریت حالت در سطح ابری و ناوبری است.
Vue
Vue تمامی مشکلات یاد شده در ری‌اکت و انگولار را برطرف کرد. برعکس انگولار یادگیری آن ساده است و برعکس JSX مولفه‌های Vue کدهای CSS، HTML و جاوااسکریپت را جدا از هم نگه‌داری می‌کند.
کار با مولفه‌های Vue برای طراحی ساده است و همه چیز به لحاظ طبیعی تمیز است و نیازی نیست توسعه‌دهندگان برای سادگی کدها کار خاصی انجام دهند.
بزرگ‌ترین چالش پیش روی Vue، نرخ استفاده نسبا محدود از این چهارچوب و عدم وجود برنامه مشهوری است که توسط چهارچوب فوق ساخته شده است. شرکت‌های کمی از Vue استفاده کرده‌اند و تقریبا در هیچ گروه از برندهای مشهور قرار ندارد.
آینده vue چگونه است؟
با این‌که Vue چند سالی است که معرفی شده، اما هنوز هم به عنوان یک تازه وارد به آن نگاه می‌شود. همچنین Vue فاقد پشتیبانی سازمانی است، در حالی که دو چهارچوب دیگر چنین ویژگی را دارند. همچنین هیچ برنامه مشهوری با Vue ساخته نشده است. در حقیقت نقص بزرگ Vue در عدم پشتیبانی سازمانی است. vue بیشتر از جانب کاربران مورد توجه قرار گرفته است. مهم‌ترین عاملی که باعث شده تا چهارچوب فوق زنده باقی بماند در جمع‌آوری بهترین مزین‌های چهارچوب‌های فرانت‌اند در یک مکان واحد است. همچنین قابلیت‌های زیادی دارد که منحصر به خودش است. از مهم‌ترین مزایای Vue به موارد زیر می‌توان اشاره کرد:
Vue از معماری مبتنی بر مولفه برای اسخت ساختار و قابلیت استفاده مجدد استفاده می‌کند.
Vue بخش‌های CSS، HTML و جاوا اسکریپت را در مولفه‌های خاص خود به شکل جداگانه نگه‌داری می‌کند.
Vue به لحاظ ساختاری برای طراحان و توسعه‌دهندگان آشنا است.
Vue یک GUI کامل برای عرضه و ساخت پروژه‌ها ایجاد می‌کند.
Vue از بارگذاری مجدد لحظه‌ای برای اجرای برنامه استفاده می‌کند. این‌کار باعث می‌شود تغییرات ایجاد شده در یک صفحه بدون نیاز به نوسازی قابل مشاهده باشند.
در مجموع باید بگوییم که Vue.js یک پروژه سازمانی با مالیکت خصوصی و بدون تاثیرپذیری از خط‌مشی‌های سازمانی است. این‌کار باعث می‌شود تا چهارچوب چندان مودر توجه مشتریان سازمانی نباشد، با این‌حال یادگیری آن ساده است و ابزار مناسبی برای کسب‌وکارهای نوپا است.
ماهنامه شبکه را از کجا تهیه کنیم؟
ماهنامه شبکه را می‌توانید از کتابخانه‌های عمومی سراسر کشور و نیز از دکه‌های روزنامه‌فروشی تهیه نمائید.
ثبت اشتراک نسخه کاغذی ماهنامه شبکه
ثبت اشتراک نسخه آنلاین
کتاب الکترونیک +Network راهنمای شبکه‌ها
- برای دانلود تنها کتاب کامل ترجمه فارسی +Network اینجا کلیک کنید.
کتاب الکترونیک دوره مقدماتی آموزش پایتون
- اگر قصد یادگیری برنامه‌نویسی را دارید ولی هیچ پیش‌زمینه‌ای ندارید اینجا کلیک کنید.
نظر شما چیست؟