فرادرسآموزش Vue.js: آشنایی با مفاهیم مقدماتی Vue — بخش اول
Vue یک فریمورک بسیار محبوب فرانت‌اند برای جاوا اسکریپت است که شاهد رشد بسیار بالایی بوده است. این فریمورک کوچک (حدوداً 24 کیلوبایت) و بسیار کارآمد است. این فریمورک از همه فریمورک‌های فرانت‌اند جاوا اسکریپت و کتابخانه‌های view دیگر متفاوت است. ما قصد داریم در یک سلسله مقالات دنباله‌دار در مجله فرادرس به بررسی همه‌جانبه این فریمورک بپردازیم. در اولین بخش برخی از مفاهیم مقدماتی Vue را بررسی می‌کنیم. اگر قصد دارید به طور کامل با این فریمورک آشنا شوید، پیشنهاد می‌کنیم با ما همراه باشید.
منظور از فریمورک فرانت‌اند جاوا اسکریپت چیست؟
اگر دقیقاً نمی‌دانید فریمورک جاوا اسکریپت به چه معنا است، بهترین فریمورکی که برای شروع می‌توانید انتخاب کنید Vue است.
فریمورک‌های جاوا اسکریپت به ما کمک می‌کنند که اپلیکیشن‌های مدرن ایجاد کنیم. اپلیکیشن‌های مدرن جاوا اسکریپت به طور عمده در وب مورد استفاده قرار می‌گیرند، اما می‌توانند شامل اپلیکیشن‌های دسکتاپ یا موبایل نیز باشند.
تا اوایل دهه 2000 میلادی، مرورگرها امکاناتی که امروز دارند را نداشتند. آن مرورگرها قدرت کمی داشتند و ساخت اپلیکیشن‌های پیچیده درون آن‌ها از نظر عملکردی امکان‌پذیر نبود. ابزارهای مناسب چندانی نیز وجود نداشت.
همه این‌ها زمانی که گوگل اقدام به معرفی Google Maps و Gmail کرد، دچار تغییر شدند، زیرا این دو اپلیکیشن درون مرورگر اجرا می‌شدند. Ajax نیز امکان ایجاد درخواست‌های شبکه ناهمگام را فراهم ساخت. در طی زمان توسعه‌دهندگان شروع به ساخت اپلیکیشن‌هایی بر بستر وب کردند و در عین حال مهندسان روی خود پلتفرم یعنی مرورگرها، استانداردهای وب، API-های مرورگر و زبان جاوا اسکریپت کار کردند.
کتابخانه‌هایی مانند جی کوئری و Mootools نخستین پروژه‌های بزرگی بودند که بر مبنای جاوا اسکریپت ساخته شدند و برای مدتی بسیار محبوب بودند. این کتابخانه‌ها اساساً یک API-ی زیباتر برای تعامل با مرورگر ارائه می‌کردند و راه‌حل‌هایی برای باگ‌ها و ناهماهنگی‌های بین مرورگرهای مختلف تدارک می‌دیدند.
فریمورک‌هایی مانند Backbone ،Ember ،Knockout و AngularJS نخستین فریمورک‌های مدرن جاوا اسکریپت محسوب می‌شدند.
موج دومی که در حال حاضر شاهد آن هستیم React ،Angular و Vue بازیگران عمده آن هستند.
توجه کنید که jQuery ،Ember و دیگر پروژه‌هایی که اشاره کردیم، همچنان به صورت گسترده مورد استفاده قرار می‌گیرند، فعالانه نگهداری می‌شوند و میلیون‌ها وب‌سایت بر آن‌ها تکیه دارند.
با این حال، تکنیک‌ها و ابزارها تکامل یافته‌اند و شما به عنوان یک توسعه‌دهنده جاوا اسکریپت اکنون به جای آشنایی با فریمورک‌های قدیمی‌تر، نیازمند دانستن React ،Angular یا Vue هستید.
فریمورک‌های جاوا اسکریپت موجب ایجاد یک لایه تجرید برای تعامل مرورگر و DOM شدهاند. بدین ترتیب به جای دستکاری عناصر از طریق ارجاع به آن‌ها در DOM ما به صورت اعلانی آن‌ها را تعریف کرده و با آن‌ها در سطحی بالاتر تعامل می‌یابیم.
استفاده از فریمورک، شبیه به چیزی مانند استفاده از زبان برنامهنویسی C به جای استفاده از زبان اسمبلی برای نوشتن برنامه‌های سیستمی است. این فرایند مانند آن است که به جای ماشین تایپ از رایانه برای نوشتن اسناد استفاده کنیم. توصیف دیگر آن مانند استفاده از یک اتومبیل خودران به جای راندن خودروی معمولی است.
البته شاید در تمثیل کمی زیاده‌روی کرده باشیم، اما ایده کلی چنین است. به جای استفاده از API–های سطح پایین که از سوی مرورگر برای دستکاری عناصر ارائه می‌شوند و ساخت سیستم‌های بسیار پیچیده برای نوشتن یک اپلیکیشن، می‌توان از ابزارهای ساخته شده از سوی افراد بسیار باهوش استفاده کرد تا همه کارها آسان‌تر شوند.
محبوبیت Vue
اگر می‌خواهید بدانید فریمورک Vue چقدر محبوبیت دارید، باید اشاره کنیم که این فریمورک:
- در سال 2016، هفت هزار و ششصد ستاره در گیت‌هاب داشته است.
- این ستاره‌ها در سال 2017 به تعداد 36.700 رسیده است.
- این ستاره‌ها در زمان نگارش این مقاله در سال 2019 به عدد 150.000 نزدیک شدهاند.
- تعداد دانلود npm آن در حال حاضر هر هفته در حدود 350.000 است.
با توجه به اعداد و ارقام فوق می‌توان گفت که Vue محبوبیت بالایی دارد. این میزان محبوبیت را می‌توان با ستاره‌های گیت‌هاب React مقایسه کرد که سال‌ها قبل‌تر عرضه شده است.
البته اعداد گویای همه واقعیت‌ها نیستند. Vue واقعاً مورد علاقه توسعه‌دهندگان است.
یک نکته کلیدی در زمان ظهور Vue گسترش استفاده از آن در اکوسیستم لاراول بود. لاراول یک فریمورک وب اپلیکیشن PHP بسیار محبوب است. اما از آن زمان به بعد Vue در میان جوامع توسعه دیگر نیز گسترش یافته است.
چرا Vue محبوب توسعه‌دهندگان است؟
ابتدا باید گفت که Vue یک فریمورک «پیشرونده» (Progressive) است. این بدان معنی است که با نیازهای توسعه‌دهنده تطبیق پیدا می‌کند. فریمورک‌های دیگر نیازمند یک فرایند استفاده کامل از سوی توسعه‌دهنده یا تیم توسعه هستند و در اغلب موارد باید اپلیکیشن موجود را به طور کامل بازنویسی کرد، زیرا نیازمند مجموعه قراردادهای خاصی است. Vue عموماً از طریق یک تگ ساده script درون اپلیکیشن شما قرار می‌گیرند و بسته به نیازهای شما می‌تواند رشد پیدا کند و از 3 خط تا حدی گسترش پیدا کند که کل لایه view شما را مدیریت کند.
برای شروع استفاده از vue نیاز نیست در مورد webpack ،Babel ،npm یا هر چیز دیگری اطلاع داشته باشید. اما در زمان مقتضی Vue امکان استفاده از آن‌ها را به سادگی برای شما فراهم می‌سازد.
این نکته با توجه به اکوسیستم کنونی فریمورک فرانت‌اند و کتابخانه‌های جاوا اسکریپت که می‌خواهند افراد مبتدی و همچنین خبره را که در اقیانوسی از امکانات و گزینه‌ها غرق شدهاند جذب خود کنند بسیار حیاتی محسوب می‌شود.
Vue.js احتمالاً سهل‌الوصول‌ترین فریمورک فرانت‌اند موجود است. برخی افراد آن را جی‌کوئری جدید می‌نامند، زیرا به سادگی از طریق یک تگ اسکریپت درون اپلیکیشن جای می‌گیرند و به‌تدریج فضای مورد نیاز خود را به دست می‌آورد. این تعریف را می‌توان یک تحسین تلقی کرد، زیرا جی‌کوئری سال‌ها است که در بر پلتفرم وب تسلط یافته و همچنان در بخش وسیعی از وب‌سایت‌ها سرویس‌دهی می‌کند.
Vue با انتخاب بهترین ایده‌های فریمورک‌هایی مانند انگولار، ری‌اکت، Knockout و با گزینش بهترین امکانات آن فریمورک‌ها ساخته شده است. همچنین امکانات کمتر مورد استفاده فریمورک‌های دیگر حذف شده و بدین ترتیب نوعی گلچین فریمورک‌های دیگر ساخته شده است.
جایگاه Vue.js در میان فریمورک‌های فرانت‌اند کجا است؟
زمانی که از توسعه وب صحبت می‌کنیم، دو غول بزرگ وجود دارند که انگولار و ری‌اکت هستند. بدین ترتیب Vue چگونه جایگاه خود را در رابطه با آن دو فریمورک محبوب و بزرگ تعریف می‌کند؟
Vue از سوی Evan You زمانی که در گوگل و بر روی اپلیکیشن‌های AngularJS یا همان Angular 1.0 کار می‌کرد ساخته شده است. در واقع دلیل تولید آن نیاز به ایجاد اپلیکیشن‌هایی با کارایی بالا بوده است. Vue ساختار قالب‌بندی انگولار را برگزیده، اما ساختار سخت‌گیرانه و پیچیده‌ای که انگولار نیاز دارد را حذف کرده و آن را کارآمدتر ساخته است.
انگولار جدید (انگولار 2.0) بسیاری از مشکلات AngularJS را حذف کرده است، اما روش آن کاملاً متفاوت است. انگولار 2 همچنین نیازمند تایپ‌اسکریپت است که استفاده از آن یا دست‌کم یادگیری‌اش مورد علاقه همه توسعه‌دهندگان نیست.
در مورد ری‌اکت نیز می‌توان گفت که Vue ایده‌های خوب زیادی از آن اخذ کرده است که مهم‌ترینشان DOM مجازی است. اما Vue آن را با نوعی مدیریت وابستگی خودکار پیاده‌سازی کرده است. بدین ترتیب کامپوننت‌هایی که از تغییر حالت (State) متأثر می‌شوند، به طور خودکار ردگیری شده و تنها آن کامپوننت‌ها در زمان تغییر یافتن مشخصه حالت مجدداً رندر می‌شوند.
از سوی دیگر در React زمانی که بخشی از حالت که روی کامپوننت تأثیر می‌گذارد تغییر پیدا کند، کامپوننت مجدداً رندر خواهد شد. برای اجتناب از این وضعیت باید از متد shouldComponentUpdate هر کامپوننت استفاده کرد تا مشخص شود که آن کامپوننت نیاز به رندر مجدد دارد یا نه. بدین ترتیب Vue برحسب سهولت استفاده مزیت بیشتری دارد و به طور پیش‌فرض بهبود عملکرد خوبی ارائه می‌کند.
یک تفاوت مهم دیگر Vue با React در JSX است. با این که در Vue از نظر فنی می‌توان از JSX استفاده کرد، اما رویکرد محبوبی محسوب نمی‌شود و به جای آن سیستم قالب‌بندی خود Vue مورد استفاده قرار می‌گیرد. هر فایل HTML یک قالب معتبر Vue به حساب می‌آید. JSX بسیار متفاوت از HTML است و منحنی یادگیری آن برای افرادی در تیم توسعه مانند طراحان که تنها نیاز به کار با بخش HTML اپلیکیشن دارند، دشوار محسوب می‌شود.
قالب‌های Vue بسیار شبیه به Mustache و Handlebars هستند، هر چند برحسب انعطاف‌پذیری تفاوت‌هایی دارند. بدین ترتیب برای توسعه‌دهندگانی که از قبل از فریمورک‌هایی مانند انگولار یا Ember استفاده کرده‌اند، آشناتر هستند.
کتابخانه رسمی مدیریت حالت Vuex از معماری Flux پیروی می‌کند و مفاهیم آن تا حدودی شبیه به Redux است. در این مورد نیز این بخش یکی از مزیت‌های Vue محسوب می‌شود که یکی از الگوهای خوب React را مشاهده کرده و آن را در اکوسیستم خود مورد استفاده قرار داده است. با این که می‌توان از Redux به همراه Vue استفاده کرد، اما Vuex به طور خاص برای Vue و سازوکار درونی آن مناسب‌سازی شده است.
Vue انعطاف‌پذیر است، اما این واقعیت که تیم مرکزی دو پکیج را مدیریت می‌کنند که برای هر وب اپلیکیشن حائز اهمیت هستند (یعنی مسیریابی و مدیریت حالت) موجب شده که یکپارچگی آن بیش از React باشد. برای نمونه vue-router و vuex و کلید موفقیت Vue محسوب می‌شوند.
بدن ترتیب دیگر در زمان انتخاب کتابخانه‌ها جای نگرانی نخواهد بود که آیا این کتابخانه در آینده نیز همچنان نگهداری می‌شود و آیا به‌روزرسانی خواهد شد یا نه. از آنجا که این کتابخانه‌ها رسمی هستند، می‌توانید با خیال راحت از آن‌ها استفاده کنید. البته همچنان امکان استفاده از کتابخانه‌های دیگر نیز وجود دارد.
یکی از نکاتی که موجب می‌شود Vue در قیاس با React و Angular در جایگاه متفاوتی قرار گیرد، این است که یک پروژه indie است، یعنی از سوی شرکت‌های بزرگی مانند فیسبوک یا گوگل پشتیبانی نمی‌شود.
در عوض به طور کامل از سوی جامعه پشتیبانی می‌شود و توسعه‌اش را مدیون اسپانسرها و حمایت‌های مالی مختلف است. بدین ترتیب می‌توان مطمئن بود که Vue برحسب برنامه‌های کاری یک شرکت منفرد توسعه نمی‌یابد.
بدین ترتیب به پایان بخش اول راهنمای جامع Vue می‌رسیم. شما در این بخش با مفاهیم مقدماتی این فریمورک محبوب فرانت‌اند آشنا شدید. در بخش بعدی این سری مطالب نخستین اپلیکیشن خود را با استفاده از این فریمورک خواهیم ساخت. برای مشاهده بخش بعدی این سری مقالات آموزشی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- طراحی یک تقویم ساده با Moment ،CSS و Vue — راهنمای مقدماتی
- پنج ابزار برای توسعه سریع اپلیکیشن های Vue.js — راهنمای کاربردی
- ساخت اپلیکیشن ToDo با مجموعه MEVN (بخش اول) — از صفر تا صد
==
