একটি ওয়েব অ্যাপ সহজ রাখা আশ্চর্যজনকভাবে জটিল হতে পারে। এই মডিউলে, আপনি শিখবেন কিভাবে ওয়েব API গুলি থ্রেডিংয়ের সাথে কাজ করে এবং আপনি কীভাবে এটিকে রাষ্ট্রীয় ব্যবস্থাপনার মতো সাধারণ PWA প্যাটার্নের জন্য ব্যবহার করতে পারেন।
সরলতা এবং জটিলতা
তার বক্তৃতায় সিম্পল মেড ইজি , রিচ হিকি সহজ বনাম জটিল জিনিসের গুণাবলী নিয়ে আলোচনা করেছেন। তিনি ফোকাস করার মতো সহজ জিনিসগুলি বর্ণনা করেছেন:
"একটি ভূমিকা, একটি কাজ, একটি ধারণা, বা একটি মাত্রা।"
কিন্তু জোর দেয় যে সরলতা সম্পর্কে নয়:
"একটি উদাহরণ থাকা বা একটি অপারেশন করা।"
কিছু সহজ কি না তা কতটা আন্তঃসংযুক্ত তা নিয়ে।
জটিলতা বাইন্ডিং, বুনন, বা রিচ এর টার্ম ব্যবহার করে জিনিস একসাথে কমপ্লেক্ট করা থেকে আসে। আপনি ভূমিকা, কাজ, ধারণা, বা মাত্রা কিছু পরিচালনা করে সংখ্যা গণনা করে জটিলতা গণনা করতে পারেন।
সফ্টওয়্যার বিকাশে সরলতা অপরিহার্য কারণ সাধারণ কোড বোঝা এবং বজায় রাখা সহজ। ওয়েব অ্যাপগুলির জন্যও সরলতা প্রয়োজনীয় কারণ এটি আমাদের অ্যাপটিকে প্রতিটি সম্ভাব্য প্রসঙ্গে দ্রুত এবং অ্যাক্সেসযোগ্য করে তুলতে সাহায্য করতে পারে।
PWA জটিলতা পরিচালনা করা
আমরা ওয়েবের জন্য লিখি সমস্ত জাভাস্ক্রিপ্ট এক পর্যায়ে মূল থ্রেড স্পর্শ করে। মূল থ্রেড, যদিও, অনেক জটিলতা নিয়ে আসে যা একজন ডেভেলপার হিসাবে আপনার কোন নিয়ন্ত্রণ নেই।
প্রধান থ্রেড হল:
- পৃষ্ঠাটি আঁকার জন্য দায়ী, যা নিজেই একটি জটিল, বহু-পদক্ষেপের প্রক্রিয়া যার মধ্যে শৈলী গণনা করা, স্তরগুলি আপডেট করা এবং সংমিশ্রণ করা এবং পর্দায় পেইন্টিং জড়িত।
- স্ক্রল করার মতো ইভেন্টগুলি সহ ইভেন্টগুলি শোনার এবং প্রতিক্রিয়া জানানোর জন্য দায়ী৷
- পৃষ্ঠাটি লোড এবং আনলোড করার জন্য দায়ী।
- মিডিয়া পরিচালনা, নিরাপত্তা, এবং পরিচয়. আপনার লেখা যেকোন কোড এমনকি সেই থ্রেডে চালানোর আগে এটাই হল:
- DOM ম্যানিপুলেট করা।
- সংবেদনশীল API অ্যাক্সেস করা, উদাহরণস্বরূপ, ডিভাইসের ক্ষমতা, বা মিডিয়া/নিরাপত্তা/পরিচয়।
সুরমা যেমন তার 2019 ক্রোম ডেভ সামিট টক- এ তুলে ধরেছেন, মূল থ্রেডটি অতিরিক্ত কাজ করা এবং কম বেতনের।
এবং এখনও, বেশিরভাগ অ্যাপ্লিকেশন কোড প্রধান থ্রেডেও বাস করে।
এই সমস্ত কোড মূল থ্রেডের জটিলতা যোগ করে। প্রধান থ্রেডটি একমাত্র যা ব্রাউজারটি স্ক্রীনে বিষয়বস্তু সাজাতে এবং রেন্ডার করতে ব্যবহার করতে পারে। অতএব, যখন আপনার কোডটি সম্পূর্ণ করার জন্য আরও এবং আরও বেশি প্রক্রিয়াকরণ শক্তির প্রয়োজন হয়, তখন আমাদের এটিকে দ্রুত চালাতে হবে, কারণ অ্যাপ্লিকেশন লজিক সম্পাদন করতে প্রতিটি সেকেন্ড সময় লাগে ব্রাউজারটি ব্যবহারকারীর ইনপুটে সাড়া দিতে বা পৃষ্ঠাটি পুনরায় আঁকতে পারে না।
যখন ইন্টারঅ্যাকশনগুলি ইনপুটের সাথে সংযুক্ত হয় না, যখন ফ্রেমগুলি কমে যায়, বা যখন এটি একটি সাইট ব্যবহার করতে খুব বেশি সময় নেয়, তখন ব্যবহারকারীরা হতাশ হন, তারা অনুভব করেন যে অ্যাপ্লিকেশনটি ভেঙে গেছে এবং এতে তাদের আস্থা কমে যায়।
খারাপ খবর? মূল থ্রেডে জটিলতা যোগ করা এই লক্ষ্যগুলি পূরণ করা কঠিন করার একটি প্রায় নিশ্চিত উপায়। ভাল খবর? কারণ মূল থ্রেডটি যা করতে হবে তা পরিষ্কার: এটি আপনার বাকি আবেদনের জন্য এটির উপর নির্ভরতা কমাতে সাহায্য করার জন্য একটি গাইড হিসাবে ব্যবহার করা যেতে পারে।
উদ্বেগ বিচ্ছেদ
ওয়েব অ্যাপ্লিকেশানগুলি করে এমন অনেকগুলি বিভিন্ন ধরণের কাজ রয়েছে, তবে বিস্তৃতভাবে বলতে গেলে, আপনি এটিকে এমন কাজে ভেঙে দিতে পারেন যা সরাসরি UI-কে স্পর্শ করে এবং যে কাজটি করে না। UI কাজ হল কাজ যা:
- সরাসরি DOM স্পর্শ করে।
- এপিআই ব্যবহার করে যা ডিভাইসের ক্ষমতা স্পর্শ করে, উদাহরণস্বরূপ, বিজ্ঞপ্তি বা ফাইল সিস্টেম অ্যাক্সেস।
- পরিচিতি স্পর্শ করে, উদাহরণস্বরূপ, ব্যবহারকারী কুকিজ, স্থানীয় বা সেশন স্টোরেজ।
- মিডিয়া পরিচালনা করে, উদাহরণস্বরূপ, ছবি, অডিও বা ভিডিও।
- নিরাপত্তার প্রভাব রয়েছে যা অনুমোদনের জন্য ব্যবহারকারীর হস্তক্ষেপ প্রয়োজন, যেমন ওয়েব সিরিয়াল API।
নন-ইউআই কাজগুলি অন্তর্ভুক্ত করতে পারে যেমন:
- বিশুদ্ধ হিসাব।
- ডেটা অ্যাক্সেস (আনয়ন, IndexedDB, ইত্যাদি)।
- ক্রিপ্টো।
- মেসেজিং।
- ব্লব বা স্ট্রীম সৃষ্টি, বা ম্যানিপুলেশন।
নন-ইউআই কাজ প্রায়শই UI কাজের দ্বারা বুক-এন্ড করা হয়: একজন ব্যবহারকারী এমন একটি বোতামে ক্লিক করেন যা একটি API-এর জন্য একটি নেটওয়ার্ক অনুরোধ ট্রিগার করে যা পার্স করা ফলাফল প্রদান করে যা পরে DOM আপডেট করতে ব্যবহৃত হয়। কোড লেখার সময়, এই এন্ড-টু-এন্ড অভিজ্ঞতা প্রায়ই বিবেচনা করা হয়, কিন্তু যেখানে সেই প্রবাহের প্রতিটি অংশ সাধারণত থাকে না। UI কাজ এবং নন-UI কাজের মধ্যে সীমানাগুলি শেষ-থেকে-শেষ অভিজ্ঞতার মতোই গুরুত্বপূর্ণ, কারণ তারাই প্রথম স্থান যা আপনি মূল থ্রেড জটিলতা কমাতে পারেন।
একটি একক কাজে মনোযোগ দিন
কোড সরলীকরণের সবচেয়ে সহজ উপায়গুলির মধ্যে একটি হল ফাংশনগুলিকে বিচ্ছিন্ন করা যাতে প্রতিটি একটি একক কাজের উপর ফোকাস করে। শেষ থেকে শেষ অভিজ্ঞতার মধ্য দিয়ে হেঁটে চিহ্নিত সীমানা দ্বারা কাজগুলি নির্ধারণ করা যেতে পারে:
- প্রথমত, ব্যবহারকারীর ইনপুটে সাড়া দিন। এটি UI এর কাজ।
- পরবর্তী, একটি API অনুরোধ করুন। এটি নন-ইউআই কাজ।
- এরপরে, API অনুরোধটি পার্স করুন। এটি আবার নন-ইউআই কাজ।
- পরবর্তী, DOM-এ পরিবর্তনগুলি নির্ধারণ করুন। এটি UI কাজ হতে পারে, অথবা আপনি যদি ভার্চুয়াল DOM বাস্তবায়নের মতো কিছু ব্যবহার করেন তবে এটি UI কাজ নাও হতে পারে।
- অবশেষে, DOM এ পরিবর্তন করুন। এটি UI এর কাজ।
প্রথম স্পষ্ট সীমানা হল UI কাজ এবং নন-UI কাজের মধ্যে। তারপরে বিচার কলগুলি করা দরকার: একটি API অনুরোধ করা এবং পার্স করা কি একটি বা দুটি কাজ? যদি DOM পরিবর্তনগুলি অ-ইউআই কাজ হয়, তবে সেগুলি কি এপিআই কাজের সাথে একত্রিত হয়? একই সুতোয়? ভিন্ন থ্রেডে? এখানে বিচ্ছেদের সঠিক স্তরটি আপনার কোডবেসকে সরল করা এবং মূল থ্রেড থেকে সফলভাবে এর টুকরোগুলি সরাতে সক্ষম হওয়া উভয়েরই চাবিকাঠি।
সংমিশ্রণযোগ্যতা
বড় এন্ড-টু-এন্ড ওয়ার্কফ্লোকে ছোট ছোট অংশে বিভক্ত করতে, আপনাকে আপনার কোডবেসের সংমিশ্রণযোগ্যতা সম্পর্কে চিন্তা করতে হবে। কার্যকরী প্রোগ্রামিং থেকে সংকেত গ্রহণ, বিবেচনা করুন:
- আপনার অ্যাপ্লিকেশানের কাজের ধরন শ্রেণীবদ্ধ করা।
- তাদের জন্য সাধারণ ইনপুট এবং আউটপুট ইন্টারফেস তৈরি করা।
উদাহরণস্বরূপ, সমস্ত API পুনরুদ্ধার কার্যগুলি API এন্ডপয়েন্টে নেয় এবং স্ট্যান্ডার্ড অবজেক্টের একটি অ্যারে ফেরত দেয় এবং সমস্ত ডেটা-প্রসেসিং ফাংশনগুলি গ্রহণ করে এবং স্ট্যান্ডার্ড অবজেক্টের একটি অ্যারে ফেরত দেয়।
জাভাস্ক্রিপ্টে জটিল জাভাস্ক্রিপ্ট অবজেক্ট কপি করার জন্য একটি স্ট্রাকচার্ড ক্লোন অ্যালগরিদম রয়েছে। ওয়েব কর্মীরা বার্তা পাঠানোর সময় এটি ব্যবহার করে এবং IndexedDB বস্তু সংরক্ষণ করতে এটি ব্যবহার করে। স্ট্রাকচার্ড ক্লোনিং অ্যালগরিদমের সাথে আপনি যে ইন্টারফেসগুলি ব্যবহার করতে পারেন তা নির্বাচন করা তাদের চালানোর জন্য আরও নমনীয় করে তুলবে।
এটি মাথায় রেখে, আপনি আপনার কোডকে শ্রেণিবদ্ধ করে এবং সেই বিভাগগুলির জন্য সাধারণ I/O ইন্টারফেস তৈরি করে কম্পোজযোগ্য কার্যকারিতার একটি লাইব্রেরি তৈরি করতে পারেন। কম্পোজেবল কোড হল সাধারণ কোডবেসগুলির একটি বৈশিষ্ট্য: ঢিলেঢালাভাবে জোড়া, বিনিময়যোগ্য টুকরা যা একে অপরের "পরে" বসতে পারে এবং একে অপরের উপর তৈরি করতে পারে, জটিল কোডের বিপরীতে যা গভীরভাবে আন্তঃসংযুক্ত এবং তাই সহজে আলাদা করা যায় না। এবং ওয়েবে, কম্পোজেবল কোডের অর্থ প্রধান থ্রেডের অতিরিক্ত কাজ করা বা না করার মধ্যে পার্থক্য বোঝাতে পারে।
কম্পোজেবল কোড হাতে নিয়ে, মূল থ্রেড থেকে এর কিছু অংশ নেওয়ার সময় এসেছে।
জটিলতা কমাতে ওয়েব কর্মীদের ব্যবহার করা
ওয়েব কর্মীরা, একটি প্রায়শই অব্যবহৃত কিন্তু ব্যাপকভাবে উপলব্ধ ওয়েব ক্ষমতা, আপনাকে মূল থ্রেড থেকে কাজ সরাতে দেয়।
ওয়েব কর্মীরা একটি PWA চালাতে দেয় (কিছু) জাভাস্ক্রিপ্ট মূল থ্রেডের বাইরে।
তিন ধরনের কর্মী আছে।
ডেডিকেটেড ওয়ার্কার , ওয়েব কর্মীদের বর্ণনা করার সময় সাধারণত যা ভাবা হয়, একটি PWA-এর একক চলমান উদাহরণে একটি একক স্ক্রিপ্ট দ্বারা ব্যবহার করা যেতে পারে। যখনই সম্ভব, DOM-এর সাথে সরাসরি ইন্টারঅ্যাক্ট করে না এমন কাজ কর্মক্ষমতা উন্নত করার জন্য একজন ওয়েব ওয়ার্কারের কাছে সরানো উচিত।
শেয়ার্ড ওয়ার্কাররা ডেডিকেটেড ওয়ার্কারদের মতোই, একাধিক স্ক্রিপ্ট ছাড়া একাধিক খোলা উইন্ডোতে সেগুলি শেয়ার করতে পারে। এটি একটি নিবেদিত কর্মীর সুবিধা প্রদান করে কিন্তু একটি শেয়ার করা অবস্থা এবং উইন্ডোজ এবং স্ক্রিপ্টগুলির মধ্যে অভ্যন্তরীণ প্রসঙ্গ সহ।
একটি ভাগ করা কর্মী, উদাহরণস্বরূপ, একটি PWA এর IndexedDB-এর জন্য অ্যাক্সেস এবং লেনদেন পরিচালনা করতে পারে এবং সমস্ত কলিং স্ক্রিপ্ট জুড়ে লেনদেনের ফলাফল সম্প্রচার করতে পারে যাতে তারা পরিবর্তনগুলিতে প্রতিক্রিয়া জানায়৷
চূড়ান্ত ওয়েব কর্মী হল এই কোর্সে ব্যাপকভাবে আচ্ছাদিত একজন: পরিষেবা কর্মী , যা নেটওয়ার্ক অনুরোধের জন্য একটি প্রক্সি হিসাবে কাজ করে এবং একটি PWA এর সমস্ত উদাহরণের মধ্যে ভাগ করা হয়৷
এটি নিজে চেষ্টা করো
এটা কোড সময়! আপনি এই মডিউলে যা শিখেছেন তার উপর ভিত্তি করে স্ক্র্যাচ থেকে একটি PWA তৈরি করুন।