Codegen: এটি কী, কোড জেনারেশন এবং Fabric আর্কিটেকচার

Codegen কী?

Codegen (কোড জেনারেটরের সংক্ষিপ্ত রূপ) হল একটি কমান্ড-লাইন ইউটিলিটি যা React Native-এ অন্তর্ভুক্ত এবং JavaScript ও নেটিভ প্ল্যাটফর্ম (iOS, Android)-এর মধ্যে মিথস্ক্রিয়ার জন্য স্বয়ংক্রিয়ভাবে ব্রিজিং কোড জেনারেট করে। Codegen React Native-এর নতুন আর্কিটেকচারের একটি অবিচ্ছেদ্য অংশ এবং এটি Fabric (রেন্ডারার) এবং TurboModules (নেটিভ মডিউল) উভয়ের জন্যই ব্যবহৃত হয়।

Codegen-এর মূল ধারণা হল দায়িত্বের পৃথকীকরণ: ডেভেলপার বর্ণনা করে একটি ফাংশনের «কী» করা উচিত (এর সিগনেচার), এবং Codegen জেনারেট করে «কীভাবে» এটি নেটিভ সাইডে পাঠানো হবে। এটি JSI-এর জন্য C++ র্যাপার, iOS-এর জন্য Objective-C স্টাব এবং Android-এর জন্য Java ক্লাস ম্যানুয়ালি লেখার প্রয়োজনীয়তা দূর করে। একক সত্যের উৎস — TypeScript স্পেসিফিকেশন — নিশ্চিত করে যে টাইপগুলি সব স্তরে মেলে, যা JS এবং নেটিভ কোডের মধ্যে টাইপ অমিল সম্পর্কিত ত্রুটিগুলির একটি সম্পূর্ণ শ্রেণি দূর করে।

Codegen React Native-এর নতুন আর্কিটেকচারের (0.70+) প্রথম স্থিতিশীল সংস্করণের সাথে introduced হয়েছিল এবং তারপর থেকে এটি নেটিভ মডিউল তৈরির জন্য একটি বাধ্যতামূলক টুল হয়ে উঠেছে। Codegen ছাড়া, ডেভেলপারদের ম্যানুয়ালি JSI Host Objects লিখতে হতো, যার জন্য C++-এর গভীর জ্ঞান এবং JavaScript ইঞ্জিন-এর অভ্যন্তরীণ কাঠামো বোঝার প্রয়োজন হতো।

বিবর্তন: ম্যানুয়াল ব্রিজ থেকে স্বয়ংক্রিয় জেনারেশন

Codegen-এর আগে, React Native-এর জন্য একটি নেটিভ মডিউল ডেভেলপ করতে তিনটি ধাপ অন্তর্ভুক্ত ছিল: একটি JavaScript ইন্টারফেস লেখা, Java/Objective-C-তে নেটিভ মডিউল বাস্তবায়ন করা, এবং ম্যানুয়ালি ব্রিজ লেখা। যখন একটি মেথডের সিগনেচার পরিবর্তন হতো, তখন তিনটি ফাইলই সমলয়ভাবে আপডেট করতে হতো। Codegen এই রুটিনটি স্বয়ংক্রিয় করে: পরিবর্তনগুলি শুধুমাত্র TypeScript স্পেসিফিকেশনে করা হয়, এবং বাকি সবকিছু পুনর্জেনারেট হয়।

বিল্ড সিস্টেমের সাথে একীকরণ

Codegen Metro এবং CocoaPods-এর মাধ্যমে React Native বিল্ড প্রক্রিয়ায় একীভূত হয়। বিল্ড চালু করার সময়, Codegen TypeScript স্পেসিফিকেশন বিশ্লেষণ করে, C++ এবং প্ল্যাটফর্ম ফাইল জেনারেট করে, এবং সেগুলি বিল্ড ডিরেক্টরি-তে রাখে। এর মানে হল জেনারেটেড কোড সর্বদা বর্তমান স্পেসিফিকেশনের সাথে মেলে এবং ম্যানুয়াল আপডেটের প্রয়োজন হয় না।

Codegen কীভাবে কাজ করে?

Codegen-এর কাজের প্রক্রিয়া তিনটি ধাপে হয়: স্পেসিফিকেশন পার্সিং, মধ্যবর্তী উপস্থাপনা নির্মাণ, এবং লক্ষ্য ফাইল জেনারেশন। প্রতিটি ধাপ পৃথক, যা নতুন প্ল্যাটফর্ম বা জেনারেশন ভাষার জন্য সমর্থন যোগ করা সহজ করে।

প্রথম ধাপে, Codegen TypeScript বা Flow ফরম্যাটে স্পেসিফিকেশন ফাইল পড়ে। স্পেসিফিকেশন নেটিভ মডিউল ইন্টারফেস বর্ণনা করে: মেথডের নাম, প্যারামিটার টাইপ এবং রিটার্ন টাইপ। Codegen প্রিমিটিভ টাইপ (number, string, boolean) এবং জটিল টাইপ — অবজেক্ট, অ্যারে, Promise এবং Callback সমর্থন করে। স্পেসিফিকেশনগুলি প্রজেক্টের একটি বিশেষ ডিরেক্টরিতে .ts বা .js ফাইলে সংরক্ষিত হয়।

দ্বিতীয় ধাপে, Codegen পার্স করা স্পেসিফিকেশন থেকে একটি অ্যাবস্ট্রাক্ট সিনট্যাক্স ট্রি (AST) তৈরি করে। AST ডেটা কাঠামোকে একটি নিরপেক্ষ ফরম্যাটে উপস্থাপন করে যা কোনো নির্দিষ্ট জেনারেশন ভাষার সাথে আবদ্ধ নয়। এটি একক AST থেকে Fabric-এর জন্য C++ কোড, iOS-এর জন্য Objective-C এবং Android-এর জন্য Java জেনারেট করার অনুমতি দেয় — সমস্ত প্ল্যাটফর্ম সমর্থন করার জন্য কোনো অতিরিক্ত কাজের প্রয়োজন হয় না।

তৃতীয় ধাপে, Codegen লক্ষ্য প্ল্যাটফর্ম ফাইল জেনারেট করার জন্য একটি টেমপ্লেট ইঞ্জিন (Mustache-ভিত্তিক) ব্যবহার করে। প্রতিটি টেমপ্লেট একটি নির্দিষ্ট ফাইল প্রকারের জন্য দায়ী: C++ হেডার (.h), ইমপ্লিমেন্টেশন (.cpp), Objective-C প্রোটোকল (.h) বা ইমপ্লিমেন্টেশন (.mm), Java ক্লাস। টেমপ্লেটগুলি React Native-এর সাথে আসে, কিন্তু প্রজেক্টের নির্দিষ্ট প্রয়োজন অনুসারে কাস্টমাইজ করা যেতে পারে।

Codegen কাজের প্রক্রিয়া ডায়াগ্রাম

// NativeCalculator.ts — native module specification
import { TurboModule, TurboModuleRegistry } from 'react-native'
import { Double } from 'react-native/Libraries/Types/CodegenTypes'

export interface NativeCalculatorSpec extends TurboModule {
    add(a: Double, b: Double): Double
    multiply(a: Double, b: Double): Double
}

export default TurboModuleRegistry.<NativeCalculatorSpec>('NativeCalculator')

এই উদাহরণে, স্পেসিফিকেশন দুটি মেথড সহ NativeCalculator মডিউল বর্ণনা করে: add এবং multiply। দুটিই Double গ্রহণ করে এবং Double ফেরত দেয়। TurboModuleRegistry-তে স্ট্রিং 'NativeCalculator' মডিউলের নাম নির্দিষ্ট করে যা নেটিভ সাইডে ব্যবহার করা হবে। Codegen এই স্পেসিফিকেশনের ভিত্তিতে Fabric এবং TurboModules-এর জন্য সমস্ত প্রয়োজনীয় ফাইল জেনারেট করবে।

Fabric আর্কিটেকচারে Codegen

Fabric (নতুন React Native রেন্ডারার) প্রসঙ্গে, Codegen একটি বিশেষ ভূমিকা পালন করে। Fabric প্রয়োজন যে প্রতিটি নেটিভ UI কম্পোনেন্টের একটি C++ উপস্থাপনা থাকবে যা JSI-এর মাধ্যমে তৈরি এবং পরিচালনা করা যেতে পারে। Codegen কম্পোনেন্ট স্পেসিফিকেশনের ভিত্তিতে স্বয়ংক্রিয়ভাবে এই C++ উপস্থাপনাগুলি জেনারেট করে।

UI কম্পোনেন্টের জন্য জেনারেশন

UI কম্পোনেন্টের জন্য, Codegen শুধুমাত্র C++ Shadow Node ক্লাসই নয়, প্ল্যাটফর্ম-নির্দিষ্ট উপস্থাপনাও জেনারেট করে। উদাহরণস্বরূপ, iOS-এ একটি কাস্টম Button কম্পোনেন্টের জন্য, Codegen একটি Objective-C ক্লাস তৈরি করে যা Fabric-এ কম্পোনেন্ট রেজিস্টার করে এবং এটিকে C++ Shadow Node-এর সাথে সংযুক্ত করে। ডেভেলপারকে শুধুমাত্র TypeScript স্পেসিফিকেশনে কম্পোনেন্টের বৈশিষ্ট্য (রঙ, আকার, হ্যান্ডলার) বর্ণনা করতে হবে।

প্রপার্টি টাইপিং

Codegen প্রত্যক্ষ এবং বিপরীত ডেটা স্থানান্তর উভয়ই সমর্থন করে। ডাইরেক্ট ইভেন্ট (যেমন onPress) C++ স্ট্রাকচার হিসাবে জেনারেট হয় যার ফিল্ডগুলি JS-এ পাস করার সময় স্বয়ংক্রিয়ভাবে সিরিয়ালাইজ হয়। EventEmitter নেটিভ সাইডকে JS থেকে অনুরোধ ছাড়াই JS-এ ইভেন্ট পাঠাতে দেয়। Codegen উভয় দিকের জন্য টাইপকৃত র্যাপার জেনারেট করে, ফিল্ড নামের অমিল ত্রুটিগুলি দূর করে।

থার্ড-পার্টি লাইব্রেরির জন্য Codegen

লাইব্রেরি ডেভেলপাররা তাদের npm প্যাকেজের সাথে Codegen স্পেসিফিকেশন দিতে পারেন। লাইব্রেরি ইনস্টল করার সময়, Codegen স্বয়ংক্রিয়ভাবে স্পেসিফিকেশন সনাক্ত করে এবং বর্তমান প্ল্যাটফর্মের জন্য ব্রিজিং কোড জেনারেট করে। এটি নেটিভ লাইব্রেরির জন্য বিশেষভাবে গুরুত্বপূর্ণ, কারণ লাইব্রেরি ব্যবহারকারীদের C++, Objective-C বা Java বোঝার প্রয়োজন নেই — তারা শুধু TypeScript টাইপ ইম্পোর্ট করে এবং প্রস্তুত কম্পোনেন্ট ব্যবহার করে।

Codegen কী কী ফাইল জেনারেট করে?

Codegen তিনটি লক্ষ্য পরিবেশের জন্য ফাইল জেনারেট করে: C++ (JSI), Objective-C (iOS) এবং Java (Android)। প্রতিটি ফাইলের কঠোরভাবে সংজ্ঞায়িত ভূমিকা এবং কাঠামো রয়েছে। কোন ফাইলগুলি তৈরি হয় তা বোঝা ডিবাগিংয়ে এবং প্রয়োজনে জেনারেটেড কোডের ম্যানুয়াল সমন্বয়ে সহায়তা করে।

C++ ফাইল (JSI)

প্রতিটি নেটিভ মডিউলের জন্য, Codegen দুটি C++ ফাইল তৈরি করে: Host Object ক্লাস ডিক্লেয়ারেশন সহ একটি হেডার (.h) এবং প্ল্যাটফর্মে সংশ্লিষ্ট ফাংশন কল করার মেথড সহ একটি ইমপ্লিমেন্টেশন ফাইল (.cpp)। হেডার ফাইলে jsi::HostObject থেকে উত্তরাধিকারসূত্রে প্রাপ্ত একটি ক্লাস থাকে যার মডিউল ফাংশনে অ্যাক্সেসের জন্য ওভাররাইডেড get মেথড থাকে। ইমপ্লিমেন্টেশন ফাইলে ল্যাম্বডা ফাংশন থাকে যা JS থেকে কল করার সময় নেটিভ মডিউলে এক্সিকিউশন ডেলিগেট করে।

iOS ফাইল (Objective-C)

iOS-এর জন্য, Codegen একটি Objective-C প্রোটোকল এবং একটি ক্যাটাগরি জেনারেট করে। প্রোটোকল মেথডগুলি ডিক্লেয়ার করে যা নেটিভ মডিউল দ্বারা বাস্তবায়িত হতে হবে। RCTCxxBridge-এর ক্যাটাগরিতে ব্রিজিং কোড থাকে যা মডিউলকে RCTTurboModuleManager-এ রেজিস্টার করে। এটি স্ট্যান্ডার্ড RCTBridge মেকানিজমের মাধ্যমে C++ JSI থেকে Objective-C মডিউল মেথড কল করার অনুমতি দেয়।

Android ফাইল (Java)

Android-এর জন্য, Codegen একটি Java ইন্টারফেস এবং একটি অ্যাবস্ট্রাক্ট ক্লাস জেনারেট করে। ইন্টারফেসে সঠিক Java টাইপ সহ মেথড ডিক্লেয়ারেশন থাকে। অ্যাবস্ট্রাক্ট ক্লাস TurboModule ইন্টারফেস ইমপ্লিমেন্ট করে এবং মডিউলকে ReactPackage-এ রেজিস্টার করার জন্য মৌলিক লজিক অন্তর্ভুক্ত করে। ডেভেলপার এই ক্লাস থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হয় এবং শুধুমাত্র মেথডগুলির বিজনেস লজিক ইমপ্লিমেন্ট করে।

জেনারেটেড ফাইল স্ট্রাকচার

// Directory structure after Codegen run
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Objective-C protocol
            NativeCalculatorSpec.mm    // JSI implementation
        android/
            NativeCalculatorSpec.java  // Java interface
            NativeCalculatorModuleBase.java  // Base class
        cxx/
            NativeCalculator.h         // C++ Host Object header
            NativeCalculator.cpp        // C++ JSI implementation

এই সম্পূর্ণ কাঠামোটি প্রজেক্ট বিল্ডের সময় স্বয়ংক্রিয়ভাবে তৈরি হয়। ডেভেলপারদের জেনারেটেড ফাইল সম্পাদনা করা উচিত নয় — পরবর্তী বিল্ডে সেগুলি ওভাররাইট হবে। যদি মডিউল আচরণ পরিবর্তনের প্রয়োজন হয়, পরিবর্তনগুলি শুধুমাত্র নেটিভ ইমপ্লিমেন্টেশন সোর্স কোডে (Java/Objective-C) বা TypeScript স্পেসিফিকেশন-এ করা হয়।

Codegen ওয়ার্কফ্লো উদাহরণ

আসুন Keychain-এ ডেটা সংরক্ষণের জন্য একটি নেটিভ মডিউল তৈরি করে Codegen-এর সম্পূর্ণ ওয়ার্কফ্লো দেখি। এটি একটি সাধারণ কাজ যার জন্য iOS এবং Android-এর নেটিভ API-তে অ্যাক্সেস প্রয়োজন।

ধাপ 1: স্পেসিফিকেশন

ডেভেলপার KeychainStorage মডিউল ইন্টারফেস বর্ণনা করে একটি স্পেসিফিকেশন ফাইল তৈরি করে। save এবং read মেথডগুলি একটি স্ট্রিং গ্রহণ করে এবং Promise ফেরত দেয়, কারণ Keychain-এর সাথে কাজ কিছু প্ল্যাটফর্মে অ্যাসিঙ্ক্রোনাস হতে পারে।

import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface KeychainStorageSpec extends TurboModule {
    save(key: string, value: string): Promise<void>
    read(key: string): Promise<string | null>
    delete(key: string): Promise<boolean>
}

export default TurboModuleRegistry.<KeychainStorageSpec>('KeychainStorage')

ধাপ 2: Codegen চালানো

React Native প্রজেক্ট বিল্ড করার সময় Codegen স্বয়ংক্রিয়ভাবে চলে। যদি ম্যানুয়ালি চালানোর প্রয়োজন হয়, তাহলে npx react-native codegen কমান্ড ব্যবহার করা হয়। Codegen স্পেসিফিকেশন পার্স করে এবং build/generated/-এ সমস্ত প্রয়োজনীয় ফাইল তৈরি করে। ডেভেলপার জেনারেটেড C++, Objective-C এবং Java ফাইল দেখতে পায়, কিন্তু সেগুলি সম্পাদনা করা উচিত নয়।

# Run Codegen manually
npx react-native codegen --target-path ./build/generated

# After generation — build the project
npx react-native run-ios
npx react-native run-android

ধাপ 3: JS-এ ব্যবহার

জেনারেশন এবং বিল্ডের পরে, ডেভেলপার মডিউলটিকে একটি সাধারণ TypeScript টাইপ হিসাবে ইম্পোর্ট করে। IDE জেনারেটেড .d.ts ফাইলের জন্য স্বয়ংক্রিয়ভাবে মেথড সিগনেচার সুপারিশ করে। TypeScript গ্যারান্টি দেয় যে প্যারামিটার এবং রিটার্ন টাইপ নেটিভ ইমপ্লিমেন্টেশনের সাথে মেলে — যদি স্পেসিফিকেশন string নির্দিষ্ট করে, তাহলে নেটিভ সাইডে ঠিক একটি স্ট্রিং পাওয়া যাবে।

import KeychainStorage from './NativeKeychainStorage'

async function storeToken(token: string) {
    await KeychainStorage.save('auth_token', token)
}

async function getToken(): Promise<string | null> {
    return KeychainStorage.read('auth_token')
}

এই উদাহরণ দেখায় যে JS কোডে কোনো প্ল্যাটফর্ম-নির্দিষ্ট নির্দেশ নেই — এটি iOS এবং Android উভয়ের জন্যই একই। সমস্ত প্ল্যাটফর্ম-নির্দিষ্ট বিবরণ Codegen-জেনারেটেড কোডের ভিতরে লুকানো আছে। Codegen ব্রিজ তৈরির সমস্ত রুটিন কাজ পরিচালনা করে, ডেভেলপারকে শুধুমাত্র বিজনেস লজিক এবং TypeScript-এর মাধ্যমে টাইপ চেকিং ছেড়ে দেয়।