آموزش vue.js

سلام من شیما هستم دانشجوی رشته ی مهندسی نرم افزار و عاشق دنیای برنامه نویسی هستم .

چند ماه پیش بود ( فکر کنم اوایل تابستان سال ۱۳۹۸ بود ) که شرکت ما به من پیشنهاد داد که ویو جی اس را یاد بگیرم چون قراره یک پروژه ی ویو جی اس داشته باشیم .

این اجبار در ابتدا کمی سخت به نظر میرسید و من واقعیتش دوست نداشتم ویو جی اس را یاد بگیرم ولی خب چون در شرکتی که کار میکردم به تازگی استخدام شده بودم مجبور بودم بگم چشم تا بتونم به کارم ادامه بدم .

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

قبل از هر چیزی من دوست دارم تعاریفی را درباره ی فریمورک ویوجی اس برای دوستانی که تازه میخان شروع کنند بنویسم که حتما به درد میخوره .

vue.js چیست ؟ و چه کاربردی دارد ؟

ویو جی اس که بصورت vue.js نوشته میشه و بصورت view تلفظ میشه یک فریمورک هست برای زبان برنامه نویسی جاوا اسکریپت .

از آنجایی که جاوا اسکریپت برای فرانت اند وب کاربرد داره و کدنویسی با جاوااسکریپتِ خالی مدت هاست که دیگه انجام نمیشه ( چون کدنویسی با جاوااسکریپت خالی بسیار زمان بر و سخت است ) ، این فریمورک برای ساخت انواع اپلیکیشن های تحت وب کاربرد فراوانی داره که در ادامه ی این مقاله به آنها خواهیم پرداخت .

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

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

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

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

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

همین بحث کلیت است که فریمورک های جاوااسکریپت را از کتابخانه های جاوااسکریپتی جدا میکند .

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

خب امروز که دارم این رو مینویسم در ورودی سال 2020 میلادی هستیم و لیست زیر پراستفاده ترین کتابخانه ها و فریمورک ها برای جاوااسکریپت یا بهتره بگم پیاده سازی فرانت اند وب سایت ها است :‌

• جی کوئری
• ویو جی اس
• ری اکت جی اس
• انگولار
• و ...

ویو جی اس بعد از تمام این کتابخانه ها و فریمورک ها منتشر شد و اولین نسخه ی آن در سال 2014 بود که معرفی شد و به دلیل کارآیی بالا و همچنین حجم بسیار کم و سرعت زیاد ، مورد توجه برنامه نویسان وب قرار گرفت .

سایت های فراوانی بخش فرانت اند خودشان را با vue.js پیاده سازی کردند من در ایران کافه بازار و زرین پال را دیدم که سوئیچ کردن به vue.js و بقیه رو نمیدونم :)

ویو جی اس با حجم فشرده ی نزدیک به 33 کیلوبایت ، باعث بالا رفتن سرعت پردازش و لود شدن فرانت اند وب سایت میشود .

بذارید مزایای ویو جی اس را بصورت مرتب در بخش زیر بررسی کنیم .

مزایای فریمورک ویو جی اس

• حجم کم ( حدود 33 کیلوبایت )
• سرعت لود بسیار بالا
• توانایی کنترل المان های صفحه ی وب توسط DOM مجازی ( لینک معرفی شده درباره ی DOM مجازی ری اکت صحبت میکند که درباره ی ویو جی اس هم همین مفاهیم است )
• استفاده از کامپوننت های پیش ساخته
• استفاده از اکوسیستم عالی برای کنترل رویدادهای روی صفحه ی وب

آموزش ویو جی اس آسان است .

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

این دوره پروژه محور بود و علاوه بر ویو جی اس که فکر کنم در 15 جلسه ویدیویی آموزش میداد در بخش دیگری بصورت پروژه محور لاراول و ویوجی اس را در کنار هم دیگر آموزش میداد که برای یادگیری من خیلی موثر بود و خیلی سریع تونستم با این دوره ارتباط برقرار کنم و برای اونایی که میخان ویو جی اس را یاد بگیرند پیشنهاد میکنم .

در این دوره ی آموزشی یک دفترچه ی تلفن مخاطبین آنلاین بصورت SPA تولید میشه که در ادامه در مورد SPA و ارتباط آن با ویو جی اس توضیح خواهم داد .

وب سایت های SPA چیست و چطور با ویو جی اس وب سایت SPA تولید میشود ؟

عبارت SPA مخفف Single Page Application است . به معنی اینکه شما یک وب سایت را بصورت تک صفحه ای بسازید و برای کارهای مختلف درون وب سایت دیگر مرورگر کاربر دچار ریفرش و لودینگ های قابل احساس نباشد .

وب سایت تولید شده با تکنیک SPA باید به گونه ای باشد که کاربر احساس کند با یک اپلیکیشن نصب شده سر و کار دارد و ارسال و دریافت اطلاعات به سمت سرور را اصلا احساس نکند .

قبلا وب سایت های SPA با react و انگولار طراحی میشد اما با ورود vue.js به بازار کار برنامه نویسی وب داستان فرق کرد و برنامه نویسان علاوه بر react و angular حالا با vue.js میتوانند سایت های spa تولید کنند .

دمو زیر از سایت آواسام تهیه شده است و مربوط به دوره ی ساخت دفترچه ی تلفن بصورت spa است که با لاراول و ویو جی اس اتفاق میوفتد همانطور که میبینید سایت بصورت تک صفحه ای یا spa است برای مثال

برای درج یک مخاطب جدید یا ویرایش مخاطب های موجود یا هر کار دیگری هیچ لودینگی در مرورگر اتفاق نمیوفتد و درست مثل این است که با یک اپلیکیشن سر و کار دارید

خزعبلات منتشر شده درباره ی ویو جی اس که باید احتیاط کنید

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

از جمله خزعبلات و اشتباهاتی که در همین ویرگول به خورد برنامه نویس ها داده میشود یکیش تصویر زیر است :‌

جالب اینجاست که اگر در گوگل هم جستجو کنید مقاله ی بالا دارای رتبه ی خوبی است و همان صفحات اول نتایج گوگل نمایش داده میشود ولی مسئله ی مقاله ی بالا چیست ؟

قبل از هر چیزی باید درباره ی مقاله ی بالا خدمتتون عرض کنم mvc اصلا معماری سه لایه نیست !‌

مفهوم معماری سه لایه و کلا معماری های چند لایه در بحث نرم افزار با یک پترن دیزاین ساده مثل mvc کلا تفاوت داره و حالا چطور معماری سه لایه و mvc و این وسط vue.js به هم ارتباط داده شده خدا میدونه !!!

چطور میشه یک نرم افزاری اصلا از پترن دیزاین mvc استفاده نکنه ولی ویو رو استفاده کنه ؟ به راحتی آب خوردن چون اصلا ویو جی اس به mvc بودن یا نبودن ارتباطی نداره ضمنا view هرگز یک لایه نیست !‌

بلکه view در بحث mvc فقط و فقط یک المان است منبع از ویکیپدیای انگلیسی mvc

Model–view–controller (usually known as MVC) is a software design pattern commonly used for developing user interfaces which divides the related program logic into three interconnected elements.

دوستان به هر مقاله و آموزشی در وب اعتماد نکنید سعی کنید از منابع معتبر و ثابت شده توسط دیگر برنامه نویس ها استفاده کنید همین مقاله ی بالا خودش باعث انحراف ذهنی شما در مسئله ی معماریی های چندلایه در نرم افزار و همچنین کاربرد عنصر view در پترن دیزاین mvc و همچنین ماهیت vue.js میشود .