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

 

چه انتظاری از یک فریم‌ورک داریم؟

مهمترین کاری که یک فریم‌ورک انجام میده اینه که یک سری عملکردها، قوانین و ویژگی‌های عمومی ارائه بده تا ما فقط هدفمون پیاده‌سازی اون چیزی باشه که می‌خوایم. حل کردن یک سری مسئله‌های عام که توی همه‌ی برنامه‌ها وجود داره (مثلا مدیریت ساختار و پوشه‌بندی کدها) از وظایف فریم‌ورک هست. وقتی از یک فریم‌ورک استفاده می‌کنیم، باید برنامه رو طبق قوانین این فریم‌ورک توسعه بدیم. چه قوانینی‌؟ مثلا معماری و الگویی که تبعیت می‌کنه.

 

از فریم‌ورک استفاده کنیم؟

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

 

Vue.js چیه؟

اگر اینجا هستین احتمالا می‌دونین Vue.js چیه: یک فریم‌ورک جاوااسکریپت هست. مثل کلمه view انگلیسی (ویوو که از این واژه استفاده خواهیم کرد) تلفظ میشه. یک فریم‌ورک Progressive هست. ویوو توسط آقای ایوان یو، کارمند سابق گوگل خلق شده و درحال حاضر توی گیت‌هاب حدود ۳۰۰ نفر برای توسعه‌ی این فریم‌ورک مشارکت ‌(Contributor) دارن.

 

چرا به ویوو میگن Progressive؟

یعنی می‌تونیم ویوو رو به عنوان قسمتی از برنامه، اضافه و مرحله به مرحله و به صورت دلخواه از امکانات اون استفاده کنیم. نه بصورت همه یا هیچ. الگوی استفاده شده توی ویوو MVVM هست.

 

الگوی MVVM؟

این مخفف Model View ViewModel هست. این الگو برنامه‌ی ما رو به سه بخش تقسیم می‌کنه که باعث میشه برنامه مرتب‌تر و توسعه‌، نگهداری و تست اون راحت‌تر و ساده‌تر صورت بگیره.
قبل از شروع کار با ویوو پیشنهاد می‌کنم این پست درباره الگوی MVVM رو حتما بخونین تا درک بهتری از این فریم‌ورک داشته باشین.

 

یادگیری ویوو؟

ویوو یکی از راحت‌ترین فریم‌ورک‌ها برای شروع هست. نحوه‌ی استفاده از اون خیلی ساده‌ست. فقط کافیه یک تگ script رو به صفحه اضافه کنیم اصلا لازم نیست درباره npm و Babel و Webpack چیزی بدونیم. برای استفاده از ویوو لازم نیست استاد جاوااسکریپت باشیم. با داشتن اطلاعات سطحی از این زبان می‌تونیم کارمون رو با ویوو شروع کنیم.

با یی که ویوو در اختیار ما میذاره می‌تونیم یک قدرتمند داشته باشیم.

 

وضعیت ویوو توی بازار؟

ویو بدلیل راحتی استفاده، یادگیری سریع و سبک بودن اون، یکی از سریع‌ترین رشدها رو بین همه فریم‌ورک‌ها داشته که باعث شده سومین مخزن (Repository) پرطرفدار کل گیت‌هاب لقب بگیره. ویو یکی از سبک‌ترین فریم‌ورک‌ها هست که برای تجربه کامل یک فریم‌ورک لازم داریم تا موارد مورد نیازمون رو به صورت جداگونه به فریم‌ورک اضافه کنیم. برای شخصی که اطلاعات چندانی از جاوا اسکریپت و مباحث جدید فرانت-اند نداره یادگیری ویو بهترین گزینه هست. برای داشتن اطلاعات دقیق‌تر از این فریم‌ورک و مقایسه اون با بقیه‌ی React و Angular این پست رو ببینید.

 

یک برنامه ویوو چه شکلیه؟

برای شروع ویوو فقط کافیه مقداری با HTML و CSS و جاوااسکریپت کار کرده باشین و این یکی از بزرگترین مزیت‌های این فریم‌ورک هست! کد زیر ساده‌ترین چیزی هست که با ویوو می‌تونیم بنویسیم:

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    message: "I'm learning Vue.js!"
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

 

مفهوم Reactivity

ویوو یک فریم‌ورک Reactive هست. یعنی وقتی اطلاعاتی از مدل تغییر می‌کنه، قسمت view بلافاصله با اون تغییرات جدید، بروزرسانی میشه و خودش رو با اطلاعات مدل هماهنگ می‌کنه.

 

خب دوستان توی این پست سعی کردم به بررسی چندتا سوال رایج درباره این فریم‌ورک بپردازم. اگه سوال دیگه‌ای دارین حتما توی قسمت نظرات بپرسین. توی پست‌های بعدی بیشتر با این فریم‌ورک آشنا میشیم. روزتون خوش ✌️😉

 

Resources: