রিঅ্যাক্ট ক্যাশে, টাইম স্লাইসিং এবং সিঙ্ক্রোনাস এপিআই ফেচিং-এ গভীরভাবে ডুব দিন

মারভিন ফ্র্যাচেট

ঠিক আছে, এই বছরটি প্রতিক্রিয়ার বছর বলে মনে হচ্ছে। আপনি সম্ভবত 16.7-আলফা.0 - হুক্সের সাথে আসা নতুন হত্যাকারী বৈশিষ্ট্যের কথা শুনেছেন। আপনি সম্ভবত টাইম স্লাইসিং বা এমনকি সাসপেন্সের মতো আরও কিছু দুর্দান্ত এবং দুর্দান্ত জিনিস সম্পর্কেও শুনেছেন৷

এই নিবন্ধটি না কিছু নতুন বৈশিষ্ট্য কীভাবে ব্যবহার করা যায় তা বর্ণনা করার লক্ষ্য, বরং সেগুলি কীভাবে তৈরি করা হয়েছে তা প্রমাণ করা। আমরা কি খেলছি তা বোঝার জন্য।

আমি যেভাবে বৈশিষ্ট্যটি আবিষ্কার করেছি সেভাবে এটিও লেখা হয়েছে। এটি সম্ভবত যেভাবে চিন্তা করা হয়েছে তা নয়, তবে আমি এভাবেই পয়েন্ট পেয়েছি।

পড়ার সময় আপনি যা পাবেন:

• অ্যাসিঙ্ক জাভাস্ক্রিপ্ট এবং ইভেন্ট লুপ
• প্রতিক্রিয়ায় বীজগণিতের প্রভাব, উদাহরণ সহ
• ফাইবার এবং প্রতিক্রিয়া পর্যায়গুলি

আমি এই পোস্টটি কেন লিখলাম?

যে বিষয়টি আমাকে এই পোস্টটি লিখতে চেয়েছিল তা হল এই বিশেষ, এবং পরীক্ষামূলক, বৈশিষ্ট্য যা অসিঙ্ক্রোনাস ব্যবহারের অনুমতি দেয় একটি সিঙ্ক্রোনাস ব্যবহার করে অপারেশন API:

const bulbasaur = ApiResource.read() ?… কি? সিঙ্ক্রোনাস ?!

রিঅ্যাক্ট-ক্যাশে লাইব্রেরি একটি সিঙ্ক্রোনাস API এর সাথে অ্যাসিঙ্ক্রোনাস অপারেশন ব্যবহার করার ক্ষমতা তৈরি করে। এটি সেই বৈশিষ্ট্য যা আমাকে শিখতে চায় কিভাবে প্রতিক্রিয়া হুডের নিচে কাজ করে। এই লাইব্রেরিতে ড্যান আব্রামভ এবং অ্যান্ড্রু ক্লার্ক দ্বারা উপস্থাপিত একটি উপস্থাপনা এখানে:

এটা কিভাবে সম্ভব? কিভাবে আমরা সিঙ্ক্রোনাস কল ব্যবহার করে কিছু দূরবর্তী ডেটা পেতে পারি?

আসুন এই উদাহরণে গভীরভাবে ডুব দেওয়া যাক এবং কীভাবে প্রতিক্রিয়া-ক্যাশে এই জাতীয় কার্যকারিতা প্রয়োগ করে তা বোঝার চেষ্টা করুন এবং এটি কীভাবে কাজ করতে পারে তা আবিষ্কার করুন। এই গল্পটি ফাইবার আর্কিটেকচার দিয়ে শুরু হয়।

জাভাস্ক্রিপ্ট অপারেশন নিয়ন্ত্রণ করা

ফাইবার আর্কিটেকচার প্রতিক্রিয়াকে কার্য সম্পাদনের উপর নিয়ন্ত্রণ নিতে দেয়। এটি একাধিক সমস্যার সমাধান করার জন্য তৈরি করা হয়েছে যা প্রতিক্রিয়ার শিকার হয়েছিল। এখানে যে দুটি আমার দৃষ্টি আকর্ষণ করেছে:

• নির্দিষ্ট ইভেন্টের উপর অগ্রাধিকার দেওয়া, যেমন ডেটা আনার উপর ব্যবহারকারীর ইনপুট
• প্রধান থ্রেডের প্রাপ্যতা বজায় রাখতে এবং দীর্ঘ রেন্ডারিং প্রক্রিয়া চলাকালীন এটিকে ব্লক করা এড়াতে অ্যাসিঙ্ক্রোনাসভাবে বিভক্ত প্রতিক্রিয়া গণনা

জাভাস্ক্রিপ্ট অ্যাপ্লিকেশানের অভ্যন্তরে সমস্ত কিছু যা একটি রাষ্ট্র পরিবর্তনকে ট্রিগার করে — শুধুমাত্র প্রতিক্রিয়া দিয়ে নয় — অ্যাসিঙ্ক্রোনাস অপারেশনের কারণে। এর মধ্যে রয়েছে setTimeout , fetch , এবং ইভেন্টের জন্য শ্রোতা।

অ্যাসিঙ্ক্রোনাস অপারেশনগুলি একাধিক জাভাস্ক্রিপ্ট মূল ধারণার মাধ্যমে পরিচালিত হয়:

• কাজ (মাইক্রো, ম্যাক্রো, রেন্ডার ইত্যাদি...)
• ইভেন্ট লুপ
• কলস্ট্যাক

আপনি যদি এই ধারণাগুলির সাথে পরিচিত না হন তবে আমি আপনাকে জেক আর্চিবল্ডের এই ভিডিওটি দেখার পরামর্শ দিচ্ছি:

ফাইবারকে ধন্যবাদ, ব্যবহারকারীর ইনপুটগুলি সমাধান করা হয়েছে৷ অন্যান্য অ্যাসিঙ্ক্রোনাস ক্রিয়াকলাপ যেমন কল আনার আগে।

এটা কিভাবে সম্ভব?

ঠিক আছে, উপরের আর্কিবল্ডের আলোচনাটি ইভেন্ট লুপ কীভাবে কাজ করে সে সম্পর্কে শেখার আমার নিজের পথের প্রথম পাকা পাথর। তিনি বলেছেন যে মাইক্রো টাস্কগুলি - যেমন প্রতিশ্রুতি API এর মাধ্যমে তৈরি করা হয় - আগে কার্যকর করা হয় এবং ফ্লাশ করা হয় পরবর্তী ম্যাক্রো টাস্ক। এই প্রক্রিয়াটি কলব্যাক-ভিত্তিক পদ্ধতি ব্যবহার করে যেমন setTimeout .

সুতরাং, আপনি যদি আমার "ব্যবহারকারীর ইনপুট বনাম ডেটা আনার" তুলনা মনে রাখেন, দলটি কীভাবে fetch তৈরি করেছে রেজোলিউশন পরে onChange রেজোলিউশন?

এই ধারণাগুলির কোনটিই একই স্পেকের সাথে খাপ খায় না, WhatWG / HTML5 / Ecma-262, এবং ব্রাউজার বা JS ইঞ্জিনের মতো বিভিন্ন জায়গা থেকে সরবরাহ করা হয়৷

আমি বলতে চাচ্ছি, কিভাবে আমরা একটি Promise সমাধান করব একটি setTimeout পরে ?

এটি আমার কাছে একেবারে পাগল বলে মনে হয়েছিল এবং এটি কীভাবে কাজ করতে পারে সে সম্পর্কে ধারণা পাওয়া সত্যিই কঠিন ছিল। আসল বিষয়টি হল এটি একটি উচ্চ স্তরে সঞ্চালিত হয়৷

পরে, আমি প্রতিক্রিয়া সমাবেশে ব্র্যান্ডন ডেইলের অবিশ্বাস্য আলোচনা দেখেছি। এটি নতুন টাইম স্লাইসিং এবং সাসপেন্স বৈশিষ্ট্য উপস্থাপন করে যা রিঅ্যাক্ট ফাইবার আর্কিটেকচারের জন্য পাঠানো হয়েছে:

ডেইলের মতে, ফাইবার হল সাধারণ জাভাস্ক্রিপ্ট কলস্ট্যাকের মতো যেখানে স্ট্যাকের প্রতিটি আইটেমকে ফাইবার বলা হয় . এটি কলস্ট্যাকের থেকে আলাদা যা ফ্রেম এর উপর নির্ভর করে যা প্রতিনিধিত্ব করে ফাংশন (+ মেটাডেটা)। বরং, একটি ফাইবার একটি কম্পোনেন্ট (+ মেটাডেটা) প্রতিনিধিত্ব করে . আসুন একটি ফাইবারকে একটি উপাদানের চারপাশে একটি বিশাল বাক্স হিসাবে দেখি যা এটি সম্পর্কে সবকিছু জানে৷

এই দুটি ধারণার মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে।

প্রথম দিকে, কলস্ট্যাক হল একটি কার্যকারিতা যা নেটিভ পার্ট ড্রাইভিং এর উপরে তৈরি করা হয়েছে জাভাস্ক্রিপ্ট কোড . এটির লক্ষ্য প্রতিটি জাভাস্ক্রিপ্ট ফাংশন কল স্ট্যাক করা এবং সেগুলিকে নিজেরাই চালানো। প্রতিবার যখন আমরা একটি ফাংশন কল করি এটি স্ট্যাকে যোগ করা হয়। কলস্ট্যাক ছাড়া, আমরা পরিষ্কার এবং বিস্তারিত ত্রুটি স্ট্যাকট্রেস করতে সক্ষম হব না। এবং যেহেতু জাভাস্ক্রিপ্ট কোড থেকে কলস্ট্যাকটি পৌঁছানো যায় না, তাই এটি নিয়ন্ত্রণ করা সত্যিই কঠিন এবং এমনকি অসম্ভব।

অন্যদিকে, ফাইবারগুলি — ফাইবারের স্তুপের মতো — একই ধারণার প্রতিনিধিত্ব করে, তবে জাভাস্ক্রিপ্ট কোড-এ নির্মিত৷ ক্ষুদ্রতম একক ফাংশন নয়, কিন্তু একটি উপাদান। এটি আসলে একটি জাভাস্ক্রিপ্ট মহাবিশ্বে চলে৷

ফাইবার আর্কিটেকচার সম্পূর্ণরূপে জাভাস্ক্রিপ্টে নির্মিত মানে আমরা এটি ব্যবহার করতে, অ্যাক্সেস করতে এবং পরিবর্তন করতে পারি। আমরা স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট ব্যবহার করে এটিতে কাজ করতে পারি।

যা আমাকে ভুল পথে চালিত করেছে তা হল আমি ভেবেছিলাম যে জাভাস্ক্রিপ্ট কাজ করছে অভ্যন্তরীণ উপায়টি কেটে ফেলার জন্য প্রতিক্রিয়া একটি সমাধান ব্যবহার করছে। এটা নয় . ফাইবারগুলি হল জাভাস্ক্রিপ্ট বস্তু যা প্রতিক্রিয়া উপাদান সম্পর্কে তথ্যের মালিক এবং যা তাদের জীবনচক্রের সাথে যোগাযোগ করতে পারে। এটি শুধুমাত্র প্রতিক্রিয়া অভ্যন্তরীণ কার্যকারিতাগুলিতে কাজ করতে পারে৷

ধারণাটি না জাভাস্ক্রিপ্ট কীভাবে কাজ করবে তা পুনরায় সংজ্ঞায়িত করতে, যেমন fetch বলা কলব্যাক টাস্কের আগে মাইক্রোটাস্ক রেজোলিউশন কার্যকর করা উচিত। কোন প্রতিক্রিয়া পদ্ধতিগুলিকে কল করা উচিত বা না বলা উচিত এটি আরও বেশি একটি নির্দিষ্ট প্রেক্ষাপটে, যেমন বিভিন্ন লাইফসাইকেল মেথড কলে বাধা দেওয়া।

আরে অপেক্ষা করুন! আপনি বলছেন যে ফাইবারগুলি একটি প্রতিক্রিয়া অ্যাপে একেবারে সবকিছু নিয়ন্ত্রণ করতে পারে? কিন্তু কিভাবে একটি কম্পোনেন্ট প্রতিক্রিয়া বলতে পারে কিছু করা বন্ধ করতে?

বীজগণিত প্রভাব, হ্যাঁ, কিন্তু জাভাস্ক্রিপ্টে দয়া করে

প্রতিক্রিয়া উপাদানগুলি নিয়ন্ত্রণ করতে সক্ষম, এবং একটি উপাদান চলছে কিনা তা জানতে, ফাইবার আর্কিটেকচারের জন্য ধন্যবাদ। এখন যা অনুপস্থিত তা হল প্রতিক্রিয়া জানানোর একটি উপায় যে একটি নির্দিষ্ট উপাদানের জন্য কিছু পরিবর্তিত হয়েছে, তাই এটি এই পরিবর্তনটি পরিচালনা করবে৷

এখানেই বীজগণিত প্রভাব খেলায় প্রবেশ করুন৷

বীজগণিতের প্রভাব জাভাস্ক্রিপ্টে বিদ্যমান এমন কিছু নয়। আমি একটি উচ্চ স্তরের ব্যাখ্যা সঙ্গে তারা কি ব্যাখ্যা করার চেষ্টা করব.

বীজগণিতের প্রভাব হল এমন একটি ধারণা যা কোথাও কিছু তথ্য পাঠাতে দেয়, কিছুটা প্রেরণকারীর মতো। ধারণাটি হল একটি নির্দিষ্ট ফাংশনকে কল করা যা বিঘ্নিত করবে একটি সুনির্দিষ্ট অবস্থানে বর্তমানে চলমান ফাংশন একটি অভিভাবক ফাংশন একটি গণনা পরিচালনা করতে দেয়. যখন অভিভাবক গণনা শেষ হয়, তখন এটি প্রোগ্রামটিকে প্রাথমিক অবস্থানে পুনরায় শুরু করতে পারে যেখানে তথ্য পাঠানো হয়েছে৷

কিছু ভাষা যেমন OCaml বা Eff এই বৈশিষ্ট্যগুলি থেকে স্থানীয়ভাবে উপকৃত হয়। এটি সত্যিই একটি আকর্ষণীয় বিমূর্ততা কারণ বাস্তবায়নের বিবরণ শুধুমাত্র পিতামাতার উপর নির্ভর করে:

জাভাস্ক্রিপ্টে এমন একটি বৈশিষ্ট্য থাকা কি চমৎকার হবে না?

প্রতিক্রিয়া টিম জাভাস্ক্রিপ্ট try/catch এর সাথে ডিল করার জন্য একটি প্রতিক্রিয়া প্রসঙ্গে একই পদ্ধতি তৈরি করেছে ব্লক ডেইলের মতে, এটি জাভাস্ক্রিপ্টের সবচেয়ে কাছের উপলব্ধ ধারণা।

কিছু ছুঁড়ে দিলে তা পিতামাতার কাছে, কোথাও তথ্য পাঠানোর অনুমতি দেয়। প্রথম অভিভাবক যিনি তথ্যটি ধরেন তিনি এটির সাথে মোকাবিলা করতে এবং এটিতে গণনা করতে সক্ষম হন৷

একটি উদাহরণ হাজার শব্দের চেয়ে ভালো

নিচের কোডটি কল্পনা করুন যেটি একটি সিঙ্ক্রোনাস API ব্যবহার করে Bulbasaur আনার চেষ্টা করে :

কোডের এই অংশটি অদ্ভুত হতে পারে কারণ এটি একটি সিঙ্ক্রোনাস API ব্যবহার করে ডেটা আনা সত্যিই সাধারণ নয়। চলুন customFetch এর ভিতরে ঝাঁপ দেওয়া যাক ফাংশন বাস্তবায়ন:

ওহ অপেক্ষা করুন! এটি একেবারে একটি আনার মত দেখাচ্ছে না! আমি বুঝতে পারছি না এই ফাংশনটির উদ্দেশ্য কি আদৌ করা…

আচ্ছা, কম্পোনেন্টের চারপাশে কিছু কল্পনা করুন , আসুন একটি ফাইবার বলি যা দেখতে এরকম:

কোডটি পড়ার জন্য কিছু সময় নিন।

এখন, চলুন customFetch-এ চলে যাই বাস্তবায়ন:

পূর্ববর্তী স্নিপেটের গুরুত্বপূর্ণ অংশ হল try/catch ব্লক।

কোডের এই বিভিন্ন টুকরোগুলির মাধ্যমে কী ঘটছে তা সংক্ষিপ্ত করা যাক:

• Pokemon কম্পোনেন্ট কল করে customFetch পদ্ধতি।
• customFetch পদ্ধতিটি তার অভ্যন্তরীণ ক্যাশে পড়ার চেষ্টা করে, কিন্তু এটি খালি। তাই এটি কিছু/কোথাও নিক্ষেপ করে — বীজগণিতের প্রভাব।
• fiber অভিভাবক সেই তথ্যটি ধরেন, এটি পরিচালনা করেন এবং ডেটা আনেন। তারপরে এটি customFetch কে পপুলেট করে ডেটা সহ ক্যাশে।
• একটি পুনরায় রেন্ডার Component(args) এ ঘটে এবং, এখন, customFetch ক্যাশে পূর্ণ। ডেটা এখন একটি সিঙ্ক্রোনাস API ব্যবহার করে উপাদানে উপলব্ধ।

react-cache দেখুন বাস্তবায়নের বিবরণ এবং বিভিন্ন থ্রো চেক করুন।

এই প্রক্রিয়া চলাকালীন কিছু আপনার দৃষ্টি আকর্ষণ করতে পারে:render দুবার ডাকা হয়েছে। একটি ত্রুটি নিক্ষেপ করার জন্য — বিরাম দেওয়া৷ উপাদান — এবং একটি ডেটা পাওয়ার জন্য — পুনরায় শুরু করা উপাদান একাধিক render ট্রিগার করার জন্য প্রতিক্রিয়ার সাথে এটি ঠিক আছে যেহেতু এটি শুধুমাত্র একটি বিশুদ্ধ ফাংশন - এটির নিজস্ব কোনো পার্শ্বপ্রতিক্রিয়া নেই৷

দাঁড়াও... কি? render কোন পার্শ্বপ্রতিক্রিয়া নেই? DOM সম্পর্কে কি?

প্রতিক্রিয়া পর্যায়গুলি

আপনি যদি অনেক দিন ধরে রিঅ্যাক্টের সাথে কাজ করে থাকেন, আপনি হয়তো শুনেছেন যে একাধিকবার রি-রেন্ডার করা ভালো অভ্যাস নয়। ফাইবার আর্কিটেকচারের আগে, যখনই আমরা রেন্ডার ফাংশনকে কল করছিলাম React কিছু অভ্যন্তরীণ গণনা করছিল এবং তারপর সেই অনুযায়ী DOM সংশোধন করছিল। উদাহরণস্বরূপ, setState এর মাধ্যমে রেন্ডার ফাংশন কল করার সময় এটি ঘটেছিল . প্রক্রিয়া ইনলাইন ছিল:

setState →render → ভার্চুয়াল নোড তুলনা করুন → DOM নোড আপডেট করুন

ফাইবার নিয়ে কাজ করা, প্রক্রিয়াটি একটু ভিন্ন। এটি সারি এবং ব্যাচগুলির একটি ধারণা চালু করেছে যা উচ্চ কার্যকারিতা DOM পরিবর্তনের অনুমতি দেয়৷

ধারণাটি বেশ সহজ। আমরা অনুমান করি যে স্ক্রিনগুলি প্রতি সেকেন্ডে ~60 ফ্রেম চালাতে পারে। এই অনুমান থেকে, এবং উপলব্ধ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে, প্রতি ~16.7ms শুধুমাত্র কিছু গণনা এবং DOM পরিবর্তন করা সম্ভব। ফাইবারের সাহায্যে, প্রতিক্রিয়া একাধিক পরিবর্তন সারিবদ্ধ করতে পারে এবং সেগুলি প্রতি সেকেন্ডে প্রায় 60 বার করতে পারে৷

এই ধরনের পরিবর্তন প্রতিক্রিয়াকে তাদের নিজস্ব সুবিধা এবং বিশেষত্ব সহ তিনটি পর্যায়ে বিভক্ত করার অনুমতি দিয়েছে:

_[ প্রতিক্রিয়া সম্পর্কিত ড্যান আব্রামভ পর্যায়গুলি](https://twitter.com/dan_abramov/status/981712092611989509/photo/1?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwter m%5E981712092611989509&ref_url=https%3A%2F%2Fmedium.com%2Fmedia%2Fbda1c34a16e9f8a8e3eb244716a1da72%3FpostId%3D2a57dc9" rel="noopener" target="blank" title=")

• রেন্ডার পর্বটি বিশুদ্ধ এবং নির্ধারক। এটির কোন পার্শ্বপ্রতিক্রিয়া নেই এবং এটি যে বিভিন্ন ফাংশন দ্বারা গঠিত তা একাধিকবার বলা যেতে পারে। রেন্ডার পর্বটি বাধাপ্রাপ্ত হয় — এটা render নয় ফাংশন যা পজ মোডে আছে, কিন্তু পুরো ফেজ
• প্রি-কমিট শব্দগুচ্ছের লক্ষ্য হল প্রকৃত DOM অবস্থায় অ্যাক্সেস প্রদান করা, যেমন স্ক্রলবার পজিশন, রিড মোডে।
• কমিট ফেজ আসলে DOM-কে পরিবর্তন করে এবং ব্যহত হয় না . সেই পর্যায়ে প্রতিক্রিয়া থামানো যাবে না।

তিনটি পর্যায়ের এই সেটটি টাইম স্লাইসিং ক্ষমতা চালু করেছে। রিঅ্যাক্ট রেন্ডার পর্বের সময়, দুটি কম্পোনেন্ট ফাংশন কলের মধ্যে বিরতি দিতে এবং প্রয়োজনে সেই ফেজটি পুনরায় শুরু করতে সক্ষম।

ফাইবারে, render শুধুমাত্র সর্বশেষ উপলব্ধ উপস্থাপনা পেতে লক্ষ্য একটি উপাদানের অভ্যন্তরীণ অবস্থার উপর ভিত্তি করে কিছু তুলনা করতে এবং প্রতিক্রিয়াকে DOM পরিবর্তন করতে হবে কিনা তা জানতে। যদি একটি প্রতিশ্রুতি পরিবর্তনের প্রয়োজন হয়, এটি একটি "কাজ চলছে" সারিতে পরিবর্তন যোগ করবে।

রিঅ্যাক্ট টিম রিঅ্যাক্ট কনকারেন্ট (টাইম স্লাইসিং + সাসপেন্স) এবং ফাইবার আর্কিটেকচারের জন্য বিশাল কর্মক্ষমতা উন্নতি করেছে। তারা বিভিন্ন ব্রাউজার সমস্যা যেমন ইভেন্ট অগ্রাধিকার এবং একযোগে মোকাবেলা করার জন্য সমাধান তৈরি করেছে৷

আমরা যদি এক কদম পিছিয়ে যাই, তারা কি সেটাই দেখিয়েছে? ব্রাউজার এবং ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের জন্য অগ্রাধিকার দেওয়া নতুন চ্যালেঞ্জ বলে মনে হচ্ছে৷

অন্যান্য দলগুলি শিল্পের প্রকৃত অবস্থার উন্নতিতেও কাজ করছে এবং এমনকি ভবিষ্যতের API-এর প্রস্তাবও করছে৷ এটি Google এর গ্রহণ:

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন