نوشته های نیما عارفی

وب سایت react.ir و ادامه فعالیت وبلاگ من

نیما عارفی — Mon, 08 May 2023 15:32:45 +0330

بالاخره بعد از مدت ها تونستم وب سایت react.ir و راه اندازی کنم و دردسترس قراربدم. هدفم این بوده که بتونم تمام مقالات که مینویسم و اموزش‌هایی که تو یوتیوب به صورت رایگان میزارم و یکجا بتونم کنارهم داشته باشم تا شما دنبال کننده‌های کانال یوتیوب و ویرگول من بتونید تمام محتوای ساخته شده رو همرو یکجا کنار هم داشته باشید و راحت بتونید به محتوا دسترسی پیدا کنید.علاوه براین کنترل کامل روی پلتفرم باعث میشه که بتونم فیچرهای کاربردی اضافه کنم که به خواننده کمک کنه فرآیند یادگیریش ساده تر بشه. برای مثال از این بعد تو قسمت مقالات میتونم کامپوننت‌های ری‌اکت رو بدون نیاز به dependency به code sandbox یا سرویس های third party مشابه (بدون نیاز به iframe) رندر کنم تا همونجا بتونیم (با استفاده از MDX) کدهایی که داخل مقاله گفته شده رو اجرا کنیم و نتیجه رو ببینم و خب ویرگول این امکان و به من نمیداد.اسم دامنه رو از کجا اوردی؟یه شب ساعت ۳ - ۴ صبح دامنه تو سایت nic.ir ازاد شد و اونو به نام خودمون ثبتش کردیم. خیلی اسم قشنگیه دوسش دارم. خیلی سخته که اشتباه تایپش کنی، اشتباه بخونیش و یا اسمشو یادت بره!پیشنهاد خریدهم داشته، خریدار یه چیزی حدود ۱۵۰۰ دلار قیمت داد که اسم دامنه رو بخره ولی خب من برنامه دیگه‌ای براش داشتم. میخواستم برم دنبال passion ام و خودم یه چیز جدید خودم شروع کنم و entrepreneur بشم.مقاله جدیدهمین الان که دارم این پست و مینویسم یه مقاله جدید و کامل و طولانی که ریزبه‌ریز تمام تریک‌ها و نکات بالابردن پرفورمنس وب اپکلیکیشن‌های ری‌اکت و ری‌اکت نیتیو و با استفاده از الگورتیم memoization و هوک های useMemo و useCallback و تابع memo هستش و نوشتم داخل وب سایت react.ir گذاشتم. https://react.ir/blog/post/memoization-in-react-feat-hooks فاصله بین خط‌ها، سایز نوشته‌ها، رنگ بک‌گراند تمام اینارو جوری درنظر گرفتم که وقتی یه مدت طولانی خواستید به صفحه نگاه کنید چشمتون اذیت نشه و یا وقتی به انتهای خط رسیدید چشمتون خط بعدی و گم نکنه.قسمت مقالات وب سایت react.irمقاله رو بخونید، سوالی داشتید همونجا زیر مقاله میتونید کامنت بزارید و بپرسید. لینک مقاله رو با دوستاتون به اشتراک بزارید و دراخر اگر سوالی نداشتید چندتا ? تو قسمت نظارت بزارید که بدونم دوستش داشتید (کسایی که تو یوتیوب دنبال میکنن میدونن ? چیه)کانال یوتیوب؟چند سال پیش که کرونا بود اخر هفته‌ها به علت شیوع بیماری کرونا به جای تفریح و گشت و گذار و فعالیت های بیرون خونه مجبور بودم یه جوری زمان رو داخل خونه بگذرونم. پس تصمیم گرفتم یه کانال یوتیوب درست کنم و ویدیوهای آموزشی بزارم (و فهمیدم که چقدر آموزش دادن و دوست دارم) و خب چندتا ویدیو اولی که درست کردم با اینکه امکانات کافی نداشتم، بازخورد خیلی خیلی خوبی داشت و اینفلوئنسی که روی کامیونیتی داشت و همین امروزهم بعد از گذشت چند سال هنوز میتونم ببینم (احتمالا اکثر شما که این مقاله رو میخونید تا الان یکبار اسم ری‌اکت کوئری و شنیدید و ازش استفاده کردید و میدونید چقدر کار و راحت میکنه)موقع ادیت ویدیو ضبط شده، دستگاه بالای ۲۰ بار میگفت که رم کم اوردم و باید off load کنم همه چیو تو storage و چون storage کلا ۱۲۸ گیگ بود باید یه هارد اکسترنال وصل میکردم بعد از اونجا ادیت میکردم و سرعت ادیت خیلی میمومد پایین. از دوربین موبایل ایفون ۷ برای ضبط ویدیو های اول و اخر ویدیو ها استفاده میکردم کلا کیفیت جالبی نداشت و از اونطرف داخل خونه ضبط کردن ویدیو به علت نور کم خودش یه مسئله دیگه بود که باعث میشد ویدیوها کیفیت جالبی نداشته باشن. و خب مهمترین ابزار برای ضبط اموزش میکروفون بود که من از یه میکروفون یقه‌ای ساده برند بویا که صدای همه چیز و از همه جا رکورد میکرد و کیفیت جالبی نداشت استفاده میکردم.امروز بعد از گذشت چند سال از اون زمان تجهیزات خیلی خیلی بهتری گرفتم و به زودی ویدیوهای جدید و اماده میکنم و داخل کانال یوتیوب قرار میدم. شاید یه روزی درباره ابزارهایی و تجهیزاتی که استفاده میکنم برای ضبط ویدیو یه پست بزارم.به احتمال خیلی زیاد اکثریت دنبال کننده‌های من داخل ویرگول اصلا نمیدونن که من کانال یوتیوب دارم و اون ویدیوهارو از دست دادید.برای اطلاع از اخرین ویدیوها و دیدن لیست ویدیوهای یوتیوب من به صفحه ویدیو کست داخل وب سایت react.ir مراجعه کنید. https://react.ir/videos پیشنهاد میکنم حتما حتما ویدیو آموزش React Query و ببینید. (تا الان 4,254 بار دیده شده و ۷۵ نفر کامنت گذاشتن ?) https://youtu.be/bhn-4qZewak کانال تلگرامداخل تلگرام معمولا لینک ویدیو‌هایی که تو یوتیوب اپلود میکنم یا لینک مقالاتی که داخل وب سایت react.ir مینویسم و repost میکنم.و البته هروقت یه نکته مهم به دردبخور که کمک میکنه اپلیکیشن بهتری بنویسید و پیدا کنم که نمیتونه یه مقاله یا یه ویدیو یوتیوب باشه رو اونجا میزارم.میدونیستید اگر اسم تابعی که میخواید از کتابخونه lodash ایمپورت کنید داخل قسمت from بزارید، و از index lodash ایمپورت نکنید ۲۰ کیلیوبایت (gzip شده) (اگر فکر میکنید ۲۰ کیلیوبایت کمه باید بگم که نههه، ۲۰ کیلیوبایت خیلیههههه!!) حجم باندلتون کم میشه و سرعت برنامه‌تون بیشتر میشه؟اگر نکته بالارو نمیدونستید میتونید کانال تلگرام react.ir و به ادرس @react_ir دنبال کنید. https://t.me/nima_arf حرف آخرسایت react.ir هنوز کامل نشده و نیاز داره به شما که ازش استفاده کنید، ایراداتش برطرف بشه، اگر نکته‌ای دارید که فکر میکنید کمک میکنه react.ir پیشرفت کنه و بهتر بشه حتما با خود من در تلگرام @nima_arf درمیون بزارید که پلن بشه و بعدش پیادش کنم.این پایان کار این صفحه داخل ویرگول نیست، ولی خب از این بعد مقالات مربوط به برنامه نویسی وب و ری‌اکت و فرانت‌اند و داخل react.ir میزارم. (زندگی که همش برنامه نویسی نیست)از ویرگول که این پلتفرم و ساخته داده تشکر میکنم. به من خیلی کمک کرد که بتونم از comfort zone خودم بیرون بیام و بنویسم، بخونم و بتونم با شما تعامل داشته باشم.گاهی وقتا تا ۳،۴ صبح بیدار میموندم که مقاله تموم بشه که یه دفعه ادیتور ویرگول کرش میکرد و هرچی نوشته بودیم پاک میشد و محبور میشدم فرداش از اول همرو بنویسیم. (همشم نه، بستگی داشت که اخرین checkpoint کی بوده باشه - معمولا یکی دوساعت از کارمون میپرید).مجبور بودم کد. کپی کنم داخل بلاک کد ویرگول چون لینک‌های github gist و درست نشون نمیداد.و وقتی لینکی رو داخل تلگرام میذاشتم instant view تلگرام درست باکس هارو نشون نمیداد و مجبور بودم زیرشون تو پرانتز به کاربر توضیح بدم که از حالت instant view بیرون بیان تا اون قسمت و درست ببینن.با همه این مشکلات و سختی‌ها ویرگول تجربه خیلی خیلی جذابی بود.و همچنین از شما دنبال کننده‌ها که وقتتون و گذاشتید و خوندید و منو دنبال کردید و بهم انرژی دادید که ادامه بدم خیلی خیلی ممنونم.

خداحافظ ریداکس، سلام کانتکست (قسمت دوم)

نیما عارفی — Sat, 19 Oct 2019 05:12:54 +0330

تو قسمت قبلی درباره ویژگی‌های صحبت کردیم تو این قسمت یکم مسائل رو بیشتر باز می‌کنم ...اگر قسمت اول رو مطالعه نکردید از لینک زیر به اون دسترسی دارید: https://virgool.io/iran-react-community/hi-context-by-redux-r9mryjuvr8nd شاید برای شما هم سوال باشه که چرا این مقاله رو دو قسمت کردم ؟خب دلیلش این بود که می‌خواستم نظر شما رو درباره کانتکست بدونم، سوالاتتون رو بشنوم و اینجا تو قسمت دوم بهشون جواب بدم. (اگر از گوشی موبایل دارید این مقاله می‌خونید و لینک رو از تلگرام باز کردید، مطمئن بشید که تو حالت instant view نیستید چون قسمت‌هایی از مقاله تو اون حالت نمایش داده نمیشه نرم افزار گذر از تحریم هم داشته باشید بد نیست :)))) ) https://media.giphy.com/media/d3mlE7uhX8KFgEmY/giphy.gif کمی ری‌اکت !۱) همونطور که همه میدونید برای آپدیت استیت کافیه متد setState رو صدا کنیم.class Foo extends React.Component { state = { count: 1 } handle = () => { this.setState({ count: this.state.count +1 }) } render() { return } }ولی خب کد بالا مشکل اساسی داره اونم اینکه استیت رو داره بر اساس مقدار فعلی آپدیت می‌کنه!برای آپدیت استیت نسبت به استیت قبلی بهتره که از callback استفاده کنیم. با استفاده از callback برنامه ما optimize میشه، اینطوری ری‌کت می‌تونه به صورت یک دفعه (batch) مقدار استیت رو تغییر بده. کار با callback خیلی ساده هستش، کافیه متد handle بالا رو به صورت زیر تغییر بدیم:handle = () => { this.setState((prevState) => ({ count: prevState.count + 1 })) }برای فانکشن کامپوننت و هوک useState هم باید همین کار رو انجام داد.۲) هوک useState معادل state در کلاس کامپوننت‌ها نیستclass Foo extends React.Component { state = { name: "nim nim", age: 21 } handle = () => { this.setState({ name: "Nima" }) } render() { return } }با توجه به کد بالا اگر روی دکمه FixName کلیک کنیم، نام از nim nim به nima تغییر پیدا می‌کنه. و آبجکت استیت ما برابر میشه با:{ name: "nima", age: 21 }و اگر کامپوننت بالا رو با فانکشن کامپوننت و هوک بازنویسی کنیم:function Foo() { const [state, setState] = React.useState({ name: "nim nim", age: 21 }) function handle() { setState({ name: "Nima" }) } return }با کلیک بر روی دکمه FixName مقدار استیت برابر میشه با:{ name: "nima" }اگر دقت کرده باشید مقدار age از استیت حذف شده، این تفاوتی هستش که اول درباره اون صحبت کردم، برای حل این مسئله باید از callback استفاده کنید و استیت قبلی رو به استیت جدید اضافه کنیدfunction handle() { setState((prevState) => ({ ...prevState, name: "Nima" })) }۳) مقدار اولیه useState ؟function Bar() { const [state, setState] = React.useState(0) }خب تو مثال بالا مقدار اولیه state برابر هستش با عدد ۰، ولی اگر برای محاسبه مقدار اولیه قرار بود یه کار عجیب انجام بدیم چی ؟ مثلا مقدار اولیه استیت نتیجه اجرای یک متد باشه که عملیات پردازشی سنگینی داره و زمان میبره تا انجام بشه.function Bar() { const initalState = veryLongTask() const [state, setState] = React.useState(initalState) }خب مشکل ما یکبار اجرا شدن veryLongTask نیست، موضوع این هستش که هربار که کامپوننت ری‌رندر میشه اون متد باید صدا زده بشه نتیجه اون محاسبه بشه و در آخر مقدارش به درد ما ‌نمی‌خوره چون استیت فقط یکبار مقدار دهی میشه و از رندر دفعه دوم به بعد دیگه کاری به پارامتر اولی که بهش دادیم نداره و صرفا زمان CPU رو مصرف کردیم. برای حل این مشکل تیم ری‌اکت قابلیتی به ما دادن که این اتفاق نیوفته. کافیه به useState یک متد به صورت callback پاس بدیم و ری‌اکت اون متد رو فقط یکبار صدا میزنه و مقدارشو به عنوان استیت اولیه قرار میده const [state, setState] = React.useState(() => veryLongTask())که البته اگر بخوایم خیلی خفن طوری کد بزنیم میشه: const [state, setState] = React.useState(veryLongTask)با این تغییرات متد veryLongTask فقط یکبار صدا زده میشه.۴) ری‌اکت باهوش هستشبرای جابه‌جایی دیتا بین کامپوننت‌ها ما از پراپ استفاده می‌کنیم، تو دنیای ری‌اکت ما ۲ تا تا پراپ داریم که شرایطشون با بقییه پراپ‌ها فرق داره داره. پراپ key و پراپ children.به کد زیر دقت کنید:// MyComponent.js function MyComponent({ children }) { const [ count, setCount ] = React.useState(0) const handle = () => setCount(prevCount => prevCount + 1) return ( <> {children} ) } // ============ // App.js function App() { return (

I'm Nima Arefi

// <=== this is children ) }اگر دقت کرده باشید بین تگ باز و تگ بسته کامپوننت MyComponent کامپوننت‌های دیگه‌ایی رندر شدن و داخل MyComponent از طریق پراپ children کامپوننت هایی که بین تگ باز و بسته بودن رو رو صفحه نمایش دادیم. (تو این مثال مقدار children برابر هستش با

I'm Nima Arefi

)اینجا هستش که ری‌اکت شروع می‌کنه به optimize کردن children. اگر ما روی دکمه‌ای که داخل MyComponent هستش کلیک کنیم و کامپوننت ری‌رندر بشه، اتفاقی برای کامپوننت

I'm Nima Arefi

که داخل children بود نمی‌افته و اون دوباره رندر نمیشه :)بله ری‌اکت به قدری باهوش هستش که جلوی رندر شدن بی‌مورد رو بگیره.کمی جاوااسکریپت!۱) ۲ آبجکت با خواص یکسان باهم برابر نیستند!{} == {} // false { name: "nima" } == { name: "nima" } // false const foo = { nickName: "nim nim" } const bar = { nickName: "nim nim" } bar == foo // false bar.nickName == foo.nickName // true <=== WOW۲) متد‌ها متد می‌سازند!function foo() { function bar() { console.log("hi i'm bar") } function baz() { console.log("hi i'm baz") } return { baz, bar } } const { baz, bar } = foo() baz() // hi i'm baz bar() // hi i'm barو جالب تر اینکه scope خودشونو دارنfunction foo() { const data = { name: "Nima" } function bar() { console.log("hi i'm bar") console.log("And data is " + data.name) } function baz() { console.log("hi i'm baz") } return { baz, bar } } const { baz, bar } = foo() baz() // hi i'm baz bar() // hi i'm bar // and data is Nimaکمی الگوریتم!گاهی برای به خاطر سپردن یک مقدار لازم هستش اون مقدار رو Memorize کنیمvar memorizationFunc = function(func) { let cached = {}; // hash table to store the intermediate values return function() { let key = [].slice.call(arguments, 0); // convert arguments to array. if (cached[key]) { // has this been calculated before? return cached[key]; // return the value so we don't need to compute it } let val = func.apply(this, arguments); // call the function with arguments cached[key] = val; // save the value to the cached table return val; } }کاری که این الگوریتم می‌کنه خیلی ساده هستش فرض کنید متدی داریم به نام isPrime کار این متد این هستش که به ما میگه عدد اول هستش یا نهfunction isPrime(num) { for(let i = 2; i < num; i++) if(num % i === 0) return false; return num > 1; }خب کار با این متد خیلی ساده هستش، کافیه عدد رو بهش بدید تا نتیجه رو به شما برگردونهisPrime(2) // trueحالا شما فرض کنید این متد قراره یه کاره خیلی خیلی خیلی سنگین رو انجام بده مثلا پیدا کردن عدد اول ۵۰ رقمی (کلا هرچیزی که چند ثانیه وقت CPU رو بگیره) و چندین بارم ممکنه که بخواد اینکارو واسه یک عدد تکراری انجام بده.فهمیدن اینکه یه عدد اول هستش یا نه خیلی سخته، چون عدد اول به جز خودش و عدد یک به هیچ عدد دیگه‌ایی بخش پذیر نیست، و این یعنی عدد ورودی رو باید باید بر تمام اعداد طبیعی قبل از خودش (به جز ۱) تقسیم کنیم ببنیم نتیجه صفر میشه یا نه! اگر نتیجه تقسیم صفر شد یعنی اون عدد بخش پذیر بوده و عدد اول نیست (کل قضیه بیت کوین و ارز مجازی همینه، پیدا کردن یه عدد اول خیلی بزرگ که می‌تونه بیت کوین باشه ...) اگر کامپوننت ری‌اکتی داشته باشیم که قرار باشه اینکارو انجام بده چی ؟ (با فرض اینکه کامپوننت پدر این کامپوننت همش درحال ری‌رندر شدن هستش و این کامپوننتم در نتیجه ری‌رندر میشه با این که هیچ پراپی نداره)function MyComponent() { const [state, setState] = React.useState(1) const result = isPrime(state) return ( <> setState(event.target.value} />

number {state} is { result === true ? "" : "not" } prime

) }اینجاست که ما میایم memorize می‌کنیم یا به فارسی سخت به خاطر می‌سپاریم نتیجه اجرا شدن متد isPrime رو با همون الگوریتم memroize که کدش رو بالاتر گذاشتم.کار این الگوریتم خیلی ساده هستش هردفعه که متد صدا زده میشه ورودی های اونو داخل یه متغیر ذخیره می‌کنه:let key = [].slice.call(arguments, 0);آبجکت arguments تو هر فانکشنی هستش و داخل اون پارامتر‌هایی هستن که ما با اون متد رو صدا کردیم، مثلا با نوشتن کد `arguments[0]` شما به پارمتر اول فانکشن دسترسی دارید.این ورودی‌ها رو به عنوان key آبجکت ذخیره می‌کنهlet cached = {} cached[key] = WHAT ?خب حالا باید WHAT رو مقدار دهی کنیم و ساده هستش نتیجه اجرا شدن متد ورودی به memorize رو باید داخلش بزاریم، اگر کمی گیج شدید نگران نباشید ما متد memorize رو اینطوری صدا زدیم:const memorizedIsPrime = memorizationFunc(isPrime) memorizedIsPrime(1)پس ما به isPrime داخل memorizationFunc دسترسی داریم، اگر کمی اسکرول کنید و به بالا برید و کد الگوریتم memorize رو ببینید متوجه میشید که پارامتر اول این متد اسمش func هستش که اشاره گر به متد isPrime داخل اون ذخیره شده. پس کافیه func رو صدا کنیم.و در آخر نتیجه اون رو return کنیمvar val = func.apply(this, arguments); cached[key] = val; return val;و درآخر یک شرط میزاریم که چک کنیم آیا با این پارامتر‌هایی که متد رو باهاش صدا زدیم آیا قبلا متد صدا زده شده ؟ اگر صدا زده شده بود پس نتیجه رو از cache برمی‌گردونم و دیگه func رو صدا نمی‌کنیمif (cached[key]) { return cached[key]; } else { var val = func.apply(this, arguments); cached[key] = val; return val; }خب این خیلی خوبه و ری‌اکت هم برای ما متد useMemo رو قرار داده تا بتونم ازش هرجا که لازم بود استفاده کنیمfunction MyComponent() { const [state, setState] = React.useState(1) const result = React.useMemo(() => isPrime(state), [state]) return ( <> setState(event.target.value} />

number {state} is { result === true ? "" : "not" } prime

) }و خب اینطوری اگر ما isPrime رو با یک عدد بزرگ تست کنیم (لطفا از عدد 1000004249 برای تست استفاده کنید)، دفعه اول شاید ۴ تا ۵ ثانیه زمان ببره ولی خب دفعه دوم و الی آخر زمان محاسبه میشه یک عدد نزدیک به ۰. این الگوریتم خیلی خوبه ولی یه مشکل داره، اونم اینکه باید نتیجه محاسبه رو یه جا ذخیره کنه که این یعنی برنامه شما حافظه بیشتری مصرف می‌کنه هرچی برنامه شما بیشتر حافظه مصرف کنه کندتر میشه. خلاصه اینکه هرجایی نباید React.useMemo و React.useCallback و React.memo رو استفاده کنید ...البته خب شاید به خودتون بگید که چه ربطی به کانتکست داشت این قضیه، که جلوتر بهش میرسیم.قبل از شروع به کار یه مثال از کانتکس آماده کردم که می‌تونید از لینک زیر به کد اون دسترسی پیدا کنید:https://codesandbox.io/s/simple-counter-with-context-bf40l?fontsize=14برای درک این قضیه مثالی از حالتی که از ۱ کانتکست استفاده شده آماده کردم که از لینک زیر بهش دسترسی دارید: https://codesandbox.io/s/simple-counter-with-context-7g0yq?fontsize=14 کد کامپوننت CounterProvider تو حالتی که فقط ۱ کانتکست داریم به صورت زیر میشه:اگر دقت کرده باشید ما اینجا کار خیلی بدی کردیم :)value={{ state, setState }}اگر اسکرول کنید و قسمت کمی جاوااسکریپت رو از اول بخونید متوجه می‌شید که ۲ آبجکت حتی اگر کاملا شبیه به هم باشند و مقادیر یکسان داشته باشند باهم برابر نیستند، از طرفی زمانی که ما useContext استفاده می‌کنیم نیاز داریم هروقت که مقدار Context عوض شد کامپوننت ما دوباره رندر بشه تا اطلاعات جدید رو نمایش بده. خب این useContext مقدار قبلی که داخل کانتکست بود رو با مقدار جدیدی که داخل هر رندر از کامپوننت Provider میگیره مقایسه می‌کنه اگر باهم فرق داشته باشن کامپوننت‌های متصل به اون context دوباره رندر میشن، علاوه براین آبجکتی که ساخته میشه هردفعه با نمونه قبلی فرق داره (چون مقدار state عوض شده و بار اول ۰ بوده و بار دوم ۱ و ...)برای درک بهتر این موضوع بهتره روی دکمه Open in Editor هر ۲ مثال کلیک کنید. و کمی صبر کنید تا صفحه لود بشه و بعدش بر روی دکمه Add one چند بار کلیک کنید. در قسمت پایین و سمت راست باید این منو رو ببینید:روی گزینه Console کلیک کنید تا منوی مربوطه باز بشه و هر بار که روی Add one کلیک کنید می‌بینید که می‌نویسه کدوم یکی از کامپوننت‌ها رندر شده.تو مثال اول که ۲ تا کانتکست داشت، با هر بار کلیک روی دکمه Add One فقط MyComponent رندر مجدد میشه ولی تو مثال دوم می‌بینید که هر کامپوننتی که به کانتکست متصل باشه دوباره رندر میشه.اگر بخوام مثال واقعی از این حالت بگم میشه سبد خرید و دکمه افزودن به سبد خرید، ما نیازی نداریم که بعد از کلیک بر روی دکمه افزودن به سبد خرید کامپوننتی که دکمه افزودن سبد خرید رو داره دوباره رندر بشه.خب پس دلیلش مشخص شد، در یک کلمه بخوام بگم پرفورمنس. (اینکه طوری مقاله رو بنویسم و تدریس کنم که به صورت پیش فرض کد پرفورمنسش بالا باشه چند تا لایک داره ؟)از طرفی اگر کد کامپوننت AddButton رو ببینید متوجه میشید چرا اول مقاله به callback اشاره کردم :) اگر callback نبود ما باید کامپوننت AddButton رو هربار رندر می‌کردیم تا به آخرین مقدار count دسترسی پیدا کنیم و داخل از اون استفاده می‌کردیم.اگر متوجه منظور من شده باشید یه لبخند ملیح باید رو صورتتون باشه و تو دلتون بگید مگه داریم مگه میشه) https://media.giphy.com/media/3i7zenReaUuI0/giphy.gif اینا همه به این علت هستش که کانتکست از گوشت و استخون ری‌کت هستش و با API های ری‌اکت مچ میشه و کد نویسی با ری‌اکت رو ۱۰۰۰ بار جذاب تر می‌کنه.همونطور که تو قسمت قبلی قول دادم قرار شد که تو این قسمت درباره Action Creator ها و Middle-ware صحبت کنم.سازنده اکشن یا اکشن سازنده (Action Creator)ابتدای مقاله تو قسمت کمی جاوااسکریپت گفتیم که متدها متد می‌سازن فراموش که نکردید؟اگر یادتون باشه تو قسمت اول مقاله و داخل مثالی که یکم بالاتر زدیم ۲ تا کاستوم هوک ساختیم برای ارتباط با کانتکتست، یکی برای دسترسی به state و یکی دیگه برای setState.برای ساخت Action Creator کافیه کد کاستوم هوکی که setState رو داخل خودش داره رو یکم تغییر بدیم:حتی validation هم میشه نوشت که مثلا اگر مقدار ورودی عدد نبود خطا بده ...و هرجا که لازم بود از اکشن‌ها استفاده کنیم کافیه به صورت زیر عمل کنیم:?لی تمیزههههه خیلیییییییییییییی https://media.giphy.com/media/2YenyAQp1JVKJJAfsB/giphy.gif میدل ور (Middle-ware)خب اینجا قضیه یکم فرق داره، ما میدلور نداریم ولی ابزاری ۱۰ برابر قدرتمندتر داریم به نام Hook =)اول از همه بگم که شما می‌تونید به بیش از ۱۰۰۰ تا هوک آماده داخل سایت usehook.com دسترسی پیدا کنید https://usehooks.com/ برسیم به اصل ماجرا، تو این بازه زمانی که بین قسمت اول و دوم بود بعضی از دوستان ریداکس کار اشاره کردن که ما با نوشتن ۳ خط کد استیت ریداکس رو ذخیره می‌کنیم ولی تو کانتکست اصلا این نمیشه و ...فکر می‌کنید ذخیره کردن استیت کار سخیه ؟ پس این تکه کد رو ببینید:فقط با اضافه کردن ۳،۴ خط کد به Provider استیت اون ذخیره شد، برای مطمئن شدن از این قضیه کافیه کد زیر رو تست کنید و برای رفرش شدن صفحه رو دکمه‌ای که د رقسمت وسط و بالای صفحه قرار داره کلیک کنید https://codesandbox.io/s/simple-counter-with-context-1dr0i?fontsize=14 برای تمیز شدن کد Provider و امکان استفاده مجدد از این قطعه کد اون رو هوک می‌کنیم:به همین راحتی :) برای هرچیزی که فکر کنید کاستوم هوک وجود داره، اگر کاستوم هوک آماده‌ای برای کار شما نبود خودتون یدونه بسازید کار سختی نیست.مثلا برای سینک شدن استیت بین تب‌های مرورگر کافیه از Broadcast Api استفاده کنید که اونم کلا ۵،۶ خط کد نویسی داره.برای انجام تسک async (مثلا data fetching یا ajax زدن) نیازی به کاستوم هوک یا میدل ور نیست کافیه همچین کاری کنید:const setFoo= useFooDispatcher() React.useEffect(() => { axios.get("/foo") .then(res => setFoo(res.data)) }, [ setFoo ])یا اگر دوست داشتید مستقیم setState کنید مثل کد زیر نیازه یکم تو Provider کدتون رو تغییر بدید:const setFoo= useFooDispatcher() React.useEffect(() => { setFoo(axios.get("/foo")) }, [ setFoo ])من داخل سایت جدیدی که زدم هم PersistedState دارم و هم SyncedState که دیتا بین تب‌های مرورگر سینک بشه، یعنی اگر سایت من رو داخل ۲ تا تب باز کنید و داخل تب اولی لاگین کنید و یا چیزی به سبد خرید اضافه کنید، همون لحظه داخل تب دوم هم اعمال میشه :) https://antivirus.ir سرعت لود شدن سایت رو هم حس کنید :)امتیاز Google Page Insights و GtMetrix هم خودتون چک کنیدنکات پرفورمنسیتا جایی که ممکنه از useState برای استیت Provider استفاده نکنید، useReducer به علت اینکه متد dispatch که داره هیچ وقت عوض نمیشه، باعث میشه کامپوننت‌های متصل به کانتکست به هیچ وجه اضافه رندر نشن. (از طرفی کد ما با useReducer دقیقا مثل همون ریداکس میشه و خیلی راحت میشه از ریداکس به کانتکست سویچ کرد) اما متد setState که از هوک useState به دست میاد ممکنه عوض بشه ... اطلاعات بیشترقسمتی از مستندات ری‌اکتمقادیر داخل Provider رو Memorize کنید. اگر درحال ساخت کاستوم هوک بودید و مقدار Dispatcher رو عوض کردید، حتما متد جدید رو Memorize کنید. برای مثال کد زیر رو چک کنیدبرای اینکه تو هر رندر فانکشن جدید ساخته نشه و کامپوننت‌های متصل رندر اضافی نداشته باشن، با متد useCallback اون متد جدید رو memorize می‌کنیمو البته بیشتر مواقع میشه جلوی این قضیه رو با کمی بهتر اندیشیدن گرفت:استفاده از هوک در کلاس کامپوننت ممکن هستش ؟بله، با استفاده از HOC میشه از هوک‌ها در کلاس کامپوننت‌ها استفاده کرد.و هرجا که لازم بود فقط کافیه withCount رو به کامپوننتمون اضافه کنیم:مثال پیاده سازی شده کد بالا: https://codesandbox.io/s/save-state-simple-counter-with-context-ffzw2?fontsize=14 آیا کانتکست Devtools داره ؟بله، شما با React Devtools کانتکست رو هم می‌تونید دیباگ کنید.با یک کلیک می‌تونید تمام داده‌های یک کامپوننت (استیت، پراپ، کانتکس و ...) رو داخل کنسول لوگ کنید و یا کامپوننت رو دیباگ کنید و کلی قابلیت فوق‌العاده دیگه ...برای لوگ کردن اطلاعات کامپوننت کافیه اول اون کامپوننت رو انتخاب کنید و از منوی سمت راست صفحه روی آیکن "حشره یا باگ" کلیک کنید (دومین گزینه از راست)و اطلاعات کامپوننت ما به شکل زیر داخل کنسول چاپ میشن.کمی صبر کنید تا گیف کامل دانلود بشه بعد روش کلیک تا بزرگ بشه و تا آخر ببینیدما به این نتیجه رسیدم که کانتکست برای پروژه‌ای که داریم کافی نیست ؟ آیا هنوز باید از ریداکس استفاده کنیم ؟خیر، ابزاری به نام MOBX وجود داره که هزاران بار از ریداکس ساده تر هستش، شایدم میلیون‌ها بارمعمولا داخل یک وب‌سایت یا برنامه ری‌اکت نیتیو به چند کانتکست نیاز داریم ؟معمولا ۳،۴ تا نیاز هستش (UserProvider، CartProvider، ToastProvider و ModalProvider)ما با کانتسکت نمی‌تونیم خارج از React Tree چیزی رو به کانتکست اضافه کنیم یا مقدارشو بخونیم ؟بله این امکان وجود نداره که مثل ریداکس از dispatch و getState خارج از ری‌اکت استفاده کنیم. ولی تا وقتی که میشه هرچیزی رو به صورت کامپوننت رندر کرد چرا باید همچین کاری کنیم ؟مثلا استفاده از Axios و نیاز به تغییر وضعیت کاربر در کانتکست زمانی که درخواست ما با خطای ۴۰۱ مواجه شد!function AxiosInitilizer({ children }) { const dispatch = useUserDispatch() React.useEffect(() => { axios.interceptors.response.use( (response) => response, (error) => { if (error.response.status === 401) { // dispatch something into UserProvider history.push("/login") } return Promise.reject(error) }) }, []) return children }و بعدش فقط کافیه این کامپوننت رو کنار کامپوننت‌های دیگه رندر کنیم ... بعد از این مقاله میرسیم به قسمت سوم و پایانی که چندتا مثال از کانتکست رو تو پروژه‌های واقعی پیاده سازی می‌کنم و تمرکز رو روی هوک useReducer میزارم.https://reactjs.org/docs/hooks-reference.htmlبا این تفاسیر دوره آموزش هوک تغریبا کامل میشه. داخل مقاله زیر درباره useState و useEffect و کمی useRef و یکم useContext صحبت کردم: http://vrgl.ir/NaG2n تو قسمت قبلی و این قسمت سعی کردم useContext رو توضیح بدم.همچنین در ابتدای همین مقاله الگوریتم Memorize رو توضیح دادم و موارد استفاده از useMemo و useCallback رو تشریح کردم.شاید در آینده‌ایی نه چندان دور مقاله‌ایی درباره هوک‌ها با عنوان ناگفته‌های هوک نوشتم و هوک useEffect و useRef و useLayoutEffect رو بیشتر توضیح دادم.سخن پایانیاول اینکه خسته نباشید تا اینجا این مقاله رو دنبال کردید. امیدوارم که واستون مفید بوده باشه و من دوست دارم نظرات و سوالاتتون رو درباره کانتکست و این مقاله بدونم.دوم اینکه منو داخل توییتر دنبال کنید معمولا درباره ری‌اکت و جاوااسکریپت اونجا می‌نویسم. https://twitter.com/nima_arf سوم اینکه منو داخل ویرگول دنبال کنید که تا هردفعه که مقاله جدید می‌نویسم برای شما ایمیل بیاد. https://virgool.io/@arefinima و در آخر کانال تلگرام خودم رو دنبال کنید، داخل کانال لینک ویدیوهای آموزشی خودم رو میزام (از دوره React Router 5 تا الان که این مقاله رو می‌نویسم ۱۲ قسمت ضبط شده) https://t.me/react_ir

خداحافظ ریداکس، سلام کانتکست (قسمت اول)

نیما عارفی — Mon, 14 Oct 2019 05:03:05 +0330

تو این مقاله یاد میگیرم که ابزارهای قدیمی رو دور بریزیم و به ابزارهای مدرن و جدید (و صد البته هزاران بار ساده تر) روی بیاریم. (اگر از گوشی موبایل دارید این مقاله می‌خونید و لینک رو از تلگرام باز کردید، مطمئن بشید که تو حالت instant view نیستید چون قسمت‌هایی از مقاله تو اون حالت نمایش داده نمیشه)پیشنهاد می‌کنم که اول این مقاله رو مطالعه کنید تا متوجه بشید چرا ما به ریداکس نیاز داشتیم: https://virgool.io/iran-react-community/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun همونطوری که داخل مقاله بالا بهش اشاره کردم، ما برای ذخیره و جابه‌جا کردن اطلاعات بین کامپوننت‌ها به ابزار Global state management نیاز داریم. تو اکو سیستم ری‌اکت برنامه نویسا معمولا از ابزاری به نام ریداکس استفاده می‌کنن تا اطلاعات رو بین کامپوننت‌ها جابه‌جا کنن.یادگیری ریداکس خیلی سخته، از طرفی خیلی خیلی خیلی پیچیده هستش. خیلییییییچی شد که همه رو آوردن به ریداکس ما از روز اول کانتکست رو نیاز داشتیم ولی چون تو نسخه‌های اولیه ری‌اکت کلا کانتکست نبود و بعدشم Legacy Context اومد که خیلی سخت و عجیب قریب بود پس همه رفتن سمت Global State Management ها.بعدا که نسخه ۱۶.۳ ری‌اکت اومد کانتکست معرفی شد ولی امکانات کافی نداشت که جایگزین Global State Management ها بشه و دوباره این سنت دیرینه که هر پروژه ری‌اکت حتما باید ریداکس داشته باشه با ما برنامه نویسای ری‌اکت موند. قبل از اینکه ادامه تاریخچه کانتکست رو بگم، نیازه یه معرفی اولیه داشته باشیم که با نحوه استفاده از کانتکس هم آشنا بشید. خب کار با کانتکس خیلی ساده هستش، چون کانتکست هیچ چیز جدیدی نیست به جز استیت یه کامپوننت دیگه. شما فقط کافیه با ری‌اکت آشنا باشید تا بتونید کانتکست رو تو ۵ دقیقه یادبگیرید.به صورت کلی کانتکست که یه جور تونل هستش که میشه اطلاعات رو با اون بین کامپوننت‌ها جابه‌جا کرد و هروقت دیتا موجود داخل Provider عوض بشه کامپوننت‌های متصل به اون تونل دوباره رندر میشن ...خب این Provider که بالا اسمشو آوردیم چی هستش و از کجا میاد؟برای دسترسی به Provider کافیه متد createContext رو صدا بزنید تا یک شی Context داشته باشیدکامپوننت Provider که بالا درباره اون صحبت کردیم داخل آبجکت MyContext هستش، این کامپوننت یه پراپرتی (همون prop) داره به نام value که باید مقدار دهی بشه. هر مقداری داخل value بزارید به تمام کامپوننت‌هایی که به این کانتکس وصل هستن ارسال میشهتو مثال بالا ما یه کامپوننت ساختیم به نام FelanProvider (اسم کامپوننت زیاد مهم نیست که چی باشه ولی خب واسه خوانا بودن کد بهتره آخرش با Provider تموم بشه)، اگر دقت کرده باشید داخل متد رندر ما MyContext.Provider رو رندر کردیم و مقدار count که داخل استیت بود رو داخل پراپ value اون قرار دادیم. این یعنی الان داخل Context ما عدد ۰ هستش (چون مقدار اولیه استیت ما ۰ هستش).خب حالا از فاز کانتکست بیایم بیرون، اگر با ری‌اکت آشنا باشید می‌دونید که ما واسه عوض کردن استیت تو ری‌اکت از متد setState استفاده می‌کنیم. یعنی اگر بخوایم مقدار اون count رو عوض کنیم نیازه که setState رو با مقادیر جدیدا صدا بزنیم. مثلا:this.setState({ count: 2 })حالا اگر کامپوننت‌هایی که به این کانتکست متصل هستن بخوان استیت کانتکست رو عوض کنن باید چی‌کار کنن ؟ خب با حرفایی که ۲ خط بالاتر زدیم معلوم شد که باید setState بکنیم، ولی کدوم setState ؟ اون کامپوننت که به کانتکست وصل هستش استیت خودشو داره و setState خودشم داره پس اونو نباید صدا بزنیم !واسه همین میایم متد setState کامپوننت FelanProvider رو هم داخل کانتکس قرار میدیم.بدترین روش برای قرار دادن setState داخل کانتکست :اینکه چرا بدترین روش هستش رو پایی تر توضیح میدمروش جایگزین :این روش خیلی بهتره ولی خوانایی کافی رو نداره از طرفی باعث میشه کد ما یک پارچه نباشه، به این مسئله فکر کنید که اگر به جای کلاس کامپوننت فاکنشن کامپوننت بود setState رو کجا می‌خواستیم قرار بدیم ؟بهترین روش:تیم فیسبوک اعلام کرده که کلا از این روش برای قرار دادن setState استیت استفاده می‌کنهداخل مثال بالا ما ۲ تا کانتکس ساختیم، داخل اولی setState رو گذاشتیم و داخل دومی state رو قرار دادیم. این روش خیلی optimize هستش (پایین تر توضیح میدم درباره این موضوع)معادل کد بالا رو بخوایم با فانکشن کامپوننت و هوک بنویسیم میشه:اینکه Provider ما فانکشن کامپوننت باشه یا کلاس کامپوننت هیچ اهمیتی نداره (صرفا یک مثال ساده هستش برای جا افتادن مسئله)اگر با هوک آشنایی ندارید مقاله و آموزش ویدیویی من درباره هوک رو از لینک زیر دریافت کنید: https://virgool.io/iran-react-community/react-hooks-gnhzymcx21sf برگردیم به تاریخچه ...گفتم که تو نسخه ۱۶.۳ کانتکست امکانات کافی رو نداشت! منظورم چی بود؟ خب ما تا اینجا فقط اطلاعات رو داخل تونل قرار دادیم، برای خوندن اطلاعات بیاید ۲ تا کار کنیم.اول اینکه کامپوننت FelanProvider رو باید یه جایی رندر کنیم (ترجیحا یه جایی بالای درخت ری‌اکت باشه همونجایی که Provider ریداکس رو رندر می‌کردید):اگر از Create React App استفاده می‌کنید، فایل App.js رو برای اینکار انتخاب کنیدواسه اینکه به دیتای Provider دسترسی پیدا کنیم کافیه که Context رو ایمپورت کنیم و اونو رندر کنیم:صرفا جهت مثال زدن داخل قطعه کد بالا ۲ مدل کامپوننت رو قرار دادم مشکل این نسخه از ری‌اکت و کانتکست اینکه شما داخل لایف سایکل‌ها به دیتای کانتکست دسترسی ندارید (البته یه راه هستش به نام Higher Order Component گذاشتن ولی یکم کثیف کاری داره) و اینم بگم تو اون زمان اصلا هوک وجود نداشت پس فانکشن کامپوننت‌ها زیاد مشکلی نداشتن.اگر با HOC آشنایی ندارید پیشنهاد می‌کنم مقاله زیر رو بخونید: (البته با اومدن هوک‌ها موارد استفاده از HOC خیلی کم شده و دیگه استفاده نمیشه ازشون) https://virgool.io/iran-react-community/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun تا اینجا شما یاد گرفتید که چه‌طوری کانتکست رو راه اندازی کنید ولی خب استفاده از کانتکست اونقدرم دلنشین نبود (چی بود اون consumer گذاشتن و render prop کردن، حال آدم بد میشد اصلا)خلاصه چند وقت از منتشر شدن نسخه ۱۶.۳ گذشت و رسیدیم به نسخه ۱۶.۶، تو این نسخه شما با استفاده از static contextType می‌تونستید به اطلاعات کانتکست راحت تر دسترسی پیدا کنیدخب نسبت به نسخه قبلی خیلی بهتر شد و میشه به کانتکس مثل استیت یا پراپ رفتار کرد (حتی داخل لایف سایکل هم بهش دسترسی دارید) ولی متاسفانه فقط میشه یک کانتکس رو به این کامپوننت متصل کرد و این چیزی نیست که بشه باهاش کنار اومد چون تو پروژه‌های واقعی (منظورم اینکه تو مثال میشه یه جوری سر و تهش رو هم آورد ولی تو واقعیت نمیشه) به مشکل می‌خوریم...ری‌اکت ۱۶.۸ و ظهور هوک (Hook)قبل از هرچیزی باید بگم اگر نمی‌دونید هوک چه‌طوری کار می‌کنه حتما ویدیو آموزش و مقاله من رو درباره هوک‌هارو مطالعه کنید: https://virgool.io/iran-react-community/react-hooks-gnhzymcx21sf const data = React.useContext(CONTEXT_OBJECT)داخل اون ویدیو درباره کاستوم هوک صحبت کردم پس دیگه اینجا توضیح زیادی درباره کاستوم هوک نمی‌دم. کاستوم هوک‌ها همون فانکشن‌هایی هستن که همیشه ازشون استفاده می‌کردیم ولی داخلشون از هوک‌های ری‌اکت استفاده می‌کنیم پس باید قوانین هوک‌ها رو رعایت کنن، از طرفی به صورت قرار دادی واسه راحت بودن تشخیص کاستوم هوک‌ها از فانکشن‌ها پیشنهاد میشه نام کاستوم هوک‌ها با use شروع بشه، برای مثال بالا میشه نام useFelan رو به عنوان نام کاستوم هوک قرار داد.import React from "react" import { MyContext } from "../Providers/FleanProvider" function useFelan() { return React.useContext(MyContext) } export default useFelan خیلی کوتاه و ساده و خوانا ?حالا شما حالتی رو در نظر بگیرید که یک کانتکست برای ذخیره کردن اطلاعات کاربر داشته باشید به نام UserProvider و نام کاستوم‌ هوک اون رو useUser قرار داده باشید. (و یا سبدخرید که میشه CartProvider و useCart) و دسترسی به اون خیلی راحت هستش فقط کافیه هوک رو ایمپورت کنید و فراخوانی کنید.برای مثال کامپوننت Private Route که برای React Router نوشتید به صورت زیر پیاده سازی میشه:اگر آموزش React Router رو نیاز دارید پیشنهاد می‌کنم دوره رایگان آموزش React Router 5 من رو ببینید.فکر نکنم کسی تو ایران باشه که از خوبی‌های ماشین پیکان حرفی نزنه :)پیکان با این که ماشین خوبی بود کولر نداشت و با گذشت زمان قدیمی شد و از رده خارج شد، و جای پیکان رو ماشین‌های دیگه گرفتناگر نسخه‌های قدیمی ری‌اکت رو همون پیکان درنظر بگیریم و ریداکس رو به عنوان کولر، تا الان ما داشتیم یه همچین کاری می‌کردیم =)خیلی فکر کردم یه مثال خوب پیدا کنم و این بهترین گزینه بودو الان که من این مقاله رو می‌نویسم تمام ماشین‌هایی که به بازار میان کولر دارن پس دیگه کسی نمیاد کولر آبی وصل کنه به ماشینش، استفاده از ریداکس واسه جابه‌جا کردن دیتا بین کامپوننت‌ها تو ری‌اکت هم دقیقا همین موضوع هستش، ری‌اکت داخل خودش یه کانتکست داره پس دیگه دلیلی نداره که ما بیایم ریداکس رو نصب کنیم ...- شاید الان پیش خودتون بگید ریداکس خیلی خفنه چون کلی middle-ware داره که میشه باهاش دیتا فچ کرد (redux-thunk) و یا دیتا رو persist کرد (redux-persist) و یا استیت رو بین تب‌های مروگر سینک کرد و ...+ همه اینارو میشه با کانتکس‌هم پیاده سازی کرد، برای مثال persist شدن دیتا نهایتا ۵ خط کد نیاز داره :)، واسه دیتا فچ کردن نیازی به میدل ور ندارید و واسه سینک شدن اطلاعات بین تب‌های مرورگر کافیه از broadcast api استفاده کنید.- یا شاید پیش خودتون بگید مدیریت استیت بدون reducer خیلی سخت میشه !+ باید بگم تیم سازنده ری‌اکت دقیقا همون کد reducer که داخل ریداکس هستش رو کپی کردن داخل هوک useReducer - ریداکس action creator داره، اینو چی میگی آقای نویسنده+ کانتکست هم می‌تونه action creator داشته باشه هم می‌تونه نداشته باشه بستگی داره به کاری که می‌خوای انجام بدی. https://media.giphy.com/media/SKpJRAh1EggQ8/giphy.gif - ولی ما قوم بنی اسرائیلیم هنوزم از ریداکس استفاده می‌کنیم + =)برای همین یکسری مثال و کلی نکته برای optimize کردن کانتکست دارم که داخل قسمت دوم مقاله بهشون اشاره می‌کنم. ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدم. می‌تونید وب سایتی که فقط و فقط با استفاده از کانتکست نوشتم رو از آدرس staging.antivirus.ir ببینید و چند تا صفحه باز کنید و توی یکی از صفحه‌ها یک محصول به سبدخرید اضافه کنید و ببینید تو صفحات دیگه چه اتفاقی رخ میده. http://vrgl.ir/dV8UZ تا زمان نوشته شدن قسمت دوم این چندتا لینک رو مطالعه کنید: https://reactjs.org/docs/context.html https://reactjs.org/docs/hooks-reference.html#usereducer https://kentcdodds.com/blog/how-to-use-react-context-effectively https://kentcdodds.com/blog/how-to-optimize-your-context-value خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما شروع به استفاده از کانتکست به جای ریداکس می‌کنید یا نه ؟

آموزش جدید ولی تو این دفعه تو آپارات !

نیما عارفی — Mon, 02 Sep 2019 01:21:18 +0430

یه مدته سرم خیلی شلوغ شده و نمی‌تونم بیام اینجا مقاله بنویسیم، نوشتن مقاله‌ایی که خوندنش واسه شما ۷ الی ۱۰ دقیقه زمان میبره حدود ۲ یا ۳ ساعت زمان میبره و من اینقدرم کار سرم ریخته که وقت ندارم بنویسم :(ولی خب وقت دارم که ویدیو ضبط کنم :)واسه شروع دوباره آموزش React Router رو ضبط کردم و از ۱۵ قسمتی که واسش درنظر دارم ۵ قسمتشو آماده کردم و تو کانال آپارات گذاشتم.تصمیم گرفتم بعضی از صحبتامو به صورت صدا (Voice) داخل کانال تلگرام هم قرار بدم، ضبط کردن صدا دیگه واقعا کار ساده‌ایی هستش و خیلی راحت میشه انجامش داد :) (اینطوری کمتر تنبلی می‌کنم)از طرفی سایت react.ir به نام من هستش، به فکر راه اندازی اونم باید باشم!پس از این به بعد کمتر داخل این کانال درباره ری‌اکت می‌نویسم و ترجیح میدم نکات کوتاه رو داخل کانال تلگرامم قرار بدم و ویدیوها رو داخل آپارات آپلود کنم. لینک کانال تلگرام: https://t.me/react_irلینک کانال آپارات: https://www.aparat.com/nima_arf

اپکلیشین های پیش رونده (PWA) نقطه پایان برای برنامه نویسان Native

نیما عارفی — Thu, 28 Feb 2019 16:25:13 +0330

برای خودم همیشه سوال بوده چرا شرکت‌ها و سازمان‌ها از کوچیک تا بزرگ همیشه سعی داشتند همه چیز رو پیچیده تر کنن :)برای مثال سایت دیجیکالا که تا اون جایی که من اطلاع دارم ۴ تا اپلیکیشن مختلف ساختنبرنامه موبایل دیجیکالا برای سیستم عامل IOSبرنامه موبایل دیجیکالا برای سیستم عامل Androidوب سایت برای دستگاه های دسکتاپوب سایت برای دستگاه های موبایل(در اصل با UserAgent چک می کنن اگر دستگاهی که درخواست داده به سرور "موبایل" باشه وبسایت مخصوص صفحه های کوچیک و تاچ رو به عنوان Response ارسال می کنند در غیر اینصورت نسخه دسکتاپ)اگر برای هر یک از این اپلیکشین‌ها یک تیم برنامه نویسی ۳ نفره هم در نظر بگیریم در کل ۱۲ نفر باید استخدام کنیم به علاوه یک مدیر برای هر تیم و هزینه های مدیریتی و حقوق این کارمندان.علاوه بر این سرعت برنامه نویسی برای پلتفرم های مختلف متفاوت هستش، ممکن هستش امروز تصمیم گرفته بشه که ویژگی های فلان و بیسار به برنامه اضافه بشه تیم اندروید ۴ روز زمان می خواهد، تیم آی او اس ۱ روز تیم وب ۱۰ ساعت که این ویژگی‌هارو به سیستم اضافه کنه. (همینطوری ۴ تا عدد گفتم ولی اندروید واقعا خیلی دردسر داره -.- )همه اینها به کنار شما یه روز از خواب بیدار میشید می بینید برنامه IOS که ۶ ماه زحمت کشیدید ساخته بشه از App Store حذف شده. آخه چرا ؟- چون آقای وزیر به تحت فشار بودن افتخار می کنن (نکننمون تو گونی سر یه جمله)از سمت دیگه به راه حل ملی وطنی رجوع مثل سیب اپ می کنید، اونم به دلیل اینکه زور اپل زیاده بسته میشه :)الان چه میشه کرد ؟- هیچی‌، ‌دور IOS رو یه خط قرمز بکشید. البته یه راه حل دیگه ام هستش!نظرتون چیه اون وب اپلیکشین مخصوص موبایل رو یکم تغییرش بدیم که تو حالت آفلاین کار کنه از کاربر بخوایم با ۴ تا کلیک برنامه رو به صفحه اصلی گوشی اضافه کنه و بوم ! ما اپلیکیشن موبایل داریم وبا این راه حل میشه بیخیال تیم اندروید و آی او اس شد پس هزینه ها کمتر میشه فکر کنم شروع جالبی بود برای این مقاله.قبل از اینکه شروع کنم به توضیح بیشتر PWA اپلیکیشن اسنپ رو از لینک نصب کنید و ۲ دقیقه باهاش کار کنید https://app.snapp.taxi/ چند ثانیه طول کشید که صفحه باز بشه و بتونید با برنامه کار کنید ؟- برای بار اول بیشتر از ۵ ثانیه نمیشه معمولاچقدر طول کشید نصبش کنید ؟- در حد ۴ تا کلیک سادهچقدر فضا روی گوشی اشغال کرد‌؟- کمتر از ۳ مگابایتبا نسخه قبلی که داخل App Store بود تفاوتی داره ؟- فقط راه نصب کردنش متفاوت بودبعد از اینکه نصب شد بدون اینترنت کار کرد ؟- بلهتازه روی دسکتاپ هم کار میکنه روی پلتفرم اندروید هم همینطور، کلا هرجا که مروگر باشه اجرا میشه از Smart TV داخل منزل تا اون کامپیوتر داخل ماشینتون که مرورگر وب دارهبیاید به سناریو یه جور دیگه نگاه کنیم (فرض بر این هستش که کلا اسنپ نصب نشده)آقای X می خواد از میدان آزادی بره سعادت آباد، قفل گوشی آیفون رو باز میکنه میره داخل App Store دنبال Snapp میگرده ولی چیزی پیدا نمی کنه، مرورگر وب رو باز میکنه داخل گوگل سرچ می کنه اسنپ روی لینک اول کلیک میکنه نوشته نصب از SibApp روی اون دکمه کلیک می کنه بعد از کلی دنگ و فنگ SibApp نصب میشه، حالا سیب اپ رو باز می کنه دنبال اسنپ می گرده، ۴۰، ۵۰ مگابایت دانلود می کنه. برنامه اسنپ باز میشه ثبت نام میکنه درخواست ماشین میده ...اگر آقای X گوشی اندروید هم داشتند همین سناریو بود با این تفاوت که به جای SibApp کافه بازار نصب می کردندحالا اگر سایت اسنپ PWA بود چی ؟ آقای X می خواد از میدان آزادی بره سعادت آباد، قفل گوشی آیفون رو باز میکنه میره داخل App Store دنبال Snapp میگرده ولی چیزی پیدا نمی کنه، مرورگر وب رو باز میکنه داخل گوگل سرچ می کنه اسنپ روی لینک اول کلیک میکنه و از ایشون می خواهد که یک حساب کاربری داخل اسنپ بسازند و بعدش نقشه باز میشه و درخواست خودشونو ثبت می کنن.دیگه خبری از سیب اپ و کافه بازار و ۴۰، ۵۰ مگابایت دانلود برنامه نیستحالت هوشمندانه این میشه که زمانی که آقای X درخواست خودشونو ثبت می کنن و منتظر قبول شدن درخواست توسط راننده میشن برنامه شروع کنه به دانلود تمام فایل های اپلیکیشن و بعدش از کاربر بخواهد که با ۴ تا کلیک برنامه رو نصب بکنه !ساده نیست ؟از اینجا به بعد یکم فنی تر صحبت می کنیمچه طور میشه وب سایت رو آفلاین ساپورت کرد ؟- با استفاده از API Cache مروگر و Service Workerچه طور میشه اپلیکشین رو آپدیت کرد ؟- خیلی راحت فقط کافی هستش Cache قبلی پاک بشه و فایل های جدید جایگزین بشنچه طور میشه با سیستم عامل ارتباط برقرار کرد، مثلا برای باز شدن برنامه از حسگر اثر انگشت استفاده کنیم ؟- خیلی ساده هستش از Web Authentication API که داخل مرورگر قرار داره استفاده کنید یا برای دریافت موقعیت کاربر از Geolocation API و ... . برای همه چیز یک API موجود هستش.اپلیکیشن ما نیاز داره پردازش تصویر انجام بده و جاوااسکریپت چون مفسر هستش از swift یا Objective C که کامپایلری هستند کندتر عمل می کنه پس PWA خوب نیست !- شما داخل وب می تونید از WebAssembly استفاده کنید که مستقیم با سخت افزار ارتباط برقرار میکنه و سرعتش فوق العاده زیاد هستشیعنی PWA هیج محدودیتی نداره ؟محدودیت هم وجود داره، برای مثال ارتباط با برنامه Contacts گوشی های موبایل هنوز ممکن نشده و شما نمی‌تونید مخاطبین رو بخونیدیا پلتفرم اپل هنوز Push Notifications رو برای PWA ها فعال نکرده ولی این محدودیت‌ها خیلی کم هستند و با شرایط کنونی شما چاره دیگه‌ایی ندارید. نکته مهم اینجاست که PWA در حال پیشرفت هستش و این API ها ساخته شده و به مروگرها اضافه میشن.اینکه اپلیکیشن آفلاین اجرا بشه یعنی ما PWA داریم ؟- خیر شما باید برنامه وب رو شبیه برنامه‌های نیتیو کنید تا کاربر تفاوتی احساس نکند. برای مثال نوشته‌ها نباید انتخاب شوند. که البته با ۴ خط CSS قابل پیاده سازی هستش.کار با Service Worker یکم متفاوت هستش با تمام API هایی که داخل وب باهاشون کار کردیم واسه همین گوگل یک کتابخونه برای راحتتر شدن کار معرفی کرده به نام Workbox که خیلی راحت برنامه شمارو Offline Support میکنه.و در آخر Service Worker ها نیاز دارن به اینکه وب سایت شما گواهی نامه SSL داشته باشه و از پروتکل HTTPS استفاده کنه.خوشحال میشم نظرتون رو درباره PWA بدونم و اگر برنامه نویس Native هستید بدونم برای آینده چه برنامه ریزی دارید؟ و به این نکته توجه کنید که اگر PWA جایگزی برنامه‌های نیتیو شود سرنوشت پلتفرم‌هایی مثل کافه بازار و سیب اپ چی میشه‌!اگر مقاله فنی تر برای پیاده سازی یک PWA کامل با استفاده از تکنولوژی‌های که داخل مقاله بهشون اشاره شد و البته React نیاز داشتید داخل نظرات اعلام کنید.

بهینه سازی ری اکت React Performance (ویژگی های جدید ری اکت 16.6)

نیما عارفی — Fri, 01 Feb 2019 00:16:37 +0330

یکی از بزرگترین دغدغه های برنامه نویس ها و مدیران پروژه، سرعت مطلوب اجرای برنامه بر روی دستگاه های مختلف می باشد. در اصل Performance انتگرال UX است. کتابخونه ری اکت به علت وجود Virtual DOM و الگوریتم reconciliation با پیچیدگی زمانی (O(n سرعت خیلی خوبی دارد. هر چند بعضی مواقع ممکن است این سرعت خیلی خوب رو خیلی بیشتر کنیم.قبل از شروع به خواندن این نوشته حتما مقاله زیر را مطالعه کنید: https://virgool.io/Software/my-react-exprenices-jnjhe1r0lasw داخل این مقاله و ویدیو ویژگی های نسخه React 16.6 رو بررسی می کنیم و با متدهای shouldComponentUpdate و memo و کلاس PureComponent از رندر شدن اضافی کامپوننت ها جلو گیری می کنیم. (داخل نسخه React 16.6 برای استفاده از Context Api یک روش جدید در کامپوننت ها معرفی شده است که داخل این ویدیو به این ویژگی اشاره ای نشده است.)از Eslint و Babel صحبت می کنیم و درک می کنیم چرا باید به class کامپوننت ها نه بگوییم !و برای Optimize کردن پلاگین React Developer Tools رو نصب می کنیم و ویژگی های اونو بررسی می کنیمدر صورت تمایل می توانید پس از مطالعه این نوشته مقاله زیر را مطالعه کنید: https://virgool.io/JavaScript8/%D9%86%DA%AF%D8%A7%D9%87%DB%8C-%D8%A8%D9%87-%D8%A7%D9%85%DA%A9%D8%A7%D9%86%D8%A7%D8%AA-%D8%AA%D8%A7%D8%B2%D9%87-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-1660-mnxqdk47riqf اگر هنوز با Context Api آشنا نیستید پیشنهاد میشه این مقاله رو مطالعه کنید: http://vrgl.ir/8UHC0 در ادامه به معرفی کامپوننت Suspense و کار با متد جدید React.lazy برای Code Splitting می پردازیم. برنامه ای که نوشتیم رو با hook ها Refactor می کنیم تا از ساده تر بشه.اگر هنوز با Hook آشنا نیستید پیشنهاد میشه این مقاله رو مطالعه کنید (حتما بخونید): https://virgool.io/JavaScript8/react-hooks-gnhzymcx21sf در ادامه مقاله قبلی از هوک useCallback و کاربرد اون صحبت می کنیم.برای استفاده از Concurrent Mode و حداکثر کردن Performance کامپوننت Strict Mode رو معرفی می کنیم و Life Cycle های Deprecated شده Component Will MountComponent Will UpdateComponent Will Receive Propsرا از پروژه حذف کرده و با لایف سایکل جدید getDerivedStateFromProps کار می کنیم. و در آخر جمع بندی می کنیم و نتیجه میگیریم این آخرِ داستان Performance نیست و فقط نقطه شروعش هستش. (و درباره آینده Suspense یکم صحبت می کنیم)لینک مستقیم آپارات: https://www.aparat.com/v/R1qJk https://www.aparat.com/v/R1qJk داخل ویدیو اشاره ایی به SSR نکردم ولی یکی از عوامل بالابردن Performance استفاده از SSR هستش که داخل این نوشته بیشتر اشاره کردم بهش: https://virgool.io/JavaScript8/react-ssr-%D8%B1%D9%86%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B3%D9%85%D8%AA-%D8%B3%D8%B1%D9%88%D8%B1-fjillx1lwfrz لینک های مفید: https://www.npmjs.com/package/webpack-bundle-analyzer https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 https://codesandbox.io/s/x7jlv5km3z https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ امیدوارم این آموزش مفید واقع شده باشه.خوشحال میشم نظرتون رو درباره React 16.6 و نحوه تدریس بشنوم :)

ویژگی‎های جدید ری‎اکت 16.8 (React Hooks)

نیما عارفی — Fri, 18 Jan 2019 17:32:18 +0330

داخل این ویدیو قصد دارم درباره ویژگی جدید ری‎اکت به نام hook صحبت کنم. این ویژگی در نسخه 16.8 به ری‎اکت اضافه میشه و فوق العاده کار با react ساده تر و کد زدن خیلی سریعتر میشه.اگر علاقه مند به یادگیری کانتکست هستید پیشنهاد می‌کنم مقاله زیر رو مطالعه کنید: http://vrgl.ir/8UHC0 با استفاده از hook ما می‎توانیم در کامپوننت فانکشنال ری‎اکت علاوه بر state از life cycle متد‎ها استفاده کنیم، کدهای reusable بنویسیم، خوانایی کد را فوق العاده بالا ببریم و مهم از همه کمتر کد بنویسیم.داخل ویدیو زیر درباره hook های زیر صحبت کردم:useStateuseEffectuseContextuseRefو روش ساخت Custom Hooks رو بررسی کردم. https://www.aparat.com/v/uXvlB Use Stateبا استفاده از هوک useState داخل Functional Component ها می توان از State استفاده کرد:کامپوننت Counter نوشته شده با Class Componentکامپوننت Resize نوشته شده با Functional ComponentuseEffectبا استفاده از هوک useEffect داخل Functional Component ها می توان از Life Cycle استفاده کرد:کامپوننت Resize نوشته شده با Class Componentکامپوننت Resize نوشته شده با Functional ComponentuseContextاگر با Context آشنایی ندارید این مقاله را بخوانید: http://vrgl.ir/8UHC0 کامپوننت User نوشته شده با Functional Component کامپوننت User نوشته شده با Functional Component و هوک useContextکد‎ها: h'vhttps://codesandbox.io/s/rl41mo37rn کتابخانه The Platform: https://github.com/palmerhq/the-platform کلی هوک باحال ((: https://nikgraf.github.io/react-hooks/ امیدوارم این آموزش مفید واقع شده باشه.خوشحال میشم نظرتون رو درباره هوک‎ها و نحوه تدریس بشنوم :)

کار با Context Api در React

نیما عارفی — Tue, 15 Jan 2019 18:44:16 +0330

به روز رسانی ۲۷ مهر ۱۳۹۸لطفا این مقاله رو مطالعه نکنید، من مقاله جدیدی نوشتم که خیلی ساده تر مفاهیم داخل این مقاله رو اونجا توضیح دادم: http://vrgl.ir/8UHC0 در React ۱۶.۳ روشی جدید برای انتقال داده ها میان کامپوننت ها، بدون نیاز به گذشتن از هر کامپوننت به صورت دستی معرفی شد. داخل این ویدیو نگاهی می کنیم به این ویژگی جدید نحوه کار با آن.اگر درباره کاربرد Context API اطلاعاتی ندارید، قبل از تماشای ویدیو این مقاله را مطالعه بفرمایید: https://virgool.io/JavaScript8/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun https://www.aparat.com/v/BR31f داخل ویدیو توضیخ دادم کار با Context Api با React 16.8 و Hook خیلی ساده تر میشه. اگر تمایل به یادگیری hook دارید این مقاله را مطالعه بفرماید (100% پیشنهاد میشه): https://virgool.io/@arefinima/react-hooks-gnhzymcx21sf

آموزش کتابخانه React

نیما عارفی — Sun, 13 Jan 2019 02:49:20 +0330

آموزش react به زبان تغریبا ساده !مباحثی که داخل فیلم درباره اون صحبت کردم :کتابخانه react چیست چرا از react استفاده می کنیمنگاهی سطحی به Virtual Domکامپوننت چیست (Functional و Class Components)دنیای react بعد از JSX !بررسی props و ورودی های کامپوننتبررسی state و کاربرد آنلایف سایکل ها در Class Componentsبهینه سازی (Optimization) https://www.aparat.com/v/imVof یکم کیفیت صدا و کلا کیفیت درس دادن پایینه و بهترین کاری که من می‎تونستم بکنم نیست. ولی چه میشه کرد، پروژه های زورکی دانشگاه بهتر از این نمیشه، اونم آخر ترم وسط امتحانات :)خوشحال میشم نظرات و پشنهادتون رو داشته باشم.سوالی ام داشتید داخل کامنت‎ها بپرسید حتما جواب می‎دم.

متغیرهای CSS ؟

نیما عارفی — Tue, 08 Jan 2019 23:40:54 +0330

متغیرهای سی اس اس ورودی هایی هستند که توسط توسعه دهنده تعریف شده و مقادیری را درون خود ذخیره می کنند تا بتوان از آن مقادیر بارها و بارها درون یک سند استفاده کرد. داخل این ویدیو سعی کردم خیلی سریع توضیح بدم CSS Variable ها چی هستند و چه کاربردی دارن. https://www.aparat.com/v/DoOZB

چرا React سخته ؟

نیما عارفی — Wed, 28 Nov 2018 21:32:29 +0330

خیلی پیش اومده افراد مختلف در زمان یادگیری سوال‌های ساده می‌پرسن و بعدش که جواب درست رو دریافت می‌کنن شروع می‌کنن به گفتن خیلی سخته و این چه وضعشه و ...اکثر این افراد فقط با HTML, CSS, jQuery و Bootstrap آشنا هستند و از خود جاوااسکریپت شاید ۷ یا ۸ متد رو یادگرفتند.مشکل دقیقا همینجاست که آموزش درست تو ایران خیلی کمه، تقریبا تمام آموزشگاه ها و آموزش‌های آنلاین به جای تدریس کامل تکنولوژی اصلی سعی به تدریس jQuery می‌کنن و خواسته یا ناخواسته کاربر رو از اصل مطلب که JavaScript هستش دور می‌کنن.ولی تقریبا تمام کتابخونه‌های جاوااسکریپت (React, Vue, Ember, ...) به عنوان پیش نیاز دانش متوسط از جاوااسکریپت رو می‌خوان و یادگیری این لایبریری‌ها و فریم‌ورک‌ها ۲ ساعت هم بیشتر زمان نمیبره. بله ۲ ساعت :) (البته اینکه Master بشید و کاملا تسلط داشته باشید شاید ۱ سال طول بکشه)دانش متوسط جاوااسکریپت چی هستش اصلا ؟بخشی از این داستان اصلا ربطی به جاوااسکریپت نداره، و به طور کلی دانش برنامه نویسی حساب میشه برای مثال Object Oriented Programming و Functional Programming یا اصول برنامه نویسی مثل K.I.S.S یا DRY و بخش دیگه ویژگی‌های خود زبان هستش برای مثال: async/await , promise , Object iterator و ...قسمت مهمتری هم به عنوان ابزار برنامه نویسی هستش برای مثال ESlint، لینتر جمع و جور که با ۱۰ دقیقه وقت گذاشتن برای کانفیگ کردنش به کد ما چهار چوب میده.بخشی این ابزار‌ها تحت هر شرایطی برای هر پروژه‌ایی (به طور کلی پروژه های وب و جاوااسکریپت) لازمه و مابقی بر حسب نیاز توسط خود شما به عنوان برنامه نویس باید انتخاب بشه برای اینکه ایده کلی داشته باشید به صورت دسته بندی شده بعضی از ابزار‌‌ها رو لیست کردم:همیشه لازمهLinter: ESLintCode Editor: VScode, Atom, SublimeCode Formatter: Prettierممکن هستش لازم بشهModule Bundler: Webpack Package Manger: NPMTask Runner: NPMCompiler: Babel(این ابزارها برای React یا Vue یا هر کتابخونه دیگه‌ایی نیستند، به طوری کلی برای پروژه‌های وب استفاده میشن)برای پروژه‌های کوچیک و جمع و جور برپایه React اطلاعات کلی درباره Webpack و Babel لازمه ولی اگر یه خورده کار بزرگتر شد باید کار با این ابزارهارو کامل یادبگیرید.علاوه بر این ابزارها لازمه که ES2015 یا ES6 رو کامل بلد باشید.و اگر به طور کلی بخوام جمع بندی کنم پیش نیازهای ری‌اکت میشه:HTML -> CSS -> JavaScript -> NPM -> Webpack -> OOP -> ES2015/ES6 -> Babel -> JSX -> ReactJSبنابراین اگر مستقیم برید سراغ ری‌اکت حتما حتما به مشکل می‌خورید و دلیلش کاملا مشخصه.

چرا JQuery انتخاب خوبی نیست ؟

نیما عارفی — Fri, 09 Nov 2018 01:10:43 +0330

تو این مقاله سعی دارم درباره اینکه چرا JQuery انتخاب خوبی نیست صحبت کنم‌. (منظورم این نیست که JQuery کتابخونه خوبی نیست، بلکه فقط انتخاب خوبی نیست.)چرا JQuery انتخاب خوبی بود ؟سال‌ها پیش برای ساخت وب سایت فقط کافی بود HTML و CSS رو بدونید، گاهی وقت‌ها برای انجام کار‌های عجیب و غریب (استفاده از Ajax داخل نوار جستجو) شروع می‌کردیم به JavaScript کد زدن. کار با DOM داخل JavaScript خیلی سخت بود و کدی که شما می‌نوشتید داخل همه مرورگر‌ها اجرا نمی‌شد.اینجا بود که JQuery اومد تمام کثیف کاری‌هایی که لازم بود تا شما برای یک‌کار ساده انجام بدید رو تو خودش هندل کرد و شما فقط با دستورات JQuery کار می‌کردید.مثال خیلی ساده میشه Ajax زدن با JavaScript https://gist.github.com/nimaa77/ac80893194c5ad58b534858743d48060 کد مشابه در Jquery https://gist.github.com/nimaa77/8676d1a19a3886e273df37b2598ff45a در عمل داخل کتابخونه Jquery همون قطعه کد اولی رو داخل متد post آبجکت $ ریخته، و کلی راحت کرده مارو.خب Jquery خیلی ساده هستش از طرف دیگه رو تمام مرورگر‌ها کار میکنه و مهم‌تر از همه کلی کتابخونه داره که خیلی از کار‌هارو ساده تر میشه باهاش انجام داد (مثلا: bootstrap.js).انقلاب جاوا اسکریپتجاوااسکریپت طوری بود، که فقط بود (بر گردید اول جمله با مکث زیاد بخونید) تا JQuery رو Load کنه، دیگه کلا به هرکی می‌گفتی سایت رو با چی‌زدی می‌گفت bootstrap و JQuery.موضوع تا جایی پیش رفت که UI و UX مطرح شد و از اون طرف دستگاه‌های کوچیک به نام SmartPhone با حافظه و قدرت پردازشی خیلی کمتر نسبت به رایانه‌های شخصی داشتند به بازار اومدند و نمی‌شد هرکاری رو با اونا انجام داد. (یا اگر می‌شد خیلی طول می‌کشید و کاربر خسته می‌شد و صفحه رو ‌می‌بست یا از انجام اون‌کار منصرف می‌شد. Poor UX)همزمان با این اتفاقا جاوااسکریپت تصمیم گرفت یه تکونی به خودش بده و تمام اشتباهاتی که کرده بود رو جبران کنه. ویژگی‌های جدید به زبان اضافه کنه و، بووم مدرن جاوااسکریپت، اینجا بود که می‌شد بدون استفاده از کتابخونه اضافی می‌شد خیلی راحت کد زد و رو تمام مرورگر‌های مدرن اجراشون کرد.مشکل اینجا بود که کسی با این مبحث آشنا نبود و هنوزم خیلی‌ها نیستند سعی می‌کنن مشکل رو با همین تکنیک‌های ۱۵ سال پیش حل کنن.مثال Ajax زدن در Modern JavaScript https://gist.github.com/nimaa77/abe2022d18f6ba3652b33c89a53667e9 (کد بالا خیلی از لحاظ performance از نمونه‌های قبلی بهتره)اینجاست که JQuery دیگه اون مشکل قبلی رو نمی‌تونه حل بکنه چون خود JavaScript اومد مشکلات رو حل کرد و دیگه مشکلی وجود نداره :)حتی خیلی از کسایی که می‌شناسم از JQuery فقط برای انتخاب المان‌ها استفاده می‌کنن و خیلی خوشحال هستند که با زدن کلمه $ و دو تا پرانتز می‌تونن به یک آبجکت reference بزنن. ولی اگر JavaScript بلد باشید می‌دونید که میشه همون کار رو با JavaScript انجام داد (همون کاری که JQuery کرده رو باز نویسی کنیم). https://gist.github.com/nimaa77/d0075be335dfb0643455381b5c7ab981 و سایت‌های شما می‌تونه 84,522 KB حجم کمتری داشته باشه که و کد کمتری parse بشه و در آخر کار کمتری انجام بشه (نکته SEO: جدا از دانلود شدن فایل Jquery قسمت parse شدن رو موبایل و دستگاه‌های ضعیف زمان زیادی رو می‌گیره و باعث میشه سایت شما کند بشه و کاربر از استفاده نرم‌افزار شما خوشحال نباشه. کاربر خوشحال نباشه گوگل هم خوشحال نیست پس سعی می‌کنه صفحاتی رو به کاربر معرفی کنه که کاربر خودش رو خوشحال نگه داره)دیگه هیچ کتابخونه استفاده نکنیم ؟خیر، بر حسب نیاز باید از کتابخونه‌های متخلف استفاده کنید تا کار شما سریعتر پیش بره کار انجام بشه. ولی باید ببینید کدوم مشکل رو قراره حل کنید برای مثال اگر قراره کلی Chart نشون بدید خب از یه چیزی مثل D3.js استفاده می‌کنیم.یک مثال کلی‌تر رو میشه با React یا Vue بررسی کرد، که علاوه بر Performance بالایی که دارن باعث می‌شن سریعتر کد بزنید، تمیز کد بزنید و راحت کدتون رو تغییر بدید.یکی از مشکلات صفحات وب قسمت render شدن هستش که خیلی کنده و این کتابخونه‌ها با راه کار‌هایی که دارن (VirtualDOM) این مشکل رو تا حد زیادی بر طرف می‌کنن.react و vue هم به سرونشت JQuery دچار می‌شن اگر مرورگر‌ها یک روز بتونن خیلی سریع صفحات رو render کنن.خب اینم از این :)مقالات مشابهYou Truly Don’t Need jQueryاگر سوالی داشتید یا چیزی رو از قلم انداخته بودم خوشحال می‌شم بدونم و بتونم کمکتون کنم، پس حتما نظر بدید و بخش نظرات رو هم بخونید.

افزایش سرعت بارگذاری وب سایت (قسمت اول)

نیما عارفی — Sat, 29 Sep 2018 16:15:35 +0330

در این مقاله درباره بارگذاری فونت ها به روش نوین و تاثیر این کار بر روی سرعت بارگذاری وبسایت صحبت می‎کنمقسمت اول از محموعه پست های "افزیش سرعت وبسایت" رو به بارگذاری فونت ها به روش نوین اختصاص دادم ولی قبلش یکسری نکات هستش که باید ذکر کنم:چیزی که عوض داره گله نداره. تو ادامه همین مقاله متوجه میشید که ما یک چیزی رو که اونقدر مهم نیست فدا می کنیم تا به چیز های بهتر برسیم. (یه جورایی رابطه متقابل داریم)هرچی کمتر کد بنویسیم، ماشین کار کمتری برای پردازش انجام میده و سرعت بیشتری داریم. (البته این یه قانونه که اون تیمی برنده هست که گل های بیشتری بزنه! - جواد خیابانی)انتظار نداشته باشید برنامه‌ایی که وصله پینه شده سَر و تهش معلوم نیست چیه بعد از خوندن ۴ تا پست تو ۱ ساعت بشه بهترین اپ جهان :)درباره موضوعات مقاله بیشتر سعی می‌کنم تکنیک‌هارو مورد بررسی قرار بدم و قطعا آموزش ویدیویی web pack رو هم خواهیم داشت ولی الان بیشتر تمرکزم رو این موضوعات هستش:Font Lazy Loading (مقاله)Lazy Loading (مقاله)Web Font Optimization (مقاله)Code Splitting (ویدیو)Hidden Classes & Optimizing ObjectsMonomorphism, Polymorphism, MegamorphismCachingو مسلماً مقالات بیشتر بستگی به بازخورد خواننده داره.خب رسیدیم به اصل مطلب :)اکثر کاربرا داخل ایران از لحاظ سرعت، اینترنت خوبی دارن (البته کیفیت پایینه فقط کمیت بالاست)، طبق آمار منتشر شده ۵۳٪ کاربران موبایل اگر بعد ۳ ثانیه هیچ چیزی رو صفحه نبینن میرن داخل یک‌وبسایت دیگه. و این یعنی فروش‌کمتر، نمایش تبلیغ کمتر یا هرچیزی که به پلن تجاری شما صدمه میزنه.از طرفی میشه سرعت رو از ۲ جهت مورد بررسی قرار داد:بارگذاری فایل‌ها از سرور به مرورگر کاربرسرعت اجرای فایل‌های بارگذاری شدهشاید شما ۴ خط کد JS بیشتر نداشته باشید که از سرور به مرورگر ارسال بشه اما وقتی کد قراره اجرا بشه ممکنه یک حلقه بینهایت باشه که مرورگر کاربر Crash کنه.خب پس حالا که اهمیت کیفیت و کمیت کد رو متوجه شدید باید شروع کنیم به بررسی موضوع اصلی این مقاله "لود کردن فونت ها به روش نوین".ساختار یک فایل HTML سادهخب باید ۲ چیز رو مورد بررسی قرار بدیم:فایل های CSS و JS در چه زمانی load می‌شنتصاویر و فونت‌ها در چه زمانی load می‌شنفایل‌های CSS و JS درباره نکته اول load شدن CSS معمولا داخل head بالای تگ body انجام میشه، اگر در پایین صفحه و در آخر اینکار انجام بشه کاربر ابتدا صفحه بدون ساختار و بد ترکیب رو میبینه و بعد که مرورگر به پایین صفحه رسید و دریافت CSS تموم شد به ظاهر و شکل اصلی خودش برمیگرده. خب معمولا کل CSS های سایت داخل ۱ فایل ذخیره می‌شن و این باعث میشه شما کدهایی که برای صفحه‌های دیگه هستند رو هم برای کاربر بفرستید که زیاد جالب نیست ولی خب جدا از این مباحث ما مجبوریم که CSS رو بالای صفحه لود کنیم و اتفاقی که میوفته اینکه مروگر پردازش مابقی صفحه رو متوقف می‌کنه تا فایل CSS کامل دریافت بشه.راه حل: دستورات CSS رو ۲ بخش بکنیم، دستوراتی که برای load این صفحه لازمه و دستوراتی که برای این صفحه لازم نیست (البته اگر حجم فایل CSS کم هستش لازم نیست اینکار انجام بشه)قسمت اول که CSS های لازم هستش همون اول داخل تگ head بارگذاری میشه و قسمت دوم پایین و در آخر... - به این تکنیک code splitting می‌گن که بعدا بهش مفصل می‌پردازیمهمین روند برای فایل‌های JS اتفاق میفوته.نکته: میشه از دستور defer استفاده کرد تا دستورات در آخر پس از parse داکیومنت دریافت و اجرا بشن ولی مرورگر های قدیمی این دستور رو تو خودشون ندارن و شما فقط به خاطر جابه‌جا نکردن ۲ خط کد از اول قالب به آخرش همه چیز رو خراب می‌کنید.تصاویر در لحظه که شما آدرس رو داخل مقدار src تگ img قرار می‌دید، شروع به دانلود شدن می‌کنن و نکته اینجاست که شاید کاربر اون عکسی که باید نیم ساعت scroll بشه تا بهش برسه رو اصلا نبینه، پس میشه فرایندی رو پیاده سازی کرد که وقتی کاربر scroll کرد و به تگ img رسید مرورگر شروع به دانلود عکس بکنه - به این تکنیک lazy loading می‌گن که بعدا بهش مفصل می‌پردازیمفونت‌هابرخلاف تمام فایل‌هایی تا الان بررسی کردیم فونت ها تا استفاده نشن مرورگر دانلودشون نمی‌کنهبا تعریف بالا ما فقط فونت رو تعریف کردیم و تا زمانی که، کلاسی تعریف نکنیم و اون کلاس رو به selector اختصاص ندیم اتفاقی نمیوفته.اگر فونت رو به تگ body اعمال کنیم زمانی که مرورگر به selector مورد نظر برسه شروع به دانلود فونت میکنه و برای چند ثانیه تمامی متون بی‌رنگ هستن و بازم با این دانلودشدن های اضافه و پشت سرهم سرعت لود وبسایت کمتر و کمتر میشه آیا واقعا کاربر دوست داره که ۱۰ ثانیه صبر کنه تا یک صفحه خیلی قشنگ با فونت‌های باحال ببینه یا فقط می‌خواهد سریع صفحه باز بشه و حالا بعدش که صفحه باز شد فونت‌ها عوض بشه. (خب مسلماً دومی)حالا که دقیق فهمیدیم موضوع چیه بیاید شروع کنیم به کد زدن :))نظرتون درباره یک قطعه کد که آخر از همه بعد از parse شدن document اجرا بشه و بشه باهاش ‌فونت‌هارو دانلود کرد چیه :)). با این روش کاربر کل صفحه رو تو زمان خیلی کم دریافت کرده،‌ و فقط فونت‌ها زیاد جذاب نیستن که اونم بعد از ۱ یا ۲ ثانیه (به فارسی سخت) جذاب میشه.Let's build Somethingداخل CSS هر جا که فونت رو صدا کردید حذف کنید یا از web-safe-font استفاده کنید، یک کلاس CSS به نام wf-active (مخفف web font active) بسازید و داخل این کلاس فونت اصلی رو صدا می‌کنیم و میدونیم تا وقتی که این کلاس رو بر روی المانی اعمال نکنیم فونت‌ها شروع به دانلود شدن نمی‌کنن.خب حالا باید کد جاوااسکریپتی بنویسیم که فایل‌های فونت رو دانلود کنه بعد از اینکه دانلود فایل‌ها تموم شد کلاس ws-active رو به تگ body یا html اضافه کنه.برای دانلود میشه از یک کتابخونه باحال و جمع و جور به نام FontFaceObserver استفاده کرد. بعد از دانلود و نصب کتابخونه (پیشنهاد میشه از npm نصب کنید و اگر امکانش نیست به github رفته و فایل مورد نظر خودتون رو پیدا کنید) یک فایل به نام fontLoader.js بسازید و برای هریک از فونت‌های خود یک نمونه جدید از شی FontFaceObserver بسازیدحالا باید متد load رو فراخوانی کنیم تا فونت لود بشه و کلاس ws-active رو به تگ html اضافه کنیم:پارامتر دوم متد load، تعیین می‌کند که حداکثر برای دانلود فونت قبل از خطا دادن باید چقدر صبر کردبه همین راحتی،‌ حالا کافیه فایل fontLoader رو به انتهای html خودمون اضافه کنیم. اما هنوز تموم نشده می‌تونیم فونت‌هارو cache کنیم که تا بازم سریعتر لود بشه =) خب چند تا سوال ممکنه پیش بیاداون پرانتز‌های خط اول و آخر فایل چی هستند ؟آبجکت Session Storage چی هستش !در جواب سوال اول باید بگم که ما ۲ مدل فانکشن در جاوااسکریپت داریم، متدی که اسم نداشته باشه به نام anonymous شناخته میشه و به صورت زیر تعریف میشهfunction () { console.log("hello"); }اگر قطعه کد بالارو داخل مرورگر اجرا کنید هیج اتفاقی رخ نمیده :) (تیمی که گل بیشتری زده قطعا برنده بازی هستش !)برای فراخوانی این متد باید بهش اسم تخصیص داد یا اشاره گر به این متد را داخل یک متغیر ذخیره کنیم، اما روش دومی وجود داره که متدرو درجا اجرا می‌کنه (از اونجایی که مقدار بازگشتی متد anonymous اشاره گر به متد هستش) میشه جلوش پرانتز باز و بسته گذاشت که در جا اجرا بشه (function () { console.log("hello"); })();اگر کد بالارو اجرا کنید خروجی شما در کنسول برابر با hello میشه :)در جواب سوال دوم localStorage یک دیتابیس key, value هستش که اطلاعات رو ذخیره ‌می‌کنه، sessionStorage همون localStorage هستش اما تا زمانی که کاربر tab فعلی رو نبسته باشه اطلاعات داخل ذخیره میشه و بعد از اون همه چیز داخلش پاک میشه. از اصلی ترین تفاوت های storage با cookie اینکه شما سمت سرور به localStorage و sesstionStorage دسترسی ندارید.خب برگردیم به کد و ببینیم که چه کردیم// Optimization for Repeat Views // this is not going to matter in react|vue while we use virtual dom if( sessionStorage.foutFontsLoaded ) { document.documentElement.classList.add("wf-active"); return; }تو خط اول چک می‌کنیم که مقدار foutFontsLoaded برابر با true هستش و اگر این اتفاق افتاده بود کلاس wf-active رو به تگ html اضافه می‌کنیم و از متد خارج می‌شویم (دوباره فونت‌هارو دانلود نمی‌کنیم)و در آخر بعد از اضافه کردن کلاس به تگ html مقدار foutFontsLoaded را برابر true می‌کنیم.نکاتاگر از npm استفاده نمی‌کنید و polyfill ندارید باید از نسخه مناسب FontFaceObserver استفاده کنیداگر جاوااسکریپت غیر فعال باشد فونت‌ها لود نمی‌شودحتماً حتماً مطمئن شوید فونت‌ها بدون اجرا شدن فایل fontLoader در صفحه بارگذاری نمی‌شوند، در غیر اینصورت فونت‌ها ۲ بار دانلود می‌شوند.برای دیباگ کردن فایل fontLoader رو بارگذاری نکنیدبا فشردن کلید F12 پنجره Developer Tools رو باز کنید و به تب Network برویدو گزینه disable cache را فعال کرده و در قسمت Filter گزینه font را انتخاب کنیدکلید F5 یا دکمه Reload را فشرده تا صفحه مجدد بارگذاری شودتوجه داشته باشید نباید فونت‌هایی که در فایل fontLoader تعریف کرده‌اید در لیست نمایش پیدا کندو در آخر، مثال با سینتکس ES6 و بارگذاری هم زمان چندین فونت رو داریمخوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و اگر سوالی داشتید در خدمتم :)

۸ قدم برای حرفه‌ایی شدن در React (قسمت سوم)

نیما عارفی — Sat, 14 Jul 2018 21:48:22 +0430

در قسمت اول درباره ESLint, WebPack و Babel صحبت کردیم و دیدیم که با یه تغییر کوچیک داخل کانفیگ ESLint چقدر میشه تمیز و بهینه تر کد نویسی کرد.تو قسمت دوم ویژگی‌های پلاگین transform-class-properties و تکنیک Code Splitting را مورد بررسی قرار دادیم.و رسیدیم به قسمت هیجان انگیز Design Patterns :)و البته بیشتر درباره Higher Order Componentsشاید بارها و بارها براتون اتفاق افتاده باشه که یک کد رو بخواهید به طور منظم بین تمام کامپوننت‌ها باز نویسی کنید ؟خب شاید تعریفش یکم گیج کننده باشه ولی تا آخر این مقاله کامل متوجه HOC و اهمیت اون داخل برنامه‌های React می‌شید.HOC یک تکنیک هستش که شما یک Component رو به یک فانکشن پاس میدید و یک Component جدید می‌گیرید :)قطعه کد بالا رو در نظر بگیرید. یک کامپوننت ساده که اطلاعات کاربر رو از سرور میگیره و داخل صفحه قرار میده. اگر دقت کرده باشید متد render یکم شلوغ شده و داخل WillMount داریم AJAX می‌زنیم ...میشه اینکارو راحت‌تر کرد و کامپوننت‌های ساده‌تری داشت.مثلا: یک کامپوننت برای دریافت اطلاعات از سرور و یک کامپوننت برای مدیریت وضعیت دریافت اطلاعات از سرور.کامپوننت دریافت اطلاعات از سروراصل مطلب اینکه یک متدی به نام fetchData یک رشته به عنوان url و یک کامپوننت به عنوان پارامتر دوم دریافت می‌کنه. اطلاعات رو از سرور می‌گیره و به کامپوننتی که پاس دادیم تقدیم می‌کنه این کامپوننت یا همون HOC خودمون اطلاعات رو از HOC قبلی میگیره یکسری شرط رو بررسی می‌کنه و به به کامپوننت اصلی پاس میده.متغیر displayName برای debuging و اینکه اگر خطایی در کامپوننت به وجود اومد متوجه بشیم در کدوم قسمت این خطا بوده.مثلا اگر ۳،۴ بار این HOC رو در DOM به کار برده باشیم و LoadingHOC خطا بده شما داخل کنسول می‌بینید که Error نوشته شده مربوط LoadingHOC هست ولی کدوم LoadingHOC. برای کامپوننت Profile, Shop یا ‌Basket ؟و اینجاست که displayName باعث میشه داخل Console شما بجای پیغام خطای LoadingHOC خطای LoadingHOC(نام Component Wrap شده رو دارید)Error in LoadingHOC(Basket)و در آخر برای استفاده از HOC کافیه که:الان یک کامپوننت شلوغ به ۳ کامپوننت سبک و خوانا تبدیل شد که هر کدوم state خودشون رو دارن و جالبترین قسمت اینکه این کامپوننت ها reusable هستن شاید لازم باشه اطلاعات رو بجای ajax از فایل بخونید مشکلی نیست فقط کافیه props ها رو پاس بدین :) یا شاید چند جا لازم باشه اطلاعات رو از سرور دریافت کنید نیازی به باز نویسی نیست اینجاست که react بیشتر از یک کتابخونه JS عمل می‌کنه و به شما یک طرز فکر رو القا می‌کنه، شما باید همه چیز رو از بالا و با ذهنی باز نگاه کنید. تمیز کد بزنید و کامپوننتهاتونو بدون محدودیت همه جا استفاده کنید.انتقال اطلاعات بین کامپوننت‌هاکامپوننت بالا رو در نظر بگیرید.از کامپوننت پدر A به کامپوننت فرزند B یک prop به نام name پاس داده شد، و فرضاً B اون prop رو چاپ می‌کنه.خب سادس همه خوشحالن و هیچ مشکلی نداره اما مشکل زمانی به وجود میاد که:۱. اگر بخوایم از A به H یا G مقادیر رو ارسال کنیم چه روندی باید طی بشهمی بینید که چه‌قدر کد تکراری باید نوشته بشه و تغییر مقدار یک prop باعث میشه مجددا Component ها نیاز به re-render داشته باشن و کلی از performance از دست میره و کد اصلا خوانا نیست و علاوه بر همه اینا کامپوننت ها re-usable نیستن۲. اگر لازم باشه از فرزند به پدر اطلاعات منتقل بشه باید کلی کثیف کاری دیگه کینم و اگر همین روند رو پیش بگیریم اسپاگتی داریم با طعم reactاین مثال برای ۲ کامپوننت ساده هستش شما در نظر بگیرید بجای B باید F رو داشته باشیم و ۴ متد برای ۴ state مختلفاینجاست که نیاز به redux, context, mobx , ... احساس شد.این کتابخونه ها و object ها اطلاعات رو داخل یک فایل یا قسمتی از حافظه نگه‌داری می‌کنن و وقتی که اطلاعات تغییر کرد کامپوننت های متصل شده رو re-render می‌کنن، در اصل همون state رو در خارج از component نگه داری می‌کنن ...آموزش Context API: http://vrgl.ir/8UHC0 ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدمتا اون موقع این چندتا لینک رو مطالعه کنید: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e https://redux.js.org/basics/usage-with-react https://hackernoon.com/how-to-use-the-new-react-context-api-fce011e7d87 https://github.com/acdlite/recompose خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما کاربردی بودن HOC ها رو درک کردید ؟

۸ قدم برای حرفه‌ایی شدن در React (قسمت دوم)

نیما عارفی — Fri, 18 May 2018 17:45:13 +0430

در قسمت قبلی درباره ESLint, WebPack و Babel صحبت کردیم و دیدیم که با یه تغییر کوچیک داخل کانفیگ ESLint چقدر میشه تمیز و بهینه تر کد نویسی کرد.تو این قسمت ویژگی‌های پلاگین transform-class-properties و تکنیک Code Splitting را مورد بررسی قرار می‌دهیم.قسمت سوم: https://virgool.io/JavaScript8/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun گفتیم که Babel ماشین تبدیل کد به حساب میاداز همین ویژگی میشه برای کمتر کد زدن و صرفه جویی در وقت و هزینه استفاده کرد. چه طوری ؟اول از همه پلاگین transform-class-properties را نصب می‌کنیم:npm install babel-plugin-transform-class-properties --saveبعدش در ریشه پروژه یک فایل به نام .babelrc ساخته و پلاگین را در آن فراخوانی می‌کنیم:از این به بعد برای defaultProps, propTypes, initialize state, و bind کدن لازم نیست سختی بکشیم :)قبل از transformبعد از transformاتفاقی که پشت صحنه رخ میده اینکه کد شما در زمان build شدن به حالت اصلی خودش که مطابق عکس اول هستش تبدیل میشه.تفکیک کد یا Code Splitting چیست ؟تفکیک کد، تکنیکی برای کمتر کردن حجم برنامه شما و درنتیجه بازگذاری سریع‌تر و افزاریش رضایت مشتری و داشتن SEO بهتری است.در حالت عادی وقتی برنامه React شما build میشه خروجی شما یک فایل bundle.js هست که داخل اون از تمامی پکیچ‌هایی که استفاده کردید تا کدهای برنامه که خودتون نوشتید قرار داره.اما مشکل کجاست ؟شما کافیه یکی از پکیج‌هایی که استفاده کردید رو بروز کنید، کاربر مجبوره تمام bundle.js رو دوباره دانلود کنه (فقط برای یک آپدیت ساده یکی ‌از هزاران پکیجی که داخل node_modules قرار داره)کاربر برای دیدن صفحه مقالات علاوه بر کد صفحات خانه، سبد خرید، درباره ما، تماس با ما، فروشگاه، باید پکیج‌های استفاده شده داخل این صفحات رو دریافت کنه در صورتی که اصلا لزومی نداره :)جالبه نه ؟! جالب ترم میشه :))یادتونه گفتیم WebPack کل برنامه شما رو یک فایل میکنه، اینجاست که ازش می‌خوایم اینکارو نکنه (البته تا حدودی)اول از همه پکیج‌هایی که لازم داخل کل برنامه وجود داشته باشن (مثل: react و react-dom و react-redux و react router-dom و redux و ...) رو از مابقی فایل‌ها جدا می‌کنیم (اصطلاحا Vendor Splitting می‌کنیم) دوم با استفاده از پکیج‌های مختلفی که وجود داره تفکیک کد رو در سطح کامپوننت یا در سطح مسیر (Route Level) انجام میدیم. (بدون استفاده از پکیج اینکار امکان پذیر هستش ولی خیلی کثیف کاری داره)پیش نیاز اصلی Webpack 2 و یا نسخه جدیدتر هستشبرای تفکیک کد در سطح Component و Route از پکیج react loadable استفاده کنید.اما برای Vendor Splitting باید خودمون دست به کار بشیم و webpack رو کانفیگ کنیم. (توجه داشته باشید بسته به نوع setup که استفاده کردید این کانفیگ ممکنه کمی نیاز به تغییر داشته باشه) اگر از create-react-app استفاده می کنید باید یکبار برنامه را eject کنید و config.webpack را به صورت زیر تغییر دهیدکانفیگ برای webpack 2، در نسخه های مختلف syntax کمی متفاوت استدر آخر حداقل خروجی شما ۳ فایل manifest.js و vendor.js و chunk.[x]:hash.js خواهد بود کهفایل vendor:که در آن پکیج‌های اصلی برنامه شما که وجود آنها در تمامی کامپوننت‌ها الزامی است، قرار دارد.فایل manifest.js که وجود این فایل برای Dynamic Load شدن chunk ها الزامی است، در اصل این فایل مشخص می‌کند component X در کدام فایل وجود دارد که مرورگر در زمان مورد نیاز آنرا بارگذاری می‌کند.و chunk ها که کد هر صفحه (خانه، فروشگاه، سبد خرید، و ...) را در خود دارد و برنامه شمارا به قسمت های کوچکتر تقسیم می‌کند.ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدمتا اون موقع این چندتا لینک رو مطالعه کنید: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923 http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما شروع به تغییر دادن کد خودتون می‌کنید؟ و اول از کدوم قسمت شروع می‌کنید :)قسمت سوم: https://virgool.io/JavaScript8/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun

۸ قدم برای حرفه‌ایی شدن در React (قسمت اول)

نیما عارفی — Thu, 17 May 2018 15:21:08 +0430

‍قبل از هر چیز باید بگم، این مقاله برای افرادی که بیماری قلبی دارن مناسب نیست. چون بعد از خودن این مقاله باید کل کدتون رو از اول باز نویسی کنید. :)قسمت دوم: https://virgool.io/@arefinima/my-react-exprenices-part-2-r8degtlmg5pm قسمت سوم: https://virgool.io/JavaScript8/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun قصد دارم درباره:1. ESLint2. WebPack3. Babel4. React Design Pattern5. Code Splitting6. Jest7. DocGen8. StoryBookصحبت کنم.تا امروز تقریبا همه ما برای ساخت پروژه React میرفتیم داخل GitHub دنبال Create React App می‌گشتیم و بدون اینکه بدونیم اون پشت (داخل create-react-app) چه خبره شروع می کردیم به کد زدن و .... .خب مشخصه که اولین قدم اینکه بدونیم اون پشت چه خبره :)WebPackشما وقتی شروع به کد زدن میکنید از چندین و چند کتابخونه و پکیج استفاده می کنید ولی در آخر ۱ فایل خروجی (البته برای جاوااسکریپت) دارید.وب پک این وسط میاد تمامی فایل های جاوا اسکریپت رو کنار هم میذاره اون بخشی از کتابخونه ها که استفاده نشده رو حذف می کنه و یک خروجی تمیز رو به شما میده.البته این اصل کار وب‌پک هستش و خیلی کارای دیگه انجام میده که می‌تونید در سایت وب‌پک بیشتر بخونید.Babelخب رسیدیم به Babel، و خوشبختانه Babel خیلی ساده و روونه :)ساده بگم: دستگاه تبدیل کده :|شما با syntax مورد نظر خودتون مثلا ES2015 کد میزنید و موقع خروجی گرفتن کد شما به جاوااسکریپت تبدیل میشه. داخل عکس هم مشخصه که چه اتفاقی افتاده.این ویژگی باعث میشه شما کمتر کد بزنید.ESLintابزاری برای شناسایی و گزارش الگوهای موجود در ECMAScript / JavaScript است که هدف آن ساختن کد سازگارتر و جلوگیری از اشکالات است. (با تشکر از گوگل ترنسلیت)کلا این شکلیه که شما داخل کانفیگ مشخص می‌کنید که برای indent گذاشتن از Space یا Tab استفاده می‌کنید، یا رشته ها داخل Double Quote باشن یا Single Quote و ...و خب اصل مطلب اینکه با IDE شما Sync میشه و نسبت به کانفیگ شما در خط مربوطه خطا یا Warning قرار میده. این باعث میشه که کد شما منظم تر بشه.وقتی با Create React App شروع به ساخت پروژه می‌کنید، تمامی این پکیج ها کانفیگ شده و شما فقط استفاده می‌کنید، حالا بینینم اگر خودمون کانفیگ کنیم به کجا میرسیم ؟کانفیگ ESLintبرای ساخت فایل کانفیگ eslint در ریشه پروژه یک فایل با نام .eslintrc.js ساخته و شروع به کانفیگ کردن کنید:قبل از شروع کردن این لینک را باز کنید. (ترجیح میدم درباره eslint و syntax زیاد توضیح ندم و فقط چند تا از plugin های خفن رو معرفی کنم)چرا نباید از setState داخل ComponentDidMount و ComponentDidUpdate استفاده کنیم ؟!خب زمانی که Component Mount میشه یکبار متد Render صدا شده و Dom Update شده و اگر شما دوباره setState کنید این اتفاقات از اول میوفته :) به همین راحتی دچار Wasted render می‌شید.Prevent usage of setState in componentDidMount Prevent usage of setState in componentDidUpdate درباره Bind کردنخب تا دیروز همه برای bind کردن بعد از تعریف متد به صورت زیر کار رو یک سره میکردن:() => console.log("You clicked on the item !").bind(this)بعدش که یکم گذشت دیدم میشه اینو ساده‌تر کرد داخل constructor کلاس عملیات bind رو انجام میدادیم:ولی خب با ظهور ES7 خیلی از مشکلات حل شد (با تشکر از Babel البته)نپرسید که چی‌شد که اینطوری شد و چرا اینا چون خودمم نمی‌دونم چرا از اول اینکارو نکردنقضیه از این قراره که موقع transpile شدن توسط Babel متد داخل contractor تعریف میشه :) No .bind() or Arrow Functions in JSX Propsconstructorباره اینکه state اون وسط بیرون چیکار میکنه بعدا صحبت میکنممتد Should Component Update چیست ؟همون طوری که از اسمش مشخص هستش "آیا کامپوننت باید آپدیت بشه ؟"مثال بالا رو در نظر بگیرید هربار که روی دکمه کلیک بشه، کامپوننت Parent یکبار از اول ReRender میشه و درنتیجه متد Hello از اول رندر میشه، حالا فکر کنید این اتفاق داخل بالایی ترین Node اتفاق بیوفته کل کامپوننت ها باید از اول render بشن و این افتضاحه !حالا درست شد :)‌‌‌حتی میشه از PureComponent استفاده کرد ولی چون shallowCompersion میشه و زمانی که شما یک آرایه به عنوان prop یا state داشته باشید و فرضا آبجکت سوم آرایه از مقدار MMD به MaMad تبدیل بشه متد Render صدا نمیشه ...Enforce React components to have a shouldComponentUpdate methodو اینم از کانفیگ eslint خودم اگر حال داشتم gist درست می کنم و ...ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدمتا اون موقع این چندتا لینک رو مطالعه کنید: https://reactpatterns.com/ https://github.com/maicki/why-did-you-update https://github.com/reactopt/reactopt خوشحال میشم بدونم این مقاله مفید واقع شده یا نه یا اصلا این سبک خودمونی نوشتن جالبه یا همون کتابی بنویسم :)قسمت دوم: https://virgool.io/@arefinima/my-react-exprenices-part-2-r8degtlmg5pm

اجرای ری‌اکت سمت سرور (React SSR)

نیما عارفی — Mon, 15 Jan 2018 10:22:14 +0330

یعنی اجرای برنامه react سمت سرور و‌ انتقال ریسپانز به شکل HTML سمت کاربر به طوری که react بدون نیاز به render دوباره از حالت فعلی (رندر شده سمت سرور) DOM بتونه استفاده کنهچرا Server Side Rendering ؟مزیت ها۱.به شما HTML میده، این باعث میشه داخل مرورگر های قدیمی هم برنامه react شما کار کنه.۲. سرعت: وقتی تمام پردازش سمت سرور انجام بشه مرورگر فقط اطلاعات رو نمایش میده و تو دستگاه های ضعیف تر روون تر اجرا میشه۳. سئو: وقتی HTML خام دارید کار خاصی انجام نمیشه و خرنده گوگل، بینگ و‌ ... میاد html رو می‌خونه و عملیات انجام میشهگوگل بعضی وقت ها رندر میکنه بعضی وقت ها نمیکه. نمی دونم چرا، و مابقی search engine ها کلا js رو اجرا نمی‌کننمعایب۱. پیاده سازی سخت ۲. کند شدن زمان ریسپانس (یکبار اجرا میشه سمت سرور ...)ما ssr می‌خواهیم یا نه!اگر سئو نیاز دارید، ۱۰۰‎٪ بلهبرای اینکه دقیق تر متوجه بشید می تونید یک برنامه ری‌‌اکت ساده رو‌ اجرا کنید.به آدرس و‌ پورت مورد نظر رفته و View Page Source کنید.اگر متوجه شده باشید محتوای div که برنامه شما داخلش اجرا میشه خالیه

این همون چیزیه که گوگل، بینگ و ... می بینندولی اگر Inspect Element کنید می‌بینید که داخل همون div کلی تگ html, css, ... وجود داره و این چیزیه که گوگل و ... نیاز دارنشما وقتی SSR میکنید مقدار رندر شده سایت (همون چیزی که تو inspect element می بینید رو) به عنوان مقدار ریسپانس سرور (view page source) به کلاینت پاس میدینمونه پیاده سازی شده با ریداکس رو می‌تونید داخل این وبسایت ببینید antivirus.irخب از کجا شروع کنمهمه ما با Create React App آشنا هستیم، خیلی ساده و شیک و مجلسی محیط ری‌اکت رو برای برنامه نویسی آماده می کنه اما بدون SSR.از معادل های Create React App با SSR میشه به NextJS و Razzle اشاره کرد.سخن آخرسعی کنید از یک VPS یا یک Dedicated Server استفاده کنید و از یک SysAdmin مشاوره بگیرید زیرا کانفیگ کردن سرور برای کار با nodeJs یکم درد سر داره ... .