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);
}

// بندش (closure)
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 JavaScript میں مقامی موبائل ایپلیکیشنز بنانے کے لیے Meta (Facebook) کا ایک فریم ورک ہے۔ 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 پلگ ان کے ذریعے مقامی APIs تک رسائی فراہم کرتا ہے۔ کیمرہ، GPS، رابطے، فائل سسٹم — سب کچھ cordova-plugin-* کے ذریعے دستیاب ہے۔ Ionic 7+ Capacitor استعمال کرتا ہے — بہتر کارکردگی، ESM سپورٹ اور Swift اور Kotlin کے ذریعے iOS/Android SDK تک براہ راست رسائی کے ساتھ Cordova کا جانشین۔

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 ایک جامد تجزیہ کار ہے جو کوڈ اسٹائل اور ممکنہ غلطیوں کو چیک کرتا ہے۔