JavaScript: ভাষার মৌলিক বিষয়, React Native এবং মোবাইল উন্নয়ন

JavaScript কী?

JavaScript (JS) একটি উচ্চ-স্তরের প্রোগ্রামিং ভাষা যার ডায়নামিক টাইপিং, প্রোটোটাইপাল ইনহেরিটেন্স এবং ফাংশন প্রথম-শ্রেণীর বস্তু হিসাবে রয়েছে। এটি Brendan Eich 1995 সালে 10 দিনে তৈরি করেছিলেন। এটি ওয়েব প্রযুক্তির (HTML, CSS, JS) তিনটি প্রধান ভাষার একটি এবং Node.js সার্ভার প্ল্যাটফর্মের (2009) ভিত্তি, যা JS-কে ব্রাউজারের বাইরে যেতে দিয়েছে।

মোবাইল উন্নয়নে, JavaScript তিনটি প্যারাডাইমে ব্যবহৃত হয়: নেটিভ কম্পাইলেশন (Hermes/JSC সহ React Native), WebView কন্টেইনার (Ionic, Cordova) এবং সার্ভার-সাইড JS (মোবাইল অ্যাপ ব্যাকএন্ডের জন্য Node.js + Express)। React Native প্রভাবশালী প্রযুক্তি: Statista (2025) অনুযায়ী, 38% ক্রস-প্ল্যাটফর্ম প্রকল্প React Native ব্যবহার করে, যা শুধুমাত্র Flutter (46%)-এর পরে দ্বিতীয়।

JavaScript-এর মূল বৈশিষ্ট্য হল নন-ব্লকিং I/O সহ একক-থ্রেডেড কার্যকর মডেল। ইভেন্ট লুপ OS থ্রেড তৈরি না করেই একটি একক থ্রেডে হাজার হাজার অ্যাসিনক্রোনাস অপারেশন প্রক্রিয়া করতে দেয়। এটি JS-কে I/O-নিবিড় অ্যাপ্লিকেশনের (নেটওয়ার্ক অনুরোধ, ডাটাবেস অপারেশন) জন্য কার্যকর করে, কিন্তু CPU-নিবিড় গণনায় সতর্কতা প্রয়োজন।

JavaScript মান: ES5, ES6, ES2025

ECMAScript (ES) মান JavaScript-এর স্পেসিফিকেশন নির্ধারণ করে। ES6 (2015) let/const, অ্যারো ফাংশন, ক্লাস, মডিউল, Promise চালু করেছে। ES2020 — Optional Chaining (?.), Nullish Coalescing (??)। ES2023 — Array findLast, Hashbang Grammar। আধুনিক ইঞ্জিন Hermes (React Native) এবং V8 (Node.js) ES2022+ সমর্থন করে। React Native Hermes Proxy এবং Symbol-এ নির্দিষ্ট সীমাবদ্ধতা সহ ES2020+ সমর্থন করে।

JavaScript সিনট্যাক্স: প্রকার, ফাংশন এবং প্রোটোটাইপ

JavaScript সিনট্যাক্স C-সদৃশ, ডায়নামিকভাবে টাইপ করা। ভেরিয়েবলের প্রকার মান দ্বারা নির্ধারিত হয় এবং রানটাইমে পরিবর্তিত হতে পারে। let এবং const (ES6) ব্লক স্কোপের জন্য var-কে প্রতিস্থাপন করেছে। প্রিমিটিভ প্রকার: string, number, boolean, null, undefined, symbol, bigint। বাকি সবকিছু একটি বস্তু (object, array, function, date, regexp)।

প্রথম-শ্রেণীর বস্তু হিসাবে ফাংশন

JavaScript উচ্চ-ক্রমের ফাংশন সহ একটি ভাষা। ফাংশন ভেরিয়েবলে নিয়োগ করা যেতে পারে, আর্গুমেন্ট হিসাবে পাস করা যেতে পারে, অন্যান্য ফাংশন থেকে ফিরিয়ে দেওয়া যেতে পারে। অ্যারো ফাংশনের (=>) নিজস্ব this নেই — তারা বাইরের প্রসঙ্গ থেকে this উত্তরাধিকার সূত্রে পায়। ক্লোজার (closure) একটি ফাংশন যা যেখানে তৈরি করা হয়েছিল সেই স্কোপের ভেরিয়েবলগুলি মনে রাখে।

// JavaScript-এ ডেটা প্রকার এবং ফাংশন
// প্রিমিটিভ প্রকার
const name = 'React Native';
let version = 0.71;
var isActive = true; // পুরানো var

// অবজেক্ট এবং অ্যারে
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// উচ্চ-ক্রম ফাংশন
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// ক্লোজার
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// অবজেক্ট কপি করার জন্য স্প্রেড অপারেটর
const newApp = { ...app, version: 16 };

স্প্রেড অপারেটর ... একটি বস্তুর শ্যালো কপি তৈরি করে। ডিস্ট্রাকচারিং (const { platform, version } = app) ফিল্ডগুলিকে ভেরিয়েবলে বের করে। filterByVersion-এ অ্যারো ফাংশন function এক্সপ্রেশনের চেয়ে ছোট এবং নিজস্ব this তৈরি করে না — React Native কম্পোনেন্টে এটি গুরুত্বপূর্ণ যেখানে this কম্পোনেন্ট ক্লাসকে নির্দেশ করে।

প্রোটোটাইপাল ইনহেরিটেন্স

JavaScript প্রোটোটাইপাল ইনহেরিটেন্স ব্যবহার করে, Java বা C#-এর মতো শাস্ত্রীয় নয়। ক্লাস (ES6) প্রোটোটাইপের উপরে সিনট্যাক্টিক সুগার। প্রতিটি বস্তুর অন্য একটি বস্তুর অভ্যন্তরীণ [[Prototype]] রেফারেন্স থাকে। বস্তুতে বিদ্যমান নয় এমন একটি বৈশিষ্ট্য অ্যাক্সেস করার সময়, JS প্রোটোটাইপ চেইনে এটি অনুসন্ধান করে। ক্লাস সিনট্যাক্স (extends, super) কোড আরও পড়তে সহজ করে তোলে, কিন্তু ভেতরে প্রোটোটাইপই থাকে।

// JavaScript-এ ক্লাস — সিনট্যাক্টিক সুগার
class PlatformService {
  // প্রাইভেট ফিল্ড (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // স্ট্যাটিক মেথড
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // গেটার
  get info() {
    return `${this.name} SDK`;
  }

  // অ্যাসিনক্রোনাস মেথড
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// ইনহেরিটেন্স
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

প্রাইভেট ফিল্ড #apiKey (ES2022) প্রকৃত এনক্যাপসুলেশন প্রদান করে, যা _আন্ডারস্কোর কনভেনশনের সাথে উপলব্ধ নয়। স্ট্যাটিক মেথড getPlatforms ক্লাসের অন্তর্গত, ইনস্ট্যান্সের নয়। গেটার info অ্যাক্সেস করার সময় গণনা করা হয়। async/await অ্যাসিনক্রোনাস কোডকে রৈখিক করে তোলে। React Native Hermes সংস্করণ 0.71 থেকে প্রাইভেট ফিল্ড সমর্থন করে।

JavaScript-এ অ্যাসিনক্রোনিসিটি: Event Loop এবং Promise

JavaScript অ্যাসিনক্রোনিসিটি ইভেন্ট লুপের উপর ভিত্তি করে — একটি অসীম লুপ যা কল স্ট্যাক এবং টাস্ক কিউ পরীক্ষা করে। কল স্ট্যাক সিঙ্ক্রোনাস কোড পরিচালনা করে, মাইক্রোটাস্ক কিউ Promise.then/catch/finally পরিচালনা করে, ম্যাক্রোটাস্ক কিউ setTimeout, setInterval, I/O পরিচালনা করে। ইভেন্ট লুপ প্রথমে মাইক্রোটাস্ক থেকে, তারপর ম্যাক্রোটাস্ক থেকে কাজ নেয়। কল স্ট্যাক ব্লক করা (অসীম লুপ) পুরো UI বন্ধ করে দেয়।

Promise একটি বস্তু যা ভবিষ্যতের মান উপস্থাপন করে। একটি প্রতিশ্রুতি pending (মুলতুবি), fulfilled (পূর্ণ), বা rejected (প্রত্যাখ্যাত) হতে পারে। .then().catch().finally() চেইন অ্যাসিনক্রোনাস ফলাফল পরিচালনা করে। async/await (ES8) সিনট্যাক্টিক সুগার: একটি async ফাংশন Promise ফেরত দেয়, await থ্রেড ব্লক না করে প্রতিশ্রুতি সমাধান না হওয়া পর্যন্ত কার্যকর স্থগিত করে।

// React Native-এ অ্যাসিনক্রোনাস ডেটা লোডিং
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('ফেচ ব্যর্থ:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

useEffect হুক async fetchUser ফাংশনের সাথে কম্পোনেন্ট মাউন্ট করার সময় HTTP অনুরোধ করে। cancelled ফ্ল্যাগ আনমাউন্ট করার পরে setState প্রতিরোধ করে — একটি সাধারণ React Native সমস্যা। Optional Chaining user?.name এবং Nullish Coalescing ?? ত্রুটি ছাড়াই undefined পরিচালনা করে। ActivityIndicator লোডিংয়ের সময় প্রদর্শিত হয় — প্রতিটি JS ডেভেলপারের পরিচিত একটি অ্যাসিনক্রোনাস প্যাটার্ন।

React Native: মোবাইল প্ল্যাটফর্মে JavaScript

React Native হল Meta (Facebook)-এর একটি ফ্রেমওয়ার্ক যা JavaScript-এ নেটিভ মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য। WebView পদ্ধতির বিপরীতে, React Native প্রকৃত নেটিভ কম্পোনেন্ট (iOS-এর জন্য UIView, Android-এর জন্য ViewGroup) রেন্ডার করে। JS কোড একটি পৃথক থ্রেডে (Hermes বা JSC) চলে এবং Bridge (পুরানো আর্কিটেকচার) বা JSI (নতুন Fabric আর্কিটেকচার) এর মাধ্যমে নেটিভ UI থ্রেডের সাথে যোগাযোগ করে।

React Native আর্কিটেকচার

React Native-এ JS থ্রেড (আপনার কোড), নেটিভ থ্রেড (UI) এবং তাদের মিথস্ক্রিয়ার জন্য Bridge/JSI অন্তর্ভুক্ত। পুরানো আর্কিটেকচারে (Bridge), JSON বার্তা সিরিয়ালাইজ এবং অ্যাসিনক্রোনাসভাবে প্রেরণ করা হয় — এটি দ্রুত অ্যানিমেশনের সময় বিলম্ব তৈরি করে। নতুন Fabric আর্কিটেকচার (React Native 0.68+) JSI (JavaScript Interface) ব্যবহার করে — সিরিয়ালাইজেশন ছাড়াই C++ বস্তুর সাথে সরাসরি JS মিথস্ক্রিয়া।

// নেটিভ API সহ React Native কম্পোনেন্ট
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

LocationTracker কম্পোনেন্ট নেটিভ জিওলোকেশন API-এর সাথে কাজ করা প্রদর্শন করে। Platform.OS Android এবং iOS-এর মধ্যে পার্থক্য করে। PermissionsAndroid.request নেটিভ Android অনুমতি ডায়ালগ। Geolocation.getCurrentPosition — @react-native-community/geolocation থেকে একটি মডিউল, npm-এর মাধ্যমে ইনস্টল করা। React Native ক্যামেরা, ব্লুটুথ, অ্যাক্সেলেরোমিটার এবং অন্যান্য সেন্সরের জন্য JS ইন্টারফেস প্রদান করে।

Ionic এবং Cordova: WebView কন্টেইনার

Ionic হাইব্রিড মোবাইল অ্যাপ্লিকেশনের জন্য একটি ফ্রেমওয়ার্ক যা HTML/CSS/JS রেন্ডার করতে WebView ব্যবহার করে। React Native-এর বিপরীতে, Ionic নেটিভ কম্পোনেন্ট তৈরি করে না — অ্যাপ্লিকেশনটি iOS (WKWebView) এবং Android (Android WebView)-এ একটি ওয়েব কন্টেইনারের (WebView) ভিতরে চলে। এটি ওয়েব কোডের 100% পুনঃব্যবহার প্রদান করে কিন্তু জটিল অ্যানিমেশনের কর্মক্ষমতা সীমিত করে।

Apache Cordova হল Ionic-এর ভিত্তি, যা JavaScript প্লাগইনের মাধ্যমে নেটিভ API-তে অ্যাক্সেস প্রদান করে। ক্যামেরা, GPS, পরিচিতি, ফাইল সিস্টেম — সবকিছু cordova-plugin-*-এর মাধ্যমে উপলব্ধ। Ionic 7+ Capacitor ব্যবহার করে — Cordova-র উত্তরসূরি যার উন্নত কর্মক্ষমতা, ESM সমর্থন এবং Swift ও Kotlin-এর মাধ্যমে iOS/Android SDK-তে সরাসরি অ্যাক্সেস রয়েছে।

JavaScript ডেভেলপার টুলস

মোবাইল অ্যাপ্লিকেশনের জন্য JS ডেভেলপার টুলস-এর মধ্যে রয়েছে Node.js, npm/yarn, Expo, React Native CLI এবং Metro বান্ডলার। Node.js ব্রাউজারের বাইরে JS রানটাইম, ইকোসিস্টেমের ভিত্তি। npm (Node Package Manager) 2+ মিলিয়ন লাইব্রেরি সহ একটি প্যাকেজ ম্যানেজার। npx ইনস্টলেশন ছাড়াই npm প্যাকেজ চালানোর একটি ইউটিলিটি।

টুল ইকোসিস্টেম

Expo React Native-এর উপরে একটি স্তর যা উন্নয়ন সহজ করে: শুরু করতে Xcode/Android Studio-র প্রয়োজন নেই, প্রি-ইনস্টল করা লাইব্রেরি সহ Managed Workflow প্রদান করে। Expo Application Services (EAS) — ক্লাউডে বিল্ড এবং প্রকাশনা। Metro হল React Native-এর বান্ডলার যা JS কোড এবং নির্ভরতাগুলি একটি ফাইলে একত্রিত করে। Hermes হল AOT কম্পাইলেশন সহ মোবাইল ডিভাইসের জন্য অপ্টিমাইজ করা Meta-র JS ইঞ্জিন।

// package.json — React Native প্রকল্প কনফিগারেশন
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

package.json ফাইল যেকোনো JS প্রকল্পের ভিত্তি। start, android, ios স্ক্রিপ্ট Metro বান্ডলার এবং বিল্ড চালু করে। নির্ভরতাগুলি dependencies (রানটাইম) এবং devDependencies (পরীক্ষা, লিন্টার) এ বিভক্ত। React Navigation স্ট্যান্ডার্ড রাউটার। Jest একটি টেস্টিং ফ্রেমওয়ার্ক। ESLint একটি স্ট্যাটিক বিশ্লেষক যা কোড শৈলী এবং সম্ভাব্য ত্রুটিগুলি পরীক্ষা করে।