مقایسه فریم ورک های جاوا اسکریپت (Frontend) و نقد تخصصی

javascript-Frameworks-Comparison

با سلام، ما قصد داریم در این مقاله به بررسی تخصصی و مقایسه فریم ورک های جاوا اسکریپت (Frontend) بپردازیم. بحث ما و تست مورد نظر دارای نقاط مختلفی است که سعی می کنیم قدم به قدم آن ها را واضح کنیم. در این مقاله دو تست مختلف بر روی این فریم ورک ها انجام می شود. برویم سراغ تست اول!

نقطه ی اول: مقایسه فریم ورک های جاوا اسکریپت شامل فریم ورک هایی می شود؟

تست ما شامل تمام فریم ورک هایی است که در پروژه ی realworld حضور داشته باشند. این پروژه که لقب "The mother of all demo apps" را دارد (در فارسی به معنی مادر تمام اپ های تستی) گروه بزرگی است که اپلیکیشن هایی برای تست می سازند و این اپلیکیشن ها را در اکثر فریم ورک ها پیاده می کنند. ما فریم ورک هایی را تست خواهیم کرد که در صفحه ی آن ها ذکر شده باشد؛ می توانید این فریم ورک ها را در تصویر زیر ببینید:

شکل 1: مقایسه فریم ورک های فرانتد (Frontend)
شکل 1: فریم ورک های مورد تست ما

برای اطلاعات بیشتر به صفحه ی RealWorld در  GitHub مراجعه کنید.

نقطه ی دوم: چه مواردی مورد تست قرار خواهند گرفت؟

  1. عملکرد (سرعت): چه مدت زمانی طول می کشد که یک فریم ورک محتوا را نمایش داده و صفحه قابل استفاده شود.
  2. حجم: برنامه ی مورد تست ما چه حجمی دارد؟ آیا بزرگ است؟ حجم برنامه در این تست بر اساس حجم مجموع فایل های جاوا اسکریپت ادغام شده خواهد بود. برای فایل های CSS که بین تمام برنامه ها مشترک هستند از یک CDN استفاده می شود. HTML نیز برای تمام برنامه ها مشترک است بنابراین فقط فایل های جاوا اسکریپت اندازه گیری می شوند.
  3. تعداد خطوط کد: نویسنده ی کد ها برای نوشتن یک برنامه چند خط کد نوشته است؟ واضح است که برخی برنامه ها تعداد خطوط بیشتر و کمتری دارند بنابراین ما از مقادیر کوچک چشم پوشی می کنیم؛ چیزی که نباید وجود داشته باشد، اختلاف قابل توجه تعداد خطوط با بقیه ی برنامه ها است. در این قسمت تنها پوشه ی src/ چک می شود.

نقطه ی سوم: نتایج تست مقایسه فریم ورک های جاوا اسکریپت

الف) در مورد سرعت: در این قسمت مقدار  First meaningful paint را اندازه گیری می کنیم.

به طور خلاصه  First meaningful paint عبارتی است که توسط گوگل ساخته شده است و معنای آن مقدار زمانی است که طول می کشد تا محتوای اولیه ی یک وب سایت نمایش داده شوند. متاسفانه قسمت developers سایت گوگل برای ایران تحریم است؛ برای تست اطلاعات باید این تحریم را دور بزنید.

نتایج این تست برای مقایسه فریم ورک های جاوا اسکریپت چنین بود:

تست FMP در واحد میلی ثانیه - عدد کمتر یعنی بهتر
تست FMP یا (First Meaningful Paint) در واحد میلی ثانیه - عدد کمتر یعنی بهتر

دریافت تصویر این مقایسه با کیفیت بالاتر

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

ب) در مورد حجم: هر چه حجم کمتر باشد، زمان کمتری برای دانلود آن صرف می شود و از طرفی زمان کمتری هم برای parse برنامه نیاز است. این فاکتور، وابسته به سایز خودِ فریم ورک، به علاوه ی هر نوع وابستگی دیگری که به آن اضافه شود به علاوه ی قدرت build tool شما در ساخت bundle ها. نتایج تست ما برای مقایسه فریم ورک های جاوا اسکریپت به شرح زیر بود:

مقایسه فریم ورک های جاوا اسکریپت - حجم انتقال یافته به واحد کیلو بایت - عدد کمتر یعنی بهتر
حجم انتقال یافته به واحد کیلو بایت - عدد کمتر یعنی بهتر

دریافت تصویر این مقایسه با کیفیت بالاتر

پ) در مورد تعداد خطوط کد: با استفاده از cloc خطوط موجود در پوشه ی src در هر کدام از برنامه ها را شمردیم.

 cloc برنامه ای است که تعداد خطوط خالی، کامنت ها و خطوط کد های اصلی را می شمارد. اما ما کامنت ها و خطوط خالی را محاسبه نکردیم.

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

تعداد خطوط کد ها - عدد کمتر یعنی بهتر
تعداد خطوط کد ها - عدد کمتر یعنی بهتر

دریافت تصویر این مقایسه با کیفیت بالاتر

هر چه تعداد خطوط کد ها کمتر باشد کد شما سبک تر و مدیریت و ویرایش آن ساده تر و احتمال بروز خطا و bug ها کمتر!

بررسی سئو و بهینه سازی برای موتورهای جستجو

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

این تست اول ما بود. حالا با منابع دیگر تست دیگری نیز انجام می دهیم، پس برویم سراغ تست دوم!

❎✅❎✅❎✅❎✅❎✅❎✅❎✅❎✅❎✅❎✅❎✅❎✅

تست دوم ما با تست بنچ‌مارک آقای استفان کراس انجام می شود. برای اطلاعات بیشتر به سایت ایشان مراجعه کنید: Stefan Krause’s benchmark tool

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

نقطه ی اول: تست روی چه دستگاهی انجام می شود؟

تست ما روی یک دستگاه مک بوک با سیستم زیر انجام می شود:

  • (MacBook Pro (Retina, 15-inch, Mid 2015
  • Processor: 2.2 GHz Intel Core i7
  • Memory: 16 GB 1600 MHz DDR3
  • Graphics: Intel Iris Pro 1536 MB
  • Browser: Google Chrome, Version 69.0.3497.100

نقطه ی دوم: فاکتور های دخیل در تست کدام اند؟

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

  1. تغییر ساختار DOM (یا DOM Manipulation)
  2. زمان شروع به کار (یا Startup Time)
  3. اختصاص یافتن یا اشغال حافظه (یا Memory Allocation)

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

نقطه ی سوم: نتایج مقایسه فریم ورک های جاوا اسکریپت

ما تست ها را مانند مسابقات فوتبال به صورت گروهی انجام دادیم. از آنجایی که تعداد فریم ورک های تست شده بسیار زیاد هستند ذکر تک تک نتایج از حوصله و وقت خارج است و به همین دلیل منطق خود را در تست ها در یک گروه ذکر می کنیم و بقیه ی نتایج را به صورت نهایی برای شما قرار می دهیم. اگر به جزئیات علاقه مند بودید می توانید خودتان به بنچ‌مارک Stefan Krause’s benchmark tool سری بزنید.

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

  • Angular در مقابل Elm
  • AngularJS در مقابل Choo
  • Marionette در مقابل Mithril
  • Aurelia در مقابل Ember

نتایج این تست را در جدول زیر مشاهده می کنید:

نتایج تست های گروه اول در سه زمینه ی DOM Manipulation و Startup Time و Memory Allocation
نتایج تست های گروه اول در سه زمینه ی DOM Manipulation و Startup Time و Memory Allocation

دریافت تصویر این مقایسه با کیفیت بالاتر

در این گروه Angular در قسمت DOM Manipulation بسیار بهتر عمل کرده است اما در دو زمینه ی دیگر ELM پیشی گرفته است بنابراین برنده ی گروه اول، ELM است.

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

الف) در دسته ی DOM Manipulation

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

دریافت تصویر این مقایسه با کیفیت بالاتر

ب) در دسته ی Startup Time

مقایسه ی جاوا اسکریپت خالص با فریم ورک ها - از سبک ترین به سنگین ترین
مقایسه ی جاوا اسکریپت خالص با فریم ورک ها - از سبک ترین به سنگین ترین

دریافت تصویر این مقایسه با کیفیت بالاتر

پ) در دسته ی Memory Allocation

مقایسه ی جاوا اسکریپت خالص با فریم ورک ها - مقدار استفاده از حافظه پس از اضافه کردن 1000 ردیف
مقایسه ی جاوا اسکریپت خالص با فریم ورک ها - مقدار استفاده از حافظه پس از اضافه کردن 1000 ردیف

دریافت تصویر این مقایسه با کیفیت بالاتر

دعوای قدیمی بین React و Vue و Angular

طی چندین سالی که این فریم ورک ها پا به عرصه ی توسعه ی وب گذاشته اند، همیشه بین طرفدارانشان بر سر اینکه کدام یک بهتر است دعوا بوده و خواهد بود! به همین دلیل سعی کردیم نتایجی برای تستی جداگانه بین این سه به علاوه ی Preact و Inferno خدمت شما ارائه دهیم.

ابتدا مقادیر به صورت نسبی و نسبت به React:

مقادیر در مقایسه با React - رنگ سبز تر یعنی بهتر از React و رنگ قرمز تر یعنی بدتر از React
مقادیر در مقایسه با React - رنگ سبز تر یعنی بهتر از React و رنگ قرمز تر یعنی بدتر از React

دریافت تصویر این مقایسه با کیفیت بالاتر

سپس مقادیر به صورت نسبی و نسبت به Vue:

مقادیر در مقایسه با Vue - رنگ سبز تر یعنی بهتر از Vue و رنگ قرمز تر یعنی بدتر از Vue
مقادیر در مقایسه با Vue - رنگ سبز تر یعنی بهتر از Vue و رنگ قرمز تر یعنی بدتر از Vue

دریافت تصویر این مقایسه با کیفیت بالاتر

سپس مقادیر به صورت نسبی و نسبت به Angular 6:

مقادیر در مقایسه با Angular - رنگ سبز تر یعنی بهتر از Angular و رنگ قرمز تر یعنی بدتر از Angular
مقادیر در مقایسه با Angular - رنگ سبز تر یعنی بهتر از Angular و رنگ قرمز تر یعنی بدتر از Angular

دریافت تصویر این مقایسه با کیفیت بالاتر

نکته ی مهم: این بنچ‌مارک ها فقط روی یک دستگاه تست شده اند و نتیجه ی تحقیق یک نفر هستند بنابراین حرف اول و آخر را نمی زنند. همانطور که گفتیم، یکی دیگر از بنچ مارک های معروف interactive tool از آقای استفان کراس است. اگر دوست دارید نظرات او را هم بدانید روی این لینک کلیک کنید تا به جداول بنچ‌مارک او منتقل شوید و نتایج تست های او را هم ببینیند. همچنین با گذر زمان آپدیت های جدیدی برای این فریم ورک ها عرضه می شود که نتایج تست های مختلفی دارند و شما، در صورت علاقه مندی به این مباحث، باید حداقل هر سال آن ها را چک کنید.

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

در پناه حق.

نویسنده شوید

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد
25 مرداد 1398
سلام وقت شما بخیر استاد دیدگاهتون رو درمورد استفاده خودتون از vue خوندم و جالب بود ولی سوالی که ذهنمو مشغول کرده اینه که آیا vue میتونه به اندازه react قدرتمند باشه من تمام نیاز های من طراح رو برطرف بکنه ؟؟؟؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
25 مرداد 1398
سلام دوست عزیز، نظر لطف شماست. در حال حاضر Vue واقعا قدرتمند هست و چیزی از react کم نداره، هر کدوم هم نقاط قوت و ضعف خودشون رو دارن. هر دو react و vue تکنولوژی های خیلی پیشرفته ای هستند که نیاز های هر طراحی رو برآورده میکنند. توی قسمت هایی هم که ضعف داشته باشند همیشه راه حل های مختلفی وجود داره. البته به طور کل میگن که react کمی پیچیده تر و قوی تر هست اما از نظر کلی و طراحی هر دو شون میتونن کار شما رو راه بندازن و پیشرفته هستند. vue و react از نظر کارایی اینقدر به هم نزدیک هستن که تقریبا بیشتر مقالاتی که در موردشون نوشته میشه سلیقه ای هست، مثلا نویسنده میگه به این دلایل شخصی من react رو ترجیح میدم. اونچنان فرق بزرگی ندارن با هم. به هر حال در آینده یه دوره ی کاملا جامع از react در روکسو پلاس منتشر میشه که میتونید از اونجا به طور کامل با React آشنا بشید و صفر تا صدش رو یاد بگیرین.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

احسان
22 دی 1397
سلام خداقوت مقاله پرمحتوایی بود ممنون VUE که بهتره ظاهرا ؟؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
23 دی 1397
سلام خدمت شما دوست عزیز، نظر لطف شماست. راستش گفتن اینکه کدوم بهتره کار خیلی سختیه و از نظر خیلیا صحیح هم نیست، برای همین بنده فقط داده ی خام و مقایسه ها رو به اشتراک گذاشتم و شخصا نتیجه گیری نکردم. همیشه این دعواها بین برنامه نویس ها بوده و اگر دقت کرده باشین معمولا برنامه نویس های با تجربه سر این مسائل با هم بحث نمی کنن. این موضوع از دو نظر اهمیت داره: 1- همونطور که توی مقاله گفته شد اعداد به هم خیلی نزدیک هستن (واحد میلی ثانیه بود) و واقعا فرق عمده ای که کاربر بتونه احساس کنه وجود نداره، مگر اینکه پروژه ی بسیار عظیمی داشته باشین که این میلی ثانیه ها بخوان جمع بشن روی هم و تفاوت محسوس ایجاد کنن. 2- هر کدوم از این فریم ورک ها قابلیت های خاصی داره که ممکنه اون یکی نداشته باشه. برنامه نویس های مبتدی با خودشون فکر میکنن کدوم آدمی میاد از Elm استفاده کنه مثلا؟ باید بدونین خیلی از پروژه ها با اینا ساخته میشه چون قابلیت های خاص خودشون رو دارن. اگر کسی از اینا استفاده نکنه که جمع میشن و دیگه نیازی بهشون نیست، بلکه یک پروژه ی شکست خورده هستن. البته این قابلیت ها (مثلا اینکه typescript رو دارن یا نه) در پروژه های بزرگ و حساس اهمیت پیدا میکنه نه توسعه ی روزمره ی وب. اما اگر نظر شخصی من رو بخواین، بله من شخصا از Vue استفاده میکنم. دلیلش هم اینه که تمام فلسفه ی وجودی فریم ورک ها یا کتابخانه ها آسون تر کردن کار توسعه دهنده است و یادگیری و استفاده از Vue نسبت React و Angular بسیار آسون تر هست (این مسئله رو همه قبول دارن و مشهوره، برای همین داخل مقاله نیاوردمش). اگر بنده بخوام وارد پیچیدگی های اضافی Angular بشم، پس اصلا چرا اومدم سراغ فریم ورک ها؟ البته گفتم که برای بعضی از پروژه ها توجیه داره و نسبت به کاری هست که میخواین بکنین. در ضمن اگر در کانال تلگرام روکسو عضو هستید ما لینک نتایج نظر سنجی https://stackoverflow.com از توسعه دهنده ها رو اونجا گذاشتیم و به دلایل عجیب و غریبی! Vue جزو نظر سنجی نبوده! بنابراین فکر نکنین رای نیاورده، بلکه کلا جزو نظر سنجی نبوده. اما در بین توسعه دهنده ها خیلی محبوبه و به محبوبیتش اضافه هم میشه. میتونید این نظر سنجی رو ببینین که از 23 هزار نفر انجام شده: https://goo.gl/L3cvHs

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.