انتخاب فریمورک واسط کاربری

این روزها استفاده از کتابخانه ها و فریمورک های جاوا اسکریپتی برای بکارگیری در لایه واسط کاربری و ساخت صفحات وب بسیار متداول شده و سر زبان ها افتاده است. با توجه به نیاز برنامه ها در پیاده سازی صفحات پیچیده وتعاملی با قابلیت responsive بودن، دارای جذابیت های بصری، تغییر در طراحی صفحات با تمرکز بر نقش UI/UX designer که بتواند تعامل موثرتری با کاربران داشته باشد و در عین حال سادگی را نیز در نظر بگیرد با تکنولوژی ها و زبان های پایه ای سخت و زمان بر خواهد بود لذا با توجه به نیاز موجود و برنامه نویسان، فریمورک های جاوا اسکریپتی با قابلیت های بالا و منعطف تر جهت افزایش سرعت تولید برنامه و همچنین سبکی با بهره وری بالا بوجود آمد.

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

انگولار: angular1 رقیب بلامنازع کتابخانه های واسط کاربری در بازه سال های 2012-2015 بود و کاملا مبتنی بر جاوااسکریپت، که از نسخه 2 مبتنی بر Typescript ارایه شد و به دلیل عدم ارایه مسیر مهاجرت مناسب از نسخه 1 به 2 بخش زیادی از برنامه نویسان به کتابخانه های دیگر مهاجرت کردند.

ویو: Vue یک فریم‌ورک رابط کاربری متن باز جاوا اسکریپت است که برای ساخت صفحات وب UI استفاده می‌شود. این کتابخانه توسط فردی به نام Evan You توسعه یافته است. قابلیت یکپارچه شدن با دیگر کتابخانه‌های رابط کاربری را بخاطر ساده بودنش دارد. ابتدا در سال 2014 منتشر شد و مجوز آن تحت مجوز MIT می‌باشد. پلت فرم‌های متقابل(cross-platform) را پشتیبانی می‌کند و کاملا به زبان جاوا اسکریپت نوشته شده است. به طوری طراحی شده است که می توان آن را با هر نوع کتابخانه‌ی UI سازگار کرد و قابل انطباق است.vue سعی کرد امکانات کتابخانه های دیگر مثل angular , react را تجمیع کند. این کتابخانه در شرکت های چینی از جمله Alibaba طرفداران زیادی دارد و عمده توسعه آن توسط سازنده آن انجام می شود هرچند contributor های زیادی از سراسر جهان دارد.

ری اکت: React به عنوان کتابخانه تولید UI از سال 2011 در Facebook آغاز شد و در سال 2012 در Instagram استفاده شد و در سال 2013 متن باز شد. این کتابخانه با معرفی JSX این امکان را می دهد که تولید کدها و مولفه های HTML در درون فایل های JS انجام شود. بصورت component-base ارایه شده و در سرور NodeJs امکان بارگذاری خارج از browser را دارد.

با توجه به موارد بالا جهت انتخاب فریمورک مناسب برای تولید UI در اینجا فقط به مقایسه React , Vue میپردازیم و از Angular بدلیل عدم حمایت مناسب سازندگان آن و کاهش برنامه نویسان خودداری میکنیم.

هر دو انتخاب‌های محبوب در بازار هستند. در ادامه به برخی از تفاوت‌های عمده می‌پردازیم:

• فریم‌ورک Vue برای توسعه برنامه های کاربردی کوچکتر آسان تر است، در حالیکه React در توسعه برنامه های گسترده و پیچیده وب کاربردی مفید است و از دیگر کتابخانه‌ها و بسته‌هایthird-party پشتیبانی می‌کند.
• فریمورک Vue از template ها برای ساخت کامپوننت ها استفاده می کند و React از JSX.
• هر دو free و open source هستند.
• از Vue برای ساخت Progressive Web Application ها که اصطلاحا PWA گفته می شود استفاده می شود و از React برای تولید Single Page Application ها.
• هر دو بر اساس Virtual DOM کار میکنند. از virtual DOM برای مقایسه با DOM واقعی جهت پیدا کردن element ها update شده استفاده می شود تا فقط همان element بروزرسانی شود تا کل صفحه، که این موضوع سرعت تغییرات در صفحه را بالا می برد.
• ویو Vue کوچکتر و سریعتر است، دارای قالب های ساده ایست که روند توسعه را سریع تر می کند و از لحاظ syntax نیز ساده تر است. درحالیکه React انعطاف پذیری بیشتری در برنامه های بزرگ در حال توسعه دارد. قابلیت تست آسان تری داشته ، برای برنامه های موبایلی مناسب تر است و اطلاعات و راه حل های بیشتری در دسترس برنامه نویس وجود دارد.
• ویو Vue توسط یه فرد چینی نوشته شده است درحالیکه React توسط برنامه نویسان فیسبوک توسعه و پشتیبانی می شود.
• یک برنامه نوشته شده با Vue براحتی در browser قابل load شدن است درحالیکه برنامه React نیاز به transpile دارد.(ترنسپایل عمل تبدیل از یک به زبان دیگر است و با کامپایل تفاوت دارد مثلا از Typescript به Javascript )
• طراحی در Vue ساده تر است و بطور کلی پیچیدگی های React را ندارد به عنوان مثال پردازش مقدار در React نیاز به بررسی وضعیت های قبلی و بعدی را برای اعمال دارد درحالیکه Vue براحتی عمل بروزرسانی DOM را انجام می دهد.
• ویو Vue در حقیقت یک فریمورک است که قابلیت تولید صفحات را به تنهایی دارد ولی React یک کتابخانه است و به عنوان core استفاده می شود و برای استفاده از قابلیت های بیشتر برای ساخت کامل یک برنامه وبی قطعا نیاز است از کتابخانه های دیگر به عنوان dependency استفاده کرد. بنابراین این موضوع باعث می شود با اضافه کردن resource vue به صفحه HTML ظرف چند دقیقه یه برنامه ساده داشته باشیم درحالیه React نیاز به build دارد.
• ری اکت React از Functional programming استفاده می کند و برای داشتن OOP نیاز است با Typescript نوشته شود بجای JSX ولی Vue ترکیبی از هر دو را دارد.
• هردو به صورت Single file component هستند به این معنی که هر کامپوننت را می توان در یک فایل نوشته و قابلیت reuse را دارد در Vue هر فایل به سه بخش Template, Script, Style تقسیم می شود که هرکدام کار خاصی انجام می دهد درحالیکه در React هر فایل JSX یک فایل جاوا اسکریپتیست که در درون آن HTML پیاده سازی می شود.
• برای ساخت برنامه های موبایل React در واقع React Native را معرفی کرده با شعار که یکبار نوشته می شود و در IOS , Android استفاده می شود. Vue نیز برای موبایل ابزاری را معرفی کرده است ولی مثل React شناخته شده به عنوان لیدر بازار نیست.
• بدلیل قدیمی تر بودن و پشتیبانی بهتر React بیشتر از Vue در production استفاده می شود و شزکت های معروفی آن را پیاده سازی کرده اند.
• مقایسه آگهی های شغلی در سایت های glassdoor , indeed و غیره بر اساس تگ react , vue نشان از تقاضای بالای فرصتهای شغلی در زمینه React است.
• تعداد سوالات پرسیده شده در StackOverFlow با tag برای Vue در حدود 49,429 و برای React در حدود 186,962 مورد بوده که نشان از کامیونیتی قوی تر React نسبت به Vue است.

در زیر به مقایسه این دو براساس پارامترهای مختلف می پردازیم:

اطلاعات مخازن کد در GitHub

https://star-history.t9t.io/#facebook/react&vuejs/vue

NPM Trends

https://www.npmtrends.com/react-vs-vue

State Of JS

Usage

مشاهده اطلاعات بیشتر https://2019.stateofjs.com/front-end-frameworks/

Google Trends

Speed Benchmark

با توجه به بررسی ها و مقایسه های انجام شده به چند دلیل تکنولوژی react ارجحیت دارد:

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

2. در ایران نیروهای کاری بیشتری آشنا و مسلط به react هستند و یافتن نیروی کاری جدید در صورت نیاز برای این تکنولوژی آسان تر است.

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

4. ری اکت React قابلیت توسعه بالاتری دارد و کامپوننت های بیشتری در اختیار developer قرار می دهد.