نوشته های فاضل فرنیا

مفاهیم اصلی استفاده از state در React

فاضل فرنیا — Sat, 25 Apr 2020 14:58:33 +0430

پیش از مطالعه این مقاله اگر اطلاعات اولیه و مفاهیم پایه ای در مورد state, props که در React استفاده می شه، ندارید لازمه که پیش زمینه ای در این مورد بدست بیارید. سایت reactjs آموزش همراه با مثال خوبی ارایه کرده که تو این مقاله ما میخوایم بیشتر به بحث state که تو سایت هم این لینک مفاهیم رو کامل توضیح داده بپردازیم.در React برای ساختن کامپوننت های قابل reuse از class و function استفاده می شه مهم ترین تفاوت این ها داشتن قابلیت state است به این معنی که کلاس ها در React بصورت stateful هستند و دارای متدهای برای مدیریت lifecycle هر کامپوننت که هر متد در زمانی خاصی از فرآیند mount شدن کامپوننت ها در DOM اجرا می شد. این تعریف تا نسخه 16.8 درست بود بعد از اون این امکان به function component ها داده شد بطوریکه میشه هرجاییکه قبلا از کلاس ها استفاده میکردیم با این function ها جایگزین کنیم که این اتفاق با استفاده از Hook ها میسر میشه در واقع بخوایم با جزییات بیشتری اگه نگاه کنیم React هوکی با نام useState ایجاد کرد که عملیات تعریف و بروز رسانی state را انجام می دهد و همینطور هوک هایی مثل useEffect معادل برخی متدهای lifecycle کلاس کامپوننت ها معرفی شد.تو پروژه های React ای قطعا به دفعات زیاد از state استفاده می کنیم حالا چه از setState در کلاس یا useState در function. این مقاله هدفش گوشزد کردن نکاتی در خصوص بروز رسانی state هست که رعایت کردنش واقعا اهمیت داره و اگه جاهایی ندونیم داره چه اتفاقی میافته ممکنه برنامه رفتار غیر قابل انتظاری داشته باشه که مطمئنا ناشی از خطای برنامه نویسه.پیش نکته: props ها معمولا به عنوان ورودی کامپوننت دریافت میشه که اطلاعاتشو از کامپوننت بالاسری یعنی جایی که فراخوانی شده میگیره. یک کامپوننت نمیتونه props خودشو update کنه و نباید هم اینکارو بکنه ولی میتونه props مربوط به children خودشو بروز کنه.نکته: هیچ وقت state رو بصورت مستقیم update نکنید حتما از setState و یا useState استفاده کنید.this.state.firstName = "Ali" //اشتباهthis.setState({firstName:"Ali"}) //صحیحاگه روش اول رو انتخاب کنید موجب بروز باگ های عجیب مخصوصا توی بروزرسانی لیست ها میشه و در حالیکه state تغییر کرده ولی عملیات re-render شدن انجام نمیشه.نکته: بلافاصله بعد از setState از مقدار state تو محاسبات بعدی استفاده نکنید بخاطر اینکه setState بعضی اوقات بصورت async اجرا میشه. React برای لحاظ کردن مسایل performanc ای چند update را به طور همزمان در یک setState انجام میده. this.setState({counter: this.state.counter + this.props.increment}) //اشتباهبه جای روش بالا از wrapper function ها استفاده کنید تا از callback استفاده کند.this.setState((state,props) => ({counter: state.counter + props.increment }))اگر حتما مقدار را برای محاسبات بعدی لازم داریم می توانیم از callback ای که useState دارد استفاده کنیم.this.setState({name: "Farid"}, () => this.handlexxx())که در اینجا متد handlexxx از مقدار بروز شده state استفاده میکند. دقت داشته باشید در React نسخه جدید که از هوک useState استفاده می کند پارامتر دوم به عنوان callback نمیگیرد و بجای آن از هوک useEffect استفاده می کند. بنابراین اگر جایی نیاز است پس از تغییر مقدار state کاری انجام دهیم مثلا یه وبسرویس رست فراخوانی کنیم میتوان از useEffect استفاده کرد.نکته: setState از خاصیت merge استفاده می کند به این معنی که اگر یه فیلد از یک object رو update کنیم مقدار بقیه فیلدهای اون object بدون تغییر می ماند و null نمی شود. البته اینکار در هوک useState اتفاق نمی افتد و باید state قبلی را spread کرد که از ... استفاده می شود.this.state ={ firstName: "Ali", lastName: "Razeghi", age:32}this.setState({age:50})person = {firstName: "Ali", lastName: "Razeghi", age:50} //خروجیبرای زمانیکه از هوک useState استفاده می کنیم:const [person,setPerson] = React.useState({firstName: "Ali", lastName: "Razeghi", age:32})setPerson({...person,age:50})بروزرسانی بالا state قبلی را spread می کند و فقط مقدار جدید عوض می شود.نکته: props دریافتی را به state نسبت ندهید. با اینکار جریان اطلاعات که از parent به children که منتقل می شود شکسته خواهد شد و قطعا کامپوننت هایی که در children ها قرار است با تغییر props مربوط به parent بتواند re render شوند، اتفاق نمی افتد. البته می شود با استفاده از متدهای lifecycle دستی update کرد که بتواند re render شود ولی یقینا کد dirty خواهد شد.یه مثال پرکاربرد از بروزرسانی state با استفاده از useState:در صفحاتی react ای ممکنه زیاد اتفاق افتاده باشه که نیاز به استفاده از لیست یا آرایه داشته باشیم مثلا بخوایم تو یه کامپوننت select لیستی از شهرها را برای انتخاب نمایش بدیم یا لیستی از محصولات رو بصورت جدول دارای سطر و ستون در جواب نتیجه جستجو یه محصول خاص به نمایش گذاشته بشه و ممکنه این جدول اطلاعاتش تغییر کنه مثلا محصول جدیدی اضافه بشه یا حذف بشه یا نه یه رکورد خاص تغییر کنه و ویرایش بشه. درنظر بگیریم که یه آرایه از object های محصولات رو در state ذخیره کردیم و میخوایم عملیات بروزرسانی داشته باشیم و بالطبع بلافاصله re render شدنو ببینیم. اولین و مهمترین نکته اینه وقتی state رو تعریف میکنیم از عبارت const استفاده میکنیم و ممکنه یه مقدار اولیه هم بهش بدیم که نشون میدیم این متغیر تعریف شده immutable یعنی غیرقابل تغییر است و اگه قرار باشه مقدار جدیدی بهش داده بشه از طریق setState اون مقدار جدید بهش assign میشه. حالا برگردیم به تغییر یه آرایه فرض کنیم میخوایم به لیست یک مقدار جدید اضافه کنیم اولین راهی که به ذهنمون میرسه استفاده از push برای add کردن یه item جدید به لیسته مثلا:setProducts(products.push(newItem) خوب این راه قطعا خطا خواهد داد و به نتیجه نمیرسه نکته ای که وجود داره اینه که دستور push درسته که مقدار جدید رو اضافه میکنه به لیست ولی این تابع دوباره لیست جدیدی برنمیگردونه که ست بشه در واقع این متد طول ارایه جدیدو برمیگردونه که اینجا فایده ای نداره. حالا راه حل چیه: استفاده از دستور concat و یا spread کرده state قبلی.setProducts(products => products.concat(item)) //use concatsetProducts(products => [...products , item]) //use spread دو روش بالا یه مقدار جدید به انتهای لیست اضافه می کنه و بهترین حالت هم استفاده از ویژگی ... در es6 و همچنین wrapper function برای جلوگیری از ایجاد باگ هست.اینکار بخاطر نقض نکردن خاصیت immutability مربوط به state است، react اجازه تغییر به صورت in-place را نمی دهد و باید مقدار جدید replace شود. که البته این خاصیت به دلایلی است که باعث جلوگیری از ایجاد باگ می شود و علاوه بر اون با این روش یه سیگنالی به virtual DOM می دهد که re render شود. همچنین از تغییرات ناخواسته پیشگیری می کند.مثال دیگه ای رو اگه بخواین بررسی کنیم مثلا ویرایش یه item از آرایه که هرجایی میتونه باشه که اولا باید index یا اون element رو تو لیست پیدا کنیم بعد مقدارش رو ویرایش کنیم و دوباره ست شه تو لیست و با این فرآیند قطعا state تغییر کرده و باید کل لیست دوباره ست شود. برای همچین کاربردهایی کتابخانه ای با نام immutability-helper استفاده می شه که قبلا کتابخانه react-addons-update برای اینکار مرسوم بود. اگه تو لینک گیت هاب کتابخونه برید دستورات متنوعی برای بروزرسانی داخل آرایه میبینید مثل اضافه کردن، remove، merge و غیره. البته یه راه حلی هم برای deep copy با توجه به پیچیدگی هاش داره.import update from "immutability-helper";let dataRows = update(list, {$splice: [[rowIndex, 1, newData]]});setList(dataRows); مثال بالا در واقع ایندکس اون object مورد تغییر رو پیدا میکنه و داده قدیم رو با داده جدید جایگزین میکنه. استفاده از این کتابخانه خیلی از پیچیدگی های بروزرسانی لیست ها با توجه به mutation برامون اسون میکنه.موارد بالا مثال ها و مواردی در خصوص استفاده از مهمترین ویژگی react یعنی state بود. در ادامه در مورد هوک دیگه ای با نام useReducer صحبت می کنیم که رفتاری مشابه با state داره و یه سری امکانات برای مدیریت و کنترل بیشتر روی state به ما میده. البته ناگفته نماند که در setState ای که ما استفاده می کنیم بصورت internal از reducer استفاده می کنه که پیاده سازیش از ما مخفیه.هوکی به نام useReducer وجود داره که در واقع همون کار useState رو انجام میده ولی حالا چه فرقی میکنه؟ در حقیقت از لحاظ کارکردی فرقی نمیکنه و هدفش بروزرسانی state هست ولی موارد کاربرد متفاوته. زمانیکه نیاز به بروزرسانی یه state ساده باشه هوک useState جواب کارمونو میده ولی اگه state پیچیده باشه بصورت object های تو در تو اینجا useReducer میاد وسط (اگه با Redux آشنا باشید این مفهوم اونجا کامل پیاده سازی شده)، یکی دیگه از جاهاییکه میشه استفاده کرد زمانیه که بررسی state های قبلی و بعدی مهمه و اینکه state بعدی به مقدار قبلی نیاز داره یا تغییر یه state وابسته به state دیگه ایه. این هوک همونجوری که از اسمش پیداست کاهش دهندس یعنی در نهایت همیشه فقط یک مقدار رو برمیگردونه که البته اگه بخوایم دقیق تر نگاه کنیم یک pair از current state و متد dispatch برمیگردونه. اینجا میتونید نحوه پیاده سازی رو همراه با مثال ببینید.

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

فاضل فرنیا — Wed, 25 Mar 2020 21:47:02 +0430

این روزها استفاده از کتابخانه ها و فریمورک های جاوا اسکریپتی برای بکارگیری در لایه واسط کاربری و ساخت صفحات وب بسیار متداول شده و سر زبان ها افتاده است. با توجه به نیاز برنامه ها در پیاده سازی صفحات پیچیده وتعاملی با قابلیت 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 است.در زیر به مقایسه این دو براساس پارامترهای مختلف می پردازیم:اطلاعات مخازن کد در GitHubhttps://star-history.t9t.io/#facebook/react&vuejs/vueNPM Trendshttps://www.npmtrends.com/react-vs-vueState Of JSUsageمشاهده اطلاعات بیشتر https://2019.stateofjs.com/front-end-frameworks/Google TrendsSpeed Benchmarkبا توجه به بررسی ها و مقایسه های انجام شده به چند دلیل تکنولوژی react ارجحیت دارد:1. بیشترین تعداد از استفاده کنندگان و توسعه دهندگان vue از کشور چین هستند که این آمار نشان می دهد بخشی از محبوبیت این فریم ورک نه به دلیل مزیتهای آن، بلکه به دلیل توسعه دهنده چینی آن می باشد.2. در ایران نیروهای کاری بیشتری آشنا و مسلط به react هستند و یافتن نیروی کاری جدید در صورت نیاز برای این تکنولوژی آسان تر است.3.از لحاظ React، Community قوی تر است و در صورت وجود مشکل ساده تر می توان به پاسخ آن دسترسی پیدا کرد.4. ری اکت React قابلیت توسعه بالاتری دارد و کامپوننت های بیشتری در اختیار developer قرار می دهد.

بررسی کاربردی promise، callback و async/await در React

فاضل فرنیا — Thu, 05 Mar 2020 20:04:44 +0330

promise، callback و async/awaitیکی از مهم ترین ویژگی هایی که جاوا اسکریپت رو به زبانی محبوب و پرکاربرد تبدیل کرده بحث non-blocking عه. برای اینکه این مفهوم جا بیافته لازمه نحوه load شدن صفحات جاوا اسکریپتی رو بیشتر بررسی کنیم وقتی یه صفحه وب رو باز میکنیم بسته به نوع و اندازه اون تعداد متفاوتی کامپوننت لود میشه که بعضا ممکنه داده ها و اطلاعاتش استاتیک باشه یا بصورت داینامیک از یجای remote فراخوانی بشن خوب حالا اگه این صفحه تعداد کامپوننت های داینامیکش زیاد باشه یعنی قرار باشه هر کدوم داده هاشو از یه سرویس یا سروری لود کنه صفحه از بالا تا پایین به ترتیب این فراخوانی ها انجام میشه و بعد اینکه با موفقیت داده ها فراخوانی شد تو قسمت مربوطه نشون داده میشن.فرض کنیم تمام سرویسایی که برای ارسال و دریافت داده ها اجرا می شن بصورت synchronous باشند یعنی هر درخواست باید تکمیل شه تا نوبت به پردازش بعدی برسه حالا اگه اون وسطا یه سرویس قطع باشه یا به هر دلیلی نتونه جواب مناسب رو بگیره رندر و نمایش صفحه همونجا متوقف میشه و اصلاحا میگن blocking اتفاق افتاده حالا برای حل این مسئله اومدن از سرویس ها Async استفاده کردن به این معنی که هر درخواست سرویسی لازم نیست صبر کنه تا جوابش بیاد کامپوننت های تو صفحه همه پشت سر هم اجرا می شن و هر وقت جواباشون اومد کامپوننت ها خودشونو بروز میکنن و مجددا render میشن اینجوری اگه سرویسی جواب نداد کل صفحه crash نمیکنه و فقط اون قسمت خاص کار نمیکنه.برای پیاده سازی سرویس های async از سه روش callback، promise و async/await استفاده میکنن در ادامه تعریف و پیاده سازی هر کدومو انجام میدیم و تفاوت هاش و جاهایی که کاربرد داره هم بررسی میکنیم.قبل از هرچی لازمه با مفهوم closure آشنا بشید: به توابعی که در آن ها به متغیرهای خارج از اون تابع دسترسی داشته باشیم توابع closure میگن که در واقع توابع callback و async هم از این نوع هستن. توابع closure بیشتر تمرکزشون روی scope متغیراس که اجازه دسترسی در سه حالت بهشون میده: یکی متغیرهای خوده تابع، دوم متغیرهای بیرون تابع و سوم متغیرهای global. حالا چرا لازمه دسترسی داشته باشه: فک کنید تو صفحه یه جدول داریم که اطلاعات کاربران رو نشون میده و این داده ها از طریق یه callback که سرویس فراخوانی میکنه پر میشن و از اونجایی که async هست در ابتدای لود صفحه اول جدول خالی نمایش داده میشه و بعد تو بدنه تابع callbackداده ها پر میشن و بعد از یه وقفه کوتاهی که خیلی وقتا هم ممکنه متوجه نشیم یا وقتی صفحه میره تو فاز loading... جدول با داده ها به نمایش درمیاد پس لازمه به متغیری که داده های جدول رو پر میکنه و بیرون از تابع تعریف شده برای پرکردن دسترسی داشته باشیم.بعد از اون مفهوم promise مهمه بدونید چیه؟در واقع object ای که ایجاد شده تا توابع async مقدار بازگشتی مثه sync داشته باشن یعنی توابعی که async باشن مثه callback وقتی صدا زده بشن یه object از نوع promise برگردونن. حالا این object چیه و چه ویژگی هایی داره؟ فرض کنید یه سرویسی ساخته شده که وقتی فراخوانی میشه به ما یه promise برمیگردونه، اول از همه مقدار برگشتی state, result داره که در ادامه میگم هرکدوم با چیا پر میشن. state سه نوع داریم: pending, fulfilled, rejected بعدا توضیح میدم چجوری تغییر میکنن. این سرویس وقتی یه object از نوع promise ایجاد میکنه تو constructor یه تابع با دو تا پارامتر مهم با نام resolve , reject پاس میده که اسم این تابع executor هست. کارشون چیه؟ اگه سرویس کاری که قرار بوده انجام بده با موفقیت انجام شده بشه نتیجه کار سرویس که حالا ممکنه لیستی از کاربرا باشه تو resolve ست میشه و اگه اجرای سرویس به خطا خورد یه object از نوع error مدنظر تو reject ست میشه. دقت داشته باشیم resolve , reject جزو توابع از پیش تعریف شده جاوا اسکریپت هستن و خودشون callback تعریف شدن.let myPromise = new Promise((resolve, reject) => { setTimeout(function() { resolve("Success!"); }, 250); setTimeout(function() { reject(new Error("Success!")); }, 250);});همونجوری که میبینید مقادیر تو تابع پر شدن البته باید توجه کنیم که هر promise فقط یکی از اینا رو برمیگردونه مثلا اگه resolve پر شده بود و اوکی بود همینجا بر میگرده و بقیه ignore میشن.وضعیت در ابتدا بصورت pending و اگه resolve شد میره به fulfilled اگرم خطا داشت و reject شد میره به وضعیت rejected.شکل زیر وضعیت و نتیجه را کامل نشون میدهاگه قبلا از jQuery استفاده کرده باشیم برای فراخوانی سرویس ریموت از ajax استفاده میکردیم که در واقع یه callback بود و حالا تو جواب برگشتی یه کارایی انجام میدادیم. این روزا که اکثرا از فریمورک جاوا اسکریپتی استفاده میکنن یه کتابخانه قوی برای فراخوانی سرویسای rest با نام axios ایجاد شده که همه http method ها رو ساپورت میکنه و در واقع یه async هست که بسته به پیاده سازیمون میتونه promise یا async/await باشه. من چون از react برای پیاده سازی بخش front استفاده میکنم مثالارو از اون میارم و درکل فرقی با بقیه نمیکنه. axios در حقیقت بگونه ای طراحی شده که callback هایی را پیاده سازی می کند که promise برمی گرداند.یه مثال ساده از فراخوانی async با axios:getUsers = () => { axios .get("http://localhost/api/users") .then(response => setUsersState(response)) .catch(err => { console.log(err); });};برای مدیریت response برگشتی اگه success باشه تو then و اگه fail باشه توی catch مدیریت میشه. بر فرض که سرویس بالا لیست کاربرا رو بما بده تو یه متغیر با استفاده از useState ست میکنیم و در جایی از صفحه این usersState رو بصورت جدول میتونیم نمایش بدیم.همین عملیات بالا رو با async/await هم میتونیم پیاده سازی کنیم ولی چرا؟ مگه چه مشکلی داره؟ در حال حاضر async/await جزو قابلیت هایی که توی ES6 معرفی شده و برای رفع پیچیدگی callback hell ایجاده شده. اول همین مثال بالا رو با async/await پیاده سازی کنیم بعد میریم سراغ پیچیدگی.getUsers = async () => { try { let response = await axios.get("http://localhost/users"); setUsersState(response.data); } catch (e) { console.log(e); }};نکته مهمی که اینجا وجود داره اینه که await باید حتما توی تابعی که با async تونسته wrap بشه استفاده میشه. نکته بعدی اینه که وقتی کلمه await را استفاده میکنیم به این معنیه که صبر میکنه تا جواب فراخوانی برگرده بعد ادامه میده یعنی response که resolve آن را پر کرده برای خط های بعدی حتما مقدار داره و catch هم اگر reject شد. در اینجا باید متذکر بشم که چون await داخل async قرار داره باعث ایجاد blocking نمیشه.حالا اگه شرایطی پیش بیاد که مجبور شیم از callback chain استفاده کنیم یعنی فراخوانی های async تو در تو داشته باشیم بطوریکه نتیجه یکی به عنوان ورودی در فراخوانی بعدی باشد پیچیدگی مدیریت resolve , reject کارو سخت میکنه که نتیجش میشه callback hell حالا مدیریت این زنجیره با asynch/await راحت تره.به مثال زیر دقت کنید:getUsers = () => { axios .get("http://localhost/api/users") .then(response => { return axios.post("http://localhost/roles", response.data); }) .then(response => setUsersState(response)) .catch(err => { console.log(err); });};همینو میتونیم با async/await پیاده سازی کنیم:getUsers = async () => { try { let response = await axios.get("http://localhost/users"); let res = await axios.post("http://localhost/roles",response.data); setUsersState(res); } catch (e) { console.log(e); }};

مباحث performance در برنامه های React

فاضل فرنیا — Wed, 26 Feb 2020 17:40:36 +0330

تو بحث performance برنامه های react ای نکاتی که مدنظر باید قرار بدیم اینه که بدونیم چه انتظاری باید از سرعت برنامه داشته باشیم مثلا load اولیه چقدر باید طول بکشه یا سرعت interaction با input ها چطوره و از طرفی هم با ابزارهای موجود باید performance اندازه گیری بشه تا بدونیم مشکلات و گلوگاه ها کجاست که بتونیم برطرفش کنیم اول میریم سراغ انتظارات:· سرعت لود اولیه صفحه بین 0.5 تا 2 ثانیس· سرعت پاسخ به input بین 50 تا 200 میلی ثانیه· هر کامپوننتی که بیشتر از یه ثانیه طول میکشه نیاز به نمایش loader داره· در بیشتر browser ها هر ثانیه 60 بار re-render خواهد شد· در مورد انیمیشن ها و transition ها 10 فریم بر ثانیساما کی به اینا توجه میکنه و براش مهمه؟ چرا کسی دقتی تو این سرعتا نداره؟ چون اکثر توسعه دهنده و طراح ها از سیتم های قوی و پهنای باند شبکه بالا بهره میبند درحالیکه کاربر نهایی عمدتا از گوشی های موبایل ارزان قیمت با سخت افزار ضعیف استفاده می کنند و خیلی مکان ها هم سرعت اینترنت بالایی ندارند بنابراین اونجا این سرعتا خودشون نشون میده و گاها باعث کلافگی و نهایت بستن اپ و خداحافظی کردن میشه.خوب همه میگن react سریعه و سرعت بالایی داره ولی از طرفی reconciliation هزینه بر است و اگر بدرستی مدیریت نشود این سرعت react به چشم نمیاد.و اما reconciliation چی هست؟React تغییر مستقیم در DOM را از طریق virtual DOM محدود میکنه بنابراین هر تغییر شما یک reconciliation را فعال می کنه بطوریکه DOM واقعی و virtual یکسان می شن بنابراین هر re render کردنی باعث ایجاد فرآیند reconciliation میشه و لازمه تا حد امکان ازش اجتناب کنیم.حالا virtual DOM چیه؟ در واقع یک object ایه که react ازش برای نمایش عناصر در صفحات استفاده می کنه و مهمترین کاربردش برای شناسایی المان های تغییر کرده در صفحه است تا فقط همونا re render شن و این دقیقا جاییه که باعث میشه react سریع باشه.DOM ساختار درختی داره و هر نودی که تغییر میکنه منجر به re render شدن کل کامپوننت های خودش و زیرمجموعه هاش میشه درحالیکه ممکنه هیچکدوم از بچه هاش تغییری نکرده باشند و نیازی به re render نباشه. فرض کنیم یک جدول به صورت لیستی از اطلاعات داریم و بالای صفحه یک دکمه داریم که رنگ theme پس زمینه رو عوض میکنه و با توجه به اینکه جدول زیرمجموعه اون صفحه هست و تغییر رنگ در بالاترین سطح اتفاق میافته پس جدول هم درحالیکه داده ها هیچ تغییری نداشته re render میشه ولی آیا واقعا لازمه؟برای شناسایی کامپوننت هایی که تغییر کرده تو صفحه درحالیکه بروزرسانی نداشته و هزینه بر است از یک کتابخانه با نام why-did-you-update میشه استفاده کرد خیلی هم راحته کافیه نصب کنیم و بعد از import در صفحه مربوطه whyDidYouUpdate(React) رو صدا بزنید و لاگ مربوطه رو در console ببینید.ابزار دیگه برای اندازگیری سرعت react app ابزاری به نام react Profiler عه سرعت load رو نشان میده و همچنین نحوه update شدن و فازهای commit. در اینجا فرآیند reconciliation رو میتونیم ببینیم چقدر زمان میبره و یه تصویری از اینکه هر کامپوننت چقدر طول میکشه load بشه به ترتیب slow به fast بما میده. در فاز کامیت react المنت ها را به DOM اضافه، حذف و یا بروزرسانی میکنه . در browser میتونید روی تب profiler کلیک کنید بعد از اون لازمه عملیات رکورد رو شروع کنید بعد از اون یه interaction با صفحه داشته باشید مثلا همون عوض کردن تم و در نهایت رکورد رو متوقف کنید اطلاعات زمانی کامیت و رندر شدن رو نمایش میده و میتونین جاهایی که لازم نیست و زمان بره شناسایی بشه.حالا راه هایی که باعث افزایش سرعت میشه چیاس؟تو lifecycle هر کامپوننت متدی به نام shouldComponentUpdate وجود داره که بصورت پیش فرض true هست حالا میشه برای جلوگیری از re render شدن در برخی مواقع و با بررسی چک های لازم این مقدار را false برگرداند تا خودش و بچه هاش re render نشن.راه بعدی استفاده از pure component هاست بجایclass component های رایج که در این حالت نیازی به مدیریت shouldComponentUpdate نداریم در این نوع کامپوننت ها اگر update ای داشته باشیم re rendr اتفاق میافته اگر نباشه نمیافته.هشدارهایی در خصوص استفاده از pure component ها:· فقط در class component ها که بصورت stateful هستن قابل استفاده است· shouldComponentUpdate را بصورت shallow comparison پیاده سازی میکند (این مقایسه در واقع deep نیست یعنی دو object را اگر دارای relation باشند را بررسی نمیکند)· در استفاده از this.props.children باید دقت کردحالا اگه بخوایم از قابلیت بالا تو functional component ها استفاده کنی که در واقع از re render شدن بیخودی جلوگیری بشه میتونیم از خاصیت React.memo() استفاده کنیم در واقع یجور قرار دادن اون component در memory عه که cache میشه برای استفاده مجدد و re render نشدن اضافینکاتی در خصوص استفاده از React.memo:با توجه به اینکه memo هم برا فهمیدن تغییرات از shallow comparison استفاده میکنه و البته قابل اعتماد نیس میتونه به عنوان پارامتر دوم memo یه تابع که عملیات مقایسه رو انجام میده ارسال بشه مثلFunction areEqual(prevProps, nextProps){If(prevProps === nextProps){Return true} else return false}React.memo(functional component,areEqual)عملیات بالا رو میتونید با profiler دوباره اندازه گیری کنید تا تفاوت سرعت در load و commit رو ببینید.استفاده از hook ها بدلیل نداشتن متدهای اضافی lifecycle در هنگام build بصورت minify خواهند بود که این موضوع باعث سبک تر بودن میشه و از این لحاظ به استفاده از class component ها ترجیح داده میشهحالا برای بهبود performance میتونیم از hook های مربوط به memo , callback استفاده کنیم.Const sampleMemo = React.useMemo( () => functionValue(), list);کد بالا در واقع نتیجه اجرای functionValue رو تا زمانیکه list تغییر نکنه memorize میکنه و از re run شدن جلوگیری میکنه.در کنار useMemo hook میتونیم برای افزایش performance از useCallback hook هم استفاده کرد با این تفاوت که useMemo یک value که نتیجه اجرای یک function است را برمیگرداند ولی usecallback یک function را که قرار است بعدا call شود را برمیگرداند.نکته مهم بعدی در خصوص بحث performance استفاده از list های طولانی و modification در عناصر یک آرایه است. مهمترین نکته ای که باید رعایت بشه اینه که هر المنت موجود در لیست باید key داشته باشه چرا که هنگام تغییر تو هریک از المنت ها برای پیدا کردن و update اون از این key که بایستی منحصربفرد باشد استفاده می شه. اشتباه رایجی که اکثرا مرتکب میشن استفاده از index برای key است که این موضوع در زمان تغییرات عمده و حذف از ارایه باعث میشه index ها re order بشن و باعث تغییر و re render المنت ها می شه. بهتره از primary key عناصر موجود در لیست به عنوان key کامپوننت ها در نظر گرفته شود.یک تکنیک برای استفاده از لیست های طولانی به صورتیکه همه لیست در ابتدا load نشه و بصورت دسته دسته و در صورت نیاز load شن میتونیم از react-window و یا react-virtualize استفاده کرد.اگر در جایی و صفحه ای از کامپوننت های پیچیده و شلوغ استفاده میکنیم و یا حجم زیادی از کتابخانه ها استفاده میشه در load اولیه زمان بر خواهند بود برای جلوگیری از این اتفاق استفاده از خاصیت React lazy , suspense میتونه مفید باشه. ویژگی lazy به این معنی که هرجا نیاز به کامپوننت باشه load میشه و در همان اول همه کامپوننت ها load نمیشن که باعث کندی میشه. در زمانی که عملیات load شدن اتفاق می افته می تونیم با استفاده از suspense و ویژگی fallback بگیم در اون زمان چه کامپوننتی بطور موقت به نمایش دربیاد.یکی دیگه از ابزارهای مفید در زمینه آنالیز کردن performance برنامه های react استفاده از webpack-bundle-analyzer عه.و برای مشاهده نتیجه باید در مود production اجرا شود. این ابزار تمام کتابخانه ها رو بررسی میکنه از لحاظ حجم و رابطه ها و تکراری بودن.با توجه به موارد بالا متوجه میشیم که اگه نکات ریزی که تو محیط توسعه واسمون مشکل ساز نیست رو رعایت نکنیم در آینده و محیط production به دردسر خواهیم افتاد.

بررسی رفتار Hibernate در ذخیره و بروزرسانی

فاضل فرنیا — Wed, 26 Feb 2020 11:17:25 +0330

اگه از هایبرنیت به عنوان orm برای ارتباط با دیتابیس استفاده کنیم و تمام transaction های ذخیره و بازیابی بک اند و لایه مدل با هایبرنیت انجام بشه لازمه نکاتی رو در خصوص update کرده رکوردها درنظر بگیریم.معمولا ذخیره و بروزرسانی با یک متد persist از entity managerانجام میشه بصورتیکه اگر entityارسالی id که همان primary key است داشته باشد یعنی قبلا ذخیره شده و الان دستور update باید انجام شود و اگر idنداشته باشه یعنی این entity باید یک رکورد در جدول مربوطه new کنه.تو بحث ذخیره داده ها بصورتی که یک رکورد جدید ایجاد کند بسته به استراتژی انتخاب شده برای ست کردن id به عنوان pkکه معمولا یک sequence از دیتابیس حالا اوراکل، mysql و یا postgreSQL فرقی نمیکنه (هرچند نحوه پیاده سازی sequence در این دیتابیس ها متفاوت است) را با فراخوانی nextval در یک session بدست آورده و مقدارو تو id ست میکنه بعد entity رو واسه persistمیفرسته برای دیتابیس. اینجا برای جلوگیری از یک رفت و برگشت مدل به دیتابیس برای گرفتن sequence میشه بر اساس قابلیت دیتابیس انتخابی sequence.nextval به عنوان default value در ساختار اون جدول تعریف شه اینجوری دریافت pk و ذخیرش توی یه سشن دیتابیس انجام میشه.برای بروزرسانی داده های موجود در یک جدول حالت های مختلف داره که بسته به هرکدوم تاثیرگذاری متفاوتی تو performance میتونه داشته باشه. اولا بر اساس مدل update کردن میتونه نحوه انجامش هم متفاوت باشه، فرض کنیم مثلا یه کاربر در جدول user تعریف کردیم و میخوایم تو حالت خاصی اونو فعالش کنیم یعنی فیلد activeرا true کنیم یعنی update کردن یه فیلد خاص بعضی وقتا هم نمیدونیم کدوم فیلد update شده و مجبوریم کل فیلدها را تو دستور update بزاریم که اگه جدول ما تعداد ستون هاش زیاد باشه دردسرساز خواهد شد. رفتار پیش فرض اینجوریه که برای updateکردن اول یه findById میزنیم که مطمئن شیم اون رکورد تو دیتابیس وجود داره اگه نداشت که exception از نوع not_found پرتاپ میشه و اگر رکورد موجود باشه کل اطلاعات اون رکورد فراخوانی شده و هر فیلدی که تغییری کرده مقدار جدید ست میشه و برا ذخیره به دیتابیس ارسال میشه که در این حال دستور update برای تک تک فیلدها چه تغییر کرده باشه چه نکرده باشه اجرا میشه حالا اگه بخوایم جلوگیری کنیم از این اتفاق، دو راه وجود داره یکی اینکه مستقیم دستور update رو بنویسیم و فیلد مورد نظر رو فقط update کنیم که تو این حالت از متد save خودمون استفاده نمی کنیم.@Entitypublic class Account {@Idprivate int id;@Columnprivate String name;@Columnprivate String type;@Columnprivate boolean active;// Getters and Setters}اینجا از spring data jpa استفاده میکنیم@Repositorypublic interface AccountRepository extends JpaRepository {}حالا میخوایم یه فیلد رو update کنیمAccount account = accountRepository.findOne(ACCOUNT_ID);account.setName("Test Account");accountRepository.save(account);و چیزی که تو لاگ میبینیمupdate Account set active=?, name=?, type=? where id=?حالت دوم که حالت بهینه تری است استفاده از annotation @DynamicUpdate بالاسر کلاس entityهست به این صورت که مثل همون روش قبلی یه findبا id مورد نظر میزنیم اگر پیدا شد و کل دیتای رکورد مورد نظر فراخوانی شد حالا فیلد مورد نظر رو ست میکنیم به مقدار جدید که تو این حالت اگر saveرو صدا بزنیم و show-sql ما true باشد دستور updateبا تک فیلد رو تو log میبینیم. در واقع DynamicUpdate@ به ما این اطمینان رو میده که فقط ستون های modified شده در sql statementخواهد آمد. در ضمن باید دقت کنیم استفاده از این annotation برای ما performance overhead داره و هرجایی ازش استفاده نکنیم جایی که جدول تعداد ستون های بالایی داره و ما فقط چند تا از اونارو لازمه update کنیم.@Entity@DynamicUpdatepublic class Account {// Existing data and methods}و چیزی که تو لاگ میادupdate Account set name=? where id=?

Optimistic vs Pessimistic lock

فاضل فرنیا — Fri, 17 Jan 2020 18:42:14 +0330

دو نوع استراتژی در لاک کردن transaction مربوط به دیتابیس اوراکل مطرح هست حالت خوشبینانه و بدبینانه.استراتژی خوشبینانه: وقتی رکوردی fetch میشه و قراره update ای صورت بگیره بعد از اعمال تغییرات و قبل از کامیت رکورد تغییر یافته با قبل از fetch مقایسه میشه در این مقایسه هر جدولی یه ستون با نام version داره که معمولا از نوع integer و یا timestamp است و در واقع این فیلد مورد مقایسه قرار میگیره حالا اگه در حین انجام تغییرات یه کاربر دیگه این اطلاعات رو fetch کرده باشه و تغییر داده باشه و کامیت کرده قاعدتا version تغییر کرده و دراینجا خطا خواهیم گرفت. در این استراتژی رکورد قفل نمیشه و همزمان چند تراکنش قابلیت دسترسی به رکورد رو دارند.استراتژی بدبینانه: در این حالت برای جلوگیری از تغییر رکورد در همزمانی هر تراکنشی که رکورد را fetch کرد آن رکورد قفل می شود و هیچ سشن و thread دیگری تا زمانیکه کامیت قبلی انجام نشود و قفل را اصطلاحا release نکند نمی تواند به آن رکورد دسترسی داشته باشه.باتوجه به توضیحات بالا قطعا سرعت حالت بدبینانه کمتر از خوشبینانس ولی در عوض consistency رعایت می شه. البته اکثر مواقع هم حالت خوشبینانه استفاده می شه چون واقعا تفاوت سرعت قابل چشم پوشی نیست.

تفاوت sleep،wait،interrupt در thread

فاضل فرنیا — Wed, 15 Jan 2020 14:23:48 +0330

تو زبان برنامه نویسی جاوا مبحث thread ها و مدیریت همزمانی و همروندی اونا با یه سری متدها سر و کار داریم که بعضی وقتا لازمه thread هایی که همزمان به منابع مشترک دسترسی دارن یا به نحوی چندتاشون میخوان رو یه آبجکت در یک لحظه state اون آبجکت رو عوض کنن، بصورت دستی مدیریت و کنترل شن. متدهای ذکر شده اساسا برای ایجاد وقفه در thread ها استفاده میشه که حالا تفاوتای ریزی داره که میگم. متد sleep بر روی هر thread اگر اجرا بشه بر اساس پارامتر ورودی به میلی ثانیه اون thread متوقف شده و اجازه میده بقیه thread ها اجرا بشن و بعد از اتمام زمان تعیین شده دوباره اجرا می شه. بعضا بدرد جاهایی میخوره که میخوایم یه کار بصورت دوره های زمانی مشخص مثلا هر یک ساعت یبار اجرا شه.متد wait هم کاراییش مثه sleep میمونه با این تفاوت که اگر یک thread روی یک آبجکت که synchronized شده wait رو صدا بزنیم همینجوری منتظر میمونه تا اینکه یه thread دیگه روی همون آبجکت متد notify را صدا بزنه تا آزاد شه. بعضی وقتا هم جایی که برنامه قراره تموم شه محض احتیاط notifyAll رو صدا میزنن تا همه wait ها آزاد شن.متد interrupt هم کارش مثه بالاییاس باعث ایجاد وقفه در thread میشه با این تفاوت که state یک thread رو به حالت interrupted میبره که در واقع یه flag رو true می کنه. حالا اگه یه thread رو ما interrupt کنیم یعنی flag مورد نظر براش true باشه دو حالت ممکنه بوجود بیاد اگر اون thread که interrupted هست در حالت sleep باشه و یا در جایی از اجرای آن از sleep استفاده شده باشد به محض رسیدن به حالت sleep یه InterruptedException پرتاب خواهد کرد و اگر در هیچ جای آن thread از sleep استفاده نشده باشد فقط flag تغییر کرده.

انتقال پروژه ها از BitBucket به GitHub

فاضل فرنیا — Fri, 10 Jan 2020 18:29:19 +0330

چند ماهی میگذره که گیت هاب دسترسی ایرانی ها رو به repository های private بست و بعضا قبلش به همه کاربرا ایمیلی زد که پروژه هاتونو بردارید و اگر میخواین اینجا باشه باید به حالت public تبدیلش کنید. بعد از اون کلی جنجال و بیانیه و داستان بین کاربرای ایرانی بوجود اومد که چرا همچین کاری رو کرده و غیرقانونیه و نامردیه و چند تا فحش، من جمله خودم که واقعا این حرکتش ناجوانمردانه بود ولی چه میشه کرد زورش زیاده و رسما اعلام کرد این حرکت در راستای اعمال تحریم های ظالمانه علیه ایران بوده.بعد از این اتفاق من پروژه private نداشتم و قبلی ها هم public بودن و اساسا مشکلی برام پیش نیومد تا اینکه گذشت و من چند تا پروژه داشتم که بایستی private تعریف میکردم و یه سری کاربر رو هم رو پروژه دسترسی میدادم بنابراین مجبور شدم پروژه ها رو بیت باکت که با فیلترشکن هم باید واردش بشین push کردم که امکان private برام میسر باشه.بعد از گذشت مدتی لازم بود پروفایل گیت هاب رو به عنوان نمونه کارها به جایی ارایه بدم و مشخصا برخی پروژه ها اونجا نبود و نمیتونستم به طرف بگم آقا برو بیت باکت رو هم ببین از طرفی یه سری پروژه ها هم دیگه نیازی نداشت private بمونه. لذا تصمیم بر این شد یه سری از پروژه ها رو به گیت هاب منتقل کنم.دستورات زیر نحوه مراحل انجام این کار من برای هر پروژه بود:اول از همه fetch کردن پروژه از بیت باکت git clone https://ffarnia@bitbucket.org/ffarnia/conichi.git با دستور git remote -v میتونید آدرس remote repository رو ببینید که الان فقط مربوط به بیت باکت رو نشون میدهالان باید یه repository به صورت public روی گیت هاب بسازیم برای منتقل کردن پروژهبعد از اون باید آدرس گیت هاب رو اضافه کنیمgit remote add upstream https://github.com/ffarnia/conichi.gitحالا اگه دوباره دستور git remote -v رو بزنیم میبینیم علاوه بر آدرس بیت باکت آدرس گیت هاب هم اضافه شده با این تفاوت که اولی با آلیاس origin و دومی با آلیاس upstream نشون داده میشهالان وقتشه پروژه رو push کنیمgit push upstream masterبا اعمال دستورات بالا الان پروژه conichi رو هم به صورت private در بیت باکت دارم و هم به صورت public در گیت هاب.