WebAssembly বৈশিষ্ট্য সনাক্তকরণ

সমস্ত ব্রাউজার জুড়ে ব্যবহারকারীদের সমর্থন করার সময় নতুন WebAssembly বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা শিখুন৷

Ingvar Stepanyan

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

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

আপনি অফিসিয়াল রেপোতে প্রস্তাবগুলির সম্পূর্ণ তালিকা এবং তাদের নিজ নিজ পর্যায়গুলি খুঁজে পেতে পারেন বা অফিসিয়াল বৈশিষ্ট্য রোডম্যাপ পৃষ্ঠায় ইঞ্জিনগুলিতে তাদের বাস্তবায়নের অবস্থা ট্র্যাক করতে পারেন।

সমস্ত ব্রাউজার ব্যবহারকারীরা আপনার অ্যাপ্লিকেশন ব্যবহার করতে পারে তা নিশ্চিত করতে, আপনি কোন বৈশিষ্ট্যগুলি ব্যবহার করতে চান তা নির্ধারণ করতে হবে৷ তারপরে, ব্রাউজার সমর্থনের উপর ভিত্তি করে এগুলিকে গোষ্ঠীতে বিভক্ত করুন। তারপর, প্রতিটি গ্রুপের জন্য আলাদাভাবে আপনার কোডবেস কম্পাইল করুন। অবশেষে, ব্রাউজারের দিকে আপনাকে সমর্থিত বৈশিষ্ট্যগুলি সনাক্ত করতে হবে এবং সংশ্লিষ্ট JavaScript এবং Wasm বান্ডেল লোড করতে হবে।

বাছাই এবং গ্রুপিং বৈশিষ্ট্য

আসুন একটি উদাহরণ হিসাবে সেট করা কিছু স্বেচ্ছাচারী বৈশিষ্ট্য বাছাই করে সেই পদক্ষেপগুলি দিয়ে চলুন। ধরা যাক আমি শনাক্ত করেছি যে আমি আকার এবং কর্মক্ষমতার কারণে আমার লাইব্রেরিতে SIMD, থ্রেড এবং ব্যতিক্রম হ্যান্ডলিং ব্যবহার করতে চাই। তাদের ব্রাউজার সমর্থন নিম্নরূপ:

প্রতিটি ব্যবহারকারী যাতে সর্বাধিক অপ্টিমাইজ করা অভিজ্ঞতা পায় তা নিশ্চিত করতে আপনি ব্রাউজারগুলিকে নিম্নলিখিত দলগুলিতে বিভক্ত করতে পারেন:

• Chrome-ভিত্তিক ব্রাউজার: থ্রেড, SIMD, এবং ব্যতিক্রম হ্যান্ডলিং সবই সমর্থিত।
• Firefox: থ্রেড এবং SIMD সমর্থিত, ব্যতিক্রম হ্যান্ডলিং নয়।
• Safari: থ্রেড সমর্থিত, SIMD এবং ব্যতিক্রম হ্যান্ডলিং নয়।
• অন্যান্য ব্রাউজার: শুধুমাত্র বেসলাইন WebAssembly সমর্থন ধরে নিন।

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

বিভিন্ন বৈশিষ্ট্য সেটের জন্য কম্পাইলিং

WebAssembly রানটাইমে সমর্থিত বৈশিষ্ট্য সনাক্ত করার জন্য একটি অন্তর্নির্মিত উপায় নেই, তাই মডিউলের সমস্ত নির্দেশাবলী লক্ষ্যে সমর্থিত হতে হবে। সেই কারণে, আপনাকে সেই বিভিন্ন বৈশিষ্ট্য সেটগুলির প্রতিটির জন্য আলাদাভাবে Wasm-এ সোর্স কোড কম্পাইল করতে হবে।

প্রতিটি টুলচেইন এবং বিল্ড সিস্টেম আলাদা, এবং কীভাবে সেই বৈশিষ্ট্যগুলিকে পরিবর্তন করতে হয় তার জন্য আপনাকে আপনার নিজস্ব কম্পাইলারের ডকুমেন্টেশনের সাথে পরামর্শ করতে হবে। সরলতার জন্য, আমি নিম্নলিখিত উদাহরণে একটি একক-ফাইল C++ লাইব্রেরি ব্যবহার করব এবং কিভাবে Emscripten দিয়ে কম্পাইল করতে হয় তা দেখাব।

আমি SSE2 এমুলেশনের মাধ্যমে SIMD , Pthreads লাইব্রেরি সমর্থনের মাধ্যমে থ্রেড ব্যবহার করব এবং Wasm ব্যতিক্রম হ্যান্ডলিং এবং ফলব্যাক জাভাস্ক্রিপ্ট বাস্তবায়নের মধ্যে বেছে নেব:

# First bundle: threads + SIMD + Wasm exceptions
$ emcc main.cpp -o main.threads-simd-exceptions.mjs -pthread -msimd128 -msse2 -fwasm-exceptions
# Second bundle: threads + SIMD + JS exceptions fallback
$ emcc main.cpp -o main.threads-simd.mjs -pthread -msimd128 -msse2 -fexceptions
# Third bundle: threads + JS exception fallback
$ emcc main.cpp -o main.threads.mjs -pthread -fexceptions
# Fourth bundle: basic Wasm with JS exceptions fallback
$ emcc main.cpp -o main.basic.mjs -fexceptions

C++ কোড নিজেই #ifdef __EMSCRIPTEN_PTHREADS__ এবং #ifdef __SSE2__ ব্যবহার করতে পারে শর্তসাপেক্ষে একই ফাংশনের সমান্তরাল (থ্রেড এবং SIMD) বাস্তবায়ন এবং কম্পাইল-টাইমে সিরিয়াল বাস্তবায়নের মধ্যে নির্বাচন করতে। এটি এই মত দেখাবে:

void process_data(std::vector<int>& some_input) {
#ifdef __EMSCRIPTEN_PTHREADS__
#ifdef __SSE2__
  // …implementation using threads and SIMD for max speed
#else
  // …implementation using threads but not SIMD
#endif
#else
  // …fallback implementation for browsers without those features
#endif
}

ব্যতিক্রম পরিচালনার জন্য #ifdef নির্দেশের প্রয়োজন নেই, কারণ এটি সংকলন ফ্ল্যাগের মাধ্যমে নির্বাচিত অন্তর্নিহিত বাস্তবায়ন নির্বিশেষে C++ থেকে একইভাবে ব্যবহার করা যেতে পারে।

সঠিক বান্ডিল লোড হচ্ছে

একবার আপনি সমস্ত বৈশিষ্ট্য সমগোত্রের জন্য বান্ডিল তৈরি করলে, আপনাকে প্রধান জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন থেকে সঠিকটি লোড করতে হবে। এটি করতে, প্রথমে, বর্তমান ব্রাউজারে কোন বৈশিষ্ট্যগুলি সমর্থিত তা সনাক্ত করুন৷ আপনি wasm-feature-detect লাইব্রেরি দিয়ে এটি করতে পারেন। এটিকে গতিশীল আমদানির সাথে একত্রিত করে, আপনি যেকোনো ব্রাউজারে সর্বাধিক অপ্টিমাইজ করা বান্ডিল লোড করতে পারেন:

import { simd, threads, exceptions } from 'https://unpkg.com/wasm-feature-detect?module';

let initModule;
if (await threads()) {
  if (await simd()) {
    if (await exceptions()) {
      initModule = import('./main.threads-simd-exceptions.mjs');
    } else {
      initModule = import('./main.threads-simd.mjs');
    }
  } else {
    initModule = import('./main.threads.mjs');
  }
} else {
  initModule = import('./main.basic.mjs');
}

const Module = await initModule();
// now you can use `Module` Emscripten object like you normally would

শেষ কথা

এই পোস্টে, আমি দেখিয়েছি কিভাবে বিভিন্ন ফিচার সেটের জন্য বান্ডিল বেছে নিতে, তৈরি করতে এবং পরিবর্তন করতে হয়।

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

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