Vue.js چیست و چه کاربردی در طراحی وب دارد ؟
برنامه‌نویسی کامپیوتر فارغ از پیشرفت‌های بزرگ صورت پذیرفته، همچنان کاری زمان‌بر و دشوار است. زیرا با وجود توسعه‌ی ابزارها و روش‌های نوین، نیازها با سرعت بیشتری پیچیدگی و گستردگی پیدا کرده‌اند. به همین دلیل تلاش برای ساده‌سازی و کاهش زمان و مهارت لازم در جهت تولید نرم‌افزار همچنان در جریان است.
در بخش رابط کاربری کتابخانه‌های بزرگ و کوچک متعددی ایجاد شده‌اند که تلاش می‌کنند، فرآیندهای مورد نیاز برای دریافت و نمایش اطلاعات به کاربر را ساده‌سازی کنند. از آن جمله می‌توان به کتابخانه‌ی بزرگ و مشهور jQuery اشاره کرد. همچنین کتابخانه‌های نسل جدید React توسط فیسبوک و AngularJS توسط گوگل نیز به همین منظور ایجاد گشته‌اند.
در این نوشته با یکی از کتابخانه‌های رایگان و محبوب برای ایجاد رابط کاربری نرم‌افزارهای هوشمند تحت وب به نام Vue.js یا VueJS آشنا خواهیم شد.
کتابخانه رابط کاربر چیست ؟
در شکل سنتی، برای ایجاد نرم‌افزارهای هوشمند و کارآمد تحت وب با استفاده از جاوااسکریپت یا jQuery، نوشتن حجم زیادی از کدها به صورت ساخت‌یافته کاری دشوار و بیش از اندازه تخصصی است. به همین دلیل یافتن متخصصینی که توانایی استفاده از روش‌های سنتی برای تولید با کیفیت این گونه نرم‌افزارها را داشته باشند کاری بسیار دشوار است.
کتابخانه‌های رابط کاربر مانند React، AngularJS و Vue.js ابزارهایی هستند که پیچیدگی‌های تولید رابط کاربری را پشت لایه‌ای از کدهای قابل درک و آسان مخفی می‌کنند و علاوه بر آسان‌سازی، سرعت برنامه‌نویسی را نیز افزایش می‌دهند.
همچنین، به دلیل توسعه و آزمون توسط جامعه‌ی بزرگی از برنامه‌نویسان، پشتیبانی بهتری از حالت‌های مختلف و مرورگرهای متفاوت و متعدد امروزی در سیستم‌های رومیزی و موبایل به عمل می‌آورند.
نرم‌افزار هوشمند تحت وب چیست ؟
نرم‌افزارهای سنتی تحت وب، با هر کلیک یا برای برخی از فرآیندها نیازمند بارگزاری مجدد صفحه هستند. با کمک فناوری AJAX برخی از بخش‌های نرم‌افزار توانایی پاسخگویی بدون تازه‌سازی صفحه فراهم می‌شود. ایجاد یک نرم‌افزار هوشمند تحت وب مانند آنچه در وبسایت GMail رخ می‌دهد بدون استفاده از کتابخانه‌های رابط کاربر نسل جدید کاری بسیار سخت و توسعه‌ی چنین ابزارهایی به مراتب با دشواری‌های بیشتر همراه خواهد بود.
یک نرم‌افزار هوشمند تحت وب، با یک بار بارگزاری، تمامی یا اغلب فعالیت‌های لازم را بدون تازه‌سازی( Refresh ) صفحه به انجام می‌رساند و اطلاعات ارسالی و دریافتی کاربر را همگی با استفاده از فناوری AJAX با سرور رد و بدل می‌کند.
شروع به کار با Vue.js
برای ایجاد اولین نرم‌افزار هوشمند تحت وب، فایل جاوااسکریپت Vue.js را به صورت زیر در صفحه‌ی وب خود درج کنید:
|
1 |
<script src="https://unpkg.com/vue/dist/vue.js"></script> |
نخستین ویژگی کتابخانه‌های رابط کاربر، تعریف متغیرهایی درون محتوای صفحه و اتصال آن‌ها به نرم‌افزار است. با هر تغییر در متغیرهای نرم‌افزار، متغیرهای نمایشی قرار گرفته در صفحه نیز به صورت خودکار به‌روزرسانی می‌شوند. در قطعه کد ادامه، یک متغیر به نام message در صفحه قرار می‌دهیم و با استفاده از Vue.js محتوای آن را تغییر خواهیم داد:
|
1 2 3 |
<div id="app"> {{ message }} </div> |
ایجاد یک Application یا نرم‌افزار تحت وب با اجرای قطعه کد جاوااسکریپت زیر فراهم خواهد بود:
|
1 2 3 4 5 6 7 8 |
<script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> |
اگر کدهای بالا را به درستی در صفحه ثبت کرده باشید، با اجرای فایل ساخته شده، می‌بایست عبارت «Hello Vue» را در مرورگر مشاهده نمایید.
تعریف متغیر برای تغییر صفت‌های عنصرها
چنانچه بخواهید صفت‌ها( Attribute )های عناصر صفحه مانند یک div یا span را تغییر دهید، کدهای لازم می‌بایست به شکل زیر نوشته شوند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="app-2"> <span v-bind:title="span_title"> تغییر صفت عنصر </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { span_title: 'زمان بارگزاری صفحه: ' + new Date() } }) </script> |
خواندن و نوشتن متغیرها
برای خواندن یا جایگزین کردن متغیرها، کافی است به صورت معمول از دستورات جاوااسکریپت استفاده نمایید:
|
1 2 3 4 |
<script> app2.span_title = 'new title'; alert( app2.span_title ); </script> |
مدل‌ها
مقداردهی به متغیرها، علاوه بر کدهای جاوااسکریپت با استفاده از فیلدهای فرم HTML نیز امکان‌پذیر است. در قطعه کد زیر، مقداردهی به متغیر message را به یک فیلد متنی متصل می‌کنیم و کنترل آن را در اختیار کاربر قرار می‌دهیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="app-3"> <p>{{ message }}</p> <input type="text" v-model="message"> </div> <script> var app3 = new Vue({ el: '#app-3', data: { message: 'Hello Vue!' } }); </script> |
امکانات پیشرفته‌تر در Vue.js
دامنه‌ی عملکردهای Vue.js محدود به تعریف و تغییر متغیرها و تعریف مدل‌ها نیست. امکانات پیشرفته‌تری مانند نمایش شرطی، حلقه‌ها و کامپوننت‌ها، از جمله ابزارهای دیگری هستند که برنامه‌نویسی سیستم‌های پیشرفته تحت وب را به کاری آسان و سریع تبدیل می‌کنند. برای کسب اطلاعات بیشتر می‌توانید به مستندات Vue.js مراجعه کنید.
نرم‌افزارهای هوشمند و سئو
به جز موتورجستجوی گوگل که توانایی پردازش کدهای جاوااسکریپت موجود در صفحه‌ی وب را دارا است، سایر موتورهای جستجو هنوز توانایی درک محتوای هوشمند صفحات را که با فناوری AJAX دریافت و ارسال می‌شوند ندارند.
در خصوص گوگل نیز، انجام پیش‌بینی‌های لازم در جهت تغییر نشانی صفحه به صورت پویا برای ایجاد تمایز بین محتواهای مختلف موجود در سایت، ضروری خواهد بود.
به همین دلیل، چنانچه نرم‌افزار تحت وب با اهداف سئو توسعه پیدا می‌کند، وابسته کردن تمامی عملکردهای آن به کتابخانه‌های رابط کاربر، سبب خواهد شد که موتورهای جستجو برای یافتن محتوای صفحات با دشواری یا ناتوانی روبرو شوند.
با توجه به موارد فوق، پیش از شروع به طراحی سایت های هوشمند یا طراحی فروشگاه اینترنتی با استفاده از کتابخانه‌های رابط کاربر، انجام پیش‌بینی‌های لازم در زمینه‌ی سئو ضروری و حیاتی خواهد بود.
کتابخانه‌های مشابه
در ادامه فهرستی از مشهورترین جایگزین‌های Vue.js مشاهده خواهید کرد. هر یک از این کتابخانه‌ها مزایا و معایب خود را دارا هستند که انتخاب بهینه از میان آن‌ها به مطالعه و بررسی کافی نیازمند خواهد بود.