شما اینجا هستید: خانه » طراحی وب » معرفی فریم ورک قدرتمند Vue.js

معرفی فریم ورک قدرتمند Vue.js

در سپتامبر سال گذشته، فریم ورک محبوب جاوا اسکریپت Vue.js نسخه ی v2 خود را منتشر کرد و از آن وقت تا کنون من واقعا مشتاق بودم آن را امتحان کنم تا ببینم کار کردن با آن چطور است. به عنوان کسی که با فریم ورک Angular و فریم ورک React هم آشنایی کامل دارد، منتظر بودم شباهت ها و تفاوت هایی میان آنها و فریم ورک Vue jss ببینم.

Vue.js 2.0 آمار فوق العاده ای از عملکرد، حجم نسبتا کم (نسخه دارای runtime فشرده Vue هنگام کوچک شدن و zip شدن حجمی به اندازه ۱۶ کیلوبایت دارد)، آپدیت کتابخانه های همراه خود مانند vue-router و vuex، کتابخانه مدیریت وضعیت برای Vue.  را به رخ می کشد. موارد زیادی وجود دارد که تنها در یک مقاله نمی گنجد اما منتظر مقالات بعدی ما باشید که در آنها با جزئیات بیشتری به برخی از کتابخانه هایی می پردازیم که همراه این فریم ورک هستند.

در این نوشته با یکی از کتابخانه‌های رایگان و محبوب برای ایجاد رابط کاربری نرم‌افزارهای هوشمند تحت وب به نام Vue.js آشنا خواهیم شد.

 

 

کتابخانه رابط کاربر چیست ؟

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

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

نرم‌افزار هوشمند تحت وب چیست ؟

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

یک نرم‌افزار هوشمند تحت وب، با یک بار بارگزاری، تمامی یا اغلب فعالیت‌های لازم را بدون تازه‌سازی( Refresh ) صفحه به انجام می‌رساند و اطلاعات ارسالی و دریافتی کاربر را همگی با استفاده از فناوری AJAX با سرور رد و بدل می‌کند.

شروع به کار با Vue.js

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

 

نخستین ویژگی کتابخانه‌های رابط کاربر، تعریف متغیرهایی درون محتوای صفحه و اتصال آن‌ها به نرم‌افزار است. با هر تغییر در متغیرهای نرم‌افزار، متغیرهای نمایشی قرار گرفته در صفحه نیز به صورت خودکار به‌روزرسانی می‌شوند. در قطعه کد ادامه، یک متغیر به نام message در صفحه قرار می‌دهیم و با استفاده از Vue.js محتوای آن را تغییر خواهیم داد:

ایجاد یک Application یا نرم‌افزار تحت وب با اجرای قطعه کد جاوااسکریپت زیر فراهم خواهد بود:

اگر کدهای بالا را به درستی در صفحه ثبت کرده باشید، با اجرای فایل ساخته شده، می‌بایست عبارت «Hello Vue» را در مرورگر مشاهده نمایید.

تعریف متغیر برای تغییر صفت‌های عنصرها

چنانچه بخواهید صفت‌ها( Attribute )های عناصر صفحه مانند یک div یا span را تغییر دهید، کدهای لازم می‌بایست به شکل زیر نوشته شوند:

 

خواندن و نوشتن متغیرها

برای خواندن یا جایگزین کردن متغیرها، کافی است به صورت معمول از دستورات جاوااسکریپت استفاده نمایید:

 

مدل‌ها

مقداردهی به متغیرها، علاوه بر کدهای جاوااسکریپت با استفاده از فیلدهای فرم HTML نیز امکان‌پذیر است. در قطعه کد زیر، مقداردهی به متغیر message را به یک فیلد متنی متصل می‌کنیم و کنترل آن را در اختیار کاربر قرار می‌دهیم:

 

امکانات پیشرفته‌تر در Vue.js

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

نرم‌افزارهای هوشمند و سئو

به جز موتورجستجوی گوگل که توانایی پردازش کدهای جاوااسکریپت موجود در صفحه‌ی وب را دارا است، سایر موتورهای جستجو هنوز توانایی درک محتوای هوشمند صفحات را که با فناوری AJAX دریافت و ارسال می‌شوند ندارند.

در خصوص گوگل نیز، انجام پیش‌بینی‌های لازم در جهت تغییر نشانی صفحه به صورت پویا برای ایجاد تمایز بین محتواهای مختلف موجود در سایت، ضروری خواهد بود.

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

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

کتابخانه‌های مشابه

در ادامه فهرستی از مشهورترین جایگزین‌های Vue.js مشاهده خواهید کرد. هر یک از این کتابخانه‌ها مزایا و معایب خود را دارا هستند که انتخاب بهینه از میان آن‌ها به مطالعه و بررسی کافی نیازمند خواهد بود.

خوب دوستان من ، امروز با هم تونستیم در این مقاله کمی با مفاهیم اولیه فریمورک vuejs  آشنا بشیم . این فریمورک احتیاج به آموزش های بیشتری دارد و تنها در این مقاله قصد داشتیم به مفاهیم خیلی اولیه اون بپردازیم.

از سال 87 با php آشنا شدم و تا حدودی باهاش کار کردم. یه مدتیه شروع کردم به کار کردن Laravel و اینجا سعی میکنم نکات و آموزش هایی که در مورد php و Laravel یاد میگیرم رو به صورت مختصر و کاربردی براتون بگم.

پاسخ دهید

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