نوشته های Amin Najafi

مقایسه‌ی React و Vue، کدامیک انتخاب بهتری برای ۲۰۲۰ است؟

Amin Najafi — Fri, 12 Jun 2020 01:45:23 +0430

فریمورک‌های جاوااسکریپت به همراه HTML و CSS به بخشی جدایی‌ناپذیر از توسعه فرانت‌اند هر پروژه نرم‌افزاری تبدیل شده است. ۲۰۲۰ سالی دیگر برای انتخاب یک فریمورک مناسب جاوااسکریپت برای توسعه وب‌اپلیکیشن‌های شما خواهد بود.اگر درحال خواندن این مقاله هستید،‌فرض می‌کنم در مورد این‌که از چه نوع فناوری استفاده کنید،‌ گیج شده‌اید و نمی‌دانید چه کنید؟!تعیین این مسأله چندان هم ساده نیست و ما این مقاله را با هدف حل چنین شرایطی برای شما تهیه کرده‌ایم. برخی از سؤالات معمول در رابطه با انتخاب فریمورک مناسب، عبارتند از:React یا Vue ؟! کدام یک برای توسعه یک پروژه وب بهتر است؟بین React و Vue،‌کدام یک عملکرد بهتری دارد؟کدام یک از این دو فناوری جاوااسکریپت ،‌در بین توسعه‌دهندگان محبوب‌تر است؟کدام یک برای توسعه پروژه‌های تحت وب کوچک،‌ انتخاب بهتری است؟کدام یک از این فریمورک‌ها قابل اطمینان‌تر هستند؟!پس از خواندن پاسخ همه‌ی این سؤالات،‌ قادر خواهید بود تا تصمیم درستی بگیرید.خب بیایید React و Vue را براساس پارامترهای مختلف مقایسه کنیم تا از واقعیت این ابزارهای برنامه‌نویسی،‌ در سال ۲۰۲۰ پرده‌ برداری کنیم.مقایسه‌ی React و Vue : محبوبیتجاوااسکریپت در راه‌اندازی فریمورک‌ها و کتابخانه‌های جدید بسیار سریع است. در حقیقت این یک امر ثابت است که این فناوری‌ها بعد از هر چند ماه،‌ جایگاه خود را در نمودارهای آمار محبوبیت،‌ تبادل می‌کنند.بیایید نگاهی به آخرین آمار سال ۲۰۱۹ بیندازیم تا دریابیم که بین React و Vue ،‌کدام یک محبوبیت بیش‌تری دارد؟آمار ۱ : Google trends : روند جستجوهای گوگل برای Vue و React در نمودار خطی زیر به تصویر کشیده شده است. ری‌اکت در مقایسه با Vue.js،‌ در این جستجوها پیش رو تر است.آمار ۲ : بررسی‌های Stack Overflow : در بین محبوب‌ترین فریمورک‌ها،‌ ری‌اکت در صدر لیست قرار گرفته،‌ اما ویو جی اس نیز موفقیت چشمگیری داشته است. از زمان راه‌اندازی آن در سال ۲۰۱۴،‌ در زمان کمی،‌ تبدیل به گزینه‌ای محبوب،‌ برای توسعه‌دهندگان شده است.مقایسه‌ی React و Vue: سابقهدر ادامه،‌اجازه دهید تا با یک بررسی سریع،‌ پیش‌زمینه‌ای از این فناوری‌ها بدست آورید.Vue.js: یکی از مهندسین گوگل به نام ایوان یو،‌ در سال ۲۰۱۴ این فریمورک را ایجاد کرد،‌ در نتیجه این فریمورک از طرف یک کمپانی مشهور پشتیبانی نمی‌شود. نسخه ۲.۶.۱۰ ، آخرین نسخه آن در تاریخ ۲۰ مارس ۲۰۱۹ است.از زمان راه‌اندازی این فریمورک،‌ تنها ۵ سال گذشته،‌ که آن‌را به جوان‌ترین عضو خانواده جاوااسکریپت تبدیل می‌کند. Alibaba و Gitlab نام‌های مشهوری هستند که از مزایای این فریمورک استفاده می‌کنند. Vue به عنوان ترکیبی از ویژگی‌های برخی از فناوری‌های جاوااسکریپتی،‌ شناخته می‌شود.React: برخلاف vue،‌ این کتابخانه جاوااسکریپت توسط فیسبوک ایجاد شده است. مدیریت ترافیک تبلیغات فیسبوک،‌ دلیل اصلی ایجاد آن بود. این درست زمانی بود که فیسبوک در زمینه نگهداری و کدنویسی مشکلاتی را تجربه کرده بود. این فریمورک از جهت ایجاد رابط‌های کاربری پویا و تعاملی،‌ بسیار شناخته شده است.نسخه‌ی ۱۶.۸.۶،‌ آخرین نسخه‌ی ری‌اکت است که در تاریخ ۶ مه ۲۰۱۹ منتشر شد. برخی از شرکت‌های معروف که از ری‌اکت استفاده ‌می‌کنند، instagram ،BBC ،‌Whatsapp هستند. البته که این لیست واقعاً طولانی خواهد بود!مقایسه‌ی React و Vue :کاراییتغییرات در برنامه، که در رابط کاربری آن منعکس می‌شود را DOM می‌نامند. DOM می‌تواند مجازی یا واقعی باشد. از این رو، نوع آن تأثیر زیادی در عملکرد هر فناوری برنامه‌نویسی دارد.React : دارای DOM مجازی است که سبک و کم حجم است،‌ و همچنین فقط مخصوص مرورگر نیست. این یکی از دلایل عمده محبوبیت ری‌اکت است که با DOM مجازی،‌ مشکلات پرفرمانس‌های ناکارآمد را برطرف کرده است.Vue : ویو هم با DOMمجازی کار می‌کند،‌ اما در مقایسه با ری‌اکت عملکرد سریع‌تری دارد. همچنین عمل‌کردی بدون باگ را نیز ،‌تضمین می‌کند.مقایسه‌ی React و Vue : جامعه پشتیبانیجامعه پشتیبانی برای هر فناوری نرم‌افزاری،‌ بسیار مهم است. این باعث می‌شود تا کاربران جدید نسبت به یک فناوری خاص متعهد شوند. حال بیایید درباره جوامع پشتیبانی این دو فناوری بدانیم:React : فیسبوک برای حفظ ترافیک تبلیغاتی درحال افزایش خود، این کتابخانه جاوااسکریپت را توسعه داد،‌ همچنین کارمندان فیسبوک روی افزودن ویژگی‌های جدید و پیشرفت عملکرد ری‌اکت،‌ کار می‌کنند. این قابلیت اطمینان بالایی در بین توسعه‌دهندگان به وجود آورده است.Vue : همانطور که گفتیم،‌ توسط یکی از مهندسین سابق گوگل ساخته شده،‌ بنابراین از طرف هیچ برند شناخته شده‌ای پشتیبانی نمی‌شود. این امر عدم اطمینان را به همراه دارد،‌ اما با وجود این مشکلات، vue محبوبیت و پشتیبانی غیرمنتظره‌ای،‌ از طرف توسعه‌دهندگان به دست آورده. در‌واقع Vue به تنهایی برای خودش، پشتیبان ایجاد کرد.مقایسه‌ی React و Vue : حجم فریمورکReact از نظر حجمی،‌ کمی از Vue بزرگ‌تر است ،‌در حقیقت ری‌اکت حدود ۱۰۰ کیلوبایت و ویو حدود ۸۰ کیلوبایت است.حجم فریمورک‌ها/ کتابخانه‌ها،‌ می تواند تأثیر بسزایی در توسعه پروژه‌های توسعه نرم‌افزار داشته باشد. ری‌اکت برای انجام بعضی از کارها، نیاز به پشتیبانی از طرف سایر کتابخانه‌ها را دارد.یکی از این کارها،‌ Routing یا مسیریابی است. Vue حتی از نظر حجمی نیز کوچک‌تر است؛ که همین باعث می‌شود تا برای توسعه برنامه‌های کوچک و کم حجم،‌ مناسب‌تر باشد.مقایسه‌ی React و Vue :موارد استفادهقبل از انتخاب فریمورک مناسب،‌ برای کارآفرینان ضرورت دارد که درمورد نوع شرکت‌هایی که از آن فناوری استفاده می‌کنند،‌ تحقیق کنند. مدت مدیدی هست که جاوااسکریپت به بخش باورنکردنی از خدمات توسعه نرم‌افزار تبدیل شده است.در این‌جا معروف‌ترین شرکت‌هایی که از این دو فریمورک استفاده می‌کنند را بیان می‌کنم :React :همانطور که قبلاً گفتم، فیسبوک کمپین تبلیغاتی خودش را با استفاده از این تکنولوژی مدیریت می‌کند.توییتر ، یک پلتفرم رسانه اجتماعی است که به دلیل توانایی در ارتقا سریع شبکه شناخته شده است.اینستاگرام، یک پلتفرم اجتماعی است، که در درجه اول از اشتراک عکس پشتیبانی می‌کند.واتساپ، یک برنامه پیام‌رسانی است، که به طور گسترده‌ای در سراسر جهان استفاده می‌شود.Vue :Gitlab، یک مخزن برای توسعه‌دهندگان است،‌ که در توسعه پروژه‌های تیمی،‌ اشتراک گذاری، انتشار،‌ تست و همکاری و موارد بسیار دیگری کمک می‌کند.۹Gag،‌ یکی از بزرگ‌ترین شبکه‌های تفریحی در سرتاسر دنیاست و بسیارهم پرطرفدار می‌باشد.مقایسه‌ی React و Vue :منحنی یادگیریمنحنی یادگیری،‌ توانایی توسعه‌دهندگان نرم‌افزار در استفاده از کدهای یک زبان/فریمورک یا کتابخانه خاص است. بین این دو فریمورک،‌ ویو، طبق آمار، محبوبیت بیشتری بین توسعه‌دهنگان دارد.در نتیجه‌ی تحقیقات Stateofjs، ری‌اکت اکثر آرای توسعه‌دهندگان را به خود اختصاص داد.سوال این بود « استفاده کرده‌ام،‌ می‌خواهم دوباره استفاده کنم »عکس زیر نمایانگر پاسخ‌های شرکت‌کنندگان است.برای درک بهتر این نمودار به این‌جا مراجعه کنید.Vue، یک فریمورک جدید برای توسعه‌دهندگان وب است، که بسیار ارزش امتحان کردن را دارد.این امر به خوبی از این امتیاز که "آن را شنیده‌ام، دوست دارم آن را یاد بگیرم" نمایان می‌شود.و این می‌تواند تضمین کننده‌ی یک منحنی یادگیری امیدوارکننده،‌ برای این فریمورک ،‌ درسال‌های آینده باشد.مقایسه‌ی React و Vue : انعطاف‌پذیریReact : چیز زیادی برای ارائه در کتابخانه‌های رسمی ری‌اکت وجود ندارد. با این حال ابزارهایی وجود دارد، که شما می‌توانید با انتخاب آن‌ها،‌ انعطاف بیشتری داشته باشید.گرچه فریمورک‌هایی مانند انگولار وجود دارد،‌ که همه چیز را به صورت یک پک آماده در اختیار شما می‌گذارد و جایی برای آزمایش ابزار دیگر، باقی نمی‌گذارد.ابزارهایی هستند که می‌تواند با این فناوری ادغام شود، مثل React Routing ،‌Redux ،Mobx .توسعه‌دهندگان موبایل، از این نوع ‌آزادی لذت خواهند برد،‌ چراکه این امکان را به آن‌ها می‌دهد تا برنامه‌های پویا بسازند.Vue : برخلاف ری‌اکت، بعضی از ابزارها توسط سایت رسمی vue به توسعه‌دهندگان vue.js ارائه شده است. علاوه بر این توسعه سمت سرور،‌ توسط Vue service side render پشتیبانی می‌شود.برای نمونه vuex برای مدیریت وضعیت وvue Router برای مسیریابی، کتابخانه‌هایی هستند که در توسعه نرم‌افزارهای سفارشی مورد استفاده قرارمی‌گیرند.کلام آخرو اکنون با استناد به تحلیل فوق،‌ که به کمک آمار و حقایق بود، می‌توانیم نکات زیر را در مورد مقایسه این دو فریمورک ذکر کنیم:React در مقایسه باVue ، محبوب‌تر و میزان سرچ‌هایی که درباره آن بوده، بیشتر است.React توسط یک کمپانی مشهور،‌ یعنی فیسبوک پشتیبانی می‌شود؛ اما Vue چنین نیست.React انعطاف‌پذیری بیشتری را نسبت به Vue،‌ به توسعه‌دهندگان ارائه می‌دهد.حجم Vue از React کم‌تر استو در پایان،‌ امیدوارم که شک و تردید شما در این باره از بین رفته باشد و بتوانید تصمیم درستی بگیرید؛ اگر دوست داشتید،‌می‌توانید تجربیات شخصی خودتان را با ما به اشتراک بگذارید.منبع

۱۰ ویژگی جدید اکمااسکریپت ۲۰۲۰

Amin Najafi — Fri, 12 Jun 2020 01:30:00 +0430

یکی از مهم‌ترین ویژگی‌های جاوااسکریپت که آن را نسبت به دیگر تکنولوژی‌ها محبوب‌تر کرده، به وجود آمدن تغییر و تحول و به‌روزرسانی‌های مداوم در این زبان برنامه نویسی است.بعد از سال ۲۰۱۵ که بزرگ‌ترین به‌روزرسانی در جاوااسکریپت به نام ES6 اتفاق افتاد، انتشار نسخه‌های جدید از این زبان روندی سالانه پیدا کرد که این‌گونه برنامه‌نویس‌ها می‌توانستند خود را راحت‌تر با تغییرات همراه کنند.در این مقاله ۱۰ ویژگی جدید نسخه‌ی اکمااسکریپت ۲۰۲۰ که به تازگی منتشر شده را با هم بررسی می‌کنیم.۱. قابلیت BigIntتا پیش از این بزرگ‌ترین عددی که در حافظه‌ی جاوااسکریپت به عنوان یک Integer ذخیره می‌شد مقداری معادل «۱-۲⁵³» یا «۹,۰۰۷,۱۹۹,۲۵۴,۷۴۰,۹۹۱ -/+» بود که اکنون با اضافه شدن ویژگی کاربردی «BigInt» می‌توانید حتی بیش‌تر از این مقدار را نیز مورد استفاده قرار دهید.این ویژگی به شما این امکان را می‌دهد که اعداد بسیار بزرگتری را به منظور پردازش اطلاعات و داده‌ها یا برای اهداف دیگر، در حافظه ذخیره نمایید.همان‌طور که در تصویر مشاهده می‌کنید، باید به انتهای اعداد مورد نظر n اضافه کنید. این n باعث می‌شود که عدد شما به عنوان «BigInt» شناسایی شده و توسط موتورهای جاوااسکریپت (V8 یا هر موتور دیگری که استفاده می‌کنید) به طور متفاوت تفسیر و اجرا شود.این اعداد را نمی‌توان به دیتا تایپ قبلی اعداد تبدیل کرد، چرا که آن‌ نوع داده‌ی قدیمی دارای سیستم IEEE754 می‌باشد و قابلیت ذخیره کردن اعداد بزرگ‌تر از مقدار گفته شده (MAX SAFE INTEGER) را ندارد.۲. ویژگی Dynamic Importقابلیت «Dynamic import» به شما این امکان را می‌دهد که فایل‌های جاوااسکریپت دیگری را به صورت پویا و محلی، به عنوان ماژول در برنامه‌ی خود وارد کنید.این دقیقاً همان کاری است که تا پیش از این توسط Webpack و Babel انجام می‌شد.این ویژگی به شما کمک می کند تا بدون استفاده از Webpack یا انواع دیگر module bundlerها، کدهای مورد تقاضا (شناخته شده به‌عنوان code splitting) را به فایل ارسال کنید. همچنین می‌توانید در صورت نیاز، این کار را به صورت شرطی، در یک بلاک کد if-else قرار دهید.نکته‌ی قابل توجه آن است که شما در واقع یک ماژول را در برنامه وارد می‌کنید و این اتفاق هرگز یک Global Namespace را اشغال نمی‌کند.۳. عملگر Nullish Coalescingعملگر جدیدی به نام «Nullish Coalescing» قابلیتی را به جاوااسکریپت افزوده که توسط آن می‌توان به جای تشخیص مقدارهای «falsey»، مقدارهای «nullish» را بررسی کرد. اما تفاوت این دو نوع در چیست؟در جاوااسکریپت مقدارهایی وجود دارند که اصطلاحاً به آن‌ها «falsey values» گفته می‌شود، این مقدارها عبارت‌اند از: رشته‌های توخالی، عدد صفر NaN، null، false، undefined و دیگر مقدارهایی که ماهیت غلط دارند.گاهی ممکن است بخواهید یک متغیر «nullish» را تشخیص دهید و این یعنی متغیر مورد نظر یکی از دو حالت null یا undefined می‌باشد.برای این کار باید از عملگر «??» استفاده کنید.۴. سینتکس Optional Chainingسینتکس «Optional Chaining» به شما اجازه‌ی دسترسی عمیق به آبجکت‌های تودرتو را می‌دهد و در صورتی که آبجکت خوانده شده وجود نداشته باشد، مقدار undefined بازگردانده می‌شود.همچنین این ویژگی برای فراخوانی توابع و آرایه‌ها نیز به کار می‌رود.۵. متد Promise.allSettledمتد «Promise.allSettled» آرایه‌ای از «Promise»ها را می‌پذیرد و زمانی که همه آبجکت‌های داخل آرایه یکی از دو حالت معین «fulfilled» یا «rejected» باشند، تصمیم‌گیری می کند و به عنوان خروجی آرایه‌ای را برمی‌گرداند که هر آبجکت آن نتیجه‌‌ی Promise را نشان می‌دهد.۶.متد matchAll در رشته‌ها«matchAll» یک متد جدید اضافه شده به پروتوتایپ String می‌باشد که به Regular Expressions مربوط است. این متد یک پیمایشگر را در طول رشته حرکت می‌دهد و یکی پس از دیگری برای هر کاراکتر اطلاعات گروهی را نمایش می‌دهد.۷. ویژگی globalThisاگر شما کدهایی را به صورت کراس پلتفرم نوشته باشید که قابلیت اجرایی در Node.js، مرورگرها و web-worker‌ها را داشته باشد حتماً کار وقت‌گیری را برای استفاده از «global object» انجام دادید به دلیل این‌که در Node از «global»، در مرورگرها از «window» و در web-worker‌ها از «self» استفاده می‌شد و اگر ران‌تایم بیشتری هم وجود داشت، این آبجکت global برای هر کدام از آن‌ها متفاوت بود.بنابراین شما مجبور می‌شدید که ران‌تایم را تشخیص دهید و طبق آن global صحیح را انتخاب کنید.اکنون به لطف اکمااسکریپت ۲۰۲۰ این مشکل رفع شده و شما می‌توانید از «globalThis» که همیشه نشان‌دهنده‌ی آبجکت global است، استفاده کنید و فرقی ندارد که کد خود را کجا اجرا می‌کنید.۸. Module Namespace Exportsپیش از این هم، در ماژول‌های جاوااسکریپت امکان نوشتن کد زیر وجود داشت:import * as utils from './utils.mjs'اما تاکنون سینتکس مناسبی برای Export وجود نداشت:export * as utils from './utils.mjs'کد بالا معادل زیر است:import * as utils from './utils.mjs'export { utils }۹. ترتیب در دستور for-inقبلاً اکما ترتیب اجرا شدن دستور ( for ( x in y را مشخص نکرده بود به همین دلیل خود مرورگرها این ترتیب را تعریف و پیاده سازی می‌کردند. اما الان این موضوع به صورت رسمی در اکما ۲۰۲۰ استاندارد سازی شده است.۱۰. Import.metaآبجکت Import.meta توسط اکما اسکریپت، با یک پروتوتایپ null به وجود آمد.یک ماژول به نام module.js را در نظر بگیرید: