مقایسه فریمورک ‌های فرانت اند 2020 در realworld
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 6 دقیقه

مقایسه فریمورک ‌های فرانت اند 2020 در realworld

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

ما اپلیکیشن‌های مختلف را در realworld مقایسه خواهیم کرد. چیزی فراتر از یک برنامه "to do". معمولا "to do ها" دانش و چشم‌انداز کافی برای ایجاد برنامه‌های کاربردی را در realworld انتقال نمی‌دهند.

یک پروژه به گونه‌ای استانداردسازی می‌شود که با قوانین خاص مطابقت داشته باشد. به این صورت که API ها، markup استاتیک و استایل‌ها را شامل می‌شود.

همچنین این پروژه همسو با realworld نوشته و بازبینی می‌شود که به طور ایده‌آل توسط یک متخصص در آن حوزه ساخته یا بررسی خواهد شد.

کدام کتابخانه‌ها یا فریمورک ها را با هم مقایسه می‌کنیم؟

از زمان نگارش این مقاله، 24 پیاده سازی Conduit در ریپازیتوریRealWorld  وجود دارد. مهم نیست که یکی از موارد زیر باشد یا نه. تنها شرط آن است که در صفحه ریپازیتوریRealWorld  دیده می‌شود.

چه معیارهایی را بررسی می‌کنیم؟

عملکرد - برنامه چه مدت طول می‌کشد تا محتوا را نشان دهد و قابل استفاده شود؟

اندازه - حجم برنامه چقدر است؟ ما فقط اندازه فایل‌های جاوااسکریپت کامپایل شده را مقایسه خواهیم کرد. HTML و CSS در همه مشترک است و از CDN (شبکه تحویل محتوا) بارگیری می‌شود. همه فناوری‌ها به جاوااسکریپت محدود می‌شوند، بنابراین فقط این فایل‌ها را اندازه می‌گیریم.

خطوط کد - برنامه نویس برای ایجاد برنامه بر اساس مشخصات از قبل در نظر گرفته شده به چند خط کد نیاز دارد؟ توجه داشته باشید در برخی از برنامه‌ها کمی اغراق می‌شود، اما نباید تأثیر قابل توجهی داشته باشند. تنها پوشه‌ای که بررسی خواهیم کرد /src می‌باشد. فرقی نمی‌کند که به صورت خودکار تولید شده باشد یا نه، در هر صورت باید آن را حفظ کنید.

معیار شماره 1: عملکرد

ما نمره عملکرد را از Lighthouse Audit با کروم بررسی خواهیم کرد. Lighthouse نمره عملکرد را بین 0 تا 100 در نظر می‌گیرد. 0 کمترین امتیاز ممکن است. برای کسب اطلاعات بیشتر در مورد امتیاز دهی Lighthouse را بررسی کنید.

تنظیمات امتیازدهی

بررسی Lighthouse برای همه برنامه‌های تست شده

استدلال

هرکس بتواند سریع‌تر کارش را انجام دهد؛ تجربه فردی که از برنامه استفاده می‌کند بهتر می‌شود.

عملکرد (امتیاز 0 - 100) – امتیاز بالاتر بهتر است

توجه: PureScript به دلیل نداشتن Demo حذف شده.

نتیجه‌گیری

می‌بینید برنامه‌هایی که نگهداری و به روز نمی‌شوند، به شدت سقوط کرده‌اند. اگر نمره برنامه 90 هم باشد، تفاوت چندانی نخواهد داشت. ملاحظه می‌کنید کهAppRun ، Elm و Svelte واقعا پیشرفت چشم‌گیری داشته‌اند.

معیار شماره 2: اندازه

معیار اندازه تب‌های کروم است. هدرهای پاسخ GZIPed به علاوه بدنه پاسخ، همانطور که توسط سرور ارائه می‌شود.

این به اندازه فریمورک و همچنین به هرگونه وابستگی اضافه شده بستگی دارد. همچنین به قدری که یک ابزار بتواند کد استفاده نشده را از یک بسته حذف کند.

استدلال

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

اندازه انتقال به کیلوبایت – عدد کمتر بهتر است

نتیجه‌گیری

اقدام شگفت انگیز جامعه Svelte و Stencil در دستیابی آن به زیر 20 کیلوبایت، واقعا یک موفقیت بزرگ است.

معیار شماره 3: خطوط کد

با استفاده از cloc خطوط کد موجود در هر پوشه src را می‌شماریم. خطوط خالی و کامنت‌ها جزو این محاسبه نیستند.

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

جمله‌ای معروف از Dijkstra:

"اگر دیباگینگ فرایند از بین بردن اشکالات نرم‌افزار است، پس برنامه نویسی باید فرآیند قرار دادن آنها باشد."

استدلال

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

 خطوط کد – عدد کمتر بهتر است

نتیجه‌گیری

فقط Imba و ClojureScript با فریم مجدد می‌توانند برنامه را تحت LoC1000 پیاده سازی کنند. کلوژر به عنوان بیانگر غیرمعمول شناخته می‌شود. Imba برای اولین بار اینجا است و به نظر می‌رسد برای ماندن آمده است. اگر به LoC خود اهمیت می‌دهید، پس می‌دانید برای چه کاری باید اقدام کنید.

جمع‌بندی

به خاطر داشته باشید که این دقیقا مقایسه نظیر به نظیر نیست. برخی از پیاده‌سازی‌ها از تقسیم کد استفاده می‌کنند و برخی دیگر از آن استفاده نمی‌کنند. برخی از آنها در گیت هاب میزبانی می‌شوند، برخی در Now و برخی دیگر در Netlify. آیا هنوز هم می‌خواهید بدانید کدام یک بهترین است؟ پس تصمیم‌گیری با شماست.

پرسش‌های متداول

1 - چرا فریمورک های X ، Y و Z در این مقایسه گنجانده نشده است؟

زیرا در ریپازیتوریRealWorld  پیاده سازی آنها به اتمام نرسیده است. پس دست به کار شوید و راه‌حل را در کتابخانه یا فریمورک مورد علاقه خود به کار بگیرید و ما دفعه بعد آن را ارائه خواهیم داد.

2 - چرا آن را real world می‌نامید؟

زیرا کمی فراتر از برنامه To-Do است. منظور ما از real world این نیست که دستمزد، تعمیر و نگهداری، بهره وری، منحنی یادگیری و غیره را مقایسه خواهیم کرد. مقایسه‌های دیگری نیز وجود دارد که به برخی از این سوالات پاسخ می‌دهد. منظور ما از real world برنامه‌ای است که به یک سرور متصل می‌شود، احراز هویت می‌شود و به کاربران قابلیت CRUD را می‌دهد، دقیقا همان کاری که یک برنامه در دنیای واقعی انجام می‌دهد.

3 - چرا فریمورک مورد علاقه من را ذکر نکردید؟

لطفاً به پرسش شماره 1 بالا مراجعه کنید. اما در هر صورت باز هم ذکر می‌کنم زیرا در ریپازیتوریRealWorld  اجرای آن به پایان نرسیده است. من همه پیاده سازی‌ها را انجام نمی‌دهم، این مربوط به تلاش جامعه است. اگر می‌خواهید فریمورک خود را در مقایسه مشاهده کنید، پس در آن مشارکت داشته باشید.

4 - کدام نسخه از کتابخانه یا فریمورک را در نظر گرفته‌اید؟

نسخه‌ای که در زمان نوشتن مقاله در دسترس است (مارس 2020). اطلاعات از ریپازیتوری  RealWorldگرفته شده است. مطمئنا شما می‌توانید این را از ریپازیتوری گیت هاب دریابید.

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
در انتظار ثبت رای

/@erfanheshmati
عرفان حشمتی
Full-Stack Web Developer

کارشناس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت، تولیدکننده محتوا

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید